@webcoder49/code-input 1.5.0

package/.github/workflows/minify.yml

@@ -0,0 +1,22 @@
+name: Auto-minify
+on: 
+  push:
+    branches:
+      - main
+jobs:
+  Minify:
+    runs-on: ubuntu-latest
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so auto-minify job can access it
+      - uses: actions/checkout@v2
+
+      - name: Auto Minify
+        uses: nizarmah/auto-minify@v2.1
+
+      # Auto commits minified files to the repository
+      # Ignore it if you don't want to commit the files to the repository 
+      - name: Auto committing minified files
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: "Auto Minified JS and CSS files"
+          branch: ${{ github.ref }}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 WebCoder49
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,115 @@
+# code-input
+[![View License](https://img.shields.io/github/license/webcoder49/code-input?style=for-the-badge)](LICENSE) [![View Releases](https://img.Shields.io/github/v/release/webcoder49/code-input?style=for-the-badge)](https://github.com/WebCoder49/code-input/releases) [![View the demo on CodePen](https://img.shields.io/static/v1?label=Demo&message=on%20CodePen&color=orange&logo=codepen&style=for-the-badge)](https://codepen.io/WebCoder49/details/jOypJOx)
+
+> ___Fully customisable syntax-highlighted textareas.___ [[🚀 View the Demo](https://codepen.io/WebCoder49/details/jOypJOx)]
+
+![Using code-input with many different themes](https://user-images.githubusercontent.com/69071853/133924472-05edde5c-23e7-4350-a41b-5a74d2dc1a9a.gif)
+*This demonstration uses themes from [Prism.js](https://prismjs.com/) and [highlight.js](https://highlightjs.org/), two syntax-highlighting programs which work well and have compatibility built-in with code-input.*
+
+## What does it do?
+**`code-input`** lets you **turn any ordinary JavaScript syntax-highlighting theme and program into customisable syntax-highlighted textareas** using an HTML custom element. It uses vanilla CSS to superimpose a `textarea` on a `pre code` block, then handles indentations, scrolling and fixes any resulting bugs with JavaScript. To see how it works in more detail, please see [this CSS-Tricks article](https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/ "Creating an Editable Textarea That Supports Syntax-Highlighted Code") I wrote.
+
+## What are the advantages of using code-input, and what can it be used for?
+Unlike other front-end code-editor projects, the simplicity of how `code-input` works means it is **highly customisable**. As it is not a full-featured editor, you can **choose what features you want it to include, and use your favourite syntax-highlighting algorithms and themes**.
+
+The `<code-input>` element works like a `<textarea>` and therefore **works in HTML5 forms and supports using the `value` and `placeholder` attributes, as well as the `onchange` event.**
+
+<details>
+<summary>
+
+## Getting Started With `code-input`
+</summary>
+
+`code-input` is designed to be **both easy to use and customisable**. Here's how to use it to create syntax-highlighted textareas: 
+
+### Import `code-input`
+- **First, import your favourite syntax-highlighter's JS and CSS theme files** to turn editable. 
+- Then, import the CSS and JS files of `code-input` from a downloaded release or a CDN. The non-minified files are useful for using during development.
+
+<details>
+<summary>
+Locally downloaded
+</summary>
+
+```html
+<!--In the <head>-->
+<script src="path/to/code-input.min.js"></script>
+<link rel="stylesheet" href="path/to/code-input.min.css">
+```
+</details>
+<details>
+<summary>
+From JSDelivr CDN
+</summary>
+
+```html
+<!--In the <head>-->
+<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@1.3/code-input.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@1.3/code-input.min.css">
+```
+</details>
+
+### Creating a template
+The next step is to set up a `template` to link `code-input` to your syntax-highlighter. If you're using Prism.js or highlight.js, you can use the built-in template, or you can create your own otherwise. In these examples, I am registering the template as `"syntax-highlighted"`, but you can use any template name as long as you are consistent.
+
+- *Highlight.js:*
+  ```js
+  codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [] /* Array of plugins (see below) */));
+  ```
+
+- *Prism.js:*
+  ```js
+  codeInput.registerTemplate("syntax-highlighted", codeInput.templates.prism(Prism, [] /* Array of plugins (see below) */));
+  ```
+
+- *Custom:*
+  ```js
+  codeInput.registerTemplate("syntax-highlighted", codeInput.templates.custom(
+    function(result_element) { /* Highlight function - with `pre code` code element */
+      /* Highlight code in result_element - code is already escaped so it doesn't become HTML */
+    },
+    true, /* Optional - Is the `pre` element styled as well as the `code` element? Changing this to false uses the code element as the scrollable one rather than the pre element */
+    true, /* Optional - This is used for editing code - setting this to true overrides the Tab key and uses it for indentation */
+    false /* Optional - Setting this to true passes the `<code-input>` element as a second argument to the highlight function to be used for getting data- attribute values and using the DOM for the code-input */,
+    [] // Array of plugins (see below)
+  ));
+  ```
+
+### Adding plugins
+[Plugins](./plugins/) allow you to add extra features to a template, like [automatic indentation](plugins/indent.js) or [support for highlight.js's language autodetection](plugins/autodetect.js). To use them, just:
+- Import the plugins' JS files after you have imported `code-input` and before registering the template.
+- Place instances of the plugins in the array of plugins argument when registering, like this:
+```html
+<script src="code-input.js"></script>
+<!--...-->
+<script src="plugins/autodetect.js"></script>
+<script src="plugins/indent.js"></script>
+<!--...-->
+<script>
+  codeInput.registerTemplate("syntax-highlighted", 
+    codeInput.templates.hljs(
+      hljs, 
+      [
+        new codeInput.plugins.Autodetect(), 
+        new codeInput.plugins.Indent()
+      ]
+    )
+  );
+</script>
+```
+
+To see a full list of plugins and their functions, please see [plugins/README.md](./plugins/README.md).
+
+### Using the component
+Now that you have registered a template, you can use the custom `<code-input>` element in HTML. If you have more than one template registered, you need to add the template name as the `template` attribute. With the element, using the `lang` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events to make your element as simple or interactive as you like! 
+  ```HTML
+  <code-input lang="HTML"></code-input>
+  ```
+  *or*
+  ```HTML
+  <code-input lang="HTML" placeholder="Type code here" value="<a href='https://github.com/WebCoder49/code-input'>code-input</a>" template="syntax-highlighted" onchange="console.log('Your code is', this.value)"></code-input>
+  ```
+</details>
+
+## Contributing
+If you have any features you would like to add to `code-input`, or have found any bugs, please [open an issue](https://github.com/WebCoder49/code-input/issues) or [fork and submit a pull request](https://github.com/WebCoder49/code-input/fork)! All contributions to this open-source project would be greatly appreciated.

package/code-input.css

@@ -0,0 +1,100 @@
+/* Code-Input Compatibility */
+/* By WebCoder49 */
+/* First Published on CSS-Tricks.com */
+
+
+code-input {
+  /* Allow other elems to be inside */
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+  /* Only scroll inside elems */
+  overflow: hidden;
+
+  /* Normal inline styles */
+  padding: 8px;
+  margin: 0!important;
+  width: calc(100% - 16px);
+  height: 250px;
+  font-size: normal;
+  font-family: monospace;
+  line-height: 1.5; /* Inherited to child elements */
+  tab-size: 2;
+  caret-color: darkgrey;
+  white-space: pre;
+}
+
+code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
+  /* Both elements need the same text and space styling so they are directly on top of each other */
+  margin: 0px!important;
+  padding: var(--padding, 16px)!important;
+  border: 0;
+  width: calc(100% - var(--padding, 16px) * 2);
+  height: calc(100% - var(--padding, 16px) * 2);
+}
+code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
+  /* Remove all margin and padding from others */
+  margin: 0px!important;
+  padding: 0px!important;
+  width: 100%;
+  height: 100%;
+}
+
+code-input textarea, code-input pre, code-input pre * {
+  /* Also add text styles to highlighing tokens */
+  font-size: inherit!important;
+  font-family: inherit!important;
+  line-height: inherit!important;
+  tab-size: inherit!important;
+}
+
+
+code-input textarea, code-input pre {
+  /* In the same place */
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+
+/* Move the textarea in front of the result */
+
+code-input textarea {
+  z-index: 1;
+}
+code-input pre {
+  z-index: 0;
+}
+
+
+/* Make textarea almost completely transparent */
+
+code-input textarea {
+  color: transparent;
+  background: transparent;
+  caret-color: inherit!important; /* Or choose your favourite color */
+}
+
+/* Can be scrolled */
+code-input textarea, code-input pre {
+  overflow: auto!important;
+
+  white-space: inherit;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+}
+
+/* No resize on textarea; stop outline */
+code-input textarea {
+  resize: none;
+  outline: none!important;
+}
+
+code-input:not(.code-input_registered)::before {
+  /* Display message to register */
+  content: "Use codeInput.registerTemplate to set up.";
+  display: block;
+  color: grey;
+}

package/code-input.js

@@ -0,0 +1,422 @@
+// CodeInput
+// by WebCoder49
+// Based on a CSS-Tricks Post
+
+var codeInput = {
+    observedAttributes: [ // Doesn't include events, as they are transferred by overriding {add/remove}EventListener
+        "value", 
+        "name",
+        "placeholder", 
+        "lang", 
+        "template"
+    ],
+    // Attributes to monitor - needs to be global and static
+    
+    /* Templates */
+    usedTemplates: {
+    },
+    defaultTemplate: undefined,
+    templateQueue: {}, // lists of elements for each unrecognised template
+    
+    /* Plugins */
+    plugins: { // Import a plugin from the plugins folder and it will be saved here.
+    },
+    Plugin: class {
+        constructor() {
+            console.log("code-input: plugin: Created plugin!");
+            
+            // Add attributes
+            codeInput.observedAttributes = codeInput.observedAttributes.concat(self.observedAttributes);
+        }
+
+        /* Runs before code is highlighted; Params: codeInput element) */
+        beforeHighlight(codeInput) {}
+        /* Runs after code is highlighted; Params: codeInput element) */
+        afterHighlight(codeInput) {}
+        /* Runs before elements are added into a `code-input`; Params: codeInput element) */
+        beforeElementsAdded(codeInput) {}
+        /* Runs after elements are added into a `code-input` (useful for adding events to the textarea); Params: codeInput element) */
+        afterElementsAdded(codeInput) {}
+        /* Runs when an attribute of a `code-input` is changed (you must add the attribute name to observedAttributes); Params: codeInput element, name attribute name, oldValue previous value of attribute, newValue changed value of attribute) */
+        attributeChanged(codeInput, name, oldValue, newValue) {}
+        observedAttributes = []
+    },
+    
+    /* Main */
+    CodeInput: class extends HTMLElement { // Create code input element
+        constructor() {
+            super(); // Element
+        }
+
+        bound_callbacks = {}; // Callback without this context > Callback with forced codeInput elem this
+
+        /* Run this event in all plugins with a optional list of arguments */
+        plugin_evt(id, args) {
+            // Run the event `id` in each plugin
+            for (let i in this.template.plugins) {
+                let plugin = this.template.plugins[i];
+                if (id in plugin) {
+                    if(args === undefined) {
+                        plugin[id](this);
+                    } else {
+                        plugin[id](this, ...args);
+                    }
+                }
+            }
+        }
+
+         /* Syntax-highlighting functions */
+         update(text) {
+            // Prevent this from running multiple times on the same input when "value" attribute is changed, 
+            // by not running when value is already equal to the input of this (implying update has already
+            // been run). Thank you to peterprvy for this. 
+            if(this.ignoreValueUpdate) return;
+            
+            this.ignoreValueUpdate = true;
+            this.value = text; // Change value attribute if necessary.
+            this.ignoreValueUpdate = false;
+            if(this.querySelector("textarea").value != text) this.querySelector("textarea").value = text;  
+
+
+            let result_element = this.querySelector("pre code");
+    
+            // Handle final newlines (see article)
+            if (text[text.length - 1] == "\n") {
+                text += " ";
+            }
+
+            // Update code
+            result_element.innerHTML = this.escape_html(text);
+            this.plugin_evt("beforeHighlight");
+
+            // Syntax Highlight
+            if(this.template.includeCodeInputInHighlightFunc) this.template.highlight(result_element, this);
+            else this.template.highlight(result_element);
+           
+            this.plugin_evt("afterHighlight");
+        }
+
+        sync_scroll() {
+            /* Scroll result to scroll coords of event - sync with textarea */
+            let input_element = this.querySelector("textarea");
+            let result_element = this.template.preElementStyled ? this.querySelector("pre") : this.querySelector("pre code");
+            // Get and set x and y
+            result_element.scrollTop = input_element.scrollTop;
+            result_element.scrollLeft = input_element.scrollLeft;
+        }
+
+        escape_html(text) {
+            return text.replace(new RegExp("&", "g"), "&amp;").replace(new RegExp("<", "g"), "&lt;"); /* Global RegExp */
+        }
+
+        /* Get the template for this element or add to the unrecognised template queue. */
+        get_template() {
+            // Get name of template
+            let template_name;
+            if(this.getAttribute("template") == undefined) {
+                // Default
+                template_name = codeInput.defaultTemplate;
+            } else {
+                template_name = this.getAttribute("template");
+            }
+            // Get template
+            if(template_name in codeInput.usedTemplates) {
+                return codeInput.usedTemplates[template_name];
+            } else {
+                // Doesn't exist - add to queue
+                if( !(template_name in codeInput.templateQueue)) {
+                    codeInput.templateQueue[template_name] = [];
+                }
+                codeInput.templateQueue[template_name].push(this);
+                return undefined;
+            }
+            codeInput.usedTemplates[codeInput.defaultTemplate]
+        }
+        /* Set up element when a template is added */
+        setup() {
+            this.classList.add("code-input_registered"); // Remove register message
+            if(this.template.preElementStyled) this.classList.add("code-input_pre-element-styled");
+
+            this.plugin_evt("beforeElementsAdded");
+
+            /* Defaults */
+            let lang = this.getAttribute("lang");
+            let placeholder = this.getAttribute("placeholder") || this.getAttribute("lang") || "";
+            let value = this.value || this.innerHTML || "";
+    
+            this.innerHTML = ""; // Clear Content
+    
+            /* Create Textarea */
+            let textarea = document.createElement("textarea");
+            textarea.placeholder = placeholder;
+            textarea.value = value;
+            textarea.setAttribute("spellcheck", "false");
+    
+            if (this.getAttribute("name")) {
+                textarea.setAttribute("name", this.getAttribute("name")); // for use in forms
+            }
+    
+            textarea.addEventListener('input',(evt) => { textarea.parentElement.update(textarea.value); textarea.parentElement.sync_scroll();});
+            textarea.addEventListener('scroll',(evt) =>  textarea.parentElement.sync_scroll());
+            this.append(textarea);
+
+            /* Create pre code */
+            let code = document.createElement("code");
+            let pre = document.createElement("pre");
+            pre.setAttribute("aria-hidden", "true"); // Hide for screen readers
+            pre.append(code);
+            this.append(pre);
+
+            if(this.template.isCode) {
+                if(lang != undefined && lang != "") {
+                    code.classList.add("language-" + lang);
+                }
+            }
+            
+            this.plugin_evt("afterElementsAdded");
+
+            /* Add code from value attribute - useful for loading from backend */
+            this.update(value, this);
+        }
+        
+        /* Callbacks */
+        connectedCallback() {
+            // Added to document
+            this.template = this.get_template();
+            if(this.template != undefined) this.setup();
+        }
+        static get observedAttributes() {         
+            return codeInput.observedAttributes;
+        }
+        
+        attributeChangedCallback(name, oldValue, newValue) {
+            if(this.isConnected) {
+                // This will sometimes be called before the element has been created, so trying to update an attribute causes an error.
+                // Thanks to Kevin Loughead for pointing this out.
+                
+                this.plugin_evt("attributeChanged", [name, oldValue, newValue]); // Plugin event
+                switch (name) {
+    
+                    case "value":
+                        this.update(newValue);
+                        break;
+
+                    case "name":
+                        if(this.querySelector("textarea") !== null) {
+                            this.querySelector("textarea").setAttribute("name", newValue); // for use in forms
+                        }
+                        break;
+        
+                    case "placeholder":
+                        this.querySelector("textarea").placeholder = newValue;
+                        break;
+                    case "template":
+                        this.template = codeInput.usedTemplates[newValue || codeInput.defaultTemplate];
+                        if(this.template.preElementStyled) this.classList.add("code-input_pre-element-styled");
+                        else this.classList.remove("code-input_pre-element-styled");
+                        // Syntax Highlight
+                        this.update(this.value);
+
+                        break;
+    
+                    case "lang":
+
+                        let code = this.querySelector("pre code");
+                        let main_textarea = this.querySelector("textarea");
+                        
+                        // Check not already updated
+                        if(newValue != null) {
+                            newValue = newValue.toLowerCase();
+                        
+                            if(code.classList.contains(`language-${newValue}`)) break; // Already updated
+                        }
+                        
+
+                        // Case insensitive
+                        oldValue = oldValue.toLowerCase();
+    
+                        // Remove old language class and add new
+                        console.log("code-input: Language: REMOVE", "language-" + oldValue);
+                        code.classList.remove("language-" + oldValue); // From CODE
+                        code.parentElement.classList.remove("language-" + oldValue); // From PRE
+                        code.classList.remove("language-none"); // Prism
+                        code.parentElement.classList.remove("language-none"); // Prism
+                        
+                        if(newValue != undefined && newValue != "") {
+                            code.classList.add("language-" + newValue);
+                            console.log("code-input: Language:ADD", "language-" + newValue);
+                        }
+                        
+                        if(main_textarea.placeholder == oldValue) main_textarea.placeholder = newValue;
+    
+                        this.update(this.value);
+
+                        break;
+                }
+            }
+            
+        }
+
+        // /* Transfer an event by name from this to an inner element. */
+        // transfer_event(evt_name, transfer_to, oldValue, newValue) {
+        //     if(oldValue) { // Remove old listener
+        //         transfer_to.removeEventListener(evt_name, this.last_events[evt_name]);
+        //     }
+        //     if(newValue) {
+        //         this.last_events[evt_name] = this[`on${evt_name}`].bind(this);
+        //         transfer_to.addEventListener(evt_name, this.last_events[evt_name]);
+        //         this.removeEventListener(evt_name, newValue);
+        //     }
+        // }
+
+        /* Override addEventListener so event listener added to necessary child. Returns callback bound to code-input element as `this` */
+        addEventListener(evt_name, callback, thirdParameter=null) {
+            let boundCallback = callback.bind(this);
+            this.bound_callbacks[callback] = boundCallback;
+            if(evt_name == "change") {
+                if(thirdParameter === null) {
+                    this.querySelector("textarea").addEventListener("change", boundCallback);
+                } else {
+                    this.querySelector("textarea").addEventListener("change", boundCallback, thirdParameter);
+                }
+            } else if(evt_name == "selectionchange") {
+                if(thirdParameter === null) {
+                    this.querySelector("textarea").addEventListener("selectionchange", boundCallback);
+                } else {
+                    this.querySelector("textarea").addEventListener("selectionchange", boundCallback, thirdParameter);
+                }
+            }
+        }
+
+        /* Override removeEventListener so event listener removed from necessary child */
+        removeEventListener(evt_name, callback, thirdParameter=null) {
+            let boundCallback = this.bound_callbacks[callback];
+            if(evt_name == "change") {
+                if(thirdParameter === null) {
+                    this.querySelector("textarea").removeEventListener("change", boundCallback);
+                } else {
+                    this.querySelector("textarea").removeEventListener("change", boundCallback, thirdParameter);
+                }
+            } else if(evt_name == "selectionchange") {
+                if(thirdParameter === null) {
+                    this.querySelector("textarea").removeEventListener("selectionchange", boundCallback);
+                } else {
+                    this.querySelector("textarea").removeEventListener("selectionchange", boundCallback, thirdParameter);
+                }
+            }
+        }
+
+        /* Value attribute */
+        get value() {
+            return this.getAttribute("value");
+        }
+        set value(val) {
+            return this.setAttribute("value", val);
+        }
+        /* Placeholder attribute */
+        get placeholder() {
+            return this.getAttribute("placeholder");
+        }
+        set placeholder(val) {
+            return this.setAttribute("placeholder", val);
+        }
+
+        pluginData = {}; // For plugins to store element-specific data under their name, e.g. <code-input>.pluginData.specialChars
+    },
+    
+    registerTemplate: function(template_name, template) {
+        // Set default class
+        codeInput.usedTemplates[template_name] = template;
+        // Add elements w/ template from queue
+        if(template_name in codeInput.templateQueue) {
+            for(let i in codeInput.templateQueue[template_name]) {
+                elem = codeInput.templateQueue[template_name][i];
+                elem.template = template;
+                elem.setup();
+            }
+            console.log(`code-input: template: Added existing elements with template ${template_name}`);
+        }
+        if(codeInput.defaultTemplate == undefined) {
+            codeInput.defaultTemplate = template_name;
+            // Add elements w/ default template from queue
+            if(undefined in codeInput.templateQueue) {
+                for(let i in codeInput.templateQueue[undefined]) {
+                    elem = codeInput.templateQueue[undefined][i];
+                    elem.template = template;
+                    elem.setup();
+                }
+            }
+            console.log(`code-input: template: Set template ${template_name} as default`);
+        }
+        console.log(`code-input: template: Created template ${template_name}`);
+    },
+    templates: {
+        custom(highlight=function() {}, preElementStyled=true, isCode=true, includeCodeInputInHighlightFunc=false, plugins=[]) {
+            return {
+                highlight: highlight, 
+                includeCodeInputInHighlightFunc: includeCodeInputInHighlightFunc,
+                preElementStyled: preElementStyled,
+                isCode: isCode,
+                plugins: plugins,
+            };
+        },
+        prism(prism, plugins=[]) { // Dependency: Prism.js (https://prismjs.com/)
+            return {
+                includeCodeInputInHighlightFunc: false,
+                highlight: prism.highlightElement, 
+                preElementStyled: true,
+                isCode: true,
+                plugins: plugins,
+            };
+        },
+        hljs(hljs, plugins=[]) { // Dependency: Highlight.js (https://highlightjs.org/)
+            return {
+                includeCodeInputInHighlightFunc: false,
+                highlight: hljs.highlightElement, 
+                preElementStyled: false,
+                isCode: true,
+                plugins: plugins,
+            };
+        },
+        characterLimit() {
+            return {
+                highlight: function(result_element, code_input, plugins=[]) {
+
+                    let character_limit = Number(code_input.getAttribute("data-character-limit"));
+
+                    let normal_characters = code_input.escape_html(code_input.value.slice(0, character_limit));
+                    let overflow_characters = code_input.escape_html(code_input.value.slice(character_limit));
+                    
+                    result_element.innerHTML = `${normal_characters}<mark class="overflow">${overflow_characters}</mark>`;
+                    if(overflow_characters.length > 0) {
+                        result_element.innerHTML += ` <mark class="overflow-msg">${code_input.getAttribute("data-overflow-msg") || "(Character limit reached)"}</mark>`;
+                    }
+                },
+                includeCodeInputInHighlightFunc: true,
+                preElementStyled: true,
+                isCode: false,
+                plugins: plugins,
+            }
+        },
+        rainbowText(rainbow_colors=["red", "orangered", "orange", "goldenrod", "gold", "green", "darkgreen", "navy", "blue",  "magenta"], delimiter="", plugins=[]) {
+            return {
+                highlight: function(result_element, code_input) {
+                    let html_result = [];
+                    let sections = code_input.value.split(code_input.template.delimiter);
+                    for (let i = 0; i < sections.length; i++) {
+                        html_result.push(`<span style="color: ${code_input.template.rainbow_colors[i % code_input.template.rainbow_colors.length]}">${code_input.escape_html(sections[i])}</span>`);
+                    }
+                    result_element.innerHTML = html_result.join(code_input.template.delimiter);
+                },
+                includeCodeInputInHighlightFunc: true,
+                preElementStyled: true,
+                isCode: false,
+                rainbow_colors: rainbow_colors,
+                delimiter: delimiter,
+                plugins: plugins,
+            }
+        }
+    }
+}
+
+customElements.define("code-input", codeInput.CodeInput); // Set tag