Merge branch 'main' into autogrow

Author: WebCoder49

CONTRIBUTING.md

@@ -1,10 +1,10 @@
-# Contributing to `code-input`
+# Contributing to `code-input.js`
 
-🎉**Here at `code-input`, contributions of all sizes are more than welcome. Below are some scenarios where you could contribute and how to do so.** Contributions are generally accepted when they help achieve at least one of the aims below, but others will be considered:
+🎉**Here at `code-input.js`, contributions of all sizes are more than welcome. Below are some scenarios where you could contribute and how to do so.** Contributions are generally accepted when they help achieve at least one of the aims below, but others will be considered:
 
-* The `code-input` element should act like a normal HTML `textarea` in all browsers, working with all of the normal attributes, events and other types of behaviour.
-* The `code-input` element should be easy to use with all popular syntax-highlighting libraries.
-* Any modifications of `code-input` that would be useful for the open-source community but are not core to this functionality should be available as optional plugins in the `plugins` folder. Here's where most feature contributions will go.
+* The `code-input.js` element should act like a normal HTML `textarea` in all browsers, working with all of the normal attributes, events and other types of behaviour.
+* The `code-input.js` element should be easy to use with all popular syntax-highlighting libraries.
+* Any modifications of `code-input.js` that would be useful for the open-source community but are not core to this functionality should be available as optional plugins in the `plugins` folder. Here's where most feature contributions will go.
 
 We will generally *not* consider the following contributions:
 * Excess functionality and/or complexity in the main code-input files - these types of contributions should go in the plugin folder instead.
@@ -14,23 +14,23 @@ This said, if you're not sure whether your change will be accepted, please ask i
 
 ---
 
