@webcoder49/code-input 2.5.1 → 2.6.2

package/esm/plugins/auto-close-brackets.d.mts

@@ -0,0 +1,15 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin, CodeInput } from "../code-input.d.mts";
+  /**
+   * Automatically closes pairs of brackets/quotes/other syntaxes in code, but also lets you choose the brackets this
+   * is activated for.
+   * Files: auto-close-brackets.js
+   */
+  export default class AutoCloseBrackets extends Plugin {
+    /**
+     * Create an auto-close brackets plugin to pass into a template
+     * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}", '"': '"'}. All brackets must only be one character.
+     */
+    constructor(bracketPairs?: Object);
+  }

package/esm/plugins/auto-close-brackets.mjs

@@ -0,0 +1,84 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin } from "../code-input.mjs";
+const plugins = {};
+/**
+ * Automatically close pairs of brackets/quotes/other syntaxes in code, but also optionally choose the brackets this
+ * is activated for.
+ * Files: auto-close-brackets.js
+ */
+"use strict";
+
+plugins.AutoCloseBrackets = class extends Plugin {
+    bracketPairs = [];
+    bracketsOpenedStack = []; // Each item [closing bracket string, opening bracket location] Innermost at right so can know which brackets should be ignored when retyped
+
+    /**
+     * Create an auto-close brackets plugin to pass into a template
+     * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}", '"': '"'}. All brackets must only be one character.
+     */
+    constructor(bracketPairs={"(": ")", "[": "]", "{": "}", '"': '"'}) {
+        super([]); // No observed attributes
+
+        this.bracketPairs = bracketPairs;
+    }
+
+    /* Add keystroke events */
+    afterElementsAdded(codeInput) {
+        codeInput.pluginData.autoCloseBrackets = { automatedKeypresses: false};
+        codeInput.textareaElement.addEventListener('keydown', (event) => { this.checkBackspace(codeInput, event); });
+        codeInput.textareaElement.addEventListener('beforeinput', (event) => { this.checkClosingBracket(codeInput, event); });
+        codeInput.textareaElement.addEventListener('input', (event) => { this.checkOpeningBracket(codeInput, event); });
+    }
+
+    /* Deal with the ability to "retype" a closing bracket where one has already
+    been placed. Runs before input so newly typing a closing bracket can be
+    prevented.*/
+    checkClosingBracket(codeInput, event) {
+        if(codeInput.pluginData.autoCloseBrackets.automatedKeypresses) return;
+        if(event.data == codeInput.textareaElement.value[codeInput.textareaElement.selectionStart]) {
+            // Check if a closing bracket is typed
+            for(let openingBracket in this.bracketPairs) {
+                let closingBracket = this.bracketPairs[openingBracket];
+                if(event.data == closingBracket) {
+                    // "Retype" a closing bracket, i.e. just move caret
+                    codeInput.textareaElement.selectionStart = codeInput.textareaElement.selectionEnd += 1;
+                    event.preventDefault();
+                    break;
+                }
+            }
+        }
+    }
+
+    /* Deal with the automatic creation of closing bracket when opening brackets are typed. Runs after input for consistency between browsers. */
+    checkOpeningBracket(codeInput, event) {
+        if(codeInput.pluginData.autoCloseBrackets.automatedKeypresses) return;
+        if(event.data in this.bracketPairs) {
+            // Opening bracket typed; Create bracket pair
+            let closingBracket = this.bracketPairs[event.data];
+            // Insert the closing bracket
+            // automatedKeypresses property to prevent keypresses being captured
+            // by this plugin during automated input as some browsers
+            // (e.g. GNOME Web) do.
+            codeInput.pluginData.autoCloseBrackets.automatedKeypresses = true;
+            document.execCommand("insertText", false, closingBracket);
+            codeInput.pluginData.autoCloseBrackets.automatedKeypresses = false;
+            // Move caret before the inserted closing bracket
+            codeInput.textareaElement.selectionStart = codeInput.textareaElement.selectionEnd -= 1;
+        }
+    }
+
+    /* Deal with cases where a backspace deleting an opening bracket deletes the closing bracket straight after it as well */
+    checkBackspace(codeInput, event) {
+        if(codeInput.pluginData.autoCloseBrackets.automatedKeypresses) return;
+        if(event.key == "Backspace" && codeInput.textareaElement.selectionStart == codeInput.textareaElement.selectionEnd) {
+            let closingBracket = this.bracketPairs[codeInput.textareaElement.value[codeInput.textareaElement.selectionStart-1]];
+            if(closingBracket != undefined && codeInput.textareaElement.value[codeInput.textareaElement.selectionStart] == closingBracket) {
+                // Opening bracket being deleted so delete closing bracket as well
+                codeInput.textareaElement.selectionEnd = codeInput.textareaElement.selectionStart + 1;
+                codeInput.textareaElement.selectionStart -= 1;
+            }
+        }
+    }
+}
+export default plugins.AutoCloseBrackets;

package/esm/plugins/autocomplete.d.mts

@@ -0,0 +1,14 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin, CodeInput } from "../code-input.d.mts";
+  /**
+   * Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions.
+   * Files: autocomplete.js / autocomplete.css
+   */
+  export default class Autocomplete extends Plugin {
+    /**
+     * Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd).
+     * @param {(popupElement: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number, selectionStart?: number) => void} updatePopupCallback  a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
+     */
+    constructor(updatePopupCallback: (popupElem: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number, selectionStart?: number) => void);
+  }

package/esm/plugins/autocomplete.mjs

@@ -0,0 +1,93 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin } from "../code-input.mjs";
+const plugins = {};
+/**
+ * Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions.
+ * Files: autocomplete.js / autocomplete.css
+ */
+"use strict";
+
+plugins.Autocomplete = class extends Plugin {
+    /**
+     * Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd).
+     * @param {(popupElement: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number) => void} updatePopupCallback  a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
+     */
+    constructor(updatePopupCallback) {
+        super([]); // No observed attributes
+        this.updatePopupCallback = updatePopupCallback;
+    }
+    /* When a key is pressed, or scrolling occurs, update the popup position */
+    updatePopup(codeInput, onlyScrolled) {
+        let textarea = codeInput.textareaElement;
+        let caretCoords = this.getCaretCoordinates(codeInput, textarea, textarea.selectionEnd, onlyScrolled);
+        let popupElem = codeInput.querySelector(".code-input_autocomplete_popup");
+        popupElem.style.top = caretCoords.top + "px";
+        popupElem.style.left = caretCoords.left + "px";
+        
+        if(!onlyScrolled) {
+            this.updatePopupCallback(popupElem, textarea, textarea.selectionEnd, textarea.selectionStart);
+        }
+    }
+    /* Create the popup element */
+    afterElementsAdded(codeInput) {
+        let popupElem = document.createElement("div");
+        popupElem.classList.add("code-input_autocomplete_popup");
+        codeInput.appendChild(popupElem);
+
+        let testPosPre = document.createElement("pre");
+        testPosPre.setAttribute("aria-hidden", true); // Hide for screen readers
+        if(codeInput.templateObject.preElementStyled) {
+            testPosPre.classList.add("code-input_autocomplete_testpos");
+            codeInput.appendChild(testPosPre); // Styled like first pre, but first pre found to update    
+        } else {
+            let testPosCode = document.createElement("code");
+            testPosCode.classList.add("code-input_autocomplete_testpos");
+            testPosPre.appendChild(testPosCode);
+            codeInput.appendChild(testPosPre); // Styled like first pre, but first pre found to update
+        }
+        
+        let textarea = codeInput.textareaElement;
+        textarea.addEventListener("input", () => { this.updatePopup(codeInput, false)});
+        textarea.addEventListener("selectionchange", () => { this.updatePopup(codeInput, false)});
+    }
+    /**
+     * Return the coordinates of the caret in a code-input
+     * @param {codeInput.CodeInput} codeInput 
+     * @param {HTMLElement} textarea 
+     * @param {Number} charIndex 
+     * @param {boolean} onlyScrolled True if no edits have been made to the text and the caret hasn't been repositioned 
+     * @returns {Object} {"top": CSS top value in pixels, "left": CSS left value in pixels}
+     */
+    getCaretCoordinates(codeInput, textarea, charIndex, onlyScrolled) {
+        let afterSpan;
+        if(onlyScrolled) {
+            // No edits to text; don't update element - span at index 1 is after span
+            let spans = codeInput.querySelector(".code-input_autocomplete_testpos").querySelectorAll("span");
+            if(spans.length < 2) {
+                // Hasn't saved text in test pre to find pos
+                // Need to regenerate text in test pre
+                return this.getCaretCoordinates(codeInput, textarea, charIndex, false);
+            } 
+            afterSpan = spans[1];
+        } else {
+            /* Inspired by https://github.com/component/textarea-caret-position */
+            let testPosElem = codeInput.querySelector(".code-input_autocomplete_testpos");
+            
+            let beforeSpan = document.createElement("span");
+            beforeSpan.textContent = textarea.value.substring(0, charIndex);
+            afterSpan = document.createElement("span");
+            afterSpan.textContent = "."; // Placeholder
+
+            // Clear test pre - https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
+            while (testPosElem.firstChild) {
+                testPosElem.removeChild(testPosElem.firstChild);
+            }
+            testPosElem.appendChild(beforeSpan);
+            testPosElem.appendChild(afterSpan);
+        }
+        return {"top": afterSpan.offsetTop - textarea.scrollTop, "left": afterSpan.offsetLeft - textarea.scrollLeft};
+    }
+    updatePopupCallback = function() {};
+}
+export default plugins.Autocomplete;

