Optimise + add plugins README

Author: WebCoder49

README.md

@@ -84,7 +84,6 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
 <!--...-->
 <script src="plugins/autodetect.js"></script>
 <script src="plugins/indent.js"></script>
-<script src="plugins/autocomplete.js"></script>
 <!--...-->
 <script>
   codeInput.registerTemplate("syntax-highlighted", 
@@ -99,6 +98,8 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
 </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.css

@@ -31,9 +31,17 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
   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;

code-input.js

@@ -68,15 +68,14 @@ var codeInput = {
 
          /* Syntax-highlighting functions */
          update(text) {
-            console.log("Update", text);
-
             // Prevent this from running multiple times on the same input when "value" attribute is changed, 
-            // by saving the value currently updated as _inUpdateNewText. Thank you to peterprvy for this. 
-            if(this.value != text) {
-                this._inUpdateNewText = text;
-                this.value = text; // Change value attribute if necessary.
-                this._inUpdateNewText = undefined;
-            }
+            // 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.value == text) return;
+            
+            console.log("Update", text);
+            
+            this.value = text; // Change value attribute if necessary.
             if(this.querySelector("textarea").value != text) this.querySelector("textarea").value = text;  
 
 
@@ -206,11 +205,7 @@ var codeInput = {
                 switch (name) {
 
                     case "value":
-    
-                        // Update code, only if this text has not already been updated.
-                        if(this._inUpdateNewText === undefined || newValue !== this._inUpdateNewText) {
-                            this.update(newValue); 
-                        }
+                        this.update(newValue);
 
                         break;
 
@@ -227,12 +222,20 @@ var codeInput = {
                         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();
-                        newValue = newValue.toLowerCase();
 
                         // Remove old language class and add new
                         console.log("code-input: Language: REMOVE", "language-" + oldValue);

plugins/README.md

@@ -0,0 +1,45 @@
+# Code-input: Plugins
+## List Of Plugins
+
+### Autocomplete
+Display a popup under the caret using the text in the code-input element. This works well with autocomplete suggestions.
+Files: [autocomplete.js](./autocomplete.js) / [autocomplete.css](./autocomplete.css)
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/xxapjXB)
+### Autodetect
+Autodetect the language live and change the `lang` attribute using the syntax highlighter's autodetect capabilities. Works with highlight.js.
+Files: [autodetect.js](./autodetect.js)
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/eYLyMae)
+### Debounce Update
+Debounce the update and highlighting function ([What is Debouncing?](https://medium.com/@jamischarles/what-is-debouncing-2505c0648ff1))
+Files: [debounce-update.js](./debounce-update.js)
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/GRXyxzV)
+### Indent
+Adds indentation using the `Tab` key, and auto-indents after a newline, as well as making it possible to indent/unindent multiple lines using Tab/Shift+Tab
+Files: [indent.js](./indent.js)
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/WNgdzar)
+### Prism Line Numbers
+Allows code-input elements to be used with the Prism.js line-numbers plugin, as long as the code-input element or a parent element of it has the CSS class `line-numbers`. [Prism.js Plugin Docs](https://prismjs.com/plugins/line-numbers/)
+Files: [prism-line-numbers.css](./prism-line-numbers.css) (NO JS FILE)
+[🚀 *CodePen Demo*](https://codepen.io/WebCoder49/pen/XWPVrWv)
+## Using Plugins
+Plugins allow you to add extra features to a template, like [automatic indentation](./indent.js) or [support for highlight.js's language autodetection](./autodetect.js). To use them, just:
+- Import the plugins' JS/CSS files (there may only be one of these; import all of the files that exist) after you have imported `code-input` and before registering the template.
+- If a JavaScript file is present, Place an instance of each plugin 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>
+```