-To keep this community productive and enjoyable, please [don't break our code of conduct](https://github.com/WebCoder49/code-input/blob/main/CODE_OF_CONDUCT.md).
+To keep this community productive and enjoyable, please [don't break our code of conduct](CODE_OF_CONDUCT.md).
 
 ---
 # Ways you could contribute:
-If you don't want to use GitHub, for all of these you can alternatively [get in touch via email so the maintainer can add your contribution for you](mailto:code-input-js@webcoder49.dev).
+If you don't want to use either of Codeberg or GitHub, for all of these you can alternatively [get in touch via email so the maintainer can add your contribution for you](mailto:code-input-js@webcoder49.dev).
 
 ## 1. I've found a bug but don't know how / don't have time to fix it.
-If you think you've found a bug, please [submit an issue](https://github.com/WebCoder49/code-input/issues) with screenshots, how you found the bug, and copies of the console's logs if an error is in them. Please also mention the template and plugins you used (your `codeInput.registerTemplate(...)` snippet). We'd be more than happy to help you fix it. A demo using [CodePen](https://codepen.io/) would be incredibly useful.
+If you think you've found a bug, please submit an issue on [GitHub](https://github.com/WebCoder49/code-input/issues) or [Codeberg](https://codeberg.org/code-input-js/code-input-js/issues), with screenshots, how you found the bug, and copies of the console's logs if an error is in them. Please also mention the template and plugins you used (your `codeInput.registerTemplate(...)` snippet). We'd be more than happy to help you fix it. A piece of code demonstrating your bug would be incredibly useful.
 
 ## 2. I have implemented a feature / have thought of a potential feature for the library and think it could be useful for others.
-The best way to implement a feature is as a plugin like those in the `plugins` folder of `code-input`. If you do this, you could contribute it as in point 3 below.
-Otherwise, if you do not have the time needed / do not want to implement it, any potential plugins would be [welcome as an Issue](https://github.com/WebCoder49/code-input/issues) which specifies the uses and desired characteristics.
+The best way to implement a feature is as a plugin like those in the `plugins` folder of `code-input.js`. If you do this, you could contribute it as in point 3 below.
+Otherwise, if you do not have the time needed / do not want to implement it, any potential plugins would be (on [GitHub](https://github.com/WebCoder49/code-input/issues) or [Codeberg](https://codeberg.org/code-input-js/code-input-js/issues)) which specifies the uses and desired characteristics.
 
 ## 3. I want to contribute code that I need / have seen in the Issues.
 Firstly, thank you for doing this! This is probably the most time consuming way of contributing but is also the most rewarding for both you and me as a maintainer.
 
-Please first open an issue if one doesn't already exist, and assign yourself to it. Then, [make a fork of the repo and submit a pull request](https://docs.github.com/en/get-started/quickstart/contributing-to-projects).
+Please first open an issue if one doesn't already exist, and assign yourself to it. Then, make a fork of the repo and submit a pull request (how-tos by [Codeberg](https://docs.codeberg.org/collaborating/pull-requests-and-git-flow/) and [GitHub](https://docs.github.com/en/get-started/quickstart/contributing-to-projects)).
 
 In the pull request, include the code updates for your feature / bug, and if you're adding a new feature make sure you comment your code so it's understandable to future contributors, and if you can, add unit tests for it in tests/tester.js. If you have any questions, just let me (@WebCoder49) know! 
 

README.md

@@ -1,8 +1,8 @@
 # code-input
 
-![Click to Switch](https://img.shields.io/static/v1?label=&message=Click%20to%20Switch:%20&color=grey&style=for-the-badge)[![Website and Demos](https://img.shields.io/static/v1?label=&message=Website&color=black&style=for-the-badge)](https://code-input-js.org)[![GitHub](https://img.shields.io/static/v1?label=&message=GitHub&color=navy&style=for-the-badge&logo=github)](https://github.com/WebCoder49/code-input)[![Yarn](https://img.shields.io/static/v1?label=&message=Yarn&color=purple&style=for-the-badge&logo=yarn)](https://yarnpkg.com/package?name=@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)
+![Click to Switch](https://img.shields.io/static/v1?label=&message=Click%20to%20Switch:%20&color=grey&style=for-the-badge)[![Website and Demos](https://img.shields.io/static/v1?label=&message=Website&color=444400&style=for-the-badge)](https://code-input-js.org)[![GitHub](https://img.shields.io/static/v1?label=&message=GitHub&color=black&style=for-the-badge&logo=github)](https://github.com/WebCoder49/code-input)[![Codeberg](https://img.shields.io/static/v1?label=&message=Codeberg&color=navy&style=for-the-badge&logo=codeberg)](https://codeberg.org/code-input-js/code-input-js)[![Yarn](https://img.shields.io/static/v1?label=&message=Yarn&color=purple&style=for-the-badge&logo=yarn)](https://yarnpkg.com/package?name=@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 License](https://img.shields.io/github/license/webcoder49/code-input?color=darkgreen&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) 
 > **An editable <textarea> that supports *any* syntax highlighting algorithm, for code or something else. Also, added plugins.**
 > 
 > Aiming to be more flexible, lightweight, modular, progressively enhanced and standards-based than the alternatives, we support HTML forms, the `<textarea>` JavaScript interface, more languages and more use cases.

code-input.d.ts

@@ -135,8 +135,8 @@ export namespace plugins {
   class FindAndReplace extends Plugin {
     /**
      * Create a find-and-replace command plugin to pass into a template. To ensure keyboard shortcuts remain intuitive, set the alwaysCtrl parameter to false.
-     * @param {boolean} useCtrlF Should Ctrl/Cmd+F be overriden for find-and-replace find functionality? Either way, you can also 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? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, true)`.
+     * @param {boolean} useCtrlF Should Ctrl/Cmd+F be overridden for find-and-replace find functionality? Either way, you can also trigger it yourself using (instance of this plugin)`.showPrompt(code-input element, false)`.
+     * @param {boolean} useCtrlH Should Ctrl+H be overridden for find-and-replace replace functionality? Either way, you can also 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.
      * @param {boolean} alwaysCtrl Setting this to false makes the keyboard shortcuts follow the operating system while avoiding clashes (right now: Cmd+F/Ctrl+H on Apple, Ctrl+F/Ctrl+H otherwise.) and is recommended; true forces Ctrl+F/Ctrl+H and is default for backwards compatibility.
      */
@@ -180,7 +180,7 @@ export namespace plugins {
   class GoToLine extends Plugin {
     /**
      * Create a go-to-line command plugin to pass into a template.
-     * @param {boolean} useCtrlG Should Ctrl/Cmd+G be overriden for go-to-line functionality? Either way, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
+     * @param {boolean} useCtrlG Should Ctrl/Cmd+G be overridden for go-to-line functionality? Either way, 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,

code-input.js

@@ -568,13 +568,15 @@ var codeInput = {
 
         /**
          * If the color attribute has been defined on the
-         * code-input element by external code, return true.
+         * code-input element by external code, run the callback
+         * provided.
          * Otherwise, make the aspects the color affects
          * (placeholder and caret colour) be the base colour
-         * of the highlighted text, for best contrast, and
-         * return false.
+         * of the highlighted text, for best contrast.
          */
-        isColorOverridenSyncIfNot() {
+        syncIfColorNotOverridden(callbackIfOverridden=function() {}) {
+            if(this.checkingColorOverridden) return;
+            this.checkingColorOverridden = true;
             const oldTransition = this.style.transition;
             this.style.transition = "unset";
             window.requestAnimationFrame(() => {
@@ -585,20 +587,28 @@ var codeInput = {
                     if(getComputedStyle(this).color == "rgb(255, 255, 255)") {
                         // Definitely not overriden
                         this.internalStyle.removeProperty("--code-input_no-override-color");
+                        console.log(this, "Autoadapt; " + oldTransition);
                         this.style.transition = oldTransition;
 
                         const highlightedTextColor = getComputedStyle(this.getStyledHighlightingElement()).color;
 
                         this.internalStyle.setProperty("--code-input_highlight-text-color", highlightedTextColor);
                         this.internalStyle.setProperty("--code-input_default-caret-color", highlightedTextColor);
-                        return false;
+                        this.checkingColorOverridden = false;
+                    } else {
+                        this.style.transition = oldTransition;
+                        this.checkingColorOverridden = false;
+                        callbackIfOverridden();
                     }
+                } else {
+                    this.style.transition = oldTransition;
+                    this.checkingColorOverridden = false;
+                    callbackIfOverridden();
                 }
                 this.internalStyle.removeProperty("--code-input_no-override-color");
+                console.log(this, "No autoadapt; " + oldTransition);
                 this.style.transition = oldTransition;
             });
-
-            return true;
         }
 
         /**
@@ -610,11 +620,11 @@ var codeInput = {
          */
         syncColorCompletely() {
             // color of code-input element
-            if(this.isColorOverridenSyncIfNot()) {
+            this.syncIfColorNotOverridden(() => {
                 // color overriden
                 this.internalStyle.removeProperty("--code-input_highlight-text-color");
                 this.internalStyle.setProperty("--code-input_default-caret-color", getComputedStyle(this).color);
-            }
+            });
         }
 
 
@@ -860,6 +870,7 @@ var codeInput = {
                 this.syncSize();
             });
             resizeObserver.observe(this);
+          
             // Must resize when this content resizes, for autogrow plugin
             // support.
             resizeObserver.observe(this.preElement);
@@ -868,7 +879,7 @@ var codeInput = {
             // Synchronise colors
             const preColorChangeCallback = (evt) => {
                 if(evt.propertyName == "color") {
-                    this.isColorOverridenSyncIfNot();
+                    this.syncIfColorNotOverridden();
                 }
             };
             this.preElement.addEventListener("transitionend", preColorChangeCallback);

code-input.min.js

@@ -4,16 +4,11 @@ title = 'Flexible Syntax Highlighted Editable Textareas'
 
 # An <mark>editable</mark> `<textarea>` that supports *any* <mark>syntax highlighting</mark> algorithm, for code or something else. [Also, added plugins.](plugins)
 
-Aiming to be [more <mark>flexible</mark>, <mark>lightweight</mark>,
-<mark>modular</mark>,
-<mark>accessible</mark>, <mark>progressively enhanced</mark> and
-<mark>standards-based</mark> than the alternatives](#features), we support
-[HTML forms](interface/forms), the [`<textarea>` JavaScript interface](interface/js), more languages and
-more use cases.
+<code>code-input.js</code> aims to be [more <mark>flexible</mark>, <mark>lightweight</mark>, <mark>modular</mark>, <mark>accessible</mark>, <mark>progressively enhanced</mark> and <mark>standards-based</mark>](#features) than [the alternatives](#alternatives). It supports [HTML forms](interface/forms), the [`<textarea>` JavaScript interface](interface/js), and a wide range of languages (the static syntax highlighter is separate from the editability!) and use cases.
 
 ## Download
 
-*code-input.js is free, libre, open source software under the MIT (AKA Expat) license.* **Download it [from the Git repository](https://github.com/WebCoder49/code-input/tree/v2.7.2), [in a ZIP archive](/release/code-input-js-v2.7.2.zip), [in a TAR.GZ archive](/release/code-input-js-v2.7.2.tar.gz), or from `@webcoder49/code-input` on the NPM registry ([Yarn](https://yarnpkg.com/package?name=@webcoder49/code-input), [NPM](https://npmjs.com/package/@webcoder49/code-input), etc.).**
+*`code-input.js` is free, libre, open source software under the MIT (AKA Expat) license.* You have choices! **Download it from the Git repository on [GitHub](https://github.com/WebCoder49/code-input/tree/v2.7.3) or [Codeberg](https://codeberg.org/code-input-js/code-input-js/), [in a ZIP archive](/release/code-input-js-v2.7.3.zip), [in a TAR.GZ archive](/release/code-input-js-v2.7.3.tar.gz), or from `@webcoder49/code-input` on the NPM registry ([Yarn](https://yarnpkg.com/package?name=@webcoder49/code-input), [NPM](https://npmjs.com/package/@webcoder49/code-input), etc.).**
 
 [Want to contribute to the code? You're very welcome to! See here.](#contributing)
 
@@ -319,7 +314,7 @@ something like [CodeMirror](https://codemirror.net/),
 
 **An even more lightweight, flexible and clean major version 3 is being planned. Please come and participate with your feedback/ideas [on GitHub](https://github.com/WebCoder49/code-input/issues/190) or [via email to code-input-js+v3@webcoder49.dev](mailto:code-input-js+v3@webcoder49.dev)!**
 
-🎉 code-input.js is collaboratively developed by many people, which is what keeps it going strong. Many have reported bugs and suggestions, and [10 people (see them on GitHub)](https://github.com/WebCoder49/code-input/graphs/contributors) have contributed code or documentation directly. If you have found a bug, would like to help with the code or documentation, or have additional suggestions, for plugins or core functionality, [please look at GitHub](https://github.com/WebCoder49/code-input/tree/main/CONTRIBUTING.md) or [get in touch via email so I can add it for you](mailto:code-input-js@webcoder49.dev).
+🎉 code-input.js is collaboratively developed by many people, which is what keeps it going strong. Many have reported bugs and suggestions, and 10 people (see them on [GitHub](https://github.com/WebCoder49/code-input/graphs/contributors) or [Codeberg](https://codeberg.org/code-input-js/code-input-js/activity/contributors)) have contributed code or documentation directly. If you have found a bug, would like to help with the code or documentation, or have additional suggestions, for plugins or core functionality, please look at [GitHub](https://github.com/WebCoder49/code-input/tree/main/CONTRIBUTING.md), at [Codeberg](https://codeberg.org/code-input-js/code-input-js/src/branch/main/CONTRIBUTING.md), or [get in touch via email so I can add it for you](mailto:code-input-js@webcoder49.dev).
 
 **If you find a sensitive security vulnerability in the code-input.js library, please email the maintainer Oliver Geer at [security@webcoder49.dev](mailto:security@webcoder49.dev), optionally using [this encryption key](https://ogeer.org#pgp). GitHub security advisories (different to the more general "issues") are also accepted.**
 

docs/_index.md

@@ -10,7 +10,7 @@ title = '`code-input` vs the `textarea` in JavaScript'
 
 If you want to replace a `textarea` with a `code-input` in an application that doesn't need JavaScript, [look here](../forms). We support HTML5 forms, and progressive enhancement so JavaScript isn't needed!
 
-## The `code-input_load` event {code-input_load}
+## The `code-input_load` event {#code-input_load}
 
 Each `code-input` element fires a `code-input_load` event when it, its template and its plugins have been fully registered. You should carry out initialisation code for `code-input` elements in a handler for this event:
 ```javascript