@webcoder49/code-input 2.2.1 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +10 -4
  2. package/code-input.css +91 -19
  3. package/code-input.d.ts +94 -13
  4. package/code-input.js +114 -40
  5. package/code-input.min.css +1 -1
  6. package/code-input.min.js +1 -1
  7. package/package.json +1 -1
  8. package/plugins/README.md +7 -0
  9. package/plugins/autocomplete.js +4 -2
  10. package/plugins/autocomplete.min.js +1 -1
  11. package/plugins/find-and-replace.js +136 -42
  12. package/plugins/find-and-replace.min.js +1 -1
  13. package/plugins/go-to-line.js +20 -2
  14. package/plugins/go-to-line.min.js +1 -1
  15. package/plugins/indent.js +97 -6
  16. package/plugins/indent.min.js +1 -1
  17. package/plugins/prism-line-numbers.css +10 -9
  18. package/plugins/prism-line-numbers.min.css +1 -1
  19. package/plugins/select-token-callbacks.js +289 -0
  20. package/plugins/select-token-callbacks.min.js +1 -0
  21. package/plugins/special-chars.css +1 -1
  22. package/plugins/special-chars.js +10 -8
  23. package/plugins/special-chars.min.css +1 -1
  24. package/plugins/special-chars.min.js +1 -1
  25. package/tests/hljs.html +2 -1
  26. package/tests/i18n.html +197 -0
  27. package/tests/prism-match-braces-compatibility.js +215 -0
  28. package/tests/prism-match-braces-compatibility.min.js +1 -0
  29. package/tests/prism.html +7 -8
  30. package/tests/tester.js +77 -13
  31. package/tests/tester.min.js +7 -4
