Editor.js 2.30: Inline Toolbar, Placeholders, API

and
8 min read

With this update, we are pleased to announce further enhancements to the Editor's interface, stability, and new features for tool developers.

Inline Toolbar

We have finally completed the Unified Toolbars part of our Roadmap. The latest update includes a complete refresh of the Inline Toolbar code and design. Now, all our toolbars — Toolbox, Block Tunes, Block Conversion, and the Inline Toolbar — have the same appearance and behavior. This enhances the overall UI of the Editor, making it more polished and consistent.

MenuConfig

Many significant updates have been made to the MenuConfig feature, which is used for creating Toolbar buttons.

Available for Inline Tools

Developing your own Inline Tools is now easier than ever. With this update, we have added support for the MenuConfig format to the Inline Toolbar. This allows you to configure the behavior of your tools using a simple configuration instead of custom HTML rendering.

export default class BoldInlineTool implements InlineTool { /** * Specifies Tool as Inline Toolbar Tool * * @returns {boolean} */ public static isInline = true; /** * Create button for Inline Toolbar */ public render(): MenuConfig { return { icon: IconBold, name: 'bold', onActivate: () => { document.execCommand('bold'); }, isActive: () => document.queryCommandState('bold'), }; } }

Custom HTML

Also, it becomes possible to add items with custom HTML content to the MenuConfig. Pass type as "html" and an element you want to display.

Separators

Pass item with the type "separator" to the items list to better organize them logically. 

Hints

Another new feature is that you can pass hints of items

Nesting

You'll be happy to know that it is now possible to display nested items at the menu. Use children property of a MenuConfig item for that.

"Convert To" in Block Tunes

Previously, you could convert a block to a block of another type using the Inline Toolbar. Now, this option is also available via Block Tunes.

Toolbar aligning

Now the Plus Button and Block Tunes toggler are aligned respecting tool's actual baseline and decorative top offset. Take a look at headings:

Before

After

Placeholders

Another cool thing is that placeholder of blocks were rethink.

Persistent placeholders

In the previous version, tool developers had to implement placeholders on their own. However, creating a placeholder for contenteditable elements is a bit tricky because when you delete all the characters, the browser leaves the br-tag inside, causing instability for CSS-only solutions. To simplify tool development, we have implemented a placeholders feature within the Editor.js core.

Now, all you need to do from a tool's side is add the data-placeholder="..." attribute to the contenteditable element. The placeholder will appear when the element is empty.

Active placeholders

The paragraph placeholder will now appear near the current block, not only the first one. This gives helpers like "Write something or type / to select a tool" more sense.

If your tool needs the same behavior, use the data-active-placeholder attribute.

API

A bunch of updates have been made to the API as well.

The whole changelog

  1. New Block Tunes now supports nesting items
  2. New Block Tunes now supports separator items
  3. New MenuConfig now supports a new item type – HTML
  4. New Menu Config — default and HTML items now support hints
  5. New Inline Toolbar has new look 💅
  6. New  Inline Tool's render() now supports Menu Config format
  7. New  All installed block tools now accessible via the getBlockTools() method of ToolsAPI
  8. New The SelectionAPI now exposes methods save() and restore() that allow to save selection to be able to temporally move focus away, methods setFakeBackground() and removeFakeBackground() that allow to immitate selection while focus moved away
  9. New The BlocksAPI exposes the getBlockByElement() method that helps find block by any child html element
  10. New The "Convert to" control is now also available in Block Tunes
  11. New Editor.js now supports contenteditable placeholders out of the box. Just add data-placeholder or data-placeholder-active attribute to make it work. The first one will work like native placeholder while the second one will show placeholder only when block is current.
  12. Improvement Now Paragraph placeholder will be shown for the current paragraph, not only the first one.
  13. Improvement The API blocks.update() now accepts tunes as optional third argument and makes data (block's data) as optional.
  14. Improvement The ability to merge blocks of different types (if both tools provide the conversionConfig)
  15. Improvement The API blocks.convert() now returns the new block API
  16. Improvement The API caret.setToBlock() now can accept either BlockAPI or block index or block id
  17. Impovement The TunesMenuConfig type is deprecated, use the MenuConfig instead
  18. Improvement The BlockToolConstructorOptions type improved, block and config properties are not optional anymore
  19. Improvement The Plus button and Block Tunes toggle are now better aligned with large line-height blocks, such as Headings
  20. Improvement Creating links on Android devices: now the mobile keyboard will have an "Enter" key for accepting the inserted link.
  21. Improvement Placeholders will stay visible on inputs focus.
  22. Refactoring Switched to Vite as Cypress bundler
  23. Fix The  onChange callback will be called when removing the entire text within a descendant element of a block.
  24. Fix Unexpected new line on Enter press with selected block without caret
  25. Fix Search input autofocus loosing after Block Tunes opening
  26. Fix Block removing while Enter press on Block Tunes
  27. Fix Unwanted scroll on first typing on iOS devices
  28. Fix Unwanted soft line break on Enter press after period and space (". |") on iOS devices
  29. Fix Caret lost after block conversion on mobile devices.
  30. Fix Caret lost after Backspace at the start of block when previoius block is not convertable
  31. Fix Deleting whitespaces at the start/end of the block
  32. Fix The problem caused by missed "import type" in block mutation event types resolved

New Editor.js Digest

We've set up the new email digest for Editor.js news, insides, feature overviews, guides, advices and polls. Let's stay in touch.

💌 Subscribe for Editor.js Digest.

If you like the release

If you like this release and want more updates of Editor.js core, API, Tools and ecosystem, support CodeX team with a donation via OpenCollective platform:

Donate to get updates faster

Support Editor.js on OpenCollective

Support Editor.js on Patreon

Why donate

Donations to open-source products have several advantages for your business:

Need something special?

Hire CodeX experts to resolve technical challenges and match your product requirements. 

Contact us via [email protected] with your details.

Thanks everyone. We'll return with the new update in a while.