Merge pull request #230 from WebCoder49/main

Add recent bugfixes etc. to `breaking-key-events`

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! 
 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-2025 Oliver Geer and contributors
+Copyright (c) 2021-2026 Oliver Geer and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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.
@@ -13,12 +13,16 @@ Demos and usage instructions are available at <https://code-input-js.org> and [t
 
 ---
 
+A lightweight setup like the animation below is still the default for `code-input.js`, but a wide range of plugins are available to modularly and progressively enhance the experience - see [the website](https://code-input-js.org) for interactive demos!
+
 ![Using code-input with many different themes](https://user-images.githubusercontent.com/69071853/133924472-05edde5c-23e7-4350-a41b-5a74d2dc1a9a.gif)
 *This demonstration uses themes from [Prism.js](https://prismjs.com/) and [highlight.js](https://highlightjs.org/), two syntax-highlighting programs which work well with and have compatibility built-in with code-input.*
 
 ## Contributing
 If you have any features you would like to add to `code-input` as plugins or core functionality, or have found any bugs, please [open an issue](https://github.com/WebCoder49/code-input/issues) or [fork and submit a pull request](https://github.com/WebCoder49/code-input/fork)! All contributions to this open-source project will be greatly appreciated. You can see [more info in our `CONTRIBUTING.md` file](CONTRIBUTING.md).
 
+**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.**
+
 
 |[![Contributors](https://contrib.rocks/image?repo=WebCoder49%2Fcode-input)](https://github.com/WebCoder49/code-input/graphs/contributors)|
 |---|

SECURITY.md

@@ -1,6 +1,3 @@
 # Reporting Security Vulnerabilities
-If you find a sensitive security vulnerability
-in the code-input.js library, please
-contact the maintainer Oliver Geer at
-[security@webcoder49.dev](mailto:security@webcoder49.dev),
-after reading [this page with an encryption key](https://oliver.geer.im#email).
+
+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.

code-input.css

@@ -5,15 +5,17 @@
  *
  * License of whole library for bundlers:
  *
- * Copyright 2021-2025 Oliver Geer and contributors
+ * Copyright 2021-2026 Oliver Geer and contributors
  * @license MIT
  *
  * **<https://code-input-js.org>**
  */
 
 code-input {
   /* Allow other elements to be inside */
-  display: block;
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 100%;
   overflow-y: auto;
   overflow-x: auto;
   position: relative;
@@ -46,9 +48,6 @@ code-input {
   tab-size: 2;
   white-space: pre;
   padding: 0!important; /* Use --padding to set the code-input element's padding */
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: 100%;
 }
 
 code-input :not(.code-input_dialog-container *) {
@@ -100,7 +99,7 @@ code-input textarea, code-input pre, code-input pre * {
   tab-size: inherit!important;
   text-align: inherit!important;
 }
-code-input textarea, code-input pre, code-input pre code {
+code-input pre, code-input pre code {
   overflow: visible!important;
 }
 
@@ -285,5 +284,7 @@ code-input textarea[data-code-input-fallback] {
   color: var(--code-input_highlight-text-color, inherit);
 
   /* Don't overlap with message */
-  min-height: calc(100% - var(--padding-top, 16px) - 2em - var(--padding-bottom, 16px));
+  min-height: calc(100% - var(--padding-top, 16px) - max(2em, var(--padding-bottom, 16px)));
+  height: calc(100% - var(--padding-top, 16px) - max(2em, var(--padding-bottom, 16px)));
+  padding-bottom: max(2em, var(--padding-bottom, 16px))!important;
 }

code-input.d.ts

@@ -129,15 +129,16 @@ export namespace plugins {
 
   // ESM-SUPPORT-START-PLUGIN-find-and-replace Do not (re)move this - it's needed for ESM generation
   /**
-   * Add Find-and-Replace (Ctrl+F for find, Ctrl+H for replace by default) functionality to the code editor.
+   * Add Find-and-Replace (Ctrl/Cmd+F for find, Ctrl+H for replace by default) functionality to the code editor.
    * Files: find-and-replace.js / find-and-replace.css
    */
   class FindAndReplace extends Plugin {
     /**
-     * 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? 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)`.
+     * 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 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.
      */
     constructor(useCtrlF?: boolean, useCtrlH?: boolean,
                 instructionTranslations?: {
@@ -159,7 +160,8 @@ export namespace plugins {
                   replaceAction?: string;
                   replaceAllActionShort?: string;
                   replaceAllAction?: string
-                }
+                },
+                alwaysCtrl?: boolean
               );
     /**
      * Show a find-and-replace dialog.
@@ -172,13 +174,13 @@ export namespace plugins {
 
   // ESM-SUPPORT-START-PLUGIN-go-to-line Do not (re)move this - it's needed for ESM generation
   /**
-   * Add basic Go-To-Line (ctrl-G by default) functionality to the code editor.
+   * Add Go-To-Line (Ctrl/Cmd+G by default) functionality to the code editor.
    * Files: go-to-line.js / go-to-line.css
    */
   class GoToLine extends Plugin {
     /**
-     * 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? Either way, you can trigger it yourself using (instance of this plugin)`.showPrompt(code-input element)`.
+     * Create a go-to-line command plugin to pass into a template.
+     * @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,
@@ -190,7 +192,8 @@ export namespace plugins {
                   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.
      * @param {codeInput.CodeInput} codeInput the `<code-input>` element.