package/tests/i18n.html ADDED
@@ -0,0 +1,197 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>code-input should be global</title>
5
+
6
+ <meta charset="utf-8"/>
7
+
8
+ <!--Import Prism-->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
14
+ <script src="prism-match-braces-compatibility.js"></script>
15
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.min.css">
16
+
17
+ <!--Import Highlight.JS-->
18
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
19
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
20
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
21
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
22
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
23
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
24
+
25
+
26
+ <!--Import code-input-->
27
+ <link rel="stylesheet" href="../code-input.css">
28
+ <script src="../code-input.js"></script>
29
+
30
+ <!--Import code-input plugins-->
31
+ <script src="../plugins/auto-close-brackets.js"></script>
32
+ <script src="../plugins/autocomplete.js"></script>
33
+ <script src="../plugins/autodetect.js"></script>
34
+ <link rel="stylesheet" href="../plugins/autocomplete.css">
35
+ <script src="../plugins/find-and-replace.js"></script>
36
+ <link rel="stylesheet" href="../plugins/find-and-replace.css">
37
+ <script src="../plugins/go-to-line.js"></script>
38
+ <link rel="stylesheet" href="../plugins/go-to-line.css">
39
+ <script src="../plugins/indent.js"></script>
40
+ <link rel="stylesheet" href="../plugins/prism-line-numbers.css">
41
+ <script src="../plugins/select-token-callbacks.js"></script>
42
+ <script src="../plugins/special-chars.js"></script>
43
+ <link rel="stylesheet" href="../plugins/special-chars.css">
44
+
45
+ <!--Register templates-->
46
+ <script>
47
+ codeInput.registerTemplate("hljs", codeInput.templates.hljs(hljs, [
48
+ /*new codeInput.plugins.AutoCloseBrackets(),
49
+ new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
50
+ if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
51
+ // Show popup
52
+ popupElem.style.display = "block";
53
+ popupElem.innerHTML = "Here's your popup!";
54
+ } else {
55
+ popupElem.style.display = "none";
56
+ }
57
+ }),
58
+ new codeInput.plugins.Autodetect(),
59
+ new codeInput.plugins.FindAndReplace(),
60
+ new codeInput.plugins.GoToLine(),
61
+ new codeInput.plugins.Indent(true, 2),
62
+ new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"), false, true, true, true, true, false),
63
+ new codeInput.plugins.SpecialChars(true),*/
64
+ ]));
65
+ codeInput.registerTemplate("prism", codeInput.templates.prism(Prism, [
66
+ /*new codeInput.plugins.AutoCloseBrackets(),
67
+ new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
68
+ if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
69
+ // Show popup
70
+ popupElem.style.display = "block";
71
+ popupElem.innerHTML = "Here's your popup!";
72
+ } else {
73
+ popupElem.style.display = "none";
74
+ }
75
+ }),
76
+ new codeInput.plugins.FindAndReplace(),
77
+ new codeInput.plugins.GoToLine(),
78
+ new codeInput.plugins.Indent(true, 2),
79
+ new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true),
80
+ new codeInput.plugins.SpecialChars(true),*/
81
+ ]));
82
+
83
+ // Attribution: Translated by Oliver Geer with some help from English Wiktionary
84
+ let findAndReplaceTranslations = {
85
+ start: "Buscar términos en su código.",
86
+ none: "No hay sucesos",
87
+ oneFound: "1 suceso encontrado.",
88
+ matchIndex: (index, count) => `${index} de ${count} sucesos.`,
89
+ error: (message) => `Error: ${message}`,
90
+ infiniteLoopError: "Causa un ciclo infinito",
91
+ closeDialog: "Cerrar el Diálogo y Regresar al Editor",
92
+ findPlaceholder: "Buscar",
93
+ findCaseSensitive: "Prestar atención a las minúsculas/mayúsculas",
94
+ findRegExp: "Utilizar expresión regular de JavaScript",
95
+ replaceTitle: "Reemplazar",
96
+ replacePlaceholder: "Reemplazar con",
97
+ findNext: "Buscar Suceso Próximo",
98
+ findPrevious: "Buscar Suceso Previo",
99
+ replaceActionShort: "Reemplazar",
100
+ replaceAction: "Reemplazar este Suceso",
101
+ replaceAllActionShort: "Reemplazar Todos",
102
+ replaceAllAction: "Reemplazar Todos los Sucesos"
103
+ };
104
+ let goToLineTranslations = {
105
+ closeDialog: "Cerrar el Diálogo y Regresar al Editor",
106
+ input: "Línea:Columno o Línea luego Retorno",
107
+ };
108
+ let indentTranslations = {
109
+ tabForIndentation: "Tabulador y Mayús-Tabulador actualmente para la indentación. Tecla Escape para activar la navegación por el teclado.",
110
+ tabForNavigation: "Tabulador y Mayús-Tabulador actualmente para la navegación por el teclado. Tecla para activar la indentación.",
111
+ };
112
+
113
+ codeInput.registerTemplate("hljs+", codeInput.templates.hljs(hljs, [
114
+ new codeInput.plugins.AutoCloseBrackets(),
115
+ new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
116
+ if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
117
+ // Show popup
118
+ popupElem.style.display = "block";
119
+ popupElem.innerHTML = "Here's your popup!";
120
+ } else {
121
+ popupElem.style.display = "none";
122
+ }
123
+ }),
124
+ new codeInput.plugins.Autodetect(),
125
+ new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations),
126
+ new codeInput.plugins.GoToLine(true, goToLineTranslations),
127
+ new codeInput.plugins.Indent(true, 2, {"(": ")", "[": "]", "{": "}"}, true, indentTranslations),
128
+ new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"), false, true, true, true, true, false),
129
+ //new codeInput.plugins.SpecialChars(true),
130
+ ]));
131
+ codeInput.registerTemplate("prism+", codeInput.templates.prism(Prism, [
132
+ new codeInput.plugins.AutoCloseBrackets(),
133
+ new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
134
+ if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
135
+ // Show popup
136
+ popupElem.style.display = "block";
137
+ popupElem.innerHTML = "Here's your popup!";
138
+ } else {
139
+ popupElem.style.display = "none";
140
+ }
141
+ }),
142
+ new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations),
143
+ new codeInput.plugins.GoToLine(true, goToLineTranslations),
144
+ new codeInput.plugins.Indent(true, 2, {"(": ")", "[": "]", "{": "}"}, true, indentTranslations),
145
+ new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true),
146
+ //new codeInput.plugins.SpecialChars(true),
147
+ ]));
148
+ </script>
149
+ </head>
150
+ <body>
151
+ <textarea dir="rtl" placeholder="textarea rtl"></textarea>
152
+ <textarea dir="ltr" placeholder="textarea ltr"></textarea>
153
+ <code-input dir="rtl" template="prism" language="markdown" placeholder="prism rtl"></code-input>
154
+ <code-input dir="ltr" template="prism" language="markdown" placeholder="prism ltr"></code-input>
155
+ <code-input dir="rtl" template="hljs" language="markdown" placeholder="hljs rtl"></code-input>
156
+ <code-input dir="ltr" template="hljs" language="markdown" placeholder="hljs ltr"></code-input>
157
+ <code-input dir="rtl" template="prism+" language="markdown" placeholder="prism rtl" class="line-numbers"></code-input>
158
+ <code-input dir="ltr" template="prism+" language="markdown" placeholder="prism ltr" class="line-numbers"></code-input>
159
+ <code-input dir="rtl" template="hljs+" language="markdown" placeholder="hljs rtl"></code-input>
160
+ <code-input dir="ltr" template="hljs+" language="markdown" placeholder="hljs ltr"></code-input>
161
+
162
+ <script>
163
+ rtl = `# ערך מומלץ ערך מומלץ
164
+
165
+ **לוטרת** הים היא יונק ימי קטן יחסית, חבר במשפחת הסמורים, שחי לחופיו הצפוניים והמזרחיים של האוקיינוס השקט.
166
+
167
+ ההגנה מפני קור אצל לוטרת הים מבוססת על שכבה עבה של פרווה, שהיא מהצפופות בעולם החי,
168
+ וזאת בשונה ממרבית היונקים הימיים הנסמכים על שכבת שומן. CC-BY-SA he.wikipedia.org אף שהיא מסוגלת להלך על היבשה, מבלה לוטרת הים את מרבית זמנה באוקיינוס הפתוח.
169
+
170
+ # مقالة اليوم المختارة
171
+
172
+ **الواقعية في الأدب الإسبا**ني هي حركة أدبية شكلت جزءًا من الواقعية، وهو تيار ثقافي ظهر في أوروبا في منتصف القرن التاسع عشر عقب اضمحلال اتجاهات الرومانسية.
173
+
174
+ ظهر سابقًا في فرنسا سنة 1850 حيث تطورت أصوله التي كانت موجودة بالفعل في الرومانسية، وخصوصًا في الأدب الذي يتناول العادات والتقاليد. CC-BY-SA ar.wikipedia.org التي كانت تعج بكل ما هو خيالي وجمالي خلاب، وعمدوا إلى الملاحظة الموضوعية للأشخاص والمجتمع والأحداث المعاصرة في محاولة منهم إلى تقديم صورة واضحة للمجتمع آنذاك.`;
175
+ ltr = `# From today's featured article
176
+
177
+ CC-BY-SA en.wikipedia.org: History is the systematic study of the past with its main focus on the human past.
178
+
179
+ Historians analyse and interpret primary and secondary sources to construct narratives about what happened and explain why it happened. RTL: مقالة اليوم المختارة They engage in source criticism to assess the authenticity, content, and reliability of these sources.
180
+
181
+ # निर्वाचित लेख
182
+
183
+ CC-BY-SA hi.wikipedia.org: **ग्लेशियर नेशनल पार्क** अमेरिकी राष्ट्रीय उद्यान है, जो कि कनाडा-संयुक्त राज्य अमेरिका की सीमा पर स्थित है। उद्यान संयुक्त राज्य के उत्तर-पश्चिमी मोंटाना राज्य
184
+
185
+ में स्थित है और कनाडा की ओर अल्बर्टा और ब्रिटिश कोलम्बिया प्रांतों से सटा हुआ है। उद्यान दस लाख एकड़ RTL: ערך מומלץ ערך מומלץ (4,000 किमी2) से अधिक क्षेत्र में फैला हुआ है और इसमें दो पर्वत श्रृंखला (रॉकी पर्वत की उप-श्रेणियाँ), 130 से अधिक नामित झीलें...`;
186
+ window.addEventListener("load", function() {
187
+
188
+ const elems = document.querySelectorAll("body > code-input, body > textarea");
189
+ for(let i = 0; i < elems.length; i++) {
190
+ let dir = elems[i].getAttribute("dir");
191
+ if(dir == "rtl") elems[i].value = rtl;
192
+ else elems[i].value = ltr;
193
+ }
194
+ });
195
+ </script>
196
+ </body>
197
+ </html>
package/tests/prism-match-braces-compatibility.js ADDED
@@ -0,0 +1,215 @@
1
+ /* Modified from https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.js
2
+ to enable codeInput SelectTokenCallbacks compatibility. Use:
3
+ new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true) */
4
+ // Additions on lines 6-10, and lines 84-98.
5
+
6
+ // code-input modification: ADD
7
+ // Callbacks
8
+ let selectBrace;
9
+ let deselectAllBraces;
10
+ // END code-input modification
11
+ (function () {
12
+
13
+ if (typeof Prism === 'undefined' || typeof document === 'undefined') {
14
+ return;
15
+ }
16
+
17
+ function mapClassName(name) {
18
+ var customClass = Prism.plugins.customClass;
19
+ if (customClass) {
20
+ return customClass.apply(name, 'none');
21
+ } else {
22
+ return name;
23
+ }
24
+ }
25
+
26
+ var PARTNER = {
27
+ '(': ')',
28
+ '[': ']',
29
+ '{': '}',
30
+ };
31
+
32
+ // The names for brace types.
33
+ // These names have two purposes: 1) they can be used for styling and 2) they are used to pair braces. Only braces
34
+ // of the same type are paired.
35
+ var NAMES = {
36
+ '(': 'brace-round',
37
+ '[': 'brace-square',
38
+ '{': 'brace-curly',
39
+ };
40
+
41
+ // A map for brace aliases.
42
+ // This is useful for when some braces have a prefix/suffix as part of the punctuation token.
43
+ var BRACE_ALIAS_MAP = {
44
+ '${': '{', // JS template punctuation (e.g. `foo ${bar + 1}`)
45
+ };
46
+
47
+ var LEVEL_WARP = 12;
48
+
49
+ var pairIdCounter = 0;
50
+
51
+ var BRACE_ID_PATTERN = /^(pair-\d+-)(close|open)$/;
52
+
53
+ /**
54
+ * Returns the brace partner given one brace of a brace pair.
55
+ *
56
+ * @param {HTMLElement} brace
57
+ * @returns {HTMLElement}
58
+ */
59
+ function getPartnerBrace(brace) {
60
+ var match = BRACE_ID_PATTERN.exec(brace.id);
61
+ return document.querySelector('#' + match[1] + (match[2] == 'open' ? 'close' : 'open'));
62
+ }
63
+
64
+ /**
65
+ * @this {HTMLElement}
66
+ */
67
+ function hoverBrace() {
68
+ if (!Prism.util.isActive(this, 'brace-hover', true)) {
69
+ return;
70
+ }
71
+
72
+ [this, getPartnerBrace(this)].forEach(function (e) {
73
+ e.classList.add(mapClassName('brace-hover'));
74
+ });
75
+ }
76
+ /**
77
+ * @this {HTMLElement}
78
+ */
79
+ function leaveBrace() {
80
+ [this, getPartnerBrace(this)].forEach(function (e) {
81
+ e.classList.remove(mapClassName('brace-hover'));
82
+ });
83
+ }
84
+ // code-input modification: ADD
85
+ selectBrace = (token) => {
86
+ if(BRACE_ID_PATTERN.test(token.id)) { // Check it's a brace
87
+ hoverBrace.apply(token); // Move the brace from a this to a parameter
88
+ }
89
+ };
90
+ deselectAllBraces = (tokenContainer) => {
91
+ // Remove selected class
92
+ let selectedClassTokens = tokenContainer.getElementsByClassName(mapClassName('brace-hover'));
93
+ // Use it like a queue, because as elements have their class name removed they are live-removed from the collection.
94
+ while(selectedClassTokens.length > 0) {
95
+ selectedClassTokens[0].classList.remove(mapClassName('brace-hover'));
96
+ }
97
+ }; // Moves the brace from a this to a parameter
98
+ // end code-input modification
99
+ /**
100
+ * @this {HTMLElement}
101
+ */
102
+ function clickBrace() {
103
+ if (!Prism.util.isActive(this, 'brace-select', true)) {
104
+ return;
105
+ }
106
+
107
+ [this, getPartnerBrace(this)].forEach(function (e) {
108
+ e.classList.add(mapClassName('brace-selected'));
109
+ });
110
+ }
111
+
112
+ Prism.hooks.add('complete', function (env) {
113
+
114
+ /** @type {HTMLElement} */
115
+ var code = env.element;
116
+ var pre = code.parentElement;
117
+
118
+ if (!pre || pre.tagName != 'PRE') {
119
+ return;
120
+ }
121
+
122
+ // find the braces to match
123
+ /** @type {string[]} */
124
+ var toMatch = [];
125
+ if (Prism.util.isActive(code, 'match-braces')) {
126
+ toMatch.push('(', '[', '{');
127
+ }
128
+
129
+ if (toMatch.length == 0) {
130
+ // nothing to match
131
+ return;
132
+ }
133
+
134
+ if (!pre.__listenerAdded) {
135
+ // code blocks might be highlighted more than once
136
+ pre.addEventListener('mousedown', function removeBraceSelected() {
137
+ // the code element might have been replaced
138
+ var code = pre.querySelector('code');
139
+ var className = mapClassName('brace-selected');
140
+ Array.prototype.slice.call(code.querySelectorAll('.' + className)).forEach(function (e) {
141
+ e.classList.remove(className);
142
+ });
143
+ });
144
+ Object.defineProperty(pre, '__listenerAdded', { value: true });
145
+ }
146
+
147
+ /** @type {HTMLSpanElement[]} */
148
+ var punctuation = Array.prototype.slice.call(
149
+ code.querySelectorAll('span.' + mapClassName('token') + '.' + mapClassName('punctuation'))
150
+ );
151
+
152
+ /** @type {{ index: number, open: boolean, element: HTMLElement }[]} */
153
+ var allBraces = [];
154
+
155
+ toMatch.forEach(function (open) {
156
+ var close = PARTNER[open];
157
+ var name = mapClassName(NAMES[open]);
158
+
159
+ /** @type {[number, number][]} */
160
+ var pairs = [];
161
+ /** @type {number[]} */
162
+ var openStack = [];
163
+
164
+ for (var i = 0; i < punctuation.length; i++) {
165
+ var element = punctuation[i];
166
+ if (element.childElementCount == 0) {
167
+ var text = element.textContent;
168
+ text = BRACE_ALIAS_MAP[text] || text;
169
+ if (text === open) {
170
+ allBraces.push({ index: i, open: true, element: element });
171
+ element.classList.add(name);
172
+ element.classList.add(mapClassName('brace-open'));
173
+ openStack.push(i);
174
+ } else if (text === close) {
175
+ allBraces.push({ index: i, open: false, element: element });
176
+ element.classList.add(name);
177
+ element.classList.add(mapClassName('brace-close'));
178
+ if (openStack.length) {
179
+ pairs.push([i, openStack.pop()]);
180
+ }
181
+ }
182
+ }
183
+ }
184
+
185
+ pairs.forEach(function (pair) {
186
+ var pairId = 'pair-' + (pairIdCounter++) + '-';
187
+
188
+ var opening = punctuation[pair[0]];
189
+ var closing = punctuation[pair[1]];
190
+
191
+ opening.id = pairId + 'open';
192
+ closing.id = pairId + 'close';
193
+
194
+ [opening, closing].forEach(function (e) {
195
+ e.addEventListener('mouseenter', hoverBrace);
196
+ e.addEventListener('mouseleave', leaveBrace);
197
+ e.addEventListener('click', clickBrace);
198
+ });
199
+ });
200
+ });
201
+
202
+ var level = 0;
203
+ allBraces.sort(function (a, b) { return a.index - b.index; });
204
+ allBraces.forEach(function (brace) {
205
+ if (brace.open) {
206
+ brace.element.classList.add(mapClassName('brace-level-' + (level % LEVEL_WARP + 1)));
207
+ level++;
208
+ } else {
209
+ level = Math.max(0, level - 1);
210
+ brace.element.classList.add(mapClassName('brace-level-' + (level % LEVEL_WARP + 1)));
211
+ }
212
+ });
213
+ });
214
+
215
+ }());
package/tests/prism-match-braces-compatibility.min.js ADDED
@@ -0,0 +1 @@
1
+ let selectBrace,deselectAllBraces;(function(){function a(a){var b=Prism.plugins.customClass;return b?b.apply(a,"none"):a}function b(a){var b=m.exec(a.id);return document.querySelector("#"+b[1]+("open"==b[2]?"close":"open"))}function c(){Prism.util.isActive(this,"brace-hover",!0)&&[this,b(this)].forEach(function(b){b.classList.add(a("brace-hover"))})}function d(){[this,b(this)].forEach(function(b){b.classList.remove(a("brace-hover"))})}function f(){Prism.util.isActive(this,"brace-select",!0)&&[this,b(this)].forEach(function(b){b.classList.add(a("brace-selected"))})}if("undefined"!=typeof Prism&&"undefined"!=typeof document){var g={"(":")","[":"]","{":"}"},h={"(":"brace-round","[":"brace-square","{":"brace-curly"},j={"${":"{"},k=12,l=0,m=/^(pair-\d+-)(close|open)$/;selectBrace=a=>{m.test(a.id)&&c.apply(a)},deselectAllBraces=b=>{for(let c=b.getElementsByClassName(a("brace-hover"));0<c.length;)c[0].classList.remove(a("brace-hover"))},Prism.hooks.add("complete",function(b){var e=b.element,i=e.parentElement;if(i&&"PRE"==i.tagName){var m=[];if(Prism.util.isActive(e,"match-braces")&&m.push("(","[","{"),0!=m.length){i.__listenerAdded||(i.addEventListener("mousedown",function(){var b=i.querySelector("code"),c=a("brace-selected");Array.prototype.slice.call(b.querySelectorAll("."+c)).forEach(function(a){a.classList.remove(c)})}),Object.defineProperty(i,"__listenerAdded",{value:!0}));var n=Array.prototype.slice.call(e.querySelectorAll("span."+a("token")+"."+a("punctuation"))),o=[];m.forEach(function(b){for(var e,k=g[b],m=a(h[b]),p=[],q=[],r=0;r<n.length;r++)if(e=n[r],0==e.childElementCount){var s=e.textContent;s=j[s]||s,s===b?(o.push({index:r,open:!0,element:e}),e.classList.add(m),e.classList.add(a("brace-open")),q.push(r)):s===k&&(o.push({index:r,open:!1,element:e}),e.classList.add(m),e.classList.add(a("brace-close")),q.length&&p.push([r,q.pop()]))}p.forEach(function(a){var b="pair-"+l++ +"-",e=n[a[0]],g=n[a[1]];e.id=b+"open",g.id=b+"close",[e,g].forEach(function(a){a.addEventListener("mouseenter",c),a.addEventListener("mouseleave",d),a.addEventListener("click",f)})})});var p=0;o.sort(function(c,a){return c.index-a.index}),o.forEach(function(b){var c=Math.max;b.open?(b.element.classList.add(a("brace-level-"+(p%k+1))),p++):(p=c(0,p-1),b.element.classList.add(a("brace-level-"+(p%k+1))))})}}})}})();
package/tests/prism.html CHANGED
@@ -4,13 +4,14 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>code-input Tester</title>
7
-
8
7
  <!--Import Prism-->
9
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
10
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
11
10
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
12
11
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
13
12
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
13
+ <script src="prism-match-braces-compatibility.js"></script>
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.min.css">
14
15
 
15
16
  <!--Import code-input-->
16
17
  <link rel="stylesheet" href="../code-input.css">
@@ -26,6 +27,7 @@
26
27
  <link rel="stylesheet" href="../plugins/go-to-line.css">
27
28
  <script src="../plugins/indent.js"></script>
28
29
  <link rel="stylesheet" href="../plugins/prism-line-numbers.css">
30
+ <script src="../plugins/select-token-callbacks.js"></script>
29
31
  <script src="../plugins/special-chars.js"></script>
30
32
  <link rel="stylesheet" href="../plugins/special-chars.css">
31
33
 
@@ -37,19 +39,16 @@
37
39
  <h4><a href="hljs.html">Test for highlight.js</a></h4>
38
40
  <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>
39
41
 
40
- <!-- <pre class="line-numbers language-javascript"><code>// Hello
41
- // World
42
- // Yay!</code></pre> -->
43
-
44
42
  <details id="collapse-results"><summary>Test Results (Click to Open)</summary><pre id="test-results"></pre></details>
45
- <form method="GET" class="line-numbers" action="https://google.com/search" target="_blank">
46
- <code-input language="JavaScript" name="q">console.log("Hello, World!");
43
+ <form method="GET" class="match-braces line-numbers" action="https://google.com/search" target="_blank">
44
+ <code-input name="q">console.log("Hello, World!");
47
45
  // A second line
48
46
  // A third line with &lt;html> tags</code-input>
49
47
  <input type="submit" value="Search Google For Code"/>
50
48
  </form>
49
+
51
50
  <script>
52
51
  beginTest(false);
53
52
  </script>
54
53
  </body>
55
- </html>
54
+ </html>
package/tests/tester.js CHANGED
@@ -123,6 +123,7 @@ function beginTest(isHLJS) {
123
123
  new codeInput.plugins.FindAndReplace(),
124
124
  new codeInput.plugins.GoToLine(),
125
125
  new codeInput.plugins.Indent(true, 2),
126
+ new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"), false, true, true, true, true, false),
126
127
  new codeInput.plugins.SpecialChars(true),
127
128
  ]));
128
129
  } else {
@@ -140,6 +141,7 @@ function beginTest(isHLJS) {
140
141
  new codeInput.plugins.FindAndReplace(),
141
142
  new codeInput.plugins.GoToLine(),
142
143
  new codeInput.plugins.Indent(true, 2),
144
+ new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true),
143
145
  new codeInput.plugins.SpecialChars(true),
144
146
  ]));
145
147
  }
@@ -187,7 +189,8 @@ async function startTests(textarea, isHLJS) {
187
189
  let renderedValue = codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g, "");
188
190
  assertEqual("Core", "Initial Rendered Value", renderedValue, `console.log("Hello, World!");
189
191
  // A second line
190
- // A third line with &lt;html&gt; tags`);
192
+ // A third line with &lt;html&gt; tags
193
+ `); // Extra newline so line numbers visible if enabled
191
194
 
192
195
 
193
196
  // Update code-input value with JavaScript, new value and num events should be correct.
@@ -206,19 +209,24 @@ console.log("I've got another line!", 2 < 3, "should be true.");`);
206
209
  assertEqual("Core", "JS-updated Rendered Value", renderedValue, `console.log("Hello, World!");
207
210
  // A second line
208
211
  // A third line with &lt;html&gt; tags
209
- console.log("I've got another line!", 2 &lt; 3, "should be true.");`);
212
+ console.log("I've got another line!", 2 &lt; 3, "should be true.");
213
+ `); // Extra newline so line numbers visible if enabled
210
214
 
211
- // Event Tests
215
+ // Event Listener Tests
216
+ // Function type listeners
212
217
  let numTimesInputCalled = 0;
213
218
  let numTimesChangeCalled = 0;
214
- codeInputElement.addEventListener("input", (evt) => {
219
+
220
+ let inputListener = (evt) => {
215
221
  if(!evt.isTrusted) { // To prevent duplicate calling due to allowInputEvents hack
216
222
  numTimesInputCalled++;
217
223
  }
218
- });
219
- codeInputElement.addEventListener("change", () => {
224
+ };
225
+ codeInputElement.addEventListener("input", inputListener);
226
+ let changeListener = () => {
220
227
  numTimesChangeCalled++;
221
- });
228
+ };
229
+ codeInputElement.addEventListener("change", changeListener);
222
230
 
223
231
  let inputDeletedListenerCalled = false;
224
232
  let deletedListener = () => {
@@ -233,17 +241,49 @@ console.log("I've got another line!", 2 &lt; 3, "should be true.");`);
233
241
  textarea.blur(); // Unfocus textarea - calls change event
234
242
  textarea.focus();
235
243
 
236
- assertEqual("Core", "Input Event Listener Called Right Number of Times", numTimesInputCalled, 6);
237
- assertEqual("Core", "Change Event Listener Called Right Number of Times", numTimesChangeCalled, 1);
238
- testAssertion("Core", "Input Event Removed Listener Not Called", !inputDeletedListenerCalled, "(code-input element).removeEventListener did not work.");
244
+ assertEqual("Core", "Function Event Listeners: Input Called Right Number of Times", numTimesInputCalled, 6);
245
+ assertEqual("Core", "Function Event Listeners: Change Called Right Number of Times", numTimesChangeCalled, 1);
246
+ testAssertion("Core", "Function Event Listeners: Input Removed Listener Not Called", !inputDeletedListenerCalled, "(code-input element).removeEventListener did not work.");
247
+
248
+ codeInputElement.removeEventListener("input", inputListener);
249
+ codeInputElement.removeEventListener("change", changeListener);
250
+
251
+ // Repeat for Object type listeners
252
+ numTimesInputCalled = 0;
253
+ numTimesChangeCalled = 0;
254
+ codeInputElement.addEventListener("input", {handleEvent: (evt) => {
255
+ if(!evt.isTrusted) { // To prevent duplicate calling due to allowInputEvents hack
256
+ numTimesInputCalled++;
257
+ }
258
+ }});
259
+ codeInputElement.addEventListener("change", {handleEvent: () => {
260
+ numTimesChangeCalled++;
261
+ }});
262
+
263
+ inputDeletedListenerCalled = false;
264
+ deletedListener = {handleEvent: () => {
265
+ inputDeletedListenerCalled = true;
266
+ }};
267
+ codeInputElement.addEventListener("input", deletedListener);
268
+ codeInputElement.removeEventListener("input", deletedListener);
269
+
270
+ // Make listeners be called
271
+ textarea.focus(); // Focus textarea
272
+ addText(textarea, " // Hi");
273
+ textarea.blur(); // Unfocus textarea - calls change event
274
+ textarea.focus();
275
+
276
+ assertEqual("Core", "Object Event Listeners: Input Called Right Number of Times", numTimesInputCalled, 6);
277
+ assertEqual("Core", "Object Event Listeners: Change Called Right Number of Times", numTimesChangeCalled, 1);
278
+ testAssertion("Core", "Object Event Listeners: Input Removed Listener Not Called", !inputDeletedListenerCalled, "(code-input element).removeEventListener did not work.");
239
279
 
240
280
  // Changing language should be correct
241
281
  if(!isHLJS) {
242
282
  // Highlight.js has autodetect plugin that should make this fail, so don't run these tests with it.
243
283
  testAssertion("Core", "Language attribute Initial value",
244
- codeInputElement.codeElement.classList.contains("language-javascript")
284
+ !codeInputElement.codeElement.classList.contains("language-javascript")
245
285
  && !codeInputElement.codeElement.classList.contains("language-html"),
246
- `Language set to JavaScript but code element's class name is ${codeInputElement.codeElement.className}.`);
286
+ `Language unset but code element's class name is ${codeInputElement.codeElement.className}.`);
247
287
 
248
288
  codeInputElement.setAttribute("language", "HTML");
249
289
 
@@ -278,7 +318,8 @@ console.log("I've got another line!", 2 &lt; 3, "should be true.");`);
278
318
  renderedValue = codeInputElement.codeElement.innerHTML.replace(/<[^>]+>/g, "");
279
319
  assertEqual("Core", "Form Reset resets Rendered Value", renderedValue, `console.log("Hello, World!");
280
320
  // A second line
281
- // A third line with &lt;html&gt; tags`);
321
+ // A third line with &lt;html&gt; tags
322
+ `); // Extra newline so line numbers visible if enabled.
282
323
 
283
324
  /*--- Tests for plugins ---*/
284
325
  // AutoCloseBrackets
@@ -487,6 +528,29 @@ console.log("I've got another line!", 2 &lt; 3, "should be true.");`);
487
528
  addText(textarea, `function printTriples(max) {\nfor(let i = 0; i < max-2; i++) {\nfor(let j = 0; j < max-1; j++) {\nfor(let k = 0; k < max; k++) {\nconsole.log(i,j,k);\n}\n//Hmmm...`, true);
488
529
  }, 'function printTriples(max) {\n for(let i = 0; i < max-2; i++) {\n for(let j = 0; j < max-1; j++) {\n for(let k = 0; k < max; k++) {\n console.log(i,j,k);\n }\n //Hmmm...\n }\n }\n }\n}', 189, 189);
489
530
 
531
+ // SelectTokenCallbacks
532
+ if(isHLJS) {
533
+ addText(textarea, "\nlet x = 1;\nlet y = 2;\nconsole.log(`${x} + ${y} = ${x+y}`);");
534
+ move(textarea, -4); // Ends at |: "${x+y|}`);"
535
+ textarea.selectionStart -= 35; // Starts at |: "let y = |2;"
536
+ await waitAsync(50); // Wait for highlighting so text updates
537
+ assertEqual("SelectTokenCallbacks", "Number of Selected Tokens", codeInputElement.querySelectorAll(".in-selection").length, 13);
538
+ assertEqual("SelectTokenCallbacks", "Number of Selected .hljs-string Tokens", codeInputElement.querySelectorAll(".hljs-string.in-selection").length, 0); // Since parentTokensAreSelected set to false
539
+ assertEqual("SelectTokenCallbacks", "Number of Selected .hljs-subst Tokens", codeInputElement.querySelectorAll(".hljs-subst.in-selection").length, 2);
540
+ } else {
541
+ // Combined with compatiblity-added match-braces plugin
542
+ addText(textarea, "\n[(),((),'Hi')]");
543
+ await waitAsync(50); // Wait for highlighting so text updates
544
+ // Move back 2 characters so just after 'Hi'
545
+ move(textarea, -2);
546
+ await waitAsync(50); // Wait for highlighting so text updates
547
+ assertEqual("SelectTokenCallbacks", "Number of Selected Braces 1", codeInputElement.getElementsByClassName("brace-hover").length, 2);
548
+ // Move forward 1 character so between )]
549
+ move(textarea, 1);
550
+ await waitAsync(50); // Wait for highlighting so text updates
551
+ assertEqual("SelectTokenCallbacks", "Number of Selected Braces 2", codeInputElement.getElementsByClassName("brace-hover").length, 4);
552
+ }
553
+
490
554
  // SpecialChars
491
555
  // Clear all code
492
556
  textarea.selectionStart = 0;