WebCoder49 · WebCoder49 · Jul 14, 2025 · Jun 19, 2025 · Jun 19, 2025 · Jun 20, 2025
diff --git a/README.md b/README.md
@@ -54,8 +54,8 @@ From JSDelivr CDN (click)
 
 ```html
 <!--In the <head>-->
-<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.3/code-input.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.3/code-input.min.css">
+<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/code-input.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.5/code-input.min.css">
 ```
 </details>
 
@@ -64,12 +64,12 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
 
 - *Highlight.js:*
   ```js
-  codeInput.registerTemplate("syntax-highlighted", codeInput.templates.hljs(hljs, [] /* Array of plugins (see below) */));
+  codeInput.registerTemplate("syntax-highlighted", new 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) */));
+  codeInput.registerTemplate("syntax-highlighted", new codeInput.templates.Prism(Prism, [] /* Array of plugins (see below) */));
   ```
 
 - *Custom:*
@@ -106,7 +106,7 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
 <!--...-->
 <script>
   codeInput.registerTemplate("syntax-highlighted", 
-    codeInput.templates.hljs(
+    new codeInput.templates.Hljs(
       hljs, 
       [
         new codeInput.plugins.Autodetect(), 

diff --git a/code-input.css b/code-input.css
@@ -66,8 +66,23 @@ code-input textarea, code-input pre, code-input pre * {
   font-family: inherit!important;
   line-height: inherit!important;
   tab-size: inherit!important;
+  text-align: inherit!important;
 }
 
+/* Make changing the text direction propogate */
+code-input textarea[dir=auto] + pre {
+  unicode-bidi: plaintext;
+}
+
+code-input textarea[dir=ltr] + pre {
+  direction: ltr;
+}
+
+code-input textarea[dir=rtl] + pre {
+  direction: rtl;
+}
+
+
 code-input textarea, code-input pre {
   /* In the same place */
   grid-column: 1;
@@ -138,37 +153,52 @@ code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) texta
 
 /* Contains dialog boxes that might appear as the result of a plugin.
 Sticks to the top of the code-input element */
+
 code-input .code-input_dialog-container {
   z-index: 2;
 
   position: sticky;
   grid-row: 1;
   grid-column: 1;
 
-  top: 0px;
+  top: 0;
   left: 0;
+
+  margin: 0;
+  padding: 0;
   width: 100%;
   height: 0;
 
-  /* Dialog boxes' text is left-aligned */
-  text-align: left;
+  /* Dialog boxes' text is based on text-direction */
+  text-align: inherit;
 }
+[dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {
+  left: unset;
+  right: 0;
+}
+
 /* Instructions specific to keyboard navigation set by plugins that override Tab functionality. */
 code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions {
   top: 0;
-  right: 0;
+  left: 0;
+
   display: block;
   position: absolute;
   background-color: black;
   color: white;
   padding: 2px;
   padding-left: 10px;
-  text-wrap: pretty;
+  margin: 0;
+  text-wrap: balance;
   overflow: hidden;
   text-overflow: ellipsis;
   width: calc(100% - 12px);
   max-height: 3em;
 }
+code-input:has(pre[dir=rtl]) .code-input_dialog-container .code-input_keyboard-navigation-instructions {
+  left: unset;
+  right: 0;
+}
 
 code-input:not(:has(textarea: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,
@@ -182,4 +212,4 @@ code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(tex
 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;
-}
+}
diff --git a/code-input.d.ts b/code-input.d.ts
@@ -132,14 +132,36 @@ export namespace plugins {
      * 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? If not, you can 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? If not, you can 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);
+    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.CodeInput} codeInputElement the `<code-input>` element.
      * @param {boolean} replacePartExpanded whether the replace part of the find-and-replace dialog should be expanded
      */
-    showPrompt(codeInput: CodeInput, replacePartExpanded: boolean): void;
+    showPrompt(codeInputElement: CodeInput, replacePartExpanded: boolean): void;
   }
 
   /**
@@ -150,8 +172,13 @@ export namespace plugins {
     /**
      * Create a go-to-line command plugin to pass into a template
      * @param {boolean} useCtrlG Should Ctrl+G be overriden for go-to-line functionality? If not, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the English text.
      */
-    constructor(useCtrlG: boolean);
+    constructor(useCtrlG: boolean,
+                instructionTranslations?: {
+                  closeDialog?: string;
+                  input?: string;
+                });
     /**
      * Show a search-like dialog prompting line number.
      * @param {codeInput.CodeInput} codeInput the `<code-input>` element.
@@ -171,8 +198,12 @@ export namespace plugins {
      * @param {Number} numSpaces How many spaces is each tab character worth? Defaults to 4.
      * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}"}. All brackets must only be one character, and this can be left as null to remove bracket-based indentation behaviour.
      * @param {boolean} escTabToChangeFocus Whether pressing the Escape key before (Shift+)Tab should make this keypress focus on a different element (Tab's default behaviour). You should always either enable this or use this plugin's disableTabIndentation and enableTabIndentation methods linked to other keyboard shortcuts, for accessibility.
+     * @param {Object} instructionTranslations: user interface string keys mapped to translated versions for localisation. Look at the go-to-line.js source code for the English text.
      */
-    constructor(defaultSpaces?: boolean, numSpaces?: Number, bracketPairs?: Object, escTabToChangeFocus?: boolean);
+    constructor(defaultSpaces?: boolean, numSpaces?: Number, bracketPairs?: Object, escTabToChangeFocus?: boolean, instructionTranslations?: {
+      tabForIndentation?: string;
+      tabForNavigation?: string;
+    });
   }
 
   /**
@@ -314,17 +345,35 @@ export class Template {
  */
 export namespace templates {
   /**
-   * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
-   * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
-   * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
-   * @returns template object
+   * A template that uses Prism.js syntax highlighting (https://prismjs.com/).
+   */
+  class Prism extends Template {
+    /**
+    * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
+    * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
+    * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
+    * @returns template object
+    */
+    constructor(prism: Object, plugins?: Plugin[])
+  }
+  /**
+   * @deprecated Please use `new codeInput.templates.Prism(...)`
    */
   function prism(prism: Object, plugins?: Plugin[]): Template
   /**
-   * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
-   * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
-   * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
-   * @returns template object
+   * A template that uses highlight.js syntax highlighting (https://highlightjs.org/).
+   */
+  class Hljs extends Template {
+    /**
+    * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
+    * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
+    * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
+    * @returns template object
+    */
+    constructor(hljs: Object, plugins?: Plugin[])
+  }
+  /**
+   * @deprecated Please use `new codeInput.templates.Hljs(...)`
    */
   function hljs(hljs: Object, plugins?: Plugin[]): Template
   /**
@@ -355,4 +404,4 @@ export class CodeInput extends HTMLElement { }
  * @param {string} templateName - the name to register the template under
  * @param {Object} template - a Template object instance - see `codeInput.templates`  
  */
-export function registerTemplate(templateName: string, template: Template): void;
+export function registerTemplate(templateName: string, template: Template): void;
diff --git a/code-input.js b/code-input.js
@@ -222,38 +222,19 @@ var codeInput = {
      * For adding small pieces of functionality, please see `codeInput.plugins`.
      */
     templates: {
+        // (Source code for class templates after var codeInput = ... so they can extend the codeInput.Template class)
         /**
-         * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
-         * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
-         * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
-         * @returns {codeInput.Template} template object
+         * @deprecated Please use `new codeInput.templates.Prism(...)`
          */
         prism(prism, plugins = []) { // Dependency: Prism.js (https://prismjs.com/)
-            return new codeInput.Template(
-                prism.highlightElement, // highlight
-                true, // preElementStyled
-                true, // isCode
-                false, // includeCodeInputInHighlightFunc
-                plugins
-            );
+            return new codeInput.templates.Prism(prism, plugins);
         },
+
         /**
-         * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
-         * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
-         * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
-         * @returns {codeInput.Template} template object
+         * @deprecated Please use `new codeInput.templates.Hljs(...)`
          */
         hljs(hljs, plugins = []) { // Dependency: Highlight.js (https://highlightjs.org/)
-            return new codeInput.Template(
-                function(codeElement) {
-                    codeElement.removeAttribute("data-highlighted");
-                    hljs.highlightElement(codeElement);
-                }, // highlight
-                false, // preElementStyled
-                true, // isCode
-                false, // includeCodeInputInHighlightFunc
-                plugins
-            );
+            return new codeInput.templates.Hljs(hljs, plugins);
         },
 
         /**
@@ -318,7 +299,7 @@ var codeInput = {
         },
 
         /**
-         * @deprecated Please use `new codeInput.Template()`
+         * @deprecated Please use `new codeInput.Template(...)`
          */
         custom(highlight = function () { }, preElementStyled = true, isCode = true, includeCodeInputInHighlightFunc = false, plugins = []) {
             return {
@@ -377,6 +358,17 @@ var codeInput = {
             });
         }
 
+        /**
+         * Replace the keys in destination with any source
+         * @param {Object} destination Where to place the translated strings, already filled with the keys pointing to English strings.
+         * @param {Object} source The same keys, or some of them, mapped to translated strings.
+         */
+        addTranslations(destination, source) {
+            for(const key in source) {
+                destination[key] = source[key];
+            }
+        }
+
         /**
          * Runs before code is highlighted.
          * @param {codeInput.CodeInput} codeInput - The codeInput element
@@ -1047,4 +1039,59 @@ var codeInput = {
     }
 }
 
+{
+    // Templates are defined here after the codeInput variable is set, because they reference it by extending codeInput.Template.
+
+    // ESM-SUPPORT-START-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation!
+    /**
+    * A template that uses Prism.js syntax highlighting (https://prismjs.com/).
+    */
+    class Prism extends codeInput.Template { // Dependency: Prism.js (https://prismjs.com/)
+        /**
+        * Constructor to create a template that uses Prism.js syntax highlighting (https://prismjs.com/)
+        * @param {Object} prism Import Prism.js, then after that import pass the `Prism` object as this parameter.
+        * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
+        * @returns {codeInput.Template} template object
+        */
+        constructor(prism, plugins = []) {
+            super(
+                prism.highlightElement, // highlight
+                true, // preElementStyled
+                true, // isCode
+                false, // includeCodeInputInHighlightFunc
+                plugins
+            );
+        }
+    };
+    // ESM-SUPPORT-END-TEMPLATE-prism Do not (re)move this - it's needed for ESM generation!
+    codeInput.templates.Prism = Prism;
+
+    // ESM-SUPPORT-START-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation!
+    /**
+     * A template that uses highlight.js syntax highlighting (https://highlightjs.org/).
+     */
+    class Hljs extends codeInput.Template { // Dependency: Highlight.js (https://highlightjs.org/)
+        /**
+         * Constructor to create a template that uses highlight.js syntax highlighting (https://highlightjs.org/)
+         * @param {Object} hljs Import highlight.js, then after that import pass the `hljs` object as this parameter.
+         * @param {codeInput.Plugin[]} plugins - An array of plugin objects to add extra features - see `codeInput.plugins`
+         * @returns {codeInput.Template} template object
+         */
+        constructor(hljs, plugins = []) {
+            super(
+                function(codeElement) {
+                    codeElement.removeAttribute("data-highlighted");
+                    hljs.highlightElement(codeElement);
+                }, // highlight
+                false, // preElementStyled
+                true, // isCode
+                false, // includeCodeInputInHighlightFunc
+                plugins
+            );
+        }
+    };
+    // ESM-SUPPORT-END-TEMPLATE-hljs Do not (re)move this - it's needed for ESM generation!
+    codeInput.templates.Hljs = Hljs;
+}
+
 customElements.define("code-input", codeInput.CodeInput);