2.7.1

Bug Fixes

• code-input.js' styles now prevent external CSS setting the overflow property to an unwanted value on the pre element from breaking the appearance. #198
• Documentation improvements, including mentioning major version 3, and fixing autodetect plugin demo
• Testing improvement: separating highlight.js and Prism.js styling to different i18n pages so they do not clash with each other (they are not designed to be used together, whether or not code-input.js is present).

Thanks for this release goes to @figuerom16 who reported the CSS incompatibility. As always, if you find any bug or have any idea for enhancement (for this release or breaking changes for major version 3), please let me know! 🎉

2.7.0

🆕 What's in this release?

• Placeholder and caret colours are no longer hardcoded, but by default adapt to the highlighted theme, making them clearer and especially in light themes reducing the chance of inaccessible contrast (#183):

• Now you can use the color and caret-color CSS properties on code-input elements directly, which will also override the behaviour mentioned above (#182).
• The minification code has been upgraded, fixing a bug it caused with line-number positioning.
• The autocomplete demo code in the docs has been debugged.
• Documentation has been made more thorough.

---

A (belated - sorry for forgetting earlier!) thanks to @ntward, who inspired and gave guidance for the custom color and caret-color support. 💡 If you can, please help advise the future of this library by emailing code-input-js+v3@webcoder49.dev, or commenting on the Major Release v3.0.0 issue! 🎉 As always, general suggestions, bug reports and feature requests are very welcome, to code-input-js@webcoder49.dev or on GitHub.

2.6.8

Bug Fixes

Slightly differently to the previous note, v2.6.8 is some small bug fixes:

• Fix typo in TypeScript declarations
• Remove debugging console.log from code-input.js (fixes #193)
• Add email contribution option to CONTRIBUTING.md (fixes #192)

🎉 As always, if you find bugs please point them out, and if you have feature ideas or bugfixes/contributions let me know! They're more than welcome!

2.6.7

Bug Fix

• The code-input element now supports IDL (JavaScript .onevent) and content (HTML onevent="") attribute event handlers (as well as the already-supported JavaScript addEventListener handlers), and event handlers on the pre-registration fallback element (graceful degradation) - #189

Status update: In-progress fixes to synchronise the caret and placeholder colour with the highlighted result, and thus minimise contrast bugs, are being cleaned of corner-cases, kept lines-of-code-and-time-efficient, and tested to avoid any breaking changes, on the synchronise-caret-color branch. It looks like they'll be released in v2.6.8.

---

💡 If you can, please help advise the future of this library by emailing code-input-js+v3@webcoder49.dev, or commenting on the Major Release v3.0.0 issue! 🎉 As always, general suggestions, bug reports and feature requests are very welcome, to code-input-js@webcoder49.dev or on GitHub.

2.6.6

Bug Fix

• Adding a code-input element to the document after it has loaded (e.g. with JavaScript document.createElement) now works without errors - #184

Thanks so much to @MattiasBuelens for implementing this! As always, contributions to code and documentation, and bug reports/feature requests are more than welcome.

2.6.5

Small Enhancements

• The visible instructions when using keyboard navigation with the indent plugin now display more cleanly and with the same horizontal padding as the code-input element.
• Usage of relative paths to ECMAScript modules is now documented better.
• --padding-left, --padding-right, --padding-top and --padding-bottom CSS variables can now be used on code-input elements as well as --padding (read the docs).
• When a code-input element is registered and the fallback textarea is already being edited, it will retain focus and caret/scroll position for a seamless experience during slow loading.

Bug Fixes

• Functions in the textarea interface work on code-input elements even when the elements are not registered, and eliminating a bug - #179
• Padding is no longer duplicated in unregistered code-input elements with fallback textareas - #181
• More elements in the code-input (keyboard navigation instructions, plugin dialogs) now keep consistent appearance, no matter the global CSS box-sizing.

---

As always, contributions are the fuel of this project, and bug reports, suggestions, documentation contributions and code contributions of any size are more than welcome! Just see the CONTRIBUTING.md file or email code-input-js@webcoder49.dev! 🎉

2.6.4

Bug Fix

• code-input elements now default to having a text-align of start rather than inherit, to be more like both textareas and the pre-internationalisation code-inputs.

2.6.3

Bug Fixes

• Registering a template before using it now works correctly again - #176
• Missing parts of the textarea interface have been implemented on the code-input element
• Security reporting advice has been added to the documentation

2.6.2

🆕 What's in this release?

First up: the new, comprehensive documentation at https://code-input-js.org!

This is a pretty large release giving even more stability and compatibility to the code-input.js library, all the while remaining backwards compatible so upgrading can be as simple as changing a version number (although to make the most of it some other changes are suggested; see below)!

💡 Suggestions for Upgrade

Simple, and strongly suggested, but not required.

1. Add compatibility for less JavaScript support (good even if your app requires some JavaScript): Add <textarea data-code-input-fallback elements inside your code-input elements, then move any attributes that make sense on textarea elements to that textarea. For example:

   <code-input language="javascript" name="code">hello("world");</code-input>

   changes to

   <code-input language="javascript"><textarea name="code">hello("world");</textarea></code-input>

2. If you're currently using code-input in a hacky way inside a modular JavaScript project, read about the clean new recommended way to do so.

In Detail

You don't need to read this, but it may let you know if we've fixed the problem you've found. If not, please submit an issue; I'd be so grateful.

🤘 Improved compatibility and consistency

• Support for ECMAScript Modules and thus Vue, Nuxt and (undocumented for now) other frameworks! ECMAScript Modules are now properly supported by code-input, allowing it to be used in more complex web apps with or without frameworks in a more intuitive way. See the docs. Thanks to @paulrosen for doing a lot of work on this, and @MattiasBuelens and @paulrouget for giving advice on it too!
• Graceful degradation... When no JavaScript or only very basic JavaScript is supported, a fallback textarea element can now be used easily, and will keep working in HTML5 forms with or without CSS. Learn how to set it up using a textarea data-code-input-fallback element..
• Class consistency. As seen in the documentation, all code-input templates can now be created with constructors rather than some using functions, leading to more consistency and better integration with object-oriented JavaScript code.
• Mobile devices. As described below, code-input now works as well on mobile devices as on desktops due to a bugfix!
• More themes. You now have the option to override the preElementStyled attribute for Prism.js/highlight.js templates, which may be necessary for some non-default highlighting themes to work.

🫧 Bugs Cleaned Away

• Core
  • The code-input element no longer refocuses on every keypress, causing equal support for mobile and desktop devices and removing most of the found occasions of glitchy behaviour (e.g. #177, #115). This does re-open #93 until major version 3 where it can be fixed with a breaking change #148 (or fixed at a better level, the browser), but fixes a lot more than it breaks.
  • focus and blur events and the initial value (due to technical limitations) of the tabindex HTML attribute are now handled properly like a textarea in code-input elements. - #162
  • Setting attributes like value on a code-input element will now avoid throwing errors if done before its template is registered.
• Plugins
  • The Autocomplete plugin's popup is now clickable and keyboard navigatable - #174
  • The Autodetect plugin now works with language names that contain hyphens - #103
  • The Autodetect plugin's popup will appear and disappear when arrow keys or the mouse are used to change the caret position, as well as when more code is typed - #151
  • The FindAndReplace and SpecialChars plugins work together when special characters are present - #154
  • The FindAndReplace plugin now scrolls consistently to found matches across all major web browsers - #119
  • The FindAndReplace plugin now makes all newline characters clear within matches - #175
  • An accidentally unlocalised piece of text in the FindAndReplace plugin has been added to the translation system.
  • The GoToLine and FindAndReplace plugins have status messages and focus outlines so they are more accessible for colourblind people, screenreader users, and many others - #159
  • The Indent plugin's indentation removal on newlines works more as expected - #140

Contributing

🎉 Many people who helped with this release are mentioned above, but I would also like to thank @zewt for researching a browser-level bug (not code-input.js-level) that appears to have been now fixed upstream (still planning to track it in case it resurfaces): #127.

As always, contributions in the form of bug reports, feature suggestions and code are more than welcome. What should get a special mention now, however, is the new documentation which accepts contributions too in the docs directory. Start here for all of these.

What Next?

Apart from the usual regular bugfixes and plugin updates, the next release (in the scale of months, rather than sooner, but your contributions can speed it up) is a major version. See issue #148 for the reasoning, and expect more flexibility with plugins and hopefully a slimmer code-input.js codebase.

Full Changelog: v2.6.1...v2.6.2

2.6.1

This release was initially wrongly tagged where the version number was not correct everywhere; please see release 2.6.2.