@zm-editor/react 0.1.3 → 0.1.5

package/dist/index.js

@@ -9495,6 +9495,21 @@ function findNodePosFromDOM(editor, element) {
           const pos = editor.view.posAtDOM(nodeElement, 0);
           debugLog("findNodePosFromDOM", "posAtDOM for direct child returned:", pos);
           if (pos >= 0) {
+            const isReactNodeView = nodeElement.classList.contains("react-renderer");
+            if (isReactNodeView) {
+              const $pos = editor.state.doc.resolve(pos);
+              if ($pos.depth >= 1) {
+                const nodePos = $pos.before(1);
+                const node = editor.state.doc.nodeAt(nodePos);
+                if (node) {
+                  debugLog("findNodePosFromDOM", "Found ReactNodeView node via $pos.before(1):", {
+                    type: node.type.name,
+                    pos: nodePos
+                  });
+                  return { pos: nodePos, node };
+                }
+              }
+            }
             const nodeAtPos = editor.state.doc.nodeAt(pos);
             if (nodeAtPos) {
               debugLog("findNodePosFromDOM", "Found node at pos:", {
@@ -9503,9 +9518,9 @@ function findNodePosFromDOM(editor, element) {
               });
               return { pos, node: nodeAtPos };
             }
-            const $pos = editor.state.doc.resolve(pos);
-            if ($pos.depth >= 1) {
-              const nodePos = $pos.before(1);
+            const $posResolved = editor.state.doc.resolve(pos);
+            if ($posResolved.depth >= 1) {
+              const nodePos = $posResolved.before(1);
               const node = editor.state.doc.nodeAt(nodePos);
               if (node) {
                 debugLog("findNodePosFromDOM", "Found node via $pos.before(1):", {
@@ -9777,7 +9792,8 @@ function getContentTop(element, nodeTypeName) {
     "metadata",
     "openapi",
     "stackTrace",
-    "horizontalRule"
+    "horizontalRule",
+    "callout"
   ];
   if (atomNodeTypes.includes(nodeTypeName)) {
     debugLog("getContentTop", `Atom node (${nodeTypeName}): using rect.top=${rect.top}`);
@@ -9834,7 +9850,8 @@ function getNodeLineHeight(element, nodeTypeName) {
     "metadata",
     "openapi",
     "stackTrace",
-    "horizontalRule"
+    "horizontalRule",
+    "callout"
   ];
   if (atomNodeTypes.includes(nodeTypeName)) {
     const atomLineHeight = 24;
@@ -11520,8 +11537,10 @@ var ZmEditor = forwardRef(
     const handleEmojiSelect = useCallback(
       (emoji) => {
         if (!editor) return;
-        editor.chain().focus().insertContent(emoji).run();
         setShowEmojiPicker(false);
+        requestAnimationFrame(() => {
+          editor.chain().focus().insertContent(emoji).run();
+        });
       },
       [editor]
     );
@@ -11700,12 +11719,12 @@ var SlashMenuComponent = class {
         this.selectedIndex + 1,
         this.props.items.length - 1
       );
-      this.render();
+      this.updateSelection();
       return true;
     }
     if (event.key === "ArrowUp") {
       this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
-      this.render();
+      this.updateSelection();
       return true;
     }
     if (event.key === "Enter") {
@@ -11787,6 +11806,15 @@ var SlashMenuComponent = class {
     items.forEach((item, index) => {
       if (index === this.selectedIndex) {
         item.classList.add("selected");
+        const el = item;
+        const container = this.element;
+        const itemTop = el.offsetTop;
+        const itemBottom = itemTop + el.offsetHeight;
+        if (itemTop < container.scrollTop) {
+          container.scrollTop = itemTop;
+        } else if (itemBottom > container.scrollTop + container.clientHeight) {
+          container.scrollTop = itemBottom - container.clientHeight;
+        }
       } else {
         item.classList.remove("selected");
       }
@@ -11846,12 +11874,12 @@ var MentionMenuComponent = class {
         this.selectedIndex + 1,
         this.props.items.length - 1
       );
-      this.render();
+      this.updateSelection();
       return true;
     }
     if (event.key === "ArrowUp") {
       this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
-      this.render();
+      this.updateSelection();
       return true;
     }
     if (event.key === "Enter") {
@@ -11949,6 +11977,15 @@ var MentionMenuComponent = class {
     items.forEach((item, index) => {
       if (index === this.selectedIndex) {
         item.classList.add("selected");
+        const el = item;
+        const container = this.element;
+        const itemTop = el.offsetTop;
+        const itemBottom = itemTop + el.offsetHeight;
+        if (itemTop < container.scrollTop) {
+          container.scrollTop = itemTop;
+        } else if (itemBottom > container.scrollTop + container.clientHeight) {
+          container.scrollTop = itemBottom - container.clientHeight;
+        }
       } else {
         item.classList.remove("selected");
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zm-editor/react",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "React components for zm-editor - Notion-like rich text editor",
   "license": "MIT",
   "type": "module",