@mdxeditor/editor 2.1.0 → 2.2.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
+          )
+        ] : []
       );
     });
   }

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "2.1.0",
+  "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",