npm - @webcoder49/code-input - Versions diffs - 2.1.0 → 2.5.0 - Mend

@webcoder49/code-input 2.1.0 → 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 (44) hide show

package/CONTRIBUTING.md +11 -1
package/README.md +26 -11
package/code-input.css +126 -29
package/code-input.d.ts +153 -11
package/code-input.js +218 -193
package/code-input.min.css +1 -1
package/code-input.min.js +1 -1
package/package.json +1 -1
package/plugins/README.md +28 -6
package/plugins/auto-close-brackets.js +61 -0
package/plugins/auto-close-brackets.min.js +1 -0
package/plugins/autocomplete.js +21 -12
package/plugins/autocomplete.min.js +1 -1
package/plugins/autodetect.js +4 -4
package/plugins/autodetect.min.js +1 -1
package/plugins/find-and-replace.css +145 -0
package/plugins/find-and-replace.js +746 -0
package/plugins/find-and-replace.min.css +1 -0
package/plugins/find-and-replace.min.js +1 -0
package/plugins/go-to-line.css +77 -0
package/plugins/go-to-line.js +175 -0
package/plugins/go-to-line.min.css +1 -0
package/plugins/go-to-line.min.js +1 -0
package/plugins/indent.js +166 -15
package/plugins/indent.min.js +1 -1
package/plugins/prism-line-numbers.css +10 -9
package/plugins/prism-line-numbers.min.css +1 -1
package/plugins/select-token-callbacks.js +289 -0
package/plugins/select-token-callbacks.min.js +1 -0
package/plugins/special-chars.css +1 -5
package/plugins/special-chars.js +65 -61
package/plugins/special-chars.min.css +2 -2
package/plugins/special-chars.min.js +1 -1
package/plugins/test.js +1 -2
package/plugins/test.min.js +1 -1
package/tests/hljs.html +55 -0
package/tests/i18n.html +197 -0
package/tests/prism-match-braces-compatibility.js +215 -0
package/tests/prism-match-braces-compatibility.min.js +1 -0
package/tests/prism.html +54 -0
package/tests/tester.js +593 -0
package/tests/tester.min.js +21 -0
package/plugins/debounce-update.js +0 -40
package/plugins/debounce-update.min.js +0 -1

package/tests/hljs.html ADDED Viewed

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>code-input Tester</title>
+    <!--Import Highlight.JS-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
+    <!--Import code-input-->
+    <link rel="stylesheet" href="../code-input.css">
+    <script src="../code-input.js"></script>
+    <!--Import code-input plugins-->
+    <script src="../plugins/auto-close-brackets.js"></script>
+    <script src="../plugins/autocomplete.js"></script>
+    <link rel="stylesheet" href="../plugins/autocomplete.css">
+    <script src="../plugins/autodetect.js"></script>
+    <script src="../plugins/find-and-replace.js"></script>
+    <link rel="stylesheet" href="../plugins/find-and-replace.css">
+    <script src="../plugins/go-to-line.js"></script>
+    <link rel="stylesheet" href="../plugins/go-to-line.css">
+    <script src="../plugins/indent.js"></script>
+    <script src="../plugins/select-token-callbacks.js"></script>
+    <script src="../plugins/special-chars.js"></script>
+    <link rel="stylesheet" href="../plugins/special-chars.css">
+    <script src="tester.js"></script>
+</head>
+<body>
+    <h1>code-input Tester (highlight.js)</h1>
+    <h2>If the page doesn't load, please reload it, and answer the questions in alert boxes.</h2>
+    <h4><a href="prism.html">Test for Prism.js</a></h4>
+    <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>
+    <details id="collapse-results"><summary>Test Results (Click to Open)</summary><pre id="test-results"></pre></details>
+    <form method="GET" action="https://google.com/search" target="_blank">
+        <code-input name="q">console.log("Hello, World!");
+// A second line
+// A third line with &lt;html> tags</code-input>
+        <input type="submit" value="Search Google For Code"/>
+    </form>
+    <script>
+        beginTest(true);
+    </script>
+</body>
+</html>

