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!)

2.2.0

This version was accidentally released with some bugs, which have been fixed in version 2.2.1. Click here to find the patched version.

2.1.0

🆕 What's in this release?

• The indent plugin now works with spaces as well as tabs - see examples in README.md / the plugins folder. #62
• The cursor now remains visible by making the element auto-scroll, even with the indent plugin enabled. #61

🎉 Thank you to @Ziqi-Yang for pointing out the cursor visibility bug! If you have any feature ideas, or have found bugs, please let us know through the CONTRIBUTING.md guidelines!

If you have the time and knowledge to write the code yourself in a pull request that would also be amazing but is not at all necessary.

2.0.3

Bug Fix

What's Changed

• Fix HTML attributes like disabled so they can be synchronised with the textarea element. (Issue #59)

🎉 Thanks to @vcdomith for their issue about the bug above! As always, if you find any bugs or want any more features in code-input as a plugin, please open an Issue or submit your code in a Pull Request. This library is completely fuelled by the open-source community 🚀 .

Full Changelog: v2.0.1...v2.0.3

2.0.2

This version was released with a bug. Please click to see v2.0.3 for a working release.

2.0.1

🆕 What's in this release?

This is a major release, with several aims:

1. ⌨️ Make <code-input> work more like a <textarea>, including more HTML form compatibility (demo) - thank you especially to @vanowm
2. 🧹 Add TypeScript support - please see WebCoder49/code-input-for-typescript
3. 🎉 Keep adding optional plugins from the open-source community - please see plugins/README.md

(+bug fix for template not registering bug)

🔌 API Changes

⚠️ This section is only useful for library users transferring their code-input version from v1.<something> to v2.<something>. If you're a new user, please see the README file; otherwise, please click.

In order to carry out significant progress with the library, and in order to make the code cleaner, some changes have been made to how you should use the library. Methods from versions 1.* still exist, but are deprecated so will not be improved.

General Changes

Reason	Old Usage	New Usage
To match <textarea> elements	<code-input> value attribute for text content	<code-input> inner HTML for text content (see README for usage)
More intuitive for object-oriented programming and TypeScript	codeInput.templates.custom(...)	new codeInput.Template(...)
Clean, consistent code	codeInput.templates.character_limit()	codeInput.templates.characterLimit()
Clean, consistent code	codeInput.templates.rainbow_text(...)	codeInput.templates.rainbowText(...)

More Technical/Less-Used Changes

(click to view if you are building a code-input plugin or coming across bugs)

Reason	Old Usage	New Usage
Remove unnecessary function calls	<code-input element>.querySelector("textarea")	<code-input element>.textareaElement
Remove unnecessary function calls	<code-input element>.querySelector("pre")	<code-input element>.preElement
Remove unnecessary function calls	<code-input element>.querySelector("pre code")	<code-input element>.codeElement
More flexibility and fewer bugs when creating plugins	Plugin.observedAttributes = ["attrib1", "attrib2"]	In constructor of plugin: super(["attrib1", "attrib2"])
More flexibility when creating plugins	All observed attributes detected exactly	* symbol represents wilcard = any piece of text (see Test plugin)
Clean, consistent code	Other snake_case functions	camelCase

As always, if you find any bugs or have any ideas for new features, please submit an issue or pull request.

Full Changelog: v1.5.1...v2.0.1

2.0.0

This version was released with a bug. Please click to see v2.0.1 for a working release.