@mdxeditor/editor 4.0.3 → 4.1.0

package/dist/plugins/table/TableEditor.js

@@ -1,14 +1,12 @@
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { LexicalExtensionEditorComposer } from "@lexical/react/LexicalExtensionEditorComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import * as RadixPopover from "@radix-ui/react-popover";
-import { $createParagraphNode, createEditor, $getRoot, KEY_TAB_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, KEY_ENTER_COMMAND, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR } from "lexical";
+import { $createParagraphNode, $getRoot, KEY_TAB_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, KEY_ENTER_COMMAND, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR } from "lexical";
 import React__default from "react";
 import { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
 import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";
-import { lexicalTheme } from "../../styles/lexicalTheme.js";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { mergeRegister } from "@lexical/utils";
 import * as RadixToolbar from "@radix-ui/react-toolbar";
 import classNames from "classnames";
@@ -17,6 +15,7 @@ import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
 import { uuidv4 } from "../../utils/uuid4.js";
 import { iconComponentFor$, readOnly$, useTranslation, editorRootElementRef$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, defaultCodeBlockLanguage$, jsxIsAvailable$, rootEditor$, tableCellEditorChildren$, NESTED_EDITOR_UPDATED_COMMAND } from "../core/index.js";
 import { useCellValues } from "@mdxeditor/gurx";
+import { createExtensionEditor } from "../core/lexicalExtensions.js";
 const getCellType = (rowIndex) => {
   if (rowIndex === 0) {
     return "th";
@@ -231,27 +230,36 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
     rootEditor$,
     tableCellEditorChildren$
   );
-  const [editor] = React__default.useState(() => {
-    const editor2 = createEditor({
+  const [editor, setEditor] = React__default.useState(null);
+  React__default.useEffect(() => {
+    const editor2 = createExtensionEditor({
+      name: "@mdxeditor/table-cell",
       nodes: usedLexicalNodes,
-      theme: lexicalTheme,
-      namespace: "TableCellEditor"
-    });
-    editor2.update(() => {
-      importMdastTreeToLexical({
-        root: $getRoot(),
-        mdastRoot: { type: "root", children: [{ type: "paragraph", children: contents }] },
-        visitors: importVisitors,
-        jsxComponentDescriptors,
-        directiveDescriptors,
-        codeBlockEditorDescriptors,
-        defaultCodeBlockLanguage
-      });
+      namespace: "TableCellEditor",
+      parentEditor,
+      historyMode: "table-local",
+      initialEditorState: () => {
+        importMdastTreeToLexical({
+          root: $getRoot(),
+          mdastRoot: { type: "root", children: [{ type: "paragraph", children: contents }] },
+          visitors: importVisitors,
+          jsxComponentDescriptors,
+          directiveDescriptors,
+          codeBlockEditorDescriptors,
+          defaultCodeBlockLanguage
+        });
+      }
     });
-    return editor2;
-  });
+    setEditor(editor2);
+    return () => {
+      editor2.dispose();
+    };
+  }, []);
   const saveAndFocus = React__default.useCallback(
     (nextCell) => {
+      if (!editor) {
+        return;
+      }
       editor.getEditorState().read(() => {
         const mdast = exportLexicalTreeToMdast({
           root: $getRoot(),
@@ -272,6 +280,9 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
     [colIndex, editor, exportVisitors, jsxComponentDescriptors, jsxIsAvailable, lexicalTable, parentEditor, rowIndex, setActiveCell]
   );
   React__default.useEffect(() => {
+    if (!editor) {
+      return;
+    }
     return mergeRegister(
       editor.registerCommand(
         KEY_TAB_COMMAND,
@@ -324,11 +335,14 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
     );
   }, [colIndex, editor, rootEditor, rowIndex, saveAndFocus, setActiveCell]);
   React__default.useEffect(() => {
-    if (focus) {
+    if (focus && editor) {
       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 }), tableCellEditorChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(HistoryPlugin, null));
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(LexicalExtensionEditorComposer, { initialEditor: editor }, /* @__PURE__ */ React__default.createElement(RichTextPlugin, { contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, null), placeholder: /* @__PURE__ */ React__default.createElement("div", null), ErrorBoundary: LexicalErrorBoundary }), tableCellEditorChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })));
 };
 const ColumnEditor = ({
   parentEditor,

package/dist/plugins/thematic-break/LexicalThematicBreakVisitor.js

@@ -1,6 +1,6 @@
-import { $isHorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode.js";
+import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode.js";
 const LexicalThematicBreakVisitor = {
-  testLexicalNode: $isHorizontalRuleNode,
+  testLexicalNode: (node) => node instanceof HorizontalRuleNode,
   visitLexicalNode({ actions }) {
     actions.addAndStepInto("thematicBreak");
   }

package/dist/realmSession.js

@@ -0,0 +1,38 @@
+const realmCleanups = /* @__PURE__ */ new WeakMap();
+function registerRealmCleanup(realm, cleanup) {
+  let cleanups = realmCleanups.get(realm);
+  if (!cleanups) {
+    cleanups = /* @__PURE__ */ new Set();
+    realmCleanups.set(realm, cleanups);
+  }
+  cleanups.add(cleanup);
+  return () => {
+    cleanups.delete(cleanup);
+  };
+}
+function disposeRealmSession(realm) {
+  const cleanups = realmCleanups.get(realm);
+  realmCleanups.delete(realm);
+  if (!cleanups) {
+    return;
+  }
+  let hasError = false;
+  let firstError;
+  for (const cleanup of [...cleanups].reverse()) {
+    try {
+      cleanup();
+    } catch (error) {
+      if (!hasError) {
+        hasError = true;
+        firstError = error;
+      }
+    }
+  }
+  if (hasError) {
+    throw firstError instanceof Error ? firstError : new Error("Realm cleanup failed with a non-Error value");
+  }
+}
+export {
+  disposeRealmSession,
+  registerRealmCleanup
+};

package/dist/utils/lexicalHelpers.js

@@ -1,7 +1,5 @@
-import { $getSelection, $getRoot, $isRangeSelection, $isElementNode, $isTextNode } from "lexical";
-import { $isLinkNode } from "@lexical/link";
-import { $isHeadingNode } from "@lexical/rich-text";
-import { $isListItemNode, $isListNode } from "@lexical/list";
+import { $getSelection, $getRoot, $isRangeSelection, createEditor, $createParagraphNode } from "lexical";
+import { $generateJSONFromSelectedNodes, $generateNodesFromSerializedNodes } from "@lexical/clipboard";
 import { $isAtNodeEnd } from "@lexical/selection";
 import { tap } from "./fp.js";
 import { exportMarkdownFromLexical } from "../exportMarkdownFromLexical.js";
@@ -101,80 +99,61 @@ function getStateAsMarkdown(editor, exportParams) {
     });
   }).markdown;
 }
-function getSelectionAsMarkdown(editor, _exportParams) {
+function getSelectionAsMarkdown(editor, exportParams) {
+  let temporaryEditor = null;
+  let selectedNodes = [];
   let markdown = "";
-  editor.getEditorState().read(() => {
-    const selection = $getSelection();
-    if (!selection || !$isRangeSelection(selection) || selection.isCollapsed()) {
-      return;
-    }
-    const nodes = selection.getNodes();
-    if (nodes.length === 0) {
-      return;
-    }
-    const parentNodes = /* @__PURE__ */ new Set();
-    nodes.forEach((node) => {
-      let current = node;
-      while (current) {
-        if ($isHeadingNode(current) || $isListItemNode(current) || current.getType() === "paragraph" || current.getType() === "quote") {
-          if ($isElementNode(current)) {
-            parentNodes.add(current);
-          }
-          break;
-        }
-        current = current.getParent();
+  editor.getEditorState().read(
+    () => {
+      const selection = $getSelection();
+      if (!selection || $isRangeSelection(selection) && selection.isCollapsed() || selection.getNodes().length === 0) {
+        return;
       }
-    });
-    const nodesToProcess = parentNodes.size > 0 ? Array.from(parentNodes) : nodes;
-    function nodeToMarkdown(node) {
-      if ($isHeadingNode(node)) {
-        const level = parseInt(node.getTag().replace("h", ""));
-        const children = node.getChildren();
-        const headingText = children.map((child) => nodeToMarkdown(child)).join("");
-        return "#".repeat(level) + " " + headingText + "\n\n";
-      } else if ($isListItemNode(node)) {
-        const parent = node.getParent();
-        const prefix = parent && $isListNode(parent) && parent.getListType() === "number" ? "1. " : "- ";
-        const children = node.getChildren();
-        const itemText = children.map((child) => nodeToMarkdown(child)).join("");
-        return prefix + itemText + "\n";
-      } else if ($isListNode(node)) {
-        const children = node.getChildren();
-        return children.map((child) => nodeToMarkdown(child)).join("") + "\n";
-      } else if ($isTextNode(node)) {
-        let text = node.getTextContent();
-        const format = node.getFormat();
-        if (format & 16) {
-          return `\`${text}\``;
-        }
-        if (format & 1) {
-          text = `**${text}**`;
-        }
-        if (format & 2) {
-          text = `*${text}*`;
-        }
-        if (format & 4) {
-          text = `~~${text}~~`;
-        }
-        return text;
-      } else if ($isLinkNode(node)) {
-        const url = node.getURL();
-        const title = node.getTitle();
-        const children = node.getChildren();
-        const linkText = children.map((child) => nodeToMarkdown(child)).join("");
-        if (title) {
-          return `[${linkText}](${url} "${title}")`;
+      selectedNodes = $generateJSONFromSelectedNodes(editor, selection).nodes;
+      if (selectedNodes.length > 0) {
+        temporaryEditor = createEditor();
+      }
+    },
+    { editor }
+  );
+  const selectedTreeEditor = temporaryEditor;
+  if (!selectedTreeEditor || selectedNodes.length === 0) {
+    return "";
+  }
+  const exportResult = { error: void 0, failed: false };
+  selectedTreeEditor.update(
+    () => {
+      try {
+        const root = $getRoot();
+        const nodes = $generateNodesFromSerializedNodes(selectedNodes);
+        let inlineContainer = $createParagraphNode();
+        const appendInlineContainer = () => {
+          if (!inlineContainer.isEmpty()) {
+            root.append(inlineContainer);
+            inlineContainer = $createParagraphNode();
+          }
+        };
+        for (const node of nodes) {
+          if (node.isInline()) {
+            inlineContainer.append(node);
+          } else {
+            appendInlineContainer();
+            root.append(node);
+          }
         }
-        return `[${linkText}](${url})`;
-      } else if ($isElementNode(node)) {
-        const children = node.getChildren();
-        return children.map((child) => nodeToMarkdown(child)).join("");
+        appendInlineContainer();
+        markdown = exportMarkdownFromLexical({ root, ...exportParams });
+      } catch (error) {
+        exportResult.failed = true;
+        exportResult.error = error;
       }
-      return node.getTextContent();
-    }
-    markdown = nodesToProcess.map((node) => nodeToMarkdown(node)).join("");
-  });
-  return markdown.trim();
+    },
+    { discrete: true, skipTransforms: true }
+  );
+  if (exportResult.failed) {
+    throw exportResult.error;
+  }
+  return markdown.replace(/\n+$/u, "");
 }
 export {
   fromWithinEditorRead,

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -22,6 +22,14 @@
     "lint": "eslint src --ext .ts,.tsx",
     "test": "vitest",
     "test:once": "vitest --run",
+    "test:compat:unit": "vitest --run src/test/compatibility.test.tsx",
+    "test:browser:serve": "ladle dev --host 127.0.0.1 --port 61000 --noWatch",
+    "test:browser": "playwright test",
+    "test:browser:chromium": "playwright test --project=chromium",
+    "test:compat": "npm run test:compat:unit && npm run test:browser",
+    "test:lexical-versions": "node scripts/assert-lexical-versions.mjs",
+    "test:package": "node scripts/verify-package-consumer.mjs",
+    "test:cross-version": "node scripts/verify-cross-version-markdown.mjs",
     "semantic-release": "semantic-release",
     "image-upload-backend": "node ./src/examples/file-backend.js",
     "export-icons": "node ./scripts/export-figma-icons.mjs"
@@ -44,15 +52,17 @@
     "@codemirror/merge": "^6.4.0",
     "@codemirror/state": "^6.4.0",
     "@codemirror/view": "^6.23.0",
-    "@lexical/clipboard": "^0.35.0",
-    "@lexical/link": "^0.35.0",
-    "@lexical/list": "^0.35.0",
-    "@lexical/markdown": "^0.35.0",
-    "@lexical/plain-text": "^0.35.0",
-    "@lexical/react": "^0.35.0",
-    "@lexical/rich-text": "^0.35.0",
-    "@lexical/selection": "^0.35.0",
-    "@lexical/utils": "^0.35.0",
+    "@lexical/clipboard": "^0.48.0",
+    "@lexical/extension": "^0.48.0",
+    "@lexical/history": "^0.48.0",
+    "@lexical/link": "^0.48.0",
+    "@lexical/list": "^0.48.0",
+    "@lexical/markdown": "^0.48.0",
+    "@lexical/plain-text": "^0.48.0",
+    "@lexical/react": "^0.48.0",
+    "@lexical/rich-text": "^0.48.0",
+    "@lexical/selection": "^0.48.0",
+    "@lexical/utils": "^0.48.0",
     "@mdxeditor/gurx": "^1.2.4",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-dialog": "^1.1.11",
@@ -67,8 +77,8 @@
     "cm6-theme-basic-light": "^0.2.0",
     "codemirror": "^6.0.1",
     "downshift": "^7.6.0",
-    "js-yaml": "4.1.1",
-    "lexical": "^0.35.0",
+    "js-yaml": "4.2.0",
+    "lexical": "^0.48.0",
     "mdast-util-directive": "^3.0.0",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-frontmatter": "^2.0.1",
@@ -106,6 +116,7 @@
     "@babel/preset-typescript": "^7.23.3",
     "@ladle/react": "^5.1.1",
     "@ngneat/falso": "^6.4.0",
+    "@playwright/test": "1.61.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/react": "^16.3.0",

package/dist/plugins/core/SharedHistoryPlugin.js

@@ -1,10 +0,0 @@
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import React__default from "react";
-import { historyState$ } from "./index.js";
-import { useCellValue } from "@mdxeditor/gurx";
-const SharedHistoryPlugin = () => {
-  return /* @__PURE__ */ React__default.createElement(HistoryPlugin, { externalHistoryState: useCellValue(historyState$) });
-};
-export {
-  SharedHistoryPlugin
-};