Table Editing Playground

An interactive React editor surface that focuses on creating and manipulating tables with contextual UI and themeable styling.

Capabilities

Table creation with headers

• Clicking the "Insert 3x3 (header)" control inserts a 3x3 table with a header row and places the caret in the first data cell @test
• Inserting a table while text is selected replaces the selection with the new table and leaves surrounding paragraphs unchanged @test

Row and column mutations

• Activating "Add row above" while a cell is focused inserts a new body row before the current row without altering header cells @test
• Activating "Add column right" while a cell is focused inserts a column after the current column and preserves existing cell content order @test

Contextual table UI

• Table-specific UI overlays (cell menu plus delete controls) render only when the editor is editable and the selection is inside a table; toggling read-only hides them while leaving the table visible @test
• Using the delete control removes the entire table node and leaves a single empty paragraph placeholder @test

Theme toggling for table tooling

• Switching between "light" and "dark" theme options recolors table headers and control buttons via a shared theme provider without remounting the editor @test
• Providing a custom accent color applies that color to header backgrounds and the focused cell outline @test

Implementation

@generates

API

export interface TablePlaygroundProps {
  initialContent?: object;
  defaultTheme?: 'light' | 'dark';
  accentColor?: string;
  onDocChange?(docJson: object): void;
}

export function TablePlayground(props: TablePlaygroundProps): JSX.Element;

Dependencies { .dependencies }

@remirror/react { .dependency }

Provides the React editor primitives, table UI surface, command hooks, and theming utilities needed to implement the table controls.