@mdxeditor/editor 2.20.1 → 2.20.3

package/dist/MDXEditor.js

@@ -1,8 +1,7 @@
-import { useCellValues, usePublisher, useRealm } from "@mdxeditor/gurx";
+import { useCellValue, useCellValues, usePublisher, useRealm } from "@mdxeditor/gurx";
 import React__default from "react";
 import { RealmWithPlugins } from "./RealmWithPlugins.js";
-import { corePlugin, initialRootEditorState$, usedLexicalNodes$, readOnly$, contentEditableClassName$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$, rootEditor$ } from "./plugins/core/index.js";
-import { LexicalComposer } from "@lexical/react/LexicalComposer.js";
+import { corePlugin, rootEditor$, contentEditableClassName$, composerChildren$, topAreaChildren$, editorWrappers$, placeholder$, editorRootElementRef$, viewMode$, markdownSourceEditorValue$, markdown$, setMarkdown$, insertMarkdown$ } from "./plugins/core/index.js";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
@@ -10,24 +9,13 @@ import classNames from "classnames";
 import { lexicalTheme } from "./styles/lexicalTheme.js";
 import styles from "./styles/ui.module.css.js";
 import { noop } from "./utils/fp.js";
+import { createLexicalComposerContext, LexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 const LexicalProvider = ({ children }) => {
-  const [initialRootEditorState, nodes, readOnly] = useCellValues(initialRootEditorState$, usedLexicalNodes$, readOnly$);
-  return /* @__PURE__ */ React__default.createElement(
-    LexicalComposer,
-    {
-      initialConfig: {
-        editable: !readOnly,
-        editorState: initialRootEditorState,
-        namespace: "MDXEditor",
-        theme: lexicalTheme,
-        nodes,
-        onError: (error) => {
-          throw error;
-        }
-      }
-    },
-    children
-  );
+  const rootEditor = useCellValue(rootEditor$);
+  const composerContextValue = React__default.useMemo(() => {
+    return [rootEditor, createLexicalComposerContext(null, lexicalTheme)];
+  }, [rootEditor]);
+  return /* @__PURE__ */ React__default.createElement(LexicalComposerContext.Provider, { value: composerContextValue }, children);
 };
 const RichTextEditor = () => {
   const [contentEditableClassName, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(

package/dist/RealmWithPlugins.js

@@ -8,6 +8,10 @@ function realmPlugin(plugin) {
         var _a;
         return (_a = plugin.init) == null ? void 0 : _a.call(plugin, realm, params);
       },
+      postInit: (realm) => {
+        var _a;
+        return (_a = plugin.postInit) == null ? void 0 : _a.call(plugin, realm, params);
+      },
       update: (realm) => {
         var _a;
         return (_a = plugin.update) == null ? void 0 : _a.call(plugin, realm, params);
@@ -18,10 +22,13 @@ function realmPlugin(plugin) {
 function RealmWithPlugins({ children, plugins }) {
   const theRealm = React__default.useMemo(() => {
     return tap(new Realm(), (r) => {
-      var _a;
+      var _a, _b;
       for (const plugin of plugins) {
         (_a = plugin.init) == null ? void 0 : _a.call(plugin, r);
       }
+      for (const plugin of plugins) {
+        (_b = plugin.postInit) == null ? void 0 : _b.call(plugin, r);
+      }
     });
   }, []);
   React__default.useEffect(() => {

package/dist/index.d.ts

@@ -43,7 +43,6 @@ import { Extension as Extension_2 } from '@codemirror/state';
 import { FC } from 'react';
 import { HeadingTagType } from '@lexical/rich-text';
 import { HistoryState } from '@lexical/history';
-import { InitialEditorStateType } from '@lexical/react/LexicalComposer.js';
 import { KlassConstructor } from 'lexical';
 import { LexicalCommand } from 'lexical';
 import { LexicalEditor } from 'lexical';
@@ -1295,8 +1294,6 @@ export declare const inFocus$: NodeRef<boolean>;
 
 /* Excluded from this release type: initialMarkdown$ */
 
-/* Excluded from this release type: initialRootEditorState$ */
-
 /* Excluded from this release type: INSERT_IMAGE_COMMAND */
 
 /**
@@ -2243,6 +2240,7 @@ export declare const readOnly$: NodeRef<boolean>;
 export declare interface RealmPlugin {
     init?: (realm: Realm) => void;
     update?: (realm: Realm) => void;
+    postInit?: (realm: Realm) => void;
 }
 
 /**
@@ -2255,6 +2253,10 @@ export declare function realmPlugin<Params>(plugin: {
      * Called when the MDXEditor component is mounted and the plugin is initialized.
      */
     init?: (realm: Realm, params?: Params) => void;
+    /**
+     * Called after the MDXEditor component is mounted and all plugins are initialized.
+     */
+    postInit?: (realm: Realm, params?: Params) => void;
     /**
      * Called on each re-render. Use this to update the realm with updated property values.
      */

package/dist/index.js

@@ -3,7 +3,7 @@ export * from "@mdxeditor/gurx";
 import { MDXEditor } from "./MDXEditor.js";
 import { MarkdownParseError, UnrecognizedMarkdownConstructError, importMarkdownToLexical, importMdastTreeToLexical } from "./importMarkdownToLexical.js";
 import { exportLexicalTreeToMdast, exportMarkdownFromLexical } from "./exportMarkdownFromLexical.js";
-import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialRootEditorState$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
+import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
 import { ALL_HEADING_LEVELS, allowedHeadingLevels$, headingsPlugin } from "./plugins/headings/index.js";
 import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-break/index.js";
 import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
@@ -216,7 +216,6 @@ export {
   importVisitors$,
   inFocus$,
   initialMarkdown$,
-  initialRootEditorState$,
   insertCodeBlock$,
   insertCodeMirror$,
   insertDecoratorNode$,

package/dist/plugins/core/index.js

@@ -4,7 +4,7 @@ import { $isHeadingNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
 import { $findMatchingParent, $wrapNodeInElement, $insertNodeToNearestRoot } from "@lexical/utils";
 import { Cell, withLatestFrom, Signal, filter, map, useCellValue, scan } from "@mdxeditor/gurx";
-import { createCommand, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getRoot, $setSelection, $getSelection, $insertNodes, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, BLUR_COMMAND, $isRangeSelection, $createParagraphNode, ParagraphNode, TextNode } from "lexical";
+import { createCommand, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getRoot, $setSelection, $getSelection, $insertNodes, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, BLUR_COMMAND, $isRangeSelection, $createParagraphNode, ParagraphNode, TextNode, createEditor } from "lexical";
 import { mdxJsxFromMarkdown, mdxJsxToMarkdown } from "mdast-util-mdx-jsx";
 import { mdxJsx } from "micromark-extension-mdx-jsx";
 import { mdxMd } from "micromark-extension-mdx-md";
@@ -28,6 +28,7 @@ import { MdastRootVisitor } from "./MdastRootVisitor.js";
 import { MdastTextVisitor } from "./MdastTextVisitor.js";
 import { SharedHistoryPlugin } from "./SharedHistoryPlugin.js";
 import { commentFromMarkdown, comment } from "../../mdastUtilHtmlComment.js";
+import { lexicalTheme } from "../../styles/lexicalTheme.js";
 const NESTED_EDITOR_UPDATED_COMMAND = createCommand("NESTED_EDITOR_UPDATED_COMMAND");
 const rootEditor$ = Cell(null);
 const activeEditor$ = Cell(null);
@@ -362,25 +363,6 @@ function tryImportingMarkdown(r, node, markdownValue) {
     }
   }
 }
-const initialRootEditorState$ = Cell(null, (r) => {
-  r.pub(initialRootEditorState$, (theRootEditor) => {
-    r.pub(rootEditor$, theRootEditor);
-    r.pub(activeEditor$, theRootEditor);
-    tryImportingMarkdown(r, $getRoot(), r.getValue(initialMarkdown$));
-    const autoFocusValue = r.getValue(autoFocus$);
-    if (autoFocusValue) {
-      if (autoFocusValue === true) {
-        setTimeout(() => theRootEditor.focus(noop, { defaultSelection: "rootStart" }));
-        return;
-      }
-      setTimeout(
-        () => theRootEditor.focus(noop, {
-          defaultSelection: autoFocusValue.defaultSelection ?? "rootStart"
-        })
-      );
-    }
-  });
-});
 const composerChildren$ = Cell([]);
 const addComposerChild$ = Appender(composerChildren$);
 const topAreaChildren$ = Cell([]);
@@ -520,6 +502,37 @@ const corePlugin = realmPlugin({
       });
     }
   },
+  postInit(r, params) {
+    const newEditor = createEditor({
+      editable: (params == null ? void 0 : params.readOnly) !== true,
+      namespace: "MDXEditor",
+      nodes: r.getValue(usedLexicalNodes$),
+      onError: (error) => {
+        throw error;
+      },
+      theme: lexicalTheme
+    });
+    newEditor.update(() => {
+      const markdown = params == null ? void 0 : params.initialMarkdown.trim();
+      if (markdown) {
+        tryImportingMarkdown(r, $getRoot(), markdown);
+      }
+      const autoFocusValue = params == null ? void 0 : params.autoFocus;
+      if (autoFocusValue) {
+        if (autoFocusValue === true) {
+          setTimeout(() => newEditor.focus(noop, { defaultSelection: "rootStart" }));
+          return;
+        }
+        setTimeout(
+          () => newEditor.focus(noop, {
+            defaultSelection: autoFocusValue.defaultSelection ?? "rootStart"
+          })
+        );
+      }
+    });
+    r.pub(rootEditor$, newEditor);
+    r.pub(activeEditor$, newEditor);
+  },
   update(realm, params) {
     realm.pubIn({
       [contentEditableClassName$]: params == null ? void 0 : params.contentEditableClassName,
@@ -580,7 +593,6 @@ export {
   importVisitors$,
   inFocus$,
   initialMarkdown$,
-  initialRootEditorState$,
   insertDecoratorNode$,
   insertMarkdown$,
   jsxComponentDescriptors$,

package/dist/plugins/link-dialog/index.js

@@ -2,7 +2,7 @@ import { TOGGLE_LINK_COMMAND, $isLinkNode } from "@lexical/link";
 import { KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_MODIFIER_COMMAND, $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, $createTextNode, $insertNodes } from "lexical";
 import { IS_APPLE } from "../../utils/detectMac.js";
 import { getSelectionRectangle, getSelectedNode } from "../../utils/lexicalHelpers.js";
-import { createActiveEditorSubscription$, activeEditor$, currentSelection$, addComposerChild$ } from "../core/index.js";
+import { createActiveEditorSubscription$, readOnly$, activeEditor$, currentSelection$, addComposerChild$ } from "../core/index.js";
 import { LinkDialog } from "./LinkDialog.js";
 import { Signal, Cell, withLatestFrom, map, Action, filter } from "@mdxeditor/gurx";
 import { realmPlugin } from "../../RealmWithPlugins.js";
@@ -42,7 +42,7 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
     return editor.registerCommand(
       KEY_MODIFIER_COMMAND,
       (event) => {
-        if (event.key === "k" && (IS_APPLE ? event.metaKey : event.ctrlKey)) {
+        if (event.key === "k" && (IS_APPLE ? event.metaKey : event.ctrlKey) && !r.getValue(readOnly$)) {
           const selection = $getSelection();
           if ($isRangeSelection(selection)) {
             r.pub(openLinkEditDialog$);
@@ -143,9 +143,9 @@ const linkDialogState$ = Cell({ type: "inactive" }, (r) => {
   r.link(
     r.pipe(
       r.combine(currentSelection$, onWindowChange$),
-      withLatestFrom(activeEditor$, linkDialogState$),
-      map(([[selection], activeEditor]) => {
-        if ($isRangeSelection(selection) && activeEditor) {
+      withLatestFrom(activeEditor$, linkDialogState$, readOnly$),
+      map(([[selection], activeEditor, readOnly]) => {
+        if ($isRangeSelection(selection) && activeEditor && !readOnly) {
           const node = getLinkNodeInSelection(selection);
           if (node) {
             return {

package/dist/plugins/table/TableEditor.js

@@ -17,6 +17,12 @@ import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
 import { uuidv4 } from "../../utils/uuid4.js";
 import { iconComponentFor$, readOnly$, useTranslation, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, jsxIsAvailable$, rootEditor$, NESTED_EDITOR_UPDATED_COMMAND, editorRootElementRef$ } from "../core/index.js";
 import { useCellValues } from "@mdxeditor/gurx";
+const getCellType = (rowIndex) => {
+  if (rowIndex === 0) {
+    return "th";
+  }
+  return "td";
+};
 const AlignToTailwindClassMap = {
   center: styles.centeredCell,
   left: styles.leftAlignedCell,
@@ -151,7 +157,8 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
       }
     ));
   }), /* @__PURE__ */ React__default.createElement("th", { className: styles.tableToolsColumn }))), /* @__PURE__ */ React__default.createElement("tbody", null, mdastNode.children.map((row, rowIndex) => {
-    return /* @__PURE__ */ React__default.createElement("tr", { key: rowIndex }, readOnly || /* @__PURE__ */ React__default.createElement("td", { className: styles.toolCell, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(RowEditor, { ...{ setActiveCellWithBoundaries, parentEditor, rowIndex, highlightedCoordinates, lexicalTable } })), row.children.map((mdastCell, colIndex) => {
+    const CellElement = getCellType(rowIndex);
+    return /* @__PURE__ */ React__default.createElement("tr", { key: rowIndex }, readOnly || /* @__PURE__ */ React__default.createElement(CellElement, { className: styles.toolCell, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(RowEditor, { ...{ setActiveCellWithBoundaries, parentEditor, rowIndex, highlightedCoordinates, lexicalTable } })), row.children.map((mdastCell, colIndex) => {
       var _a;
       return /* @__PURE__ */ React__default.createElement(
         Cell,
@@ -176,8 +183,9 @@ const Cell = ({ align, ...props }) => {
   const { activeCell, setActiveCell } = props;
   const isActive = Boolean(activeCell && activeCell[0] === props.colIndex && activeCell[1] === props.rowIndex);
   const className = AlignToTailwindClassMap[align || "left"];
+  const CellElement = getCellType(props.rowIndex);
   return /* @__PURE__ */ React__default.createElement(
-    "td",
+    CellElement,
     {
       className,
       "data-active": isActive,