InlineToolbar implementation#153
Open
gohabereg wants to merge 4 commits into
Open
Conversation
Unit Tests
Mutation Tests
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the inline formatting UX to be popover-driven: the InlineToolbar UI now renders an @editorjs/ui-kit PopoverInline, and inline tools provide toolbar/menu items via a new getToolbarConfig() API. It also expands selection/formatting APIs to support explicit caret indices, user attribution, and keeping/restoring selection.
Changes:
- Replaced InlineToolbar’s button list/actions rendering with a
PopoverInlinebuilt from each inline tool’sgetToolbarConfig()output. - Updated SDK/core selection APIs to accept optional
caretIndex,userId,action, andkeepSelection, and addedSelectionAPI.caretIndex. - Introduced shared
MenuConfigtypes (SDK) and updated internal inline tools (bold/italic/link) to provide toolbar config items.
Reviewed changes
Copilot reviewed 26 out of 26 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/src/InlineToolbar/InlineToolbar.ts | Builds and positions a PopoverInline from available inline tools’ toolbar configs. |
| packages/ui/src/InlineToolbar/InlineToolbar.module.pcss | Updates inline toolbar positioning styles and adds input styling for inline-tool UI. |
| packages/sdk/src/entities/InlineTool.ts | Replaces renderActions with required getToolbarConfig() and updates constructor typing. |
| packages/sdk/src/entities/MenuConfig.ts | Adds menu config typings (wrapping ui-kit popover item types) and exports them from SDK entities. |
| packages/core/src/components/SelectionManager.ts | Expands inline tool application API (caret index/user/action/keepSelection) and selection exposure. |
| packages/core/src/tools/internal/inline-tools/link/index.ts | Migrates Link tool to popover-based config (icon + HTML child input) and updated data format. |
| packages/core/src/tools/ToolsManager.ts / ToolsFactory.ts / packages/core/src/index.ts | Introduces an EditorAPI factory to avoid circular deps when constructing tools and plugins. |
| packages/sdk/src/api/SelectionAPI.ts + packages/core/src/api/SelectionAPI.ts | Aligns Selection API surface with new apply options and exposes caret index. |
| packages/dom-adapters/src/utils/useSelectionChange.ts | Avoids processing selectionchange events coming from native input elements. |
| packages/model/src/.../FormattingAction.ts | Adds None action and fixes enum formatting. |
| packages/core/src/components/SelectionManager.spec.ts + packages/core/src/api/SelectionAPI.spec.ts | Updates tests to match renamed/changed selection APIs (coverage still incomplete for new options). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+207
to
+214
| } else { | ||
| caret?.update( | ||
| new IndexBuilder() | ||
| .from(caretIndex) | ||
| .addTextRange([caretIndex.textRange![1], caretIndex.textRange![1]]) | ||
| .build() | ||
| ); | ||
| } |
Comment on lines
+259
to
+263
| const rect = range.getBoundingClientRect(); | ||
| const holderRect = this.#config.holder.getBoundingClientRect(); | ||
|
|
||
| this.#nodes.holder.style.top = `${rect.top}px`; | ||
| this.#nodes.holder.style.left = `${rect.left}px`; | ||
| this.#nodes.holder.style.zIndex = '1000'; | ||
| } | ||
|
|
||
| /** | ||
| * Renders the list of available inline tools in the Inline Toolbar | ||
| * @param tools - Inline Tools available for the current selection | ||
| * @param textRange - current selection text range | ||
| * @param fragments - inline fragments for the current selection | ||
| */ | ||
| #updateToolsList(tools: Map<InlineToolName, InlineTool>, textRange: TextRange, fragments: InlineFragment[]): void { | ||
| this.#nodes.buttons.innerHTML = ''; | ||
|
|
||
| Array.from(tools.entries()).forEach(([name, tool]) => { | ||
| const button = make('button'); | ||
|
|
||
| button.textContent = name; | ||
|
|
||
| const isActive = tool.isActive(textRange, fragments.filter((fragment: InlineFragment) => fragment.tool === name)); | ||
|
|
||
| if (isActive) { | ||
| button.style.fontWeight = 'bold'; | ||
| } | ||
| const newPosition = { | ||
| /** |
Comment on lines
+116
to
+135
| onOpen: (close: (parent?: boolean) => void): void => { | ||
| const caretIndex = this.#api.selection.caretIndex; | ||
|
|
||
| linkInput.addEventListener('keydown', (event: KeyboardEvent) => { | ||
| if (event.key === 'Enter') { | ||
| event.preventDefault(); | ||
| event.stopImmediatePropagation(); | ||
|
|
||
| close(true); | ||
|
|
||
| this.#api.selection.applyInlineTool({ | ||
| tool: LinkInlineTool.name, | ||
| data: { href: linkInput.value }, | ||
| caretIndex: caretIndex!, | ||
| /** @todo Replace link instead of applying the formatting again. Needs to be implemented in the model */ | ||
| action: isActive ? FormattingAction.None : FormattingAction.Format, | ||
| keepSelection: false, | ||
| }); | ||
| } | ||
| }); |
Member
Author
There was a problem hiding this comment.
Input is destroyed every time popover is closed
Comment on lines
215
to
+238
| @@ -234,7 +235,7 @@ describe('SelectionManager', () => { | |||
| jest.spyOn(model, 'getCaret').mockReturnValue({ index: indexMock } as unknown as ReturnType<typeof model.getCaret>); | |||
|
|
|||
| expect(() => { | |||
| selectionManager.applyInlineToolForCurrentSelection('bold' as InlineToolName); | |||
| selectionManager.applyInlineTool({ toolName: 'bold' as InlineToolName }); | |||
Comment on lines
+141
to
+142
| /** If true, Manager will restore the selection after applying the tool. True by defulat */ | ||
| keepSelection?: boolean; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Still lots to do — left several @todo across the code.
Need to update the test cases for changed functions
getToolbarConfigmethod