Reuse shared controls in the rich-text toolbar - #719
Merged
Conversation
Harry19081
marked this pull request as ready for review
August 6, 2026 13:00
Separate pull-request reviews from comments
Keep the GitHub issue composer within reach
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.
Problem
The rich-text formatting toolbar implements custom heading, list, and link popovers with duplicate styling and document-level click handling. It cannot adapt control density or popup direction for compact composers near the bottom of a panel.
Solution
Replace the custom popovers with the shared Dropdown, DropdownPanel, DropdownItem, Input, and Button primitives. Add explicit mini/small toolbar sizing and configurable dropdown placement, preserve controlled open state and ARIA semantics, and remove the superseded popup CSS and global outside-click listener.
Potential risks
Dropdown focus and portal behavior now follow the shared component rather than the editor's bespoke event handler; consumers with unusual containment may need an explicit popup position. Existing defaults preserve small controls and bottom-start placement. Manual keyboard, theme, and narrow-panel evidence is pending, so this PR remains a draft.
Audit
The configured
frontend-ui-auditskill file was unavailable at both documented locations. A direct design-system pass confirmed the custom popover markup is replaced by existing shared controls, semantic roles are retained, portal z-index comes from the dropdown token, and no new arbitrary color values were added.Verification
pnpm exec vitest run src/components/RichTextEditor/FloatingToolbar.test.ts src/components/RichTextEditor/index.test.ts— passed (6 tests).pnpm typecheck— passed.git diff --cached --check— passed before commit.