Table Insert Dialog Block for React

So you can see it without a click. On load the picker is a copy drawn in place under the drawn Table tool: a native dialog element with no scrim, so nothing is trapped or focused and the page beside it keeps working. The Insert table button opens the real picker as a non-modal Popover that hangs from the button (Escape closes it and focus goes back to the button), and the copy stays closed until a reload. Both show the same SizePicker component and share the block's state. In your app anchor the Popover to your editor's own Table button and drop the copy: the "in-place" state and the dialog element beside the toolbar.

The grid has one tab stop, the cell at the corner of the selection. Right and Down move the focus, and the selection with it, one cell further out, so the table grows; Left and Up bring it back; Home and End go to the first and last column of the row. The size is said in a polite message each time, "5 columns x 3 rows", and Enter on a cell inserts that size. The grid is never mirrored in a right-to-left layout: columns are counted from the start of the row as the arrows show them.

Every cell is a real button with a name, so a screen reader hears "Row 3, column 5" and a switch device can press any size. The selected rectangle is tinted and its corner is solid, so the size reads by shape and by the words under the grid, never by colour alone. On a phone the cells are about thirty-six pixels wide and the picker docks to the foot of the frame.

It draws a table with the chosen number of columns and rows at the cursor in the page behind, with a styled first row when Header row is on, says so in a polite message and closes the picker. Inserting again replaces the drawn table. Nothing is inserted anywhere else: the table lives in this tab, and the last size you chose is the next one the picker opens on.

Call your editor's own command from place, with the columns, the rows and whether the first row is a header, and let the editor draw the table. Keep the grid, its keys and the words as they are; change MAX if your editor allows more than eight.

Yes. The picker is named Insert a table, focus starts on the selected cell, and Escape closes it and returns focus to the header button. The trigger is passed to PopoverTrigger through render, and the popover is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it closes it and puts focus on the header button.