package/tests/i18n.html ADDED Viewed

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>code-input should be global</title>
+        <meta charset="utf-8"/>
+        <!--Import Prism-->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
+        <script src="prism-match-braces-compatibility.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.min.css">
+        <!--Import Highlight.JS-->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
+        <!--Import code-input-->
+        <link rel="stylesheet" href="../code-input.css">
+        <script src="../code-input.js"></script>
+        <!--Import code-input plugins-->
+        <script src="../plugins/auto-close-brackets.js"></script>
+        <script src="../plugins/autocomplete.js"></script>
+        <script src="../plugins/autodetect.js"></script>
+        <link rel="stylesheet" href="../plugins/autocomplete.css">
+        <script src="../plugins/find-and-replace.js"></script>
+        <link rel="stylesheet" href="../plugins/find-and-replace.css">
+        <script src="../plugins/go-to-line.js"></script>
+        <link rel="stylesheet" href="../plugins/go-to-line.css">
+        <script src="../plugins/indent.js"></script>
+        <link rel="stylesheet" href="../plugins/prism-line-numbers.css">
+        <script src="../plugins/select-token-callbacks.js"></script>
+        <script src="../plugins/special-chars.js"></script>
+        <link rel="stylesheet" href="../plugins/special-chars.css">
+        <!--Register templates-->
+        <script>
+            codeInput.registerTemplate("hljs", codeInput.templates.hljs(hljs, [
+                /*new codeInput.plugins.AutoCloseBrackets(),
+                new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
+                    if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
+                        // Show popup
+                        popupElem.style.display = "block";
+                        popupElem.innerHTML = "Here's your popup!";
+                    } else {
+                        popupElem.style.display = "none";
+                    }
+                }),
+                new codeInput.plugins.Autodetect(),
+                new codeInput.plugins.FindAndReplace(),
+                new codeInput.plugins.GoToLine(),
+                new codeInput.plugins.Indent(true, 2),
+                new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"), false, true, true, true, true, false),
+                new codeInput.plugins.SpecialChars(true),*/
+            ]));
+            codeInput.registerTemplate("prism", codeInput.templates.prism(Prism, [
+                /*new codeInput.plugins.AutoCloseBrackets(),
+                new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
+                    if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
+                        // Show popup
+                        popupElem.style.display = "block";
+                        popupElem.innerHTML = "Here's your popup!";
+                    } else {
+                        popupElem.style.display = "none";
+                    }
+                }),
+                new codeInput.plugins.FindAndReplace(),
+                new codeInput.plugins.GoToLine(),
+                new codeInput.plugins.Indent(true, 2),
+                new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true),
+                new codeInput.plugins.SpecialChars(true),*/
+            ]));
+            // Attribution: Translated by Oliver Geer with some help from English Wiktionary
+            let findAndReplaceTranslations = {
+                start: "Buscar términos en su código.",
+                none: "No hay sucesos",
+                oneFound: "1 suceso encontrado.",
+                matchIndex: (index, count) => `${index} de ${count} sucesos.`,
+                error: (message) => `Error: ${message}`,
+                infiniteLoopError: "Causa un ciclo infinito",
+                closeDialog: "Cerrar el Diálogo y Regresar al Editor",
+                findPlaceholder: "Buscar",
+                findCaseSensitive: "Prestar atención a las minúsculas/mayúsculas",
+                findRegExp: "Utilizar expresión regular de JavaScript",
+                replaceTitle: "Reemplazar",
+                replacePlaceholder: "Reemplazar con",
+                findNext: "Buscar Suceso Próximo",
+                findPrevious: "Buscar Suceso Previo",
+                replaceActionShort: "Reemplazar",
+                replaceAction: "Reemplazar este Suceso",
+                replaceAllActionShort: "Reemplazar Todos",
+                replaceAllAction: "Reemplazar Todos los Sucesos"
+            };
+            let goToLineTranslations = {
+                closeDialog: "Cerrar el Diálogo y Regresar al Editor",
+                input: "Línea:Columno o Línea luego Retorno",
+            };
+            let indentTranslations = {
+                tabForIndentation: "Tabulador y Mayús-Tabulador actualmente para la indentación. Tecla Escape para activar la navegación por el teclado.",
+                tabForNavigation: "Tabulador y Mayús-Tabulador actualmente para la navegación por el teclado. Tecla para activar la indentación.",
+            };
+            codeInput.registerTemplate("hljs+", codeInput.templates.hljs(hljs, [
+                new codeInput.plugins.AutoCloseBrackets(),
+                new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
+                    if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
+                        // Show popup
+                        popupElem.style.display = "block";
+                        popupElem.innerHTML = "Here's your popup!";
+                    } else {
+                        popupElem.style.display = "none";
+                    }
+                }),
+                new codeInput.plugins.Autodetect(),
+                new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations),
+                new codeInput.plugins.GoToLine(true, goToLineTranslations),
+                new codeInput.plugins.Indent(true, 2, {"(": ")", "[": "]", "{": "}"}, true, indentTranslations),
+                new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"), false, true, true, true, true, false),
+                //new codeInput.plugins.SpecialChars(true),
+            ]));
+            codeInput.registerTemplate("prism+", codeInput.templates.prism(Prism, [
+                new codeInput.plugins.AutoCloseBrackets(),
+                new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
+                    if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
+                        // Show popup
+                        popupElem.style.display = "block";
+                        popupElem.innerHTML = "Here's your popup!";
+                    } else {
+                        popupElem.style.display = "none";
+                    }
+                }),
+                new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations),
+                new codeInput.plugins.GoToLine(true, goToLineTranslations),
+                new codeInput.plugins.Indent(true, 2, {"(": ")", "[": "]", "{": "}"}, true, indentTranslations),
+                new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true),
+                //new codeInput.plugins.SpecialChars(true),
+            ]));
+        </script>
+    </head>
+    <body>
+        <textarea dir="rtl" placeholder="textarea rtl"></textarea>
+        <textarea dir="ltr" placeholder="textarea ltr"></textarea>
+        <code-input dir="rtl" template="prism" language="markdown" placeholder="prism rtl"></code-input>
+        <code-input dir="ltr" template="prism" language="markdown" placeholder="prism ltr"></code-input>
+        <code-input dir="rtl" template="hljs" language="markdown" placeholder="hljs rtl"></code-input>
+        <code-input dir="ltr" template="hljs" language="markdown" placeholder="hljs ltr"></code-input>
+        <code-input dir="rtl" template="prism+" language="markdown" placeholder="prism rtl" class="line-numbers"></code-input>
+        <code-input dir="ltr" template="prism+" language="markdown" placeholder="prism ltr" class="line-numbers"></code-input>
+        <code-input dir="rtl" template="hljs+" language="markdown" placeholder="hljs rtl"></code-input>
+        <code-input dir="ltr" template="hljs+" language="markdown" placeholder="hljs ltr"></code-input>
+        <script>
+            rtl = `# ערך מומלץ ערך מומלץ
+**לוטרת** הים היא יונק ימי קטן יחסית, חבר במשפחת הסמורים, שחי לחופיו הצפוניים והמזרחיים של האוקיינוס השקט.
+ההגנה מפני קור אצל לוטרת הים מבוססת על שכבה עבה של פרווה, שהיא מהצפופות בעולם החי,
+וזאת בשונה ממרבית היונקים הימיים הנסמכים על שכבת שומן.  CC-BY-SA he.wikipedia.org אף שהיא מסוגלת להלך על היבשה, מבלה לוטרת הים את מרבית זמנה באוקיינוס הפתוח.
+# مقالة اليوم المختارة
+**الواقعية في الأدب الإسبا**ني هي حركة أدبية شكلت جزءًا من الواقعية، وهو تيار ثقافي ظهر في أوروبا في منتصف القرن التاسع عشر عقب اضمحلال اتجاهات الرومانسية.
+ظهر سابقًا في فرنسا سنة 1850 حيث تطورت أصوله التي كانت موجودة بالفعل في الرومانسية، وخصوصًا في الأدب الذي يتناول العادات والتقاليد. CC-BY-SA ar.wikipedia.org التي كانت تعج بكل ما هو خيالي وجمالي خلاب، وعمدوا إلى الملاحظة الموضوعية للأشخاص والمجتمع والأحداث المعاصرة في محاولة منهم إلى تقديم صورة واضحة للمجتمع آنذاك.`;
+            ltr = `# From today's featured article
+CC-BY-SA en.wikipedia.org: History is the systematic study of the past with its main focus on the human past.
+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.
+# निर्वाचित लेख
+CC-BY-SA hi.wikipedia.org: **ग्लेशियर नेशनल पार्क** अमेरिकी राष्ट्रीय उद्यान है, जो कि कनाडा-संयुक्त राज्य अमेरिका की सीमा पर स्थित है। उद्यान संयुक्त राज्य के उत्तर-पश्चिमी मोंटाना राज्य
+में स्थित है और कनाडा की ओर अल्बर्टा और ब्रिटिश कोलम्बिया प्रांतों से सटा हुआ है। उद्यान दस लाख एकड़ RTL: ערך מומלץ ערך מומלץ (4,000 किमी2) से अधिक क्षेत्र में फैला हुआ है और इसमें दो पर्वत श्रृंखला (रॉकी पर्वत की उप-श्रेणियाँ), 130 से अधिक नामित झीलें...`;
+            window.addEventListener("load", function() {
+                const elems = document.querySelectorAll("body > code-input, body > textarea");
+                for(let i = 0; i < elems.length; i++) {
+                    let dir = elems[i].getAttribute("dir");
+                    if(dir == "rtl") elems[i].value = rtl;
+                    else elems[i].value = ltr;
+                }
+            });
+        </script>
+    </body>
+</html>

