We're excited to announce the release of version 2.29, packed with new features, fixes, and improvements that elevate the user experience. One of the standout enhancements is the revamped Tab key functionality, aligning it more closely with the behavior of native inputs.
Previously, there was a problem when you were using Editor.js as a part of a form containing other inputs — there was no ability to navigate between form elements via Tab since this key was historically used in the editor for opening a Toolbox.
A notable change in this release is the alteration of the key for opening the Toolbox. Instead of using the Tab key, the Toolbox is now accessed with the Slash ('/') key when the block is empty. This adjustment ensures a more consistent and user-friendly experience, aligning with common user expectations. And the
⌘+/ shortcut now opens a Block Tunes.
Tab now takes on a more intuitive role by smoothly navigating through blocks. Users will find this enhancement especially helpful, as it emulates the familiar behavior of the Tab key in native input fields. Additionally, in the last block, the Tab conveniently navigates to the next input on the page, which was previously impossible.
The Inline Toolbar now opens in a more visually appealing and functionally sound manner, aligning itself with the left side of the selected text. This improvement prevents overflow on the right side of the text column and ensures a more polished appearance.
Editor.js now supports the
style.nonce attribute in the Editor Config. This attribute can be utilized to allowlist the editor style tag for Content Security Policy "style-src," contributing to a more secure integration of Editor.js into various web environments.
This attribute allows plugin developers to make "silent" DOM mutations that won't lead the
onChange call. Previously you should mark all added/removed/changed nodes with it. Since 2.29 you can add a parent of changed nodes with
data-mutation-free — all mutations of subtree will be ignored.
The whole changelog
NewEditor Config now has the
style.nonceattribute that could be used to allowlist editor style tag for Content Security Policy "style-src"
NewToolbox now will be opened by '/' in an empty Block instead of Tab
NewBlock Tunes now will be opened by 'CMD+/' instead of Tab in a non-empty block
NewTab now will navigate through Blocks. In the last block, the Tab will navigate to the next input on the page.
FixPassing an empty array via initial data or
blocks.render()won't break the editor
FixLayout did not shrink when a large document cleared in Chrome
FixMultiple Tooltip elements creation fixed
FixWhen the focusing Block is out of the viewport, the page will be scrolled.
FixCompiler error "This import is never used as a value and must use 'import type'..." fixed
blocks.render()won't lead the
onChangecall in Safari
FixEditor wrapper element growing on the Inline Toolbar close
FixFix errors thrown by clicks on a document when the editor is being initialized
FixCaret losing on Mobile Devices when adding a block via Toolbox or via Backspace at the beginning of a Block
ImprovementNow you can set focus via arrows/Tab to "contentless" (decorative) blocks like Delimiter which have no inputs.
ImprovementThe Inline Toolbar sometimes opens in an incorrect position. Now it will be aligned by the left side of the selected text. And won't overflow the right side of the text column.
data-mutation-freesupports deep nesting, so you can mark some element with it to prevent the onChange call caused by a child element mutating
data-mutation-freealso allows skipping characterData mutations (eg. text content change)
ce-block--focusedclass toggling was removed as unused.
We already started working on the next version. The most significant changes — are the new Cross-Block caret navigation and the next part of the Toolbox update. Also, we're planning to rebuild the Editor.js Digest for news about Editor and its ecosystem. Right now you can subscribe to us on X: @codex_team