import React, { useEffect, useState } from "react"; import type { AnyExtension } from "remirror"; import { TableExtension } from "@remirror/extension-react-tables"; import { EditorComponent, ReactComponentExtension, Remirror, TableComponents, tableControllerPluginKey, ThemeProvider, useCommands, useRemirror, useRemirrorContext, } from "@remirror/react"; const CommandMenu: React.FC = () => { const { createTable, ...commands } = useCommands(); return (

commands:

); }; 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 (

tableControllerPluginKey.getState(view.state)

        {jsonPluginState}
      

view.state.doc.toJSON()

        {jsonDoc}
      
); }; const Table = ({ children, extensions, }: { children?: React.ReactElement; extensions: () => AnyExtension[]; }): JSX.Element => { const { manager, state } = useRemirror({ extensions }); return ( {children} ); }; const Basic = (): JSX.Element => { return ; }; const defaultExtensions = () => [new ReactComponentExtension(), new TableExtension()]; export default Basic;