Merge branch 'main' into pre-or-code-styled

Author: WebCoder49

README.md

@@ -1,5 +1,7 @@
 # code-input
 
+> **:warning: This document is a work in progress for the next release. [Read latest released instructions.](https://github.com/WebCoder49/code-input/tree/v2.5.1/README.md)**
+
 ![Click to Switch](https://img.shields.io/static/v1?label=&message=Click%20to%20Switch:%20&color=grey&style=for-the-badge)[![GitHub](https://img.shields.io/static/v1?label=&message=GitHub&color=navy&style=for-the-badge&logo=github)](https://github.com/WebCoder49/code-input)[![NPM](https://img.shields.io/static/v1?label=&message=NPM&color=red&style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@webcoder49/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/full/jOypJOx)
@@ -117,18 +119,18 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
 </script>
 ```
 
-> ⚠️ Unfortunately placing multiple plugins of the same type in a template can currently cause errors and undefined behaviour, even if such a configuration makes logical sense. [This is issue #118](https://github.com/WebCoder49/code-input/issues/118) and will be fixed as soon as possible - if you'd like to help and have the time you're welcome, but it's also at the top of the maintainer's To-Do list.
+> ⚠️ Unfortunately placing multiple plugins of the same type in a template can currently cause errors and undefined behaviour, even if such a configuration makes logical sense. [This is issue #118](https://github.com/WebCoder49/code-input/issues/118) ~~and will be fixed as soon as possible - if you'd like to help and have the time you're welcome, but it's also at the top of the maintainer's To-Do list.~~ and should be fixed in major version 3 - right now, I don't believe there's much demand or use, and workarounds are not too complex.
 
 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;
@@ -38,8 +41,8 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
   margin: 0px!important;
   padding: var(--padding, 16px)!important;
   border: 0;
-  min-width: calc(100% - var(--padding) * 2);
-  min-height: calc(100% - var(--padding) * 2);
+  min-width: calc(100% - var(--padding, 16px) * 2);
+  min-height: calc(100% - var(--padding, 16px) * 2);
   box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors; dialogs can be styled as wanted so are excluded. */
   overflow: hidden;
   resize: none;
@@ -58,9 +61,6 @@ code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-el
   margin: 0!important;
   padding: 0!important;
   border: 0!important;
-
-  width: 100%;
-  height: 100%;
 }
 
 code-input textarea, code-input pre, code-input pre * {
@@ -94,7 +94,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 {
@@ -103,7 +103,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 */
@@ -126,7 +126,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. */
@@ -138,19 +138,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);
-  left: var(--padding);
-  width: calc(100% - 2 * var(--padding));
+  bottom: 0;
+  left: var(--padding, 16px);
+  width: calc(100% - 2 * var(--padding, 16px));
+  overflow-x: auto;
 
-  border-top: 1px solid grey;
-  outline: var(--padding) 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_loaded) pre, code-input:not(.code-input_loaded) textarea {
+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:not([code-input-fallback]) {
   opacity: 0;
 }
 
@@ -169,12 +180,16 @@ code-input .code-input_dialog-container {
 
   margin: 0;
   padding: 0;
-  width: 100%;
   height: 0;
+  width: 100%;
 
   /* Dialog boxes' text is based on text-direction */
   text-align: inherit;
 }
+code-input.code-input_pre-element-styled .code-input_dialog-container {
+  width: calc(100% + 2 * var(--padding, 16px) - 2px);
+}
+
 [dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {
   left: unset;
   right: 0;
@@ -203,16 +218,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 {
-  padding-top: calc(var(--padding) + 3em)!important;
+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: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.d.ts

@@ -178,6 +178,11 @@ export namespace plugins {
                 instructionTranslations?: {
                   closeDialog?: string;
                   input?: string;
+                  guidanceFormat?: string;
+                  guidanceLineRange?: (current:Number, max: Number) => string;
+                  guidanceColumnRange?: (line: Number, current: Number, max: Number) => string;
+                  guidanceValidLine?: (line: Number) => string;
+                  guidanceValidColumn?: (line: Number, column: Number) => string;
                 });
     /**
      * Show a search-like dialog prompting line number.

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;