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.
Meet Slash
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.
Decorative "contentless" blocks like Delimiter now also could be focused using key/tab navigation. Previously a caret was just jumping over them.
Inline Toolbar
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.
CSP
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.
data-mutation-free
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.
Thanks, @bettysteger
The whole changelog
NewEditor Config now has thestyle.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 TabNewBlock Tunes now will be opened by 'CMD+/' instead of Tab in a non-empty blockNewTab 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 orblocks.render()won't break the editorFixLayout did not shrink when a large document cleared in ChromeFixMultiple Tooltip elements creation fixedFixWhen 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'..." fixedFixTheblocks.render()won't lead theonChangecall in SafariFixEditor wrapper element growing on the Inline Toolbar closeFixFix errors thrown by clicks on a document when the editor is being initializedFixCaret losing on Mobile Devices when adding a block via Toolbox or via Backspace at the beginning of a BlockImprovementNow 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.ImprovementNow thedata-mutation-freesupports deep nesting, so you can mark some element with it to prevent the onChange call caused by a child element mutatingImprovementNow thedata-mutation-freealso allows skipping characterData mutations (eg. text content change)RefactoringThece-block--focusedclass toggling was removed as unused.
Upcoming
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