Add `alignInlineToolbar` option to control inline toolbar alignment
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
alignInlineToolbarto the Editor.js global config ('left' | 'center' | 'right', default'left').
- Adds
- Toolbar Logic:
- Updates the inline toolbar positioning logic to respect the selected alignment.
- Documentation:
- Documents the new option and usage example in
usage.md.
- Documents the new option and usage example in
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!
I think, it should be aligned based on the button which is triggered the popover
It does not look like an Editor root level option
@neSpecc ok, I saw this issue: https://github.com/codex-team/editor.js/issues/2897 and probably I misunderstood the request :sweat: