Skip to content

Conversation

@MizarNevelli
Copy link

@MizarNevelli MizarNevelli commented Jul 25, 2025

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: #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 MizarNevelli force-pushed the feature/issue2897-inline-toolbar-alignment branch from e6d1c18 to 8b1235b Compare July 25, 2025 14:08
@MizarNevelli MizarNevelli force-pushed the feature/issue2897-inline-toolbar-alignment branch from b65408a to 3a8ba8e Compare July 25, 2025 14:16
@neSpecc
Copy link
Member

neSpecc commented Oct 13, 2025

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

@neSpecc
Copy link
Member

neSpecc commented Oct 13, 2025

It does not look like an Editor root level option

@MizarNevelli
Copy link
Author

@neSpecc ok, I saw this issue: #2897 and probably I misunderstood the request 😓

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants