@mdxeditor/editor 2.0.0 → 2.1.0

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

@@ -40,6 +40,7 @@ import { EditorConfig } from 'lexical';
 import { ElementNode } from 'lexical';
 import { Extension } from 'micromark-util-types';
 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';
@@ -182,7 +183,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.
@@ -1191,6 +1192,7 @@ export declare const imagePlugin: (params?: {
     imageAutocompleteSuggestions?: string[] | undefined;
     disableImageResize?: boolean | undefined;
     imagePreviewHandler?: ImagePreviewHandler | undefined;
+    ImageDialog?: FC<{}> | (() => JSX.Element) | undefined;
 } | undefined) => RealmPlugin;
 
 /**
@@ -1427,13 +1429,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 */
 
@@ -1563,7 +1565,7 @@ export declare interface LexicalConvertOptions {
  * This is part of the process that converts the editor contents to markdown.
  * @group Markdown Processing
  */
-export declare interface LexicalExportVisitor<LN extends LexicalNode, UN extends Mdast.Content> {
+export declare interface LexicalExportVisitor<LN extends LexicalNode, UN extends Mdast.Nodes> {
     /**
      * Return true if the given node is of the type that this visitor can process.
      * You can safely use the node type guard functions (as in $isParagraphNode, $isLinkNode, etc.) here.
@@ -1614,12 +1616,12 @@ export declare interface LexicalExportVisitor<LN extends LexicalNode, UN extends
      * Return true if the current node should be joined with the previous node.
      * This is necessary due to some inconsistencies between the lexical tree and the mdast tree when it comes to formatting.
      */
-    shouldJoin?(prevNode: Mdast.Content, currentNode: UN): boolean;
+    shouldJoin?(prevNode: Mdast.RootContent, currentNode: UN): boolean;
     /**
      * Join the current node with the previous node, returning the resulting new node
      * For this to be called by the tree walk, shouldJoin must return true.
      */
-    join?<T extends Mdast.Content>(prevNode: T, currentNode: T): T;
+    join?<T extends Mdast.RootContent>(prevNode: T, currentNode: T): T;
     /**
      * Default 0, optional, sets the priority of the visitor. The higher the number, the earlier it will be called.
      */
@@ -1630,7 +1632,7 @@ export declare interface LexicalExportVisitor<LN extends LexicalNode, UN extends
  * A generic visitor that can be used to process any lexical node.
  * @group Markdown Processing
  */
-export declare type LexicalVisitor = LexicalExportVisitor<LexicalNode, Mdast.Content>;
+export declare type LexicalVisitor = LexicalExportVisitor<LexicalNode, Mdast.RootContent>;
 
 /* Excluded from this release type: linkAutocompleteSuggestions$ */
 
@@ -1741,12 +1743,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 +1778,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);
-      }
+    ([, 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/image/index.js

@@ -129,12 +129,12 @@ const closeImageDialog$ = Action((r) => {
 });
 const saveImage$ = Signal();
 const imagePlugin = realmPlugin({
-  init(realm) {
+  init(realm, params) {
     realm.pubIn({
       [addImportVisitor$]: [MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor],
       [addLexicalNode$]: ImageNode,
       [addExportVisitor$]: LexicalImageVisitor,
-      [addComposerChild$]: ImageDialog
+      [addComposerChild$]: (params == null ? void 0 : params.ImageDialog) || ImageDialog
     });
   },
   update(realm, params) {

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.1.0",
   "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"