@zm-editor/react 0.1.2 → 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") {
@@ -11729,12 +11748,6 @@ var SlashMenuComponent = class {
       this.element.className = "zm-slash-menu";
       document.body.appendChild(this.element);
     }
-    const rect = this.props.clientRect?.();
-    if (rect) {
-      this.element.style.position = "fixed";
-      this.element.style.left = `${rect.left}px`;
-      this.element.style.top = `${rect.bottom + 8}px`;
-    }
     this.removeEventListeners();
     this.element.innerHTML = "";
     if (this.props.items.length === 0) {
@@ -11742,31 +11755,50 @@ var SlashMenuComponent = class {
       emptyDiv.className = "zm-slash-menu-empty";
       emptyDiv.textContent = this.props.noResultsText ?? "No results found";
       this.element.appendChild(emptyDiv);
-      return;
-    }
-    this.props.items.forEach((item, index) => {
-      const itemDiv = document.createElement("div");
-      itemDiv.className = `zm-slash-menu-item ${index === this.selectedIndex ? "selected" : ""}`;
-      itemDiv.dataset.index = String(index);
-      const titleDiv = document.createElement("div");
-      titleDiv.className = "zm-slash-menu-item-title";
-      titleDiv.textContent = item.title;
-      const descDiv = document.createElement("div");
-      descDiv.className = "zm-slash-menu-item-description";
-      descDiv.textContent = item.description;
-      itemDiv.appendChild(titleDiv);
-      itemDiv.appendChild(descDiv);
-      this.element.appendChild(itemDiv);
-      const handler = () => {
-        this.props.command(item);
-      };
-      itemDiv.addEventListener("click", handler);
-      this.clickHandlers.push({ element: itemDiv, handler });
-      itemDiv.addEventListener("mouseenter", () => {
-        this.selectedIndex = index;
-        this.updateSelection();
+    } else {
+      this.props.items.forEach((item, index) => {
+        const itemDiv = document.createElement("div");
+        itemDiv.className = `zm-slash-menu-item ${index === this.selectedIndex ? "selected" : ""}`;
+        itemDiv.dataset.index = String(index);
+        const titleDiv = document.createElement("div");
+        titleDiv.className = "zm-slash-menu-item-title";
+        titleDiv.textContent = item.title;
+        const descDiv = document.createElement("div");
+        descDiv.className = "zm-slash-menu-item-description";
+        descDiv.textContent = item.description;
+        itemDiv.appendChild(titleDiv);
+        itemDiv.appendChild(descDiv);
+        this.element.appendChild(itemDiv);
+        const handler = () => {
+          this.props.command(item);
+        };
+        itemDiv.addEventListener("click", handler);
+        this.clickHandlers.push({ element: itemDiv, handler });
+        itemDiv.addEventListener("mouseenter", () => {
+          this.selectedIndex = index;
+          this.updateSelection();
+        });
       });
-    });
+    }
+    const rect = this.props.clientRect?.();
+    if (rect) {
+      this.element.style.position = "fixed";
+      this.element.style.left = `${rect.left}px`;
+      const menuMaxHeight = 320;
+      const gap = 8;
+      const menuHeight = Math.min(this.element.scrollHeight, menuMaxHeight);
+      const spaceBelow = window.innerHeight - rect.bottom - gap;
+      const spaceAbove = rect.top - gap;
+      if (spaceAbove >= menuHeight || spaceAbove > spaceBelow) {
+        const availableHeight = Math.min(menuMaxHeight, spaceAbove);
+        this.element.style.top = `${rect.top - Math.min(menuHeight, availableHeight) - gap}px`;
+        this.element.style.maxHeight = `${availableHeight}px`;
+      } else {
+        this.element.style.top = `${rect.bottom + gap}px`;
+        const availableHeight = Math.min(menuMaxHeight, spaceBelow);
+        this.element.style.maxHeight = `${availableHeight}px`;
+      }
+    }
   }
   updateSelection() {
     if (!this.element) return;
@@ -11774,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");
       }
@@ -11833,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") {
@@ -11862,12 +11903,6 @@ var MentionMenuComponent = class {
       this.element.className = "zm-mention-list";
       document.body.appendChild(this.element);
     }
-    const rect = this.props.clientRect?.();
-    if (rect) {
-      this.element.style.position = "fixed";
-      this.element.style.left = `${rect.left}px`;
-      this.element.style.top = `${rect.bottom + 8}px`;
-    }
     this.removeEventListeners();
     this.element.innerHTML = "";
     if (this.props.items.length === 0) {
@@ -11875,47 +11910,66 @@ var MentionMenuComponent = class {
       emptyDiv.className = "zm-mention-list-empty";
       emptyDiv.textContent = "No users found";
       this.element.appendChild(emptyDiv);
-      return;
+    } else {
+      this.props.items.forEach((item, index) => {
+        const itemDiv = document.createElement("div");
+        itemDiv.className = `zm-mention-list-item ${index === this.selectedIndex ? "selected" : ""}`;
+        if (item.avatar) {
+          const avatarImg = document.createElement("img");
+          avatarImg.src = item.avatar;
+          avatarImg.alt = item.label;
+          avatarImg.className = "zm-mention-list-avatar";
+          itemDiv.appendChild(avatarImg);
+        } else {
+          const avatarPlaceholder = document.createElement("div");
+          avatarPlaceholder.className = "zm-mention-list-avatar-placeholder";
+          avatarPlaceholder.textContent = item.label.charAt(0).toUpperCase();
+          itemDiv.appendChild(avatarPlaceholder);
+        }
+        const contentDiv = document.createElement("div");
+        contentDiv.className = "zm-mention-list-content";
+        const labelDiv = document.createElement("div");
+        labelDiv.className = "zm-mention-list-label";
+        labelDiv.textContent = item.label;
+        contentDiv.appendChild(labelDiv);
+        if (item.description) {
+          const descDiv = document.createElement("div");
+          descDiv.className = "zm-mention-list-description";
+          descDiv.textContent = item.description;
+          contentDiv.appendChild(descDiv);
+        }
+        itemDiv.appendChild(contentDiv);
+        this.element.appendChild(itemDiv);
+        const handler = () => {
+          this.props.command(item);
+        };
+        itemDiv.addEventListener("click", handler);
+        this.clickHandlers.push({ element: itemDiv, handler });
+        itemDiv.addEventListener("mouseenter", () => {
+          this.selectedIndex = index;
+          this.updateSelection();
+        });
+      });
     }
-    this.props.items.forEach((item, index) => {
-      const itemDiv = document.createElement("div");
-      itemDiv.className = `zm-mention-list-item ${index === this.selectedIndex ? "selected" : ""}`;
-      if (item.avatar) {
-        const avatarImg = document.createElement("img");
-        avatarImg.src = item.avatar;
-        avatarImg.alt = item.label;
-        avatarImg.className = "zm-mention-list-avatar";
-        itemDiv.appendChild(avatarImg);
+    const rect = this.props.clientRect?.();
+    if (rect) {
+      this.element.style.position = "fixed";
+      this.element.style.left = `${rect.left}px`;
+      const menuMaxHeight = 240;
+      const gap = 8;
+      const menuHeight = Math.min(this.element.scrollHeight, menuMaxHeight);
+      const spaceBelow = window.innerHeight - rect.bottom - gap;
+      const spaceAbove = rect.top - gap;
+      if (spaceAbove >= menuHeight || spaceAbove > spaceBelow) {
+        const availableHeight = Math.min(menuMaxHeight, spaceAbove);
+        this.element.style.top = `${rect.top - Math.min(menuHeight, availableHeight) - gap}px`;
+        this.element.style.maxHeight = `${availableHeight}px`;
       } else {
-        const avatarPlaceholder = document.createElement("div");
-        avatarPlaceholder.className = "zm-mention-list-avatar-placeholder";
-        avatarPlaceholder.textContent = item.label.charAt(0).toUpperCase();
-        itemDiv.appendChild(avatarPlaceholder);
-      }
-      const contentDiv = document.createElement("div");
-      contentDiv.className = "zm-mention-list-content";
-      const labelDiv = document.createElement("div");
-      labelDiv.className = "zm-mention-list-label";
-      labelDiv.textContent = item.label;
-      contentDiv.appendChild(labelDiv);
-      if (item.description) {
-        const descDiv = document.createElement("div");
-        descDiv.className = "zm-mention-list-description";
-        descDiv.textContent = item.description;
-        contentDiv.appendChild(descDiv);
+        this.element.style.top = `${rect.bottom + gap}px`;
+        const availableHeight = Math.min(menuMaxHeight, spaceBelow);
+        this.element.style.maxHeight = `${availableHeight}px`;
       }
-      itemDiv.appendChild(contentDiv);
-      this.element.appendChild(itemDiv);
-      const handler = () => {
-        this.props.command(item);
-      };
-      itemDiv.addEventListener("click", handler);
-      this.clickHandlers.push({ element: itemDiv, handler });
-      itemDiv.addEventListener("mouseenter", () => {
-        this.selectedIndex = index;
-        this.updateSelection();
-      });
-    });
+    }
   }
   updateSelection() {
     if (!this.element) return;
@@ -11923,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");
       }