@zm-editor/react 0.1.1 → 0.1.3

package/dist/index.js

@@ -11729,12 +11729,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 +11736,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;
@@ -11862,12 +11875,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 +11882,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;