package/tests/prism-match-braces-compatibility.js ADDED Viewed

@@ -0,0 +1,215 @@
+/* Modified from https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.js
+to enable codeInput SelectTokenCallbacks compatibility. Use:
+new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true) */
+// Additions on lines 6-10, and lines 84-98.
+// code-input modification: ADD
+// Callbacks
+let selectBrace;
+let deselectAllBraces;
+// END code-input modification
+(function () {
+if (typeof Prism === 'undefined' || typeof document === 'undefined') {
+    return;
+}
+function mapClassName(name) {
+    var customClass = Prism.plugins.customClass;
+    if (customClass) {
+        return customClass.apply(name, 'none');
+    } else {
+        return name;
+    }
+}
+var PARTNER = {
+    '(': ')',
+    '[': ']',
+    '{': '}',
+};
+// The names for brace types.
+// These names have two purposes: 1) they can be used for styling and 2) they are used to pair braces. Only braces
+// of the same type are paired.
+var NAMES = {
+    '(': 'brace-round',
+    '[': 'brace-square',
+    '{': 'brace-curly',
+};
+// A map for brace aliases.
+// This is useful for when some braces have a prefix/suffix as part of the punctuation token.
+var BRACE_ALIAS_MAP = {
+    '${': '{', // JS template punctuation (e.g. `foo ${bar + 1}`)
+};
+var LEVEL_WARP = 12;
+var pairIdCounter = 0;
+var BRACE_ID_PATTERN = /^(pair-\d+-)(close|open)$/;
+/**
+ * Returns the brace partner given one brace of a brace pair.
+ *
+ * @param {HTMLElement} brace
+ * @returns {HTMLElement}
+ */
+function getPartnerBrace(brace) {
+    var match = BRACE_ID_PATTERN.exec(brace.id);
+    return document.querySelector('#' + match[1] + (match[2] == 'open' ? 'close' : 'open'));
+}
+/**
+ * @this {HTMLElement}
+ */
+function hoverBrace() {
+    if (!Prism.util.isActive(this, 'brace-hover', true)) {
+        return;
+    }
+    [this, getPartnerBrace(this)].forEach(function (e) {
+        e.classList.add(mapClassName('brace-hover'));
+    });
+}
+/**
+ * @this {HTMLElement}
+ */
+function leaveBrace() {
+    [this, getPartnerBrace(this)].forEach(function (e) {
+        e.classList.remove(mapClassName('brace-hover'));
+    });
+}
+// code-input modification: ADD
+selectBrace = (token) => {
+    if(BRACE_ID_PATTERN.test(token.id)) { // Check it's a brace
+        hoverBrace.apply(token); // Move the brace from a this to a parameter
+    }
+};
+deselectAllBraces = (tokenContainer) => {
+    // Remove selected class
+    let selectedClassTokens = tokenContainer.getElementsByClassName(mapClassName('brace-hover'));
+    // Use it like a queue, because as elements have their class name removed they are live-removed from the collection.
+    while(selectedClassTokens.length > 0) {
+        selectedClassTokens[0].classList.remove(mapClassName('brace-hover'));
+    }
+}; // Moves the brace from a this to a parameter
+// end code-input modification
+/**
+ * @this {HTMLElement}
+ */
+function clickBrace() {
+    if (!Prism.util.isActive(this, 'brace-select', true)) {
+        return;
+    }
+    [this, getPartnerBrace(this)].forEach(function (e) {
+        e.classList.add(mapClassName('brace-selected'));
+    });
+}
+Prism.hooks.add('complete', function (env) {
+    /** @type {HTMLElement} */
+    var code = env.element;
+    var pre = code.parentElement;
+    if (!pre || pre.tagName != 'PRE') {
+        return;
+    }
+    // find the braces to match
+    /** @type {string[]} */
+    var toMatch = [];
+    if (Prism.util.isActive(code, 'match-braces')) {
+        toMatch.push('(', '[', '{');
+    }
+    if (toMatch.length == 0) {
+        // nothing to match
+        return;
+    }
+    if (!pre.__listenerAdded) {
+        // code blocks might be highlighted more than once
+        pre.addEventListener('mousedown', function removeBraceSelected() {
+            // the code element might have been replaced
+            var code = pre.querySelector('code');
+            var className = mapClassName('brace-selected');
+            Array.prototype.slice.call(code.querySelectorAll('.' + className)).forEach(function (e) {
+                e.classList.remove(className);
+            });
+        });
+        Object.defineProperty(pre, '__listenerAdded', { value: true });
+    }
+    /** @type {HTMLSpanElement[]} */
+    var punctuation = Array.prototype.slice.call(
+        code.querySelectorAll('span.' + mapClassName('token') + '.' + mapClassName('punctuation'))
+    );
+    /** @type {{ index: number, open: boolean, element: HTMLElement }[]} */
+    var allBraces = [];
+    toMatch.forEach(function (open) {
+        var close = PARTNER[open];
+        var name = mapClassName(NAMES[open]);
+        /** @type {[number, number][]} */
+        var pairs = [];
+        /** @type {number[]} */
+        var openStack = [];
+        for (var i = 0; i < punctuation.length; i++) {
+            var element = punctuation[i];
+            if (element.childElementCount == 0) {
+                var text = element.textContent;
+                text = BRACE_ALIAS_MAP[text] || text;
+                if (text === open) {
+                    allBraces.push({ index: i, open: true, element: element });
+                    element.classList.add(name);
+                    element.classList.add(mapClassName('brace-open'));
+                    openStack.push(i);
+                } else if (text === close) {
+                    allBraces.push({ index: i, open: false, element: element });
+                    element.classList.add(name);
+                    element.classList.add(mapClassName('brace-close'));
+                    if (openStack.length) {
+                        pairs.push([i, openStack.pop()]);
+                    }
+                }
+            }
+        }
+        pairs.forEach(function (pair) {
+            var pairId = 'pair-' + (pairIdCounter++) + '-';
+            var opening = punctuation[pair[0]];
+            var closing = punctuation[pair[1]];
+            opening.id = pairId + 'open';
+            closing.id = pairId + 'close';
+            [opening, closing].forEach(function (e) {
+                e.addEventListener('mouseenter', hoverBrace);
+                e.addEventListener('mouseleave', leaveBrace);
+                e.addEventListener('click', clickBrace);
+            });
+        });
+    });
+    var level = 0;
+    allBraces.sort(function (a, b) { return a.index - b.index; });
+    allBraces.forEach(function (brace) {
+        if (brace.open) {
+            brace.element.classList.add(mapClassName('brace-level-' + (level % LEVEL_WARP + 1)));
+            level++;
+        } else {
+            level = Math.max(0, level - 1);
+            brace.element.classList.add(mapClassName('brace-level-' + (level % LEVEL_WARP + 1)));
+        }
+    });
+});
+}());