package/esm/plugins/autodetect.d.mts

@@ -0,0 +1,11 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin, CodeInput } from "../code-input.d.mts";
+  /**
+   * Autodetect the language live and change the `lang` attribute using the syntax highlighter's 
+   * autodetect capabilities. Works with highlight.js only.
+   * Files: autodetect.js
+   */
+  export default class Autodetect extends Plugin {
+    constructor();
+  }

package/esm/plugins/autodetect.mjs

@@ -0,0 +1,35 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin } from "../code-input.mjs";
+const plugins = {};
+/**
+ * Autodetect the language live and change the `lang` attribute using the syntax highlighter's 
+ * autodetect capabilities. Works with highlight.js only.
+ * Files: autodetect.js
+ */
+"use strict";
+
+plugins.Autodetect = class extends Plugin {
+    constructor() {
+        super([]); // No observed attributes
+    }
+    /* Remove previous language class */
+    beforeHighlight(codeInput) {
+        let resultElement = codeInput.codeElement;
+        resultElement.className = ""; // CODE
+        resultElement.parentElement.className = ""; // PRE
+    }
+    /* Get new language class and set `language` attribute */
+    afterHighlight(codeInput) {
+        let langClass = codeInput.codeElement.className || codeInput.preElement.className;
+        let lang = langClass.match(/lang(\w|-)*/i)[0]; // Get word starting with lang...; Get outer bracket
+        lang = lang.match(/(?<=-)(\w|-)*/i)[0];
+        if(lang == "undefined") {
+            codeInput.removeAttribute("language");
+            codeInput.removeAttribute("lang");
+        } else {
+            codeInput.setAttribute("language", lang);
+        }
+    }
+}
+export default plugins.Autodetect;

package/esm/plugins/find-and-replace.d.mts

@@ -0,0 +1,43 @@
+// NOTICE: This code is @generated from code outside the esm directory. Please do not edit it to contribute!
+
+import { Plugin, CodeInput } from "../code-input.d.mts";
+  /**
+   * Add Find-and-Replace (Ctrl+F for find, Ctrl+H for replace by default) functionality to the code editor.
+   * Files: find-and-replace.js / find-and-replace.css
+   */
+  export default class FindAndReplace extends Plugin {
+    /**
+     * Create a find-and-replace command plugin to pass into a template
+     * @param {boolean} useCtrlF Should Ctrl+F be overriden for find-and-replace find functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`.
+     * @param {boolean} useCtrlH Should Ctrl+H be overriden for find-and-replace replace functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, true)`.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the find-and-replace.js source code for the English text.
+     */
+    constructor(useCtrlF?: boolean, useCtrlH?: boolean,
+                instructionTranslations?: {
+                  start?: string;
+                  none?: string;
+                  oneFound?: string;
+                  matchIndex?: (index: Number, count: Number) => string;
+                  error?: (message: string) => string;
+                  infiniteLoopError?: string;
+                  closeDialog?: string;
+                  findPlaceholder?: string;
+                  findCaseSensitive?: string;
+                  findRegExp?: string;
+                  replaceTitle?: string;
+                  replacePlaceholder?: string;
+                  findNext?: string;
+                  findPrevious?: string;
+                  replaceActionShort?: string;
+                  replaceAction?: string;
+                  replaceAllActionShort?: string;
+                  replaceAllAction?: string
+                }
+              );
+    /**
+     * Show a find-and-replace dialog.
+     * @param {CodeInput} codeInputElement the `<code-input>` element.
+     * @param {boolean} replacePartExpanded whether the replace part of the find-and-replace dialog should be expanded
+     */
+    showPrompt(codeInputElement: CodeInput, replacePartExpanded: boolean): void;
+  }