@mdxeditor/editor 2.0.0 → 2.0.1

package/dist/RealmWithPlugins.js

@@ -16,18 +16,20 @@ function realmPlugin(plugin) {
   };
 }
 function RealmWithPlugins({ children, plugins }) {
-  var _a;
   const theRealm = React__default.useMemo(() => {
     return tap(new Realm(), (r) => {
-      var _a2;
+      var _a;
       for (const plugin of plugins) {
-        (_a2 = plugin.init) == null ? void 0 : _a2.call(plugin, r);
+        (_a = plugin.init) == null ? void 0 : _a.call(plugin, r);
       }
     });
   }, []);
-  for (const plugin of plugins) {
-    (_a = plugin.update) == null ? void 0 : _a.call(plugin, theRealm);
-  }
+  React__default.useEffect(() => {
+    var _a;
+    for (const plugin of plugins) {
+      (_a = plugin.update) == null ? void 0 : _a.call(plugin, theRealm);
+    }
+  });
   return /* @__PURE__ */ React__default.createElement(RealmContext.Provider, { value: theRealm }, children);
 }
 export {

package/dist/index.d.ts

@@ -182,7 +182,7 @@ export declare const addExportVisitor$: NodeRef<LexicalVisitor | LexicalVisitor[
  * Registers a visitor to be used when importing markdown.
  * @group Markdown Processing
  */
-export declare const addImportVisitor$: NodeRef<MdastImportVisitor<Mdast.RootContent> | MdastImportVisitor<Mdast.RootContent>[]>;
+export declare const addImportVisitor$: NodeRef<MdastImportVisitor<Mdast.Nodes> | MdastImportVisitor<Mdast.Nodes>[]>;
 
 /**
  * Registers a lexical node to be used in the editor.
@@ -1427,13 +1427,13 @@ declare const IS_UNDERLINE: 8;
  * Determines if the given node is a HTML MDAST node.
  * @group HTML
  */
-export declare function isMdastHTMLNode(node: Mdast.Parent | Mdast.Content | Mdast.Root): node is MdastHTMLNode;
+export declare function isMdastHTMLNode(node: Mdast.Nodes): node is MdastHTMLNode;
 
 /**
  * Determines wether the given node is a JSX node.
  * @group JSX
  */
-export declare function isMdastJsxNode(node: Mdast.Content | Mdast.Parent | Mdast.Root): node is MdastJsx;
+export declare function isMdastJsxNode(node: Mdast.Nodes): node is MdastJsx;
 
 /* Excluded from this release type: isPartOftheEditorUI */
 
@@ -1741,12 +1741,12 @@ export declare type MdastHTMLNode = MdastBlockHTMLNode | MdastInlineHTMLNode;
  * @typeParam UN - The type of the mdast node that is being visited.
  * @group Markdown Processing
  */
-export declare interface MdastImportVisitor<UN extends Mdast.Content> {
+export declare interface MdastImportVisitor<UN extends Mdast.Nodes> {
     /**
      * The test function that determines if this visitor should be used for the given node.
      * As a convenience, you can also pass a string here, which will be compared to the node's type.
      */
-    testNode: ((mdastNode: Mdast.Content | Mdast.Root) => boolean) | string;
+    testNode: ((mdastNode: Mdast.Nodes) => boolean) | string;
     visitNode(params: {
         /**
          * The node that is currently being visited.
@@ -1776,12 +1776,12 @@ export declare interface MdastImportVisitor<UN extends Mdast.Content> {
              * Adds formatting as a context for the current node and its children.
              * This is necessary due to mdast treating formatting as a node, while lexical considering it an attribute of a node.
              */
-            addFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.Content): void;
+            addFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.RootContent): void;
             /**
              * Removes formatting as a context for the current node and its children.
              * This is necessary due to mdast treating formatting as a node, while lexical considering it an attribute of a node.
              */
-            removeFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.Content): void;
+            removeFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.RootContent): void;
             /**
              * Access the current formatting context.
              */

package/dist/plugins/core/index.js

@@ -7,6 +7,7 @@ import { Cell, withLatestFrom, Signal, filter, scan } from "@mdxeditor/gurx";
 import { createCommand, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getRoot, $setSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, KEY_DOWN_COMMAND, $isDecoratorNode, BLUR_COMMAND, $getSelection, $isRangeSelection, $insertNodes, $createParagraphNode, ParagraphNode, TextNode } from "lexical";
 import { mdxJsxFromMarkdown, mdxJsxToMarkdown } from "mdast-util-mdx-jsx";
 import { mdxJsx } from "micromark-extension-mdx-jsx";
+import { mdxMd } from "micromark-extension-mdx-md";
 import { exportMarkdownFromLexical } from "../../exportMarkdownFromLexical.js";
 import { importMarkdownToLexical, MarkdownParseError, UnrecognizedMarkdownConstructError } from "../../importMarkdownToLexical.js";
 import { controlOrMeta } from "../../utils/detectMac.js";
@@ -390,24 +391,31 @@ const insertDecoratorNode$ = Signal((r) => {
   });
 });
 const viewMode$ = Cell("rich-text", (r) => {
+  function currentNextViewMode() {
+    return scan(
+      (prev, next) => {
+        return {
+          current: prev.next,
+          next
+        };
+      },
+      { current: "rich-text", next: "rich-text" }
+    );
+  }
+  r.sub(r.pipe(viewMode$, currentNextViewMode(), withLatestFrom(markdownSourceEditorValue$)), ([{ current }, markdownSourceFromEditor]) => {
+    if (current === "source" || current === "diff") {
+      r.pub(setMarkdown$, markdownSourceFromEditor);
+    }
+  });
   r.sub(
     r.pipe(
       viewMode$,
-      scan(
-        (prev, next) => {
-          return {
-            current: prev.next,
-            next
-          };
-        },
-        { current: "rich-text", next: "rich-text" }
-      ),
-      withLatestFrom(markdownSourceEditorValue$)
+      currentNextViewMode(),
+      filter((mode) => mode.current === "rich-text"),
+      withLatestFrom(activeEditor$)
     ),
-    ([{ current }, markdownSourceFromEditor]) => {
-      if (current === "source" || current === "diff") {
-        r.pub(setMarkdown$, markdownSourceFromEditor);
-      }
+    ([mode, editor]) => {
+      editor == null ? void 0 : editor.dispatchCommand(NESTED_EDITOR_UPDATED_COMMAND, void 0);
     }
   );
 });
@@ -445,7 +453,7 @@ const corePlugin = realmPlugin({
     if (!(params == null ? void 0 : params.suppressHtmlProcessing)) {
       r.pubIn({
         [addMdastExtension$]: mdxJsxFromMarkdown(),
-        [addSyntaxExtension$]: mdxJsx(),
+        [addSyntaxExtension$]: [mdxJsx(), mdxMd()],
         [addToMarkdownExtension$]: mdxJsxToMarkdown(),
         [addImportVisitor$]: MdastHTMLVisitor
       });

package/dist/plugins/image/ImageEditor.js

@@ -6,7 +6,7 @@ import classNames from "classnames";
 import { $isNodeSelection, $getSelection, $getNodeByKey, $setSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND } from "lexical";
 import { disableImageResize$, imagePreviewHandler$, openEditImageDialog$ } from "./index.js";
 import styles from "../../styles/ui.module.css.js";
-import { iconComponentFor$ } from "../core/index.js";
+import { iconComponentFor$, readOnly$ } from "../core/index.js";
 import { $isImageNode } from "./ImageNode.js";
 import ImageResizer from "./ImageResizer.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
@@ -48,10 +48,11 @@ function LazyImage({
   );
 }
 function ImageEditor({ src, title, alt, nodeKey, width, height }) {
-  const [disableImageResize, imagePreviewHandler, iconComponentFor] = useCellValues(
+  const [disableImageResize, imagePreviewHandler, iconComponentFor, readOnly] = useCellValues(
     disableImageResize$,
     imagePreviewHandler$,
-    iconComponentFor$
+    iconComponentFor$,
+    readOnly$
   );
   const openEditImageDialog = usePublisher(openEditImageDialog$);
   const imageRef = React__default.useRef(null);
@@ -214,6 +215,7 @@ function ImageEditor({ src, title, alt, nodeKey, width, height }) {
       type: "button",
       className: classNames(styles.iconButton, styles.editImageButton),
       title: "Edit image",
+      disabled: readOnly,
       onClick: () => {
         openEditImageDialog({
           nodeKey,

package/dist/plugins/lists/LexicalListItemVisitor.js

@@ -8,9 +8,10 @@ const LexicalListItemVisitor = {
       const prevListItemNode = mdastParent.children.at(-1);
       actions.visitChildren(lexicalNode, prevListItemNode);
     } else {
+      const parentList = lexicalNode.getParent();
       const listItem = actions.appendToParent(mdastParent, {
         type: "listItem",
-        checked: lexicalNode.getChecked(),
+        checked: parentList.getListType() === "check" ? Boolean(lexicalNode.getChecked()) : void 0,
         spread: false,
         children: [{ type: "paragraph", children: [] }]
       });

package/dist/plugins/table/TableEditor.js

@@ -15,7 +15,7 @@ import classNames from "classnames";
 import styles from "../../styles/ui.module.css.js";
 import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
 import { uuidv4 } from "../../utils/uuid4.js";
-import { iconComponentFor$, readOnly$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, jsxIsAvailable$, rootEditor$, editorRootElementRef$ } from "../core/index.js";
+import { iconComponentFor$, readOnly$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, jsxIsAvailable$, rootEditor$, NESTED_EDITOR_UPDATED_COMMAND, editorRootElementRef$ } from "../core/index.js";
 import { useCellValues } from "@mdxeditor/gurx";
 const AlignToTailwindClassMap = {
   center: styles.centeredCell,
@@ -268,6 +268,14 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
           return true;
         },
         COMMAND_PRIORITY_CRITICAL
+      ),
+      editor.registerCommand(
+        NESTED_EDITOR_UPDATED_COMMAND,
+        () => {
+          saveAndFocus(null);
+          return true;
+        },
+        COMMAND_PRIORITY_CRITICAL
       )
     );
   }, [colIndex, editor, rootEditor, rowIndex, saveAndFocus, setActiveCell]);

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -78,6 +78,7 @@
     "micromark-extension-gfm-table": "^2.0.0",
     "micromark-extension-gfm-task-list-item": "^2.0.1",
     "micromark-extension-mdx-jsx": "^3.0.0",
+    "micromark-extension-mdx-md": "^2.0.0",
     "micromark-extension-mdxjs": "^3.0.0",
     "react-hook-form": "^7.44.2",
     "unidiff": "^1.0.2"