Add table menu actions to paste into cell or merge into table

What does this MR do and why?

Restores the ability to embed a copied table inside a single table cell in the rich text editor, which was lost with the multi-cell copy/paste fix in !249528 (merged). Since then, pasting copied cells into a table always merges them into the target table, and there was no way to nest a table inside a cell anymore.

This MR adds two actions to the table bubble menu ("Select action" dropdown):

  • Paste into cell — inserts the clipboard content at the cursor, so a copied table becomes a nested table inside the cell (the previous behavior, on demand)
  • Paste and merge into table — distributes the clipboard cells across the table rows/columns, auto-expanding the table if needed (same as the default Ctrl/Cmd+V behavior)

Keyboard paste behavior is unchanged: it keeps the merge behavior introduced in !249528 (merged).

Implementation details
  • Menu actions run outside a paste event, so there is no event.clipboardData. The new commands read the clipboard via the async Clipboard API (navigator.clipboard.read()), which requires a secure context and prompts the user for clipboard permission on first use.
  • pasteFromClipboardIntoCell feeds the clipboard HTML through the existing pasteContent path, so a <table> in the clipboard is inserted as a nested table at the cursor.
  • pasteFromClipboardIntoTable reuses extractMultiCellTableHTML and delegates to prosemirror-tables' handlePaste (same code path as the keyboard paste); non-table clipboard content falls back to a regular paste.
  • The two menu items are hidden when the Clipboard API is unavailable (canReadClipboard(): insecure context such as plain-HTTP instances, or browsers without clipboard.read() like Firefox < 127), so users are never shown an action that can only fail.
  • Clipboard read failures (e.g. denied permission) emit the existing editor alert.

Considered alternative

A first iteration (commit e631abe0, still in this branch's history) showed a post-paste info alert offering to undo the merge and insert a nested table instead. It was replaced by the menu actions because they are persistent and discoverable rather than a transient alert, and they work before the paste happens instead of repairing it afterwards. Both approaches are shown in the recordings below.

References

Screenshots or screen recordings

Alternative 1: post-paste alert (not chosen) Alternative 2: table menu actions (this MR)

How to set up and validate locally

Note

The async Clipboard API requires a secure context. On GDK over plain HTTP (http://gdk.test:3000), either enable HTTPS, or open chrome://flags/#unsafely-treat-insecure-origin-as-secure, add http://gdk.test:3000, and relaunch Chrome. Without this, the paste actions are hidden by design.

  1. Open the rich text editor (for example, in an issue description or wiki page)
  2. Insert a table and fill some cells
  3. Select multiple cells (click a cell, then shift-click another) and copy (Cmd/Ctrl+C)
  4. Click into a single cell of a table
  5. Open the table's Select action dropdown at the table
  6. Choose Paste into cell — the copied cells are inserted as a nested table inside the cell
  7. Undo, then choose Paste and merge into table — the copied cells are distributed across the table
  8. Verify Cmd/Ctrl+V still merges cells into the table as before
  9. Verify that on a plain-HTTP origin (without the Chrome flag) the two paste actions do not appear in the dropdown

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Vanessa Otto

Merge request reports

Loading
Loading