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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant