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.

2.6.0

This release contained errors in the DevOps system so didn't get released to the NPM registry correctly; please see release 2.6.2.

2.5.1

Bug Fixes

• Cross-browser compatibility has been improved for the auto-close brackets and indent plugins - #131, #138
• code-input now displays correctly no matter the global CSS box-sizing - #135
• The FindAndReplace and GoToLine plugins' close buttons are now accessible to more screenreaders - #109

Changes to fix existing bugs and reduce the probability of new ones, and ECMAScript Module support to make it easy to bundle code-input and use it with more frameworks, are coming very soon in release 2.6. As always, thanks to all the contributors who give feature requests, code contributions, bug reports etc. - more are always welcome! 🎉

2.5.0

🆕 What's in this release?

• Plugins with user interface text now take a parameter to translate that text into any language, provided you give the translated text. See their JavaScript files or the tests/i18n.html file for how to use it.
• The bug of text direction support is now fixed - right-to-left text should now work in code-input! See the tests/i18n.html file for how to use it. #126

🎉 Thanks to @eyaler for making me aware of the text direction internationalisation issues and writing much of the code to fix it, and to @H4kor for reminding me to update the version numbers in the README file!

I know there are a few outstanding small bugs in some plugins; another release should come relatively soon fixing some of them. Thanks for waiting during my busy period when I couldn't write the code myself, and thanks especially for those who started thinking about / coding solutions!

2.4.0

🆕 What's in this release?

• The Select Token Callbacks plugin: lets you easily add JavaScript callbacks/CSS classes to highlighted tokens whose text is currently selected. #120
  • One of the many uses for this is support for brace pair highlighting, with the Prism.js match-braces plugin. #116

Thanks to @ozonosphere for suggesting this feature which is a vital part of extending code-input's customisability!

2.3.1

Bug Fix

What's Changed

• Handle object type listeners in addEventListener and removeEventListener by @keithjgrant in #114

New Contributors

• @keithjgrant made his first contribution in #114 - thank you so much for the code!

Full Changelog: v2.3.0...v2.3.1

As always, issues and pull requests are the fuel of this project, and contributions of any size through these methods are more than welcome! 🎉

2.3.0

🆕 What's in this release?

Several bug fixes and accessibility improvements.

Thank you to everyone who contributed with issues and sorry for the delay as I have been very busy. I have some improvements to make contributing easier coming soon!

2.2.1

🆕 What's in this release?

Click if you want to upgrade from an earlier release to this one.

1. I've released this as a new minor version as upgrading generally shouldn't break anything, but one change may cause problems if you've added any custom JavaScript to interact with code-input elements. For optimisation reasons, the code-input element now scrolls instead of the textarea/pre code, the pre code element will change size in response to the textarea, and anything that needs to stay fixed relative to the code-input element rather than scrolling (i.e. the dialog boxes shown below) has to be placed inside the (code-input element).dialogContainerElement. Please don't hesitate to contact me (@WebCoder49) if you have problems, as I feel upgrading should generally improve your code-input experience.
2. The lang attribute on code-input elements has been renamed language, so that it does not conflict with the HTML lang global attribute. lang is still supported but is deprecated.

🚀 This release is a big one, with improvements in 2 main areas:

➕ New Features

Go To Line plugin	Auto-Close Brackets plugin	Find And Replace plugin
- line 10, column 23	- with the Indent plugin and Auto-Close Brackets, get this code with fewer keystrokes!	- syntax-highlighter agnostic!

• The Go To Line plugin has been added. Thanks to @andrelsm for writing this code! #66
• The Auto-Close Brackets plugin has been added. #73
• The Find And Replace plugin has been added. #79

For more information, please see plugins/README.md.

🤩 Code Optimisation and Testing

• In the tests folder, there are now unit tests for all of the library's JavaScript plugins as well as its core functionality, that work with both Prism.js and highlight.js. Due to this, the codebase is now more stable, with many bugs fixed in the process, and pull requests in the future should be faster!
• The library has also been optimised, so that despite the new features the core code-input.min.js has actually decreased in size!

---

🥳 Thank you so much to all of the contributors for this release - @andrelsm coded the go to line plugin and gave essential advice for performance optimisation as well as discussing a vital bugfix with @KaiWilke, @SArpnt helped with the nightmare that was browser inconsistency in Ctrl+F, and all 3 of them, @mitchcapper and @Ziqi-Yang returned to give advice on the auto-close brackets plugin.

Your help/suggestions/bugfixes/opinions would be deeply appreciated - to contribute anything please see the CONTRIBUTING.md guidance!

---

(I have spent a while to release this due to the large number of changes: I promise I will try to release versions more regularly in the future, and hopefully the automated tests should stop this from breaking anything!)