import React, { useEffect, useState } from "react"; import { TableExtension } from "@remirror/extension-react-tables"; import { EditorComponent, ReactComponentExtension, Remirror, TableComponents, tableControllerPluginKey, ThemeProvider, useCommands, useRemirror, useRemirrorContext, } from "@remirror/react"; import type { AnyExtension } from "remirror"; const CommandMenu: React.FC = () => { const { createTable, ...commands } = useCommands(); return ( <div> <p>commands:</p> <p style={{ display: "flex", flexDirection: "column", justifyItems: "flex-start", alignItems: "flex-start", }} > <button onMouseDown={(event) => event.preventDefault()} data-testid="btn-3-3" onClick={() => createTable({ rowsCount: 3, columnsCount: 3, withHeaderRow: false })} > insert a 3*3 table </button> <button onMouseDown={(event) => event.preventDefault()} data-testid="btn-3-3-headers" onClick={() => createTable({ rowsCount: 3, columnsCount: 3, withHeaderRow: true })} > insert a 3*3 table with headers </button> <button onMouseDown={(event) => event.preventDefault()} data-testid="btn-4-10" onClick={() => createTable({ rowsCount: 10, columnsCount: 4, withHeaderRow: false })} > insert a 4*10 table </button> <button onMouseDown={(event) => event.preventDefault()} data-testid="btn-3-30" onClick={() => createTable({ rowsCount: 30, columnsCount: 3, withHeaderRow: false })} > insert a 3*30 table </button> <button onMouseDown={(event) => event.preventDefault()} data-testid="btn-8-100" onClick={() => createTable({ rowsCount: 100, columnsCount: 8, withHeaderRow: false })} > insert a 8*100 table </button> <button onMouseDown={(event) => event.preventDefault()} onClick={() => commands.addTableColumnAfter()} > add a column after the current one </button> <button onMouseDown={(event) => event.preventDefault()} onClick={() => commands.addTableRowBefore()} > add a row before the current one </button> <button onMouseDown={(event) => event.preventDefault()} onClick={() => commands.deleteTable()} > delete the table </button> </p> </div> ); }; const ProsemirrorDocData: React.FC = () => { const ctx = useRemirrorContext({ autoUpdate: false }); const [jsonPluginState, setJsonPluginState] = useState(""); const [jsonDoc, setJsonDoc] = useState(""); const { addHandler, view } = ctx; useEffect(() => { addHandler("updated", () => { setJsonDoc(JSON.stringify(view.state.doc.toJSON(), null, 2)); const pluginStateValues = tableControllerPluginKey.getState(view.state)?.values; setJsonPluginState( JSON.stringify({ ...pluginStateValues, tableNodeResult: "hidden" }, null, 2) ); }); }, [addHandler, view]); return ( <div> <p>tableControllerPluginKey.getState(view.state)</p> <pre style={{ fontSize: "12px", lineHeight: "12px" }}> <code>{jsonPluginState}</code> </pre> <p>view.state.doc.toJSON()</p> <pre style={{ fontSize: "12px", lineHeight: "12px" }}> <code>{jsonDoc}</code> </pre> </div> ); }; const Table = ({ children, extensions, }: { children?: React.ReactElement; extensions: () => AnyExtension[]; }): JSX.Element => { const { manager, state } = useRemirror({ extensions }); return ( <ThemeProvider> <Remirror manager={manager} initialContent={state}> <EditorComponent /> <TableComponents /> <CommandMenu /> <ProsemirrorDocData /> {children} </Remirror> </ThemeProvider> ); }; const Basic = (): JSX.Element => <Table extensions={defaultExtensions} />; const defaultExtensions = () => [new ReactComponentExtension(), new TableExtension()]; export default Basic;