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