editor.js icon indicating copy to clipboard operation
editor.js copied to clipboard

Add `alignInlineToolbar` option to control inline toolbar alignment

Open MizarNevelli opened this issue 5 months ago • 3 comments

Overview

This PR introduces a new configuration option, alignInlineToolbar, allowing users to control the horizontal alignment of the Inline Toolbar in Editor.js. The option supports three values: 'left'(default), 'center', and 'right'.

Motivation

I've seen an issue for this here: https://github.com/codex-team/editor.js/issues/2897 Some users may want the inline toolbar to appear left or right aligned with their selection, for better UX in certain layouts or design systems. This feature adds flexibility to Editor.js inline toolbar positioning.

Changes

  • Config:
    • Adds alignInlineToolbar to the Editor.js global config ('left' | 'center' | 'right', default 'left').
  • Toolbar Logic:
    • Updates the inline toolbar positioning logic to respect the selected alignment.
  • Documentation:
    • Documents the new option and usage example in usage.md.

Usage

const editor = new EditorJS({
  alignInlineToolbar: 'right' | 'left' | 'center'
  // ...other config
});

Testing

  • Added e2e cypress tests.
  • Manually tested with all three alignment options.
  • Confirmed that the toolbar aligns left (default), center, and right as expected.

Thank you for reviewing!

MizarNevelli avatar Jul 25 '25 13:07 MizarNevelli

I think, it should be aligned based on the button which is triggered the popover

neSpecc avatar Oct 13 '25 16:10 neSpecc

It does not look like an Editor root level option

neSpecc avatar Oct 13 '25 16:10 neSpecc

@neSpecc ok, I saw this issue: https://github.com/codex-team/editor.js/issues/2897 and probably I misunderstood the request :sweat:

MizarNevelli avatar Oct 14 '25 14:10 MizarNevelli