Skip to content

[WC-3634]: Show the Rich Text table toolbar with the advanced custom toolbar - #2491

Open
samuelreichert wants to merge 2 commits into
mainfrom
fix/rich-text-advanced-table-toolbar
Open

samuelreichert wants to merge 2 commits into
mainfrom
fix/rich-text-advanced-table-toolbar

Conversation

@samuelreichert

Copy link
Copy Markdown
Contributor

Pull request type

Bug fix (non-breaking change which fixes an issue)


Description

With Custom toolbar set to Advanced and a Table item in the advanced groups, the Insert table button appeared, but the table toolbar (Table configuration, Cell configuration, merge/split, …) never showed when the cursor was inside a table. It worked with the Basic custom toolbar and with the presets.

Root cause: buildAdvancedToolbar regroups the configured buttons under generated names (custom-group-N). The toolbar only rendered the table-operations secondary group when a filtered group was named exactly tableBetter, so in Advanced mode it was always filtered out.

Fix: a new getSecondaryToolbarGroups helper in ToolbarConfig.ts includes a secondary group when any button of its parent group is present, matching by button name instead of group name. This works the same for presets, the Basic custom toolbar and the Advanced custom toolbar.

The change was written test-first: the new runtime test for the Advanced toolbar failed before the fix. The package test suite passes (611 tests), and there is a CHANGELOG entry under [Unreleased].

What should be covered while testing?

  1. Set Toolbar to Custom and Custom toolbar to Advanced, and add a Table item to the advanced groups (with or without other items and separators).
  2. Insert a table and put the cursor in a cell. The table toolbar appears.
  3. Move the cursor out of the table. The table toolbar disappears.
  4. Remove the Table item. The table toolbar no longer appears, even inside an existing table.
  5. Check that the Basic custom toolbar (Table enabled) and the Standard/Full presets still show the table toolbar inside a table.

🤖 Generated with Claude Code

@samuelreichert
samuelreichert requested a review from a team as a code owner October 23, 2026 17:21
@github-actions

This comment has been minimized.

r0b1n
r0b1n previously approved these changes Oct 26, 2026
@samuelreichert
samuelreichert force-pushed the fix/rich-text-advanced-table-toolbar branch from 440eadb to b173366 Compare November 3, 2026 11:29
@github-actions

This comment has been minimized.

@github-actions

This comment has been minimized.

samuelreichert and others added 2 commits November 5, 2026 15:55
…oolbar

The advanced custom toolbar regroups buttons under generated group names,
so the table operations toolbar never matched its "tableBetter" parent
group. Match secondary groups by the parent group's buttons instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Show each advanced toolbar item once across all groups, so one click
opens a single picker or dialog. Close the insert table picker and the
inline insert link, image and video dialogs on Escape.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@samuelreichert
samuelreichert force-pushed the fix/rich-text-advanced-table-toolbar branch from 2f6ae33 to f6e4c2f Compare November 5, 2026 14:55
@github-actions

github-actions Bot commented Nov 5, 2026

Copy link
Copy Markdown
Contributor

AI Code Review

✅ Approved — no issues found


What was reviewed

File Change
rich-text-web/CHANGELOG.md Three user-facing "Fixed" entries under [Unreleased]
toolbars/ToolbarConfig.ts New getSecondaryToolbarGroups (matches by button name). buildAdvancedToolbar now de-duplicates buttons across the whole toolbar.
toolbars/Toolbar.tsx Uses getSecondaryToolbarGroups
toolbars/hooks/useDropdown.ts New opt-in closeOnEscape (capture-phase listener, stops propagation)
toolbars/components/DialogShell.tsx, TableGridSelector.tsx Enable closeOnEscape
RichText.runtime.spec.tsx, DialogShell.spec.tsx, ToolbarConfig.spec.ts Tests for the table toolbar, de-duplication and Escape handling

Skipped (out of scope): dist/, pnpm-lock.yaml

CI: pending: Run code quality check, Plan E2E matrix, sigridci · unrelated failures: security/snyk (external scanner)


Positives

  • The fix finds the table toolbar's parent group by button name, so it works for presets, Basic and Advanced custom toolbars.
  • closeOnEscape is opt-in and documented. Popovers that handle Escape themselves are unaffected, and the Escape listener is cleaned up in the effect.
  • Tests cover the Advanced toolbar with and without the Table item, duplicate items, and Escape not reaching the editor. The CHANGELOG entries are user-facing.

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.

3 participants