package/tests/prism-match-braces-compatibility.min.js ADDED Viewed

@@ -0,0 +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 ADDED Viewed

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>code-input Tester</title>
+    <!--Import Prism-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
+    <script src="prism-match-braces-compatibility.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.min.css">
+    <!--Import code-input-->
+    <link rel="stylesheet" href="../code-input.css">
+    <script src="../code-input.js"></script>
+    <!--Import code-input plugins-->
+    <script src="../plugins/auto-close-brackets.js"></script>
+    <script src="../plugins/autocomplete.js"></script>
+    <link rel="stylesheet" href="../plugins/autocomplete.css">
+    <script src="../plugins/find-and-replace.js"></script>
+    <link rel="stylesheet" href="../plugins/find-and-replace.css">
+    <script src="../plugins/go-to-line.js"></script>
+    <link rel="stylesheet" href="../plugins/go-to-line.css">
+    <script src="../plugins/indent.js"></script>
+    <link rel="stylesheet" href="../plugins/prism-line-numbers.css">
+    <script src="../plugins/select-token-callbacks.js"></script>
+    <script src="../plugins/special-chars.js"></script>
+    <link rel="stylesheet" href="../plugins/special-chars.css">
+    <script src="tester.js"></script>
+</head>
+<body>
+    <h1>code-input Tester (Prism.js)</h1>
+    <h2>If the page doesn't load, please reload it, and answer the questions in alert boxes.</h2>
+    <h4><a href="hljs.html">Test for highlight.js</a></h4>
+    <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>
+    <details id="collapse-results"><summary>Test Results (Click to Open)</summary><pre id="test-results"></pre></details>
+    <form method="GET" class="match-braces line-numbers" action="https://google.com/search" target="_blank">
+        <code-input name="q">console.log("Hello, World!");
+// A second line
+// A third line with &lt;html> tags</code-input>
+        <input type="submit" value="Search Google For Code"/>
+    </form>
+    <script>
+        beginTest(false);
+    </script>
+</body>
+</html>