@mdxeditor/editor 0.8.0 → 0.10.0-alpha.1

package/dist/plugins/sandpack/index.js

@@ -0,0 +1,93 @@
+import React__default from "react";
+import { coreSystem } from "../core/index.js";
+import { codeBlockSystem } from "../codeblock/index.js";
+import { SandpackEditor } from "./SandpackEditor.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const defaultSnippetContent = `
+export default function App() {
+  return (
+    <div className="App">
+      <h1>Hello CodeSandbox</h1>
+      <h2>Start editing to see some magic happen!</h2>
+    </div>
+  );
+}
+`;
+const defaultSandpackConfig = {
+  defaultPreset: "react",
+  presets: [
+    {
+      name: "react",
+      meta: "live react",
+      label: "React",
+      sandpackTemplate: "react",
+      sandpackTheme: "light",
+      snippetFileName: "/App.js",
+      snippetLanguage: "jsx",
+      initialSnippetContent: defaultSnippetContent
+    }
+  ]
+};
+const sandpackSystem = system(
+  (r, [, { insertCodeBlock }]) => {
+    const sandpackConfig = r.node(defaultSandpackConfig);
+    const insertSandpack = r.node();
+    r.link(
+      r.pipe(
+        insertSandpack,
+        r.o.withLatestFrom(sandpackConfig),
+        r.o.map(([presetName, sandpackConfig2]) => {
+          const preset = presetName ? sandpackConfig2.presets.find((preset2) => preset2.name === presetName) : sandpackConfig2.presets.find((preset2) => preset2.name == sandpackConfig2.defaultPreset);
+          if (!preset) {
+            throw new Error(`No sandpack preset found with name ${presetName}`);
+          }
+          return {
+            code: preset.initialSnippetContent || "",
+            language: preset.snippetLanguage || "jsx",
+            meta: preset.meta
+          };
+        })
+      ),
+      insertCodeBlock
+    );
+    return {
+      insertSandpack,
+      sandpackConfig
+    };
+  },
+  [coreSystem, codeBlockSystem]
+);
+const [
+  /** @internal */
+  sandpackPlugin,
+  /** @internal */
+  sandpackPluginHooks
+] = realmPlugin({
+  id: "sandpack",
+  systemSpec: sandpackSystem,
+  applyParamsToSystem(r, params) {
+    r.pubKey("sandpackConfig", params.sandpackConfig);
+  },
+  init(r) {
+    r.pubKey("appendCodeBlockEditorDescriptor", {
+      match(_language, meta) {
+        return meta == null ? void 0 : meta.startsWith("live");
+      },
+      priority: 1,
+      Editor(props) {
+        const [config] = sandpackPluginHooks.useEmitterValues("sandpackConfig");
+        const preset = config.presets.find((preset2) => preset2.meta === props.meta);
+        if (!preset) {
+          throw new Error(`No sandpack preset found with ${props.meta}`);
+        }
+        return /* @__PURE__ */ React__default.createElement(SandpackEditor, { ...props, preset });
+      }
+    });
+  }
+});
+export {
+  sandpackPlugin,
+  sandpackPluginHooks,
+  sandpackSystem
+};

package/dist/plugins/sandpack/useCodeMirrorRef.d.ts

@@ -0,0 +1,4 @@
+import { CodeMirrorRef } from '@codesandbox/sandpack-react/dist/components/CodeEditor/CodeMirror';
+import React from 'react';
+import { VoidEmitter } from '../../utils/voidEmitter';
+export declare function useCodeMirrorRef(nodeKey: string, editorType: 'codeblock' | 'sandpack', language: string, focusEmitter: VoidEmitter): React.RefObject<CodeMirrorRef>;

package/dist/{useCodeMirrorRef-ff0c2781.js → plugins/sandpack/useCodeMirrorRef.js}

@@ -1,15 +1,20 @@
 import { $getNodeByKey, $createParagraphNode } from "lexical";
 import React__default from "react";
-import { u as useEmitterValues, a as usePublisher } from "./index-470693d8.js";
-function useCodeMirrorRef(nodeKey, editorType, language) {
-  const [activeEditor] = useEmitterValues("activeEditor");
-  const setActiveEditorType = usePublisher("activeEditorType");
+import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
+import { corePluginHooks } from "../core/index.js";
+function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
+  const [theEditor] = corePluginHooks.useEmitterValues("activeEditor");
+  const setEditorInFocus = corePluginHooks.usePublisher("editorInFocus");
   const codeMirrorRef = React__default.useRef(null);
+  const { lexicalNode } = useCodeBlockEditorContext();
   const atBottom = React__default.useRef(false);
   const atTop = React__default.useRef(false);
   const onFocusHandler = React__default.useCallback(() => {
-    setActiveEditorType({ type: editorType, nodeKey });
-  }, [nodeKey, setActiveEditorType, editorType]);
+    setEditorInFocus({
+      editorType,
+      rootNode: lexicalNode
+    });
+  }, [editorType, lexicalNode, setEditorInFocus]);
   const onKeyDownHandler = React__default.useCallback(
     (e) => {
       var _a, _b, _c, _d;
@@ -22,7 +27,7 @@ function useCodeMirrorRef(nodeKey, editorType, language) {
             if (!atBottom.current) {
               atBottom.current = true;
             } else {
-              activeEditor == null ? void 0 : activeEditor.update(() => {
+              theEditor == null ? void 0 : theEditor.update(() => {
                 var _a2, _b2;
                 const node = $getNodeByKey(nodeKey);
                 const nextSibling = node.getNextSibling();
@@ -45,7 +50,7 @@ function useCodeMirrorRef(nodeKey, editorType, language) {
             if (!atTop.current) {
               atTop.current = true;
             } else {
-              activeEditor == null ? void 0 : activeEditor.update(() => {
+              theEditor == null ? void 0 : theEditor.update(() => {
                 var _a2, _b2;
                 const node = $getNodeByKey(nodeKey);
                 const previousSibling = node.getPreviousSibling();
@@ -62,7 +67,7 @@ function useCodeMirrorRef(nodeKey, editorType, language) {
         e.stopPropagation();
       }
     },
-    [activeEditor, nodeKey]
+    [theEditor, nodeKey]
   );
   React__default.useEffect(() => {
     const codeMirror = codeMirrorRef.current;
@@ -77,8 +82,15 @@ function useCodeMirrorRef(nodeKey, editorType, language) {
       (_b = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _b.contentDOM.removeEventListener("keydown", onKeyDownHandler);
     };
   }, [codeMirrorRef, onFocusHandler, onKeyDownHandler, language]);
+  React__default.useEffect(() => {
+    focusEmitter.subscribe(() => {
+      var _a, _b;
+      (_b = (_a = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _a.getCodemirror()) == null ? void 0 : _b.focus();
+      onFocusHandler();
+    });
+  }, [focusEmitter, codeMirrorRef, nodeKey, onFocusHandler]);
   return codeMirrorRef;
 }
 export {
-  useCodeMirrorRef as u
+  useCodeMirrorRef
 };

package/dist/plugins/table/LexicalTableVisitor.d.ts

@@ -0,0 +1,4 @@
+import * as Mdast from 'mdast';
+import { TableNode } from './TableNode';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalTableVisitor: LexicalExportVisitor<TableNode, Mdast.Table>;

package/dist/plugins/table/LexicalTableVisitor.js

@@ -0,0 +1,10 @@
+import { $isTableNode } from "./TableNode.js";
+const LexicalTableVisitor = {
+  testLexicalNode: $isTableNode,
+  visitLexicalNode({ actions, mdastParent, lexicalNode }) {
+    actions.appendToParent(mdastParent, lexicalNode.getMdastNode());
+  }
+};
+export {
+  LexicalTableVisitor
+};

package/dist/plugins/table/MdastTableVisitor.d.ts

@@ -0,0 +1,3 @@
+import * as Mdast from 'mdast';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastTableVisitor: MdastImportVisitor<Mdast.Table>;

package/dist/plugins/table/MdastTableVisitor.js

@@ -0,0 +1,10 @@
+import { $createTableNode } from "./TableNode.js";
+const MdastTableVisitor = {
+  testNode: "table",
+  visitNode({ mdastNode, lexicalParent }) {
+    lexicalParent.append($createTableNode(mdastNode));
+  }
+};
+export {
+  MdastTableVisitor
+};

package/dist/plugins/table/TableEditor.d.ts

@@ -0,0 +1,21 @@
+import { LexicalEditor } from 'lexical';
+import * as Mdast from 'mdast';
+import React from 'react';
+import { TableNode } from './TableNode';
+export interface TableEditorProps {
+    parentEditor: LexicalEditor;
+    lexicalTable: TableNode;
+    mdastNode: Mdast.Table;
+}
+export declare const TableEditor: React.FC<TableEditorProps>;
+export interface CellProps {
+    parentEditor: LexicalEditor;
+    lexicalTable: TableNode;
+    contents: Mdast.PhrasingContent[];
+    colIndex: number;
+    rowIndex: number;
+    align?: Mdast.AlignType;
+    activeCell: [number, number] | null;
+    setActiveCell: (cell: [number, number] | null) => void;
+    focus: boolean;
+}

package/dist/{TableEditor-bb94be2b.js → plugins/table/TableEditor.js}

@@ -2,100 +2,30 @@ import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { $createParagraphNode, createEditor, KEY_TAB_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_ENTER_COMMAND, BLUR_COMMAND, $getRoot } from "lexical";
-import * as React from "react";
-import React__default, { useEffect } from "react";
-import { s as styles, u as useEmitterValues, t as theme, i as importMdastTreeToLexical, S as SharedHistoryPlugin, e as exportLexicalTreeToMdast } from "./index-470693d8.js";
-import { toHast } from "mdast-util-to-hast";
-import { raw } from "hast-util-raw";
-import { sanitize } from "hast-util-sanitize";
-import { toHtml } from "hast-util-to-html";
 import * as RadixPopover from "@radix-ui/react-popover";
-import classNames from "classnames";
+import { $createParagraphNode, createEditor, $getRoot, KEY_TAB_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, KEY_ENTER_COMMAND, BLUR_COMMAND } from "lexical";
+import React__default from "react";
+import { lexicalTheme } from "../../styles/lexicalTheme.js";
+import { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
+import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";
+import AddColumnIcon from "../../icons/add_column.svg.js";
+import AddRowIcon from "../../icons/add_row.svg.js";
+import DeleteSmallIcon from "../../icons/delete_small.svg.js";
+import AlignCenterIcon from "../../icons/format_align_center.svg.js";
+import AlignLeftIcon from "../../icons/format_align_left.svg.js";
+import AlignRightIcon from "../../icons/format_align_right.svg.js";
+import InsertColLeftIcon from "../../icons/insert_col_left.svg.js";
+import InsertColRightIcon from "../../icons/insert_col_right.svg.js";
+import InsertRowAboveIcon from "../../icons/insert_row_above.svg.js";
+import InsertRowBelowIcon from "../../icons/insert_row_below.svg.js";
+import MoreHorizIcon from "../../icons/more_horiz.svg.js";
 import * as RadixToolbar from "@radix-ui/react-toolbar";
-import "@lexical/react/LexicalComposer";
-import "@lexical/react/LexicalHorizontalRulePlugin";
-import "@lexical/react/LexicalLinkPlugin";
-import "@lexical/react/LexicalListPlugin";
-import "@lexical/react/LexicalTabIndentationPlugin";
-import "@lexical/code";
-import "@lexical/link";
-import "@lexical/list";
-import "@lexical/react/LexicalHorizontalRuleNode";
-import "@lexical/rich-text";
-import "mdast-util-directive";
-import "mdast-util-from-markdown";
-import "mdast-util-frontmatter";
-import "mdast-util-gfm-table";
-import "mdast-util-mdx";
-import "micromark-extension-directive";
-import "micromark-extension-frontmatter";
-import "micromark-extension-gfm-table";
-import "micromark-extension-mdxjs";
-import "@lexical/utils";
-import "@lexical/react/LexicalComposerContext";
-import "@lexical/selection";
-import "@lexical/react/LexicalHistoryPlugin";
-import "mdast-util-to-markdown";
-import "@radix-ui/react-tooltip";
-import "downshift";
-import "@lexical/markdown";
-import "@lexical/react/LexicalMarkdownShortcutPlugin";
-import "react-diff-view";
-import "unidiff";
-import "@radix-ui/react-select";
-import "@radix-ui/react-dialog";
-const MarkdownAstRenderer = (props) => {
-  const root = { type: "root", children: props.mdastChildren };
-  const hast = raw(toHast(root, { allowDangerousHtml: true }));
-  const safeHast = sanitize(hast);
-  const html = toHtml(safeHast);
-  return /* @__PURE__ */ React__default.createElement("span", { dangerouslySetInnerHTML: { __html: html || " " } });
-};
-const SvgMoreHoriz = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 24, height: 24, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
-  maskType: "alpha"
-} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h24v24H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z" })));
-const MoreHorizIcon = SvgMoreHoriz;
-const SvgFormatAlignLeft = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
-  maskType: "alpha"
-} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M3 17v-1.5h14V17H3Zm0-3.125v-1.5h10v1.5H3Zm0-3.125v-1.5h14v1.5H3Zm0-3.125v-1.5h10v1.5H3ZM3 4.5V3h14v1.5H3Z" })));
-const AlignLeftIcon = SvgFormatAlignLeft;
-const SvgFormatAlignCenter = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
-  maskType: "alpha"
-} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M3 17v-1.5h14V17H3Zm3-3.125v-1.5h8v1.5H6ZM3 10.75v-1.5h14v1.5H3Zm3-3.125v-1.5h8v1.5H6ZM3 4.5V3h14v1.5H3Z" })));
-const AlignCenterIcon = SvgFormatAlignCenter;
-const SvgFormatAlignRight = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
-  maskType: "alpha"
-} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M3 17v-1.5h14V17H3Zm4-3.125v-1.5h10v1.5H7ZM3 10.75v-1.5h14v1.5H3Zm4-3.125v-1.5h10v1.5H7ZM3 4.5V3h14v1.5H3Z" })));
-const AlignRightIcon = SvgFormatAlignRight;
-const SvgInsertColLeft = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
-  maskType: "alpha"
-} }, /* @__PURE__ */ React.createElement("path", { d: "M0 20h20v20H0z", transform: "rotate(-90 0 20)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M15.75 4.5H13v2.75h-1.5V4.5H8.75V3h2.75V.25H13V3h2.75v1.5ZM13 17H5V3h2.25v1.5H6.5v11h5V8.75H13V17Z" })));
-const InsertColLeftIcon = SvgInsertColLeft;
-const SvgInsertColRight = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
-  maskType: "alpha"
-} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z", transform: "matrix(0 -1 -1 0 20 20)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M4.25 4.5H7v2.75h1.5V4.5h2.75V3H8.5V.25H7V3H4.25v1.5ZM7 17h8V3h-2.25v1.5h.75v11h-5V8.75H7V17Z" })));
-const InsertColRightIcon = SvgInsertColRight;
-const SvgDeleteSmall = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
-  maskType: "alpha"
-} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M6.5 17a1.45 1.45 0 0 1-1.06-.44A1.445 1.445 0 0 1 5 15.5v-10H4V4h4V3h4v1h4v1.5h-1v9.991c0 .423-.147.78-.44 1.072A1.45 1.45 0 0 1 13.5 17h-7Zm7-11.5h-7v10h7v-10ZM8 14h1.5V7H8v7Zm2.5 0H12V7h-1.5v7Z" })));
-const DeleteSmallIcon = SvgDeleteSmall;
-const SvgInsertRowAbove = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
-  maskType: "alpha"
-} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z", transform: "matrix(-1 0 0 1 20 0)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M4.5 16.75V14h2.75v-1.5H4.5V9.75H3v2.75H.25V14H3v2.75h1.5ZM17 14V6H3v2.25h1.5V7.5h11v5H8.75V14H17Z" })));
-const InsertRowAboveIcon = SvgInsertRowAbove;
-const SvgInsertRowBelow = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
-  maskType: "alpha"
-} }, /* @__PURE__ */ React.createElement("path", { d: "M20 20h20v20H20z", transform: "rotate(180 20 20)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M4.5 3.25V6h2.75v1.5H4.5v2.75H3V7.5H.25V6H3V3.25h1.5ZM17 6v8H3v-2.25h1.5v.75h11v-5H8.75V6H17Z" })));
-const InsertRowBelowIcon = SvgInsertRowBelow;
-const SvgAddRow = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
-  maskType: "alpha"
-} }, /* @__PURE__ */ React.createElement("path", { d: "M20 20h20v20H20z", transform: "rotate(180 20 20)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M10.5 3.25V6h2.75v1.5H10.5v2.75H9V7.5H6.25V6H9V3.25h1.5ZM17 6v8H3V6h2.5v1.5h-1v5h11v-5H14V6h3Z" })));
-const AddRowIcon = SvgAddRow;
-const SvgAddColumn = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
-  maskType: "alpha"
-} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z", transform: "matrix(0 -1 -1 0 20 20)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M3.25 10.5H6v2.75h1.5V10.5h2.75V9H7.5V6.25H6V9H3.25v1.5ZM6 17h8V3H6v2.5h1.5v-1h5v11h-5V14H6v3Z" })));
-const AddColumnIcon = SvgAddColumn;
+import classNames from "classnames";
+import styles from "../../styles/ui.module.css.js";
+import { corePluginHooks } from "../core/index.js";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { mergeRegister } from "@lexical/utils";
+import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
 const AlignToTailwindClassMap = {
   center: styles.centeredCell,
   left: styles.leftAlignedCell,
@@ -144,7 +74,7 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
     },
     [lexicalTable, parentEditor]
   );
-  useEffect(() => {
+  React__default.useEffect(() => {
     lexicalTable.focusEmitter.subscribe(setActiveCellWithBoundaries);
   }, [lexicalTable, setActiveCellWithBoundaries]);
   const addRowToBottom = React__default.useCallback(() => {
@@ -218,15 +148,22 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
           align: (_a = mdastNode.align) == null ? void 0 : _a[colIndex],
           key: colIndex,
           contents: mdastCell.children,
-          ...{ rowIndex, colIndex, lexicalTable, parentEditor, activeCellTuple: [activeCell, setActiveCellWithBoundaries] }
+          setActiveCell: setActiveCellWithBoundaries,
+          ...{
+            rowIndex,
+            colIndex,
+            lexicalTable,
+            parentEditor,
+            activeCell
+          }
         }
       );
     }), rowIndex === 0 && /* @__PURE__ */ React__default.createElement("th", { rowSpan: lexicalTable.getRowCount(), "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement("button", { className: styles.addColumnButton, onClick: addColumnToRight }, /* @__PURE__ */ React__default.createElement(AddColumnIcon, null))));
   })), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null), /* @__PURE__ */ React__default.createElement("th", { colSpan: lexicalTable.getColCount() }, /* @__PURE__ */ React__default.createElement("button", { className: styles.addRowButton, onClick: addRowToBottom }, /* @__PURE__ */ React__default.createElement(AddRowIcon, null))), /* @__PURE__ */ React__default.createElement("th", null))));
 };
 const Cell = ({ align, ...props }) => {
-  const [activeCell, setActiveCell] = props.activeCellTuple;
-  const isActive = activeCell && activeCell[0] === props.colIndex && activeCell[1] === props.rowIndex;
+  const { activeCell, setActiveCell } = props;
+  const isActive = Boolean(activeCell && activeCell[0] === props.colIndex && activeCell[1] === props.rowIndex);
   const className = AlignToTailwindClassMap[align || "left"];
   return /* @__PURE__ */ React__default.createElement(
     "td",
@@ -237,86 +174,97 @@ const Cell = ({ align, ...props }) => {
         setActiveCell([props.colIndex, props.rowIndex]);
       }
     },
-    isActive ? /* @__PURE__ */ React__default.createElement(CellEditor, { ...props }) : /* @__PURE__ */ React__default.createElement(MarkdownAstRenderer, { mdastChildren: props.contents })
+    /* @__PURE__ */ React__default.createElement(CellEditor, { ...props, focus: isActive })
   );
 };
-const CellEditor = ({ activeCellTuple, parentEditor, lexicalTable, contents, colIndex, rowIndex }) => {
-  const [markdownParseOptions, lexicalConvertOptions, jsxComponentDescriptors, lexicalNodes] = useEmitterValues(
-    "markdownParseOptions",
-    "lexicalConvertOptions",
+const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents, colIndex, rowIndex }) => {
+  const [importVisitors, exportVisitors, usedLexicalNodes, jsxComponentDescriptors, jsxIsAvailable, rootEditor] = corePluginHooks.useEmitterValues(
+    "importVisitors",
+    "exportVisitors",
+    "usedLexicalNodes",
     "jsxComponentDescriptors",
-    "lexicalNodes"
+    "jsxIsAvailable",
+    "rootEditor"
   );
   const [editor] = React__default.useState(() => {
-    let disposed = false;
     const editor2 = createEditor({
-      nodes: lexicalNodes,
-      theme
+      nodes: usedLexicalNodes,
+      theme: lexicalTheme
     });
-    function saveAndDispose(nextCell) {
-      if (disposed) {
-        return;
-      }
-      disposed = true;
-      editor2.getEditorState().read(() => {
+    editor2.update(() => {
+      importMdastTreeToLexical({
+        root: $getRoot(),
+        mdastRoot: { type: "root", children: [{ type: "paragraph", children: contents }] },
+        visitors: importVisitors
+      });
+    });
+    return editor2;
+  });
+  const saveAndFocus = React__default.useCallback(
+    (nextCell) => {
+      editor.getEditorState().read(() => {
         const mdast = exportLexicalTreeToMdast({
           root: $getRoot(),
           jsxComponentDescriptors,
-          ...lexicalConvertOptions
+          visitors: exportVisitors,
+          jsxIsAvailable
         });
         parentEditor.update(() => {
           lexicalTable.updateCellContents(colIndex, rowIndex, mdast.children[0].children);
         });
       });
-      activeCellTuple[1](nextCell);
-    }
-    editor2.registerCommand(
-      KEY_TAB_COMMAND,
-      (payload) => {
-        payload.preventDefault();
-        const nextCell = payload.shiftKey ? [colIndex - 1, rowIndex] : [colIndex + 1, rowIndex];
-        saveAndDispose(nextCell);
-        return true;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-    editor2.registerCommand(
-      KEY_ENTER_COMMAND,
-      (payload) => {
-        payload == null ? void 0 : payload.preventDefault();
-        const nextCell = (payload == null ? void 0 : payload.shiftKey) ? [colIndex, rowIndex - 1] : [colIndex, rowIndex + 1];
-        saveAndDispose(nextCell);
-        return true;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-    editor2.registerCommand(
-      BLUR_COMMAND,
-      (payload) => {
-        const relatedTarget = payload.relatedTarget;
-        if ((relatedTarget == null ? void 0 : relatedTarget.dataset["editorDialog"]) !== void 0 || (relatedTarget == null ? void 0 : relatedTarget.dataset["toolbarItem"]) !== void 0) {
+      setActiveCell(nextCell);
+    },
+    [colIndex, editor, exportVisitors, jsxComponentDescriptors, jsxIsAvailable, lexicalTable, parentEditor, rowIndex, setActiveCell]
+  );
+  React__default.useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        KEY_TAB_COMMAND,
+        (payload) => {
+          payload.preventDefault();
+          const nextCell = payload.shiftKey ? [colIndex - 1, rowIndex] : [colIndex + 1, rowIndex];
+          saveAndFocus(nextCell);
+          return true;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      ),
+      editor.registerCommand(
+        FOCUS_COMMAND,
+        () => {
+          setActiveCell([colIndex, rowIndex]);
           return false;
-        }
-        saveAndDispose(null);
-        return true;
-      },
-      COMMAND_PRIORITY_CRITICAL
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ENTER_COMMAND,
+        (payload) => {
+          payload == null ? void 0 : payload.preventDefault();
+          const nextCell = (payload == null ? void 0 : payload.shiftKey) ? [colIndex, rowIndex - 1] : [colIndex, rowIndex + 1];
+          saveAndFocus(nextCell);
+          return true;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      ),
+      editor.registerCommand(
+        BLUR_COMMAND,
+        (payload) => {
+          const relatedTarget = payload.relatedTarget;
+          if (isPartOftheEditorUI(relatedTarget, rootEditor.getRootElement())) {
+            return false;
+          }
+          saveAndFocus(null);
+          return true;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      )
     );
-    editor2.registerRootListener((element) => {
-      if (element) {
-        editor2.focus();
-      }
-    });
-    editor2.update(() => {
-      importMdastTreeToLexical({
-        root: $getRoot(),
-        mdastRoot: { type: "root", children: [{ type: "paragraph", children: contents }] },
-        visitors: markdownParseOptions.visitors
-      });
-    });
-    return editor2;
-  });
-  return /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor }, /* @__PURE__ */ React__default.createElement(RichTextPlugin, { contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { autoFocus: true }), placeholder: /* @__PURE__ */ React__default.createElement("div", null), ErrorBoundary: LexicalErrorBoundary }), /* @__PURE__ */ React__default.createElement(SharedHistoryPlugin, null));
+  }, [colIndex, editor, rootEditor, rowIndex, saveAndFocus, setActiveCell]);
+  React__default.useEffect(() => {
+    focus && (editor == null ? void 0 : editor.focus());
+  }, [focus, editor]);
+  return /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor }, /* @__PURE__ */ React__default.createElement(RichTextPlugin, { contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, null), placeholder: /* @__PURE__ */ React__default.createElement("div", null), ErrorBoundary: LexicalErrorBoundary }), /* @__PURE__ */ React__default.createElement(HistoryPlugin, null));
 };
 const ColumnEditor = ({
   parentEditor,
@@ -326,7 +274,7 @@ const ColumnEditor = ({
   colIndex,
   setActiveCellWithBoundaries
 }) => {
-  const [editorRootElementRef] = useEmitterValues("editorRootElementRef");
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
   const insertColumnAt = React__default.useCallback(
     (colIndex2) => {
       parentEditor.update(() => {
@@ -392,7 +340,7 @@ const RowEditor = ({
   rowIndex,
   setActiveCellWithBoundaries
 }) => {
-  const [editorRootElementRef] = useEmitterValues("editorRootElementRef");
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
   const insertRowAt = React__default.useCallback(
     (rowIndex2) => {
       parentEditor.update(() => {

package/dist/plugins/table/TableNode.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import { DecoratorNode, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import * as Mdast from 'mdast';
+/**
+ * A serialized representation of a {@link TableNode}.
+ */
+export type SerializedTableNode = Spread<{
+    mdastNode: Mdast.Table;
+}, SerializedLexicalNode>;
+type CoordinatesSubscription = (coords: [colIndex: number, rowIndex: number]) => void;
+/**
+ * A lexical node that represents a table, with features specific to the markdown tables.
+ * Use {@link "$createTableNode"} to construct one.
+ */
+export declare class TableNode extends DecoratorNode<JSX.Element> {
+    __mdastNode: Mdast.Table;
+    focusEmitter: {
+        publish: (coords: [colIndex: number, rowIndex: number]) => void;
+        subscribe: (cb: CoordinatesSubscription) => void;
+    };
+    static getType(): string;
+    static clone(node: TableNode): TableNode;
+    static importJSON(serializedNode: SerializedTableNode): TableNode;
+    exportJSON(): SerializedTableNode;
+    getMdastNode(): Mdast.Table;
+    getRowCount(): number;
+    getColCount(): number;
+    constructor(mdastNode?: Mdast.Table, key?: NodeKey);
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    updateCellContents(colIndex: number, rowIndex: number, children: Mdast.PhrasingContent[]): void;
+    insertColumnAt(colIndex: number): void;
+    deleteColumnAt(colIndex: number): void;
+    insertRowAt(y: number): void;
+    deleteRowAt(rowIndex: number): void;
+    addRowToBottom(): void;
+    addColumnToRight(): void;
+    setColumnAlign(colIndex: number, align: Mdast.AlignType): void;
+    decorate(parentEditor: LexicalEditor): JSX.Element;
+    select(coords?: [colIndex: number, rowIndex: number]): void;
+    isInline(): false;
+}
+/**
+ * Retruns true if the given node is a {@link TableNode}.
+ */
+export declare function $isTableNode(node: LexicalNode | null | undefined): node is TableNode;
+/**
+ * Creates a {@link TableNode}
+ * @param mdastNode - The mdast node to create the {@link TableNode} from.
+ */
+export declare function $createTableNode(mdastNode: Mdast.Table): TableNode;
+export {};