@mdxeditor/editor 2.0.1 → 2.2.0

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';
@@ -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;
 
 /**
@@ -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$ */
 

package/dist/plugins/core/index.js

@@ -414,7 +414,7 @@ const viewMode$ = Cell("rich-text", (r) => {
       filter((mode) => mode.current === "rich-text"),
       withLatestFrom(activeEditor$)
     ),
-    ([mode, editor]) => {
+    ([, editor]) => {
       editor == null ? void 0 : editor.dispatchCommand(NESTED_EDITOR_UPDATED_COMMAND, void 0);
     }
   );

package/dist/plugins/image/index.js

@@ -1,9 +1,9 @@
-import { realmPlugin } from "../../RealmWithPlugins.js";
-import { $wrapNodeInElement } from "@lexical/utils";
+import { $wrapNodeInElement, mergeRegister } from "@lexical/utils";
 import { Signal, Cell, withLatestFrom, Action, mapTo, map } from "@mdxeditor/gurx";
 import { $getNodeByKey, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, DRAGSTART_COMMAND, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, COMMAND_PRIORITY_LOW, DROP_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_CRITICAL, createCommand, $createRangeSelection, $setSelection, $getSelection, $isNodeSelection } from "lexical";
+import { realmPlugin } from "../../RealmWithPlugins.js";
 import { CAN_USE_DOM } from "../../utils/detectMac.js";
-import { rootEditor$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addComposerChild$ } from "../core/index.js";
+import { activeEditor$, createActiveEditorSubscription$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addComposerChild$ } from "../core/index.js";
 import { ImageDialog } from "./ImageDialog.js";
 import { $createImageNode, ImageNode, $isImageNode } from "./ImageNode.js";
 import { LexicalImageVisitor } from "./LexicalImageVisitor.js";
@@ -17,7 +17,7 @@ const imageDialogState$ = Cell(
   { type: "inactive" },
   (r) => {
     r.sub(
-      r.pipe(saveImage$, withLatestFrom(rootEditor$, imageUploadHandler$, imageDialogState$)),
+      r.pipe(saveImage$, withLatestFrom(activeEditor$, imageUploadHandler$, imageDialogState$)),
       ([values, theEditor, imageUploadHandler, dialogState]) => {
         const handler = dialogState.type === "editing" ? (src) => {
           theEditor == null ? void 0 : theEditor.update(() => {
@@ -47,67 +47,68 @@ const imageDialogState$ = Cell(
         }
       }
     );
-    r.sub(rootEditor$, (editor) => {
-      editor == null ? void 0 : editor.registerCommand(
-        INSERT_IMAGE_COMMAND,
-        (payload) => {
-          const imageNode = $createImageNode(payload);
-          $insertNodes([imageNode]);
-          if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
-            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
-          }
-          return true;
-        },
-        COMMAND_PRIORITY_EDITOR
-      );
+    r.pub(createActiveEditorSubscription$, (editor) => {
       const theUploadHandler = r.getValue(imageUploadHandler$);
-      editor == null ? void 0 : editor.registerCommand(
-        DRAGSTART_COMMAND,
-        (event) => {
-          return onDragStart(event);
-        },
-        COMMAND_PRIORITY_HIGH
-      );
-      editor == null ? void 0 : editor.registerCommand(
-        DRAGOVER_COMMAND,
-        (event) => {
-          return onDragover(event);
-        },
-        COMMAND_PRIORITY_LOW
-      );
-      editor == null ? void 0 : editor.registerCommand(
-        DROP_COMMAND,
-        (event) => {
-          return onDrop(event, editor, r.getValue(imageUploadHandler$));
-        },
-        COMMAND_PRIORITY_HIGH
-      );
-      if (theUploadHandler === null) {
-        return;
-      }
-      editor == null ? void 0 : editor.registerCommand(
-        PASTE_COMMAND,
-        (event) => {
-          var _a;
-          let cbPayload = Array.from(((_a = event.clipboardData) == null ? void 0 : _a.items) || []);
-          cbPayload = cbPayload.filter((i) => /image/.test(i.type));
-          if (!cbPayload.length || cbPayload.length === 0) {
-            return false;
-          }
-          const imageUploadHandlerValue = r.getValue(imageUploadHandler$);
-          Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()))).then((urls) => {
-            urls.forEach((url) => {
-              editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
-                src: url,
-                altText: ""
+      return mergeRegister(
+        editor == null ? void 0 : editor.registerCommand(
+          INSERT_IMAGE_COMMAND,
+          (payload) => {
+            const imageNode = $createImageNode(payload);
+            $insertNodes([imageNode]);
+            if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+              $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+            }
+            return true;
+          },
+          COMMAND_PRIORITY_EDITOR
+        ),
+        editor == null ? void 0 : editor.registerCommand(
+          DRAGSTART_COMMAND,
+          (event) => {
+            return onDragStart(event);
+          },
+          COMMAND_PRIORITY_HIGH
+        ),
+        editor == null ? void 0 : editor.registerCommand(
+          DRAGOVER_COMMAND,
+          (event) => {
+            return onDragover(event);
+          },
+          COMMAND_PRIORITY_LOW
+        ),
+        editor == null ? void 0 : editor.registerCommand(
+          DROP_COMMAND,
+          (event) => {
+            return onDrop(event, editor, r.getValue(imageUploadHandler$));
+          },
+          COMMAND_PRIORITY_HIGH
+        ),
+        ...theUploadHandler !== null ? [
+          editor == null ? void 0 : editor.registerCommand(
+            PASTE_COMMAND,
+            (event) => {
+              var _a;
+              let cbPayload = Array.from(((_a = event.clipboardData) == null ? void 0 : _a.items) || []);
+              cbPayload = cbPayload.filter((i) => /image/.test(i.type));
+              if (!cbPayload.length || cbPayload.length === 0) {
+                return false;
+              }
+              const imageUploadHandlerValue = r.getValue(imageUploadHandler$);
+              Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()))).then((urls) => {
+                urls.forEach((url) => {
+                  editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                    src: url,
+                    altText: ""
+                  });
+                });
+              }).catch((e) => {
+                throw e;
               });
-            });
-          }).catch((e) => {
-            throw e;
-          });
-          return true;
-        },
-        COMMAND_PRIORITY_CRITICAL
+              return true;
+            },
+            COMMAND_PRIORITY_CRITICAL
+          )
+        ] : []
       );
     });
   }
@@ -129,12 +130,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/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -104,7 +104,6 @@
     "@types/node": "^20.2.5",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
-    "@types/testing-library__jest-dom": "^6.0.0",
     "@types/unist": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",