Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
62 commits
Select commit Hold shift + click to select a range
92da817
Add plugin support for Cmd on Macs rather than Ctrl (optional)
WebCoder49 Nov 7, 2025
3cc7431
Correct FindAndReplace/GoToLine dialog caret color (Fixes #203)
WebCoder49 Nov 7, 2025
ef78342
Auto Minify JS and CSS files
WebCoder49 Nov 7, 2025
e6df781
Use new website demo links
WebCoder49 Nov 15, 2025
c063195
Add note about README animation
WebCoder49 Nov 15, 2025
b822318
Document recommended Ctrl/Cmd interoperability for FindAndReplace and…
WebCoder49 Nov 7, 2025
488cf6e
Finish deciding, testing and documenting Ctrl/Cmd difference (Fixes #…
WebCoder49 Nov 15, 2025
50ceb49
Merge pull request #204 from WebCoder49/ctrl-cmd-keys
WebCoder49 Nov 15, 2025
0892ce5
Auto Minify JS and CSS files
WebCoder49 Nov 15, 2025
2794ffa
Make security advice clearer, more consistent, and add it to the README
WebCoder49 Nov 15, 2025
b2eb248
Clarify find and replace uses Ctrl/Cmd+F but only Ctrl+H in plugin demo
WebCoder49 Nov 15, 2025
15eab99
Release v2.7.2
WebCoder49 Nov 15, 2025
fdb2c26
Fix link to website in docs directory
WebCoder49 Nov 15, 2025
6737d3c
Remove redundant block styling of code-input element since display: g…
WebCoder49 Nov 29, 2025
fea11e3
Work in Progress (nearly complete; needs docs and testing): Add autog…
WebCoder49 Nov 30, 2025
37fdd10
Create first try at CSS-driven autogrow, which works on Firefox but d…
WebCoder49 Nov 30, 2025
d873327
Fix and clean core color-syncing code (Fixes #208, #207)
WebCoder49 Dec 7, 2025
f3c02d6
Merge pull request #209 from WebCoder49/remove-transition-unset
WebCoder49 Dec 7, 2025
b760a16
Auto Minify JS and CSS files
WebCoder49 Dec 7, 2025
ef0d117
Fix typos and wording, refer to Codeberg as well as GitHub, don't be …
WebCoder49 Dec 7, 2025
4a04e4e
Add Codeberg link to README
WebCoder49 Dec 7, 2025
b21b075
Release v2.7.3
WebCoder49 Dec 7, 2025
0c62fb4
Improve contrast in README badges
WebCoder49 Dec 7, 2025
8436c2d
Fix typos and omissions in referring to Codeberg as well as GitHub, a…
WebCoder49 Dec 8, 2025
085f5b5
Add almost-perfect (#211) cross-browser Autogrow plugin (fixes #206);…
WebCoder49 Dec 10, 2025
0bbaaef
Add final compatibility (fixes #211) for autogrow plugin; Fully tested
WebCoder49 Dec 11, 2025
443c121
Merge branch 'main' into autogrow
WebCoder49 Dec 11, 2025
1c3a9ea
Merge pull request #212 from WebCoder49/autogrow
WebCoder49 Dec 11, 2025
7240d51
Auto Minify JS and CSS files
WebCoder49 Dec 11, 2025
be73529
Correct autogrow to dialog so only grows to dialog, never shrinks
WebCoder49 Dec 11, 2025
21220dd
Auto Minify JS and CSS files
WebCoder49 Dec 11, 2025
2d5a22e
Document minimum sizes to contain FindAndReplace/GoToLine dialogs (fi…
WebCoder49 Dec 11, 2025
a9b716c
Release v2.8.0
WebCoder49 Dec 11, 2025
8bba333
Correct playground ID for Autogrow demo
WebCoder49 Dec 11, 2025
1673c54
Fix typo in styling docs (Fixes #215)
WebCoder49 Dec 12, 2025
619b138
Add fallback textarea to all plugin demos (Fixes #214)
WebCoder49 Dec 12, 2025
6061890
Document keyboard shortcut browser interception (#201)
WebCoder49 Dec 12, 2025
9ca3a13
Make fallback textarea size correctly with autogrow plugin (Fixes #213)
WebCoder49 Jan 21, 2026
8f22a2b
Merge pull request #217 from WebCoder49/autogrow-fallback-textarea
WebCoder49 Jan 21, 2026
b240aeb
Auto Minify JS and CSS files
WebCoder49 Jan 21, 2026
877e596
Release v2.8.1
WebCoder49 Jan 21, 2026
996a0e9
Remove error style from FindAndReplace and GoToLine dialogs when they…
WebCoder49 Mar 17, 2026
b4dca53
Improve contrast for FindAndReplace and GoToLine dialog error styles …
WebCoder49 Mar 17, 2026
05b31cb
Merge pull request #221 from WebCoder49/plugin-dialog-error-styles
WebCoder49 Mar 17, 2026
6a1b02e
Auto Minify JS and CSS files
WebCoder49 Mar 17, 2026
5b694d0
Remove console.logs accidentally left from testing
WebCoder49 Mar 17, 2026
ffe146b
Auto Minify JS and CSS files
WebCoder49 Mar 17, 2026
5b5ce49
Remove anticipatory Codeberg message because code-input.js is now on …
WebCoder49 Mar 17, 2026
d24192e
Document usage with SPA libraries like Turbo (Fixes #219)
WebCoder49 Mar 17, 2026
cf58991
Release v2.8.2
WebCoder49 Mar 17, 2026
d35e605
Ensure fallback textarea doesn't overlap with unregistered notice (Fi…
WebCoder49 Jun 30, 2026
90e78f4
Add more tests for fallback textarea and load (Fixes #216) (#99)
WebCoder49 Jun 30, 2026
26c1ffd
Fix typo in docs
WebCoder49 Jun 30, 2026
28e1f99
Update copyright year
WebCoder49 Jun 30, 2026
d27af35
Add test Autocomplete: Popup Clickable (Closes #174)
WebCoder49 Jul 1, 2026
9c94cea
Document a case of bold text misalignment (#130)
WebCoder49 Jul 1, 2026
be05d00
Merge pull request #225 from WebCoder49/tests-and-docs
WebCoder49 Jul 1, 2026
352744d
Auto Minify JS and CSS files
WebCoder49 Jul 1, 2026
86f00b9
Fix bugs and add test for language attribute (Fixes #228)
WebCoder49 Jul 2, 2026
9eb33b6
Merge pull request #229 from WebCoder49/multiple-attributes-changed
WebCoder49 Jul 2, 2026
652ef88
Auto Minify JS and CSS files
WebCoder49 Jul 2, 2026
2d1be3d
Release v2.8.3
WebCoder49 Jul 3, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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!

Expand Down
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -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
Expand Down
8 changes: 6 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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)|
|---|
Expand Down
7 changes: 2 additions & 5 deletions SECURITY.md
Original file line number Diff line number Diff line change
@@ -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.
15 changes: 8 additions & 7 deletions code-input.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 *) {
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
}
21 changes: 12 additions & 9 deletions code-input.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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?: {
Expand All @@ -159,7 +160,8 @@ export namespace plugins {
replaceAction?: string;
replaceAllActionShort?: string;
replaceAllAction?: string
}
},
alwaysCtrl?: boolean
);
/**
* Show a find-and-replace dialog.
Expand All @@ -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,
Expand All @@ -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.
Expand Down
Loading
Loading