Skip to content

Commit 62fa9fa

Browse files
WebCoder49WebCoder49
committed
Clean Up Plugin Comment
1 parent 65a32fa commit 62fa9fa

File tree

9 files changed

+56
-60
lines changed

9 files changed

+56
-60
lines changed

‎code-input.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export namespace plugins {
9595
*/
9696
class Autocomplete extends Plugin {
9797
/**
98-
* Pass in a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
98+
* Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd).
9999
* @param {function} updatePopupCallback a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
100100
*/
101101
constructor(updatePopupCallback: (popupElem: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number) => void);

‎plugins/auto-close-brackets.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ codeInput.plugins.AutoCloseBrackets = class extends codeInput.Plugin {
1919

2020
/* Add keystroke events */
2121
afterElementsAdded(codeInput) {
22-
let textarea = codeInput.textareaElement;
23-
textarea.addEventListener('keydown', (event) => { this.checkBackspace(codeInput, event) });
24-
textarea.addEventListener('beforeinput', (event) => { this.checkBrackets(codeInput, event); });
22+
codeInput.textareaElement.addEventListener('keydown', (event) => { this.checkBackspace(codeInput, event) });
23+
codeInput.textareaElement.addEventListener('beforeinput', (event) => { this.checkBrackets(codeInput, event); });
2524
}
2625

27-
/* Event handlers */
26+
/* Deal with the automatic creation of closing bracket when opening brackets are typed, and the ability to "retype" a closing
27+
bracket where one has already been placed. */
2828
checkBrackets(codeInput, event) {
2929
if(event.data == codeInput.textareaElement.value[codeInput.textareaElement.selectionStart]) {
3030
// Check if a closing bracket is typed
@@ -38,13 +38,16 @@ codeInput.plugins.AutoCloseBrackets = class extends codeInput.Plugin {
3838
}
3939
}
4040
} else if(event.data in this.bracketPairs) {
41-
// Create bracket pair
41+
// Opening bracket typed; Create bracket pair
4242
let closingBracket = this.bracketPairs[event.data];
43+
// Insert the closing bracket
4344
document.execCommand("insertText", false, closingBracket);
45+
// Move caret before the inserted closing bracket
4446
codeInput.textareaElement.selectionStart = codeInput.textareaElement.selectionEnd -= 1;
4547
}
4648
}
4749

50+
/* Deal with cases where a backspace deleting an opening bracket deletes the closing bracket straight after it as well */
4851
checkBackspace(codeInput, event) {
4952
if(event.key == "Backspace" && codeInput.textareaElement.selectionStart == codeInput.textareaElement.selectionEnd) {
5053
let closingBracket = this.bracketPairs[codeInput.textareaElement.value[codeInput.textareaElement.selectionStart-1]];

‎plugins/autocomplete.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
*/
55
codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
66
/**
7-
* Pass in a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
7+
* Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd).
88
* @param {function} updatePopupCallback a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
99
*/
1010
constructor(updatePopupCallback) {
1111
super([]); // No observed attributes
1212
this.updatePopupCallback = updatePopupCallback;
1313
}
14-
/* When a key is pressed, or scrolling occurs, update the autocomplete */
14+
/* When a key is pressed, or scrolling occurs, update the popup position */
1515
updatePopup(codeInput, onlyScrolled) {
1616
let textarea = codeInput.textareaElement;
1717
let caretCoords = this.getCaretCoordinates(codeInput, textarea, textarea.selectionEnd, onlyScrolled);
@@ -23,13 +23,14 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
2323
this.updatePopupCallback(popupElem, textarea, textarea.selectionEnd);
2424
}
2525
}
26-
/* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
26+
/* Create the popup element */
2727
afterElementsAdded(codeInput) {
2828
let popupElem = document.createElement("div");
2929
popupElem.classList.add("code-input_autocomplete_popup");
3030
codeInput.appendChild(popupElem);
3131

3232
let testPosPre = document.createElement("pre");
33+
testPosPre.setAttribute("aria-hidden", "true"); // Hide for screen readers
3334
if(codeInput.template.preElementStyled) {
3435
testPosPre.classList.add("code-input_autocomplete_testpos");
3536
codeInput.appendChild(testPosPre); // Styled like first pre, but first pre found to update
@@ -51,7 +52,7 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
5152
* @param {HTMLElement} textarea
5253
* @param {Number} charIndex
5354
* @param {boolean} onlyScrolled True if no edits have been made to the text and the caret hasn't been repositioned
54-
* @returns
55+
* @returns {Object} {"top": CSS top value in pixels, "left": CSS left value in pixels}
5556
*/
5657
getCaretCoordinates(codeInput, textarea, charIndex, onlyScrolled) {
5758
let afterSpan;

‎plugins/autodetect.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@ codeInput.plugins.Autodetect = class extends codeInput.Plugin {
1313
resultElement.className = ""; // CODE
1414
resultElement.parentElement.className = ""; // PRE
1515
}
16-
/* Get new language class and set `lang` attribute */
16+
/* Get new language class and set `language` attribute */
1717
afterHighlight(codeInput) {
18-
let resultElement = codeInput.codeElement;
19-
let langClass = resultElement.className || resultElement.parentElement.className;
18+
let langClass = codeInput.codeElement.className || codeInput.preElement.className;
2019
let lang = langClass.match(/lang(\w|-)*/i)[0]; // Get word starting with lang...; Get outer bracket
2120
lang = lang.split("-")[1];
2221
if(lang == "undefined") {

‎plugins/go-to-line.js‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,7 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
2222
}
2323
}
2424

25-
blockSearch(dialog, event) {
26-
if (event.ctrlKey && event.key == 'g') {
27-
return event.preventDefault();
28-
}
29-
}
30-
25+
/* Called with a dialog box keyup event to check the validity of the line number entered and submit the dialog if Enter is pressed */
3126
checkPrompt(dialog, event) {
3227
// Line number(:column number)
3328
const lines = dialog.textarea.value.split('\n');
@@ -64,6 +59,7 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
6459
}
6560
}
6661

62+
/* Called with a dialog box keyup event to close and clear the dialog box */
6763
cancelPrompt(dialog, event) {
6864
let delay;
6965
event.preventDefault();
@@ -115,7 +111,7 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
115111
}
116112
}
117113

118-
/* Set the cursor on the first non-space char of textarea's nth line; and scroll it into view */
114+
/* Set the cursor on the first non-space char of textarea's nth line, or to the columnNo-numbered character in the line if it's not 0; and scroll it into view */
119115
goTo(textarea, lineNo, columnNo = 0) {
120116
let fontSize;
121117
let lineHeight;
@@ -155,12 +151,11 @@ codeInput.plugins.GoToLine = class extends codeInput.Plugin {
155151
}
156152
}
157153

158-
/* Event handlers */
154+
/* Event handler for keydown event that makes Ctrl+G open go to line dialog */
159155
checkCtrlG(codeInput, event) {
160156
const textarea = codeInput.textareaElement;
161157
if (event.ctrlKey && event.key == 'g') {
162158
event.preventDefault();
163-
164159
this.showPrompt(codeInput);
165160
}
166161
}

‎plugins/indent.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
*/
66
codeInput.plugins.Indent = class extends codeInput.Plugin {
77

8-
numSpaces;
9-
bracketPairs = null; // No bracket-auto-indentation used
8+
bracketPairs = {}; // No bracket-auto-indentation used when {}
109
indentation = "\t";
1110
indentationNumChars = 1;
1211

@@ -19,7 +18,6 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
1918
constructor(defaultSpaces=false, numSpaces=4, bracketPairs={"(": ")", "[": "]", "{": "}"}) {
2019
super([]); // No observed attributes
2120

22-
this.numSpaces = numSpaces;
2321
this.bracketPairs = bracketPairs;
2422
if(defaultSpaces) {
2523
this.indentation = "";
@@ -37,7 +35,7 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
3735
textarea.addEventListener('beforeinput', (event) => { this.checkCloseBracket(codeInput, event); });
3836
}
3937

40-
/* Event handlers */
38+
/* Deal with the Tab key causing indentation, and Tab+Selection indenting / Shift+Tab+Selection unindenting lines */
4139
checkTab(codeInput, event) {
4240
if(event.key != "Tab") {
4341
return;
@@ -100,6 +98,7 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
10098
codeInput.value = inputElement.value;
10199
}
102100

101+
/* Deal with new lines retaining indentation */
103102
checkEnter(codeInput, event) {
104103
if(event.key != "Enter") {
105104
return;
@@ -202,6 +201,7 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
202201
codeInput.value = inputElement.value;
203202
}
204203

204+
/* Deal with one 'tab' of spaces-based-indentation being deleted by each backspace, rather than one space */
205205
checkBackspace(codeInput, event) {
206206
if(event.key != "Backspace" || this.indentationNumChars == 1) {
207207
return; // Normal backspace when indentation of 1
@@ -217,6 +217,7 @@ codeInput.plugins.Indent = class extends codeInput.Plugin {
217217
}
218218
}
219219

220+
/* Deal with the typing of closing brackets causing a decrease in indentation */
220221
checkCloseBracket(codeInput, event) {
221222
if(codeInput.textareaElement.selectionStart != codeInput.textareaElement.selectionEnd) {
222223
return;

‎plugins/special-chars.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,12 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
3131
this.canvasContext = canvas.getContext("2d");
3232
}
3333

34-
/* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
34+
/* Initially render special characters as the highlighting algorithm may automatically highlight and remove them */
3535
afterElementsAdded(codeInput) {
36-
// For some reason, special chars aren't synced the first time - TODO is there a cleaner way to do this?
37-
setTimeout(() => { codeInput.value = codeInput.value + ""; }, 100);
36+
setTimeout(() => { codeInput.value = codeInput.value; }, 100);
3837
}
3938

40-
/* Runs after code is highlighted; Params: codeInput element) */
39+
/* After highlighting, render special characters as their stylised hexadecimal equivalents */
4140
afterHighlight(codeInput) {
4241
let resultElement = codeInput.codeElement;
4342

@@ -50,12 +49,13 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
5049
this.lastFont = window.getComputedStyle(codeInput.textareaElement).font;
5150
}
5251

52+
/* Search for special characters in an element and replace them with their stylised hexadecimal equivalents */
5353
recursivelyReplaceText(codeInput, element) {
5454
for(let i = 0; i < element.childNodes.length; i++) {
5555

5656
let nextNode = element.childNodes[i];
57-
if(nextNode.nodeName == "#text" && nextNode.nodeValue != "") {
58-
// Replace in here
57+
if(nextNode.nodeType == 3) {
58+
// Text node - Replace in here
5959
let oldValue = nextNode.nodeValue;
6060

6161
this.specialCharRegExp.lastIndex = 0;
@@ -70,7 +70,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
7070
}
7171

7272
if(nextNode.textContent != "") {
73-
let replacementElement = this.specialCharReplacer(codeInput, nextNode.textContent);
73+
let replacementElement = this.getStylisedSpecialChar(codeInput, nextNode.textContent);
7474
nextNode.parentNode.insertBefore(replacementElement, nextNode);
7575
nextNode.textContent = "";
7676
}
@@ -84,7 +84,8 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
8484
}
8585
}
8686

87-
specialCharReplacer(codeInput, matchChar) {
87+
/* Get the stylised hexadecimal representation HTML element for a given special character */
88+
getStylisedSpecialChar(codeInput, matchChar) {
8889
let hexCode = matchChar.codePointAt(0);
8990

9091
let colors;
@@ -117,8 +118,8 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
117118
return result;
118119
}
119120

121+
/* Get the colors a stylised representation of a given character must be shown in; lazy load and return [background color, text color] */
120122
getCharacterColors(asciiCode) {
121-
// Choose colors based on character code - lazy load and return [background color, text color]
122123
let backgroundColor;
123124
let textColor;
124125
if(!(asciiCode in this.cachedColors)) {
@@ -144,6 +145,7 @@ codeInput.plugins.SpecialChars = class extends codeInput.Plugin {
144145
}
145146
}
146147

148+
/* Get the width of a character in em (relative to font size), for use in creation of the stylised hexadecimal representation with the same width */
147149
getCharacterWidthEm(codeInput, char) {
148150
// Force zero-width characters
149151
if(new RegExp("\u00AD|\u02de|[\u0300-\u036F]|[\u0483-\u0489]|\u200b").test(char) ) { return 0 }

‎tests/hljs.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,18 @@
3232
<script src="tester.js"></script>
3333
</head>
3434
<body>
35-
<!--TODO: Fix for hljs popup &
35+
<!--TODO:
36+
Test with real Prism &
37+
Fix for hljs popup &
3638
(optional) In new branch, make Ctrl+F/H functionality like gotoline (finds in value, "string combinatorics" in pre code, Regex/case-insensitive accepted); Add tests for Ctrl+F/H
3739
(optional) In new branch, add one-line (input) option
38-
Make tester async function using await?-->
40+
Make tester async function using await?
41+
Stop enter in go-to dialog from submitting form-->
3942
<h1>code-input Tester (highlight.js)</h1>
4043
<h4><a href="prism.html">Test for Prism.js</a></h4>
4144
<p>This page carries out automated tests for the code-input library to check that both the core components and the plugins work in some ways. It doesn't fully cover every scenario so you should test any code you change by hand, but it's good for quickly checking a wide range of functionality works.</p>
4245

43-
<details id="collapse-results"><summary>Test Results</summary><pre id="test-results"></pre></details>
46+
<details id="collapse-results"><summary>Test Results (Click to Open)</summary><pre id="test-results"></pre></details>
4447
<form method="GET" action="https://google.com/search" target="_blank">
4548
<code-input language="JavaScript" name="q">console.log("Hello, World!");
4649
// A second line

‎tests/prism.html‎

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -31,37 +31,29 @@ <h1>code-input Tester (Prism.js)</h1>
3131
<h4><a href="hljs.html">Test for highlight.js</a></h4>
3232
<p>This page carries out automated tests for the code-input library to check that both the core components and the plugins work in some ways. It doesn't fully cover every scenario so you should test any code you change by hand, but it's good for quickly checking a wide range of functionality works.</p>
3333

34-
<details id="collapse-results"><summary>Test Results</summary><pre id="test-results"></pre></details>
34+
<details id="collapse-results"><summary>Test Results (Click to Open)</summary><pre id="test-results"></pre></details>
3535
<form method="GET" action="https://google.com/search" target="_blank">
3636
<code-input language="JavaScript" name="q">console.log("Hello, World!");
3737
// A second line
3838
// A third line with &lt;html> tags</code-input>
3939
<input type="submit" value="Search Google For Code"/>
4040
</form>
4141
<script>
42-
// TODO: Delete this testing code
43-
var Prism = {
44-
highlightElement: function(elem) {
45-
elem.innerHTML = elem.innerHTML.replace(/\./g, "<span style='color: grey;'>.</span>").replace(/\,/g, "<span style='color: grey;'>,</span>").replace(/\(/g, "<span style='color: crimson;'>(</span>").replace(/\)/g, "<span style='color: crimson;'>)</span>");
46-
}
47-
}
48-
4942
// codeInput.registerTemplate("code-editor", codeInput.templates.prism(Prism, [
50-
// new codeInput.plugins.AutoCloseBrackets(), // Cause
51-
// // new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
52-
// // if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
53-
// // // Show popup
54-
// // popupElem.style.display = "block";
55-
// // popupElem.innerHTML = "Here's your popup!";
56-
// // } else {
57-
// // popupElem.style.display = "none";
58-
// // }
59-
// // }),
60-
// // new codeInput.plugins.GoToLine(),
61-
// // new codeInput.plugins.Indent(true, 2), // Fine
62-
// // new codeInput.plugins.SpecialChars(true),
43+
// new codeInput.plugins.AutoCloseBrackets(),
44+
// new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
45+
// if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
46+
// // Show popup
47+
// popupElem.style.display = "block";
48+
// popupElem.innerHTML = "Here's your popup!";
49+
// } else {
50+
// popupElem.style.display = "none";
51+
// }
52+
// }),
53+
// new codeInput.plugins.GoToLine(),
54+
// new codeInput.plugins.Indent(true, 2),
55+
// new codeInput.plugins.SpecialChars(true),
6356
// ]));
64-
6557
beginTest(false);
6658
</script>
6759
</body>

0 commit comments

Comments
 (0)