Add no-JavaScript fallback (Fixes #134)

Author: WebCoder49

README.md

@@ -122,13 +122,13 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
 To see a full list of plugins and their functions, please see [plugins/README.md](./plugins/README.md).
 
 ### 4. 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 `language` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events, as well as CSS styles, to make your element as simple or interactive as you like, as if it were a `textarea` element! 
+Now that you have registered a template, you can use the custom `<code-input>` element in HTML. I recommend it surrounds a fallback `<textarea code-input-fallback>` element which will be used instead when JavaScript support is absent, and will pass its attributes to the `<code-input>` element otherwise, as shown below. If you have more than one template registered, you need to add the template name as the `template` attribute. With the element, using the `language` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events, as well as CSS styles, to make your element as simple or interactive as you like, as if it were a `textarea` element! 
   ```HTML
-  <code-input language="HTML"></code-input>
+  <code-input language="HTML"><textarea code-input-fallback></textarea></code-input>
   ```
   *or*
   ```HTML
-  <code-input language="HTML" placeholder="Type code here" template="syntax-highlighted" onchange="console.log('Your code is', this.value)">&lt; href='https://github.com/WebCoder49/code-input'>code-input&lt;/a></code-input>
+  <code-input language="HTML" template="syntax-highlighted" onchange="console.log('Your code is', this.value)"><textarea code-input-fallback placeholder="Type code here">&lt; href='https://github.com/WebCoder49/code-input'>code-input&lt;/a></textarea></code-input>
   ```
 
 > ⚠️ At the moment, you need to set the `--padding` property rather than `padding` for a `code-input` element's CSS. All other properties should work as normal.

code-input.css

@@ -12,6 +12,9 @@ code-input {
   top: 0;
   left: 0;
 
+  color: black;
+  background-color: white;
+
   /* Normal inline styles */
   margin: 8px;
   --padding: 16px;
@@ -90,7 +93,7 @@ code-input textarea, code-input pre {
 
 /* Move the textarea in front of the result */
 
-code-input textarea {
+code-input textarea:not([code-input-fallback]) {
   z-index: 1;
 }
 code-input pre {
@@ -99,7 +102,7 @@ code-input pre {
 
 /* Make textarea almost completely transparent, except for caret and placeholder */
 
-code-input textarea {
+code-input textarea:not([code-input-fallback]) {
   color: transparent;
   background: transparent;
   caret-color: inherit!important; /* Or choose your favourite color */
@@ -122,7 +125,7 @@ code-input textarea {
   outline: none!important;
 }
 code-input:has(textarea:focus):not(.code-input_mouse-focused) {
-  outline: 2px solid black;
+  outline: 2px solid currentColor;
 }
 
 /* Before registering give a hint about how to register. */
@@ -134,19 +137,30 @@ code-input:not(.code-input_registered) {
 
 code-input:not(.code-input_registered)::after {
   /* Display message to register */
-  content: "Use codeInput.registerTemplate to set up.";
+  content: "No-JavaScript fallback. For highlighting and plugins: as a user use a newer browser/enable JavaScript support; as a developer use codeInput.registerTemplate.";
   display: block;
   position: absolute;
-  bottom: var(--padding, 16px);
+  bottom: 0;
   left: var(--padding, 16px);
   width: calc(100% - 2 * var(--padding, 16px));
+  overflow-x: auto;
 
-  border-top: 1px solid grey;
-  outline: var(--padding, 16px) solid white;
-  background-color: white;
+  border-top: 1px solid currentColor;
+  outline-top: 0;
+  background-color: inherit;
+  color: inherit;
+
+  margin: 0;
+  padding: 0;
+  height: 2em;
+}
+
+code-input:not(.code-input_registered) textarea {
+  /* Don't overlap with message */
+  min-height: calc(100% - var(--padding, 16px) * 2 - 2em);
 }
 
-code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea {
+code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea:not([code-input-fallback]) {
   opacity: 0;
 }
 
@@ -203,19 +217,28 @@ code-input:has(pre[dir=rtl]) .code-input_dialog-container .code-input_keyboard-n
   right: 0;
 }
 
-code-input:not(:has(textarea:focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions,
+code-input:not(:has(textarea:not([code-input-fallback]):focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions,
 code-input.code-input_mouse-focused .code-input_dialog-container .code-input_keyboard-navigation-instructions,
 code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions:empty {
   /* When not keyboard-focused / no instructions don't show instructions */
   display: none;
 }
 
 /* Things with padding when instructions are present */
-code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) textarea,
-code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
-code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused) textarea,
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
   padding-top: calc(var(--padding, 16px) + 3em)!important;
 }
-code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) textarea, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused) textarea, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
   min-height: calc(100% - var(--padding, 16px) * 2 - 3em);
 }
+
+/* No JavaScript fallback - styles to override all previous */
+
+code-input textarea[code-input-fallback] {
+  overflow: auto;
+  background-color: inherit;
+  color: inherit;
+  height: max-content;
+}

code-input.js

@@ -605,16 +605,34 @@ var codeInput = {
 
             this.pluginEvt("beforeElementsAdded");
 
+            const fallbackTextarea = this.querySelector("textarea[code-input-fallback]");
+            let value;
+            if(fallbackTextarea) {
+                // Fallback textarea exists
+                // Sync attributes; existing code-input attributes take priority
+                let textareaAttributeNames = fallbackTextarea.getAttributeNames();
+                for(let i = 0; i < textareaAttributeNames.length; i++) {
+                    const attr = textareaAttributeNames[i];
+                    if(!this.hasAttribute(attr)) {
+                        this.setAttribute(attr, fallbackTextarea.getAttribute(attr));
+                    }
+                }
+                // Sync value
+                value = fallbackTextarea.value;
+            } else {
+                value = this.unescapeHtml(this.innerHTML);
+            }
+            value = value || this.getAttribute("value") || "";
+
             // First-time attribute sync
-            let lang = this.getAttribute("language") || this.getAttribute("lang");
-            let placeholder = this.getAttribute("placeholder") || this.getAttribute("language") || this.getAttribute("lang") || "";
-            let value = this.unescapeHtml(this.innerHTML) || this.getAttribute("value") || "";
-            // Value attribute deprecated, but included for compatibility
+            const lang = this.getAttribute("language") || this.getAttribute("lang");
+            const placeholder = this.getAttribute("placeholder") || lang || "";
+
 
             this.initialValue = value; // For form reset
 
             // Create textarea
-            let textarea = document.createElement("textarea");
+            const textarea = document.createElement("textarea");
             textarea.placeholder = placeholder;
             if(value != "") {
                 textarea.value = value;

tests/hljs.html

@@ -42,14 +42,14 @@ <h4><a href="prism.html">Test for Prism.js</a></h4>
 
     <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!");
+        <code-input><textarea code-input-fallback name="q">console.log("Hello, World!");
 // A second line
-// A third line with &lt;html> tags</code-input>
+// A third line with &lt;html> tags</textarea></code-input>
         <input type="submit" value="Search Google For Code"/>
     </form>
 
     <script>
         beginTest(true);
     </script>
 </body>
-</html>
+</html>

tests/i18n.html

@@ -48,14 +48,14 @@
     <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>
+        <code-input dir="rtl" template="prism" language="markdown"><textarea code-input-fallback placeholder="prism rtl"></textarea></code-input>
+        <code-input dir="ltr" template="prism" language="markdown"><textarea code-input-fallback placeholder="prism ltr"></textarea></code-input>
+        <code-input dir="rtl" template="hljs" language="markdown"><textarea code-input-fallback placeholder="hljs rtl"></textarea></code-input>
+        <code-input dir="ltr" template="hljs" language="markdown"><textarea code-input-fallback placeholder="hljs ltr"></textarea></code-input>
+        <code-input dir="rtl" template="prism+" language="markdown" class="line-numbers"><textarea code-input-fallback placeholder="prism rtl"></textarea></code-input>
+        <code-input dir="ltr" template="prism+" language="markdown" class="line-numbers"><textarea code-input-fallback placeholder="prism ltr"></textarea></code-input>
+        <code-input dir="rtl" template="hljs+" language="markdown"><textarea code-input-fallback placeholder="hljs rtl"></textarea></code-input>
+        <code-input dir="ltr" template="hljs+" language="markdown"><textarea code-input-fallback placeholder="hljs ltr"></textarea></code-input>
 
         <script>
             codeInput.registerTemplate("hljs", codeInput.templates.hljs(hljs, []));

tests/prism.html

@@ -41,9 +41,9 @@ <h4><a href="hljs.html">Test for highlight.js</a></h4>
 
     <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!");
+        <code-input><textarea code-input-fallback name="q">console.log("Hello, World!");
 // A second line
-// A third line with &lt;html> tags</code-input>
+// A third line with &lt;html> tags</textarea></code-input>
         <input type="submit" value="Search Google For Code"/>
     </form>