@threadlabs/looma 0.1.17 → 0.1.18

package/editor/{chunk-RTHHTPWK.js → chunk-3QMBK3XZ.js}

@@ -1,6 +1,7 @@
 import {
+  MAX_MENTION_RESULT_LIMIT,
   TABLE_CELL_BACKGROUND_OPTIONS
-} from "./chunk-CX4QDKSV.js";
+} from "./chunk-ZOUKEZ77.js";
 
 // src/table-context-menu.ts
 import {
@@ -479,12 +480,215 @@ if (typeof HTMLElement !== "undefined") {
   }
 }
 
+// src/mention-menu.ts
+import { getVisualViewportRect as getVisualViewportRect2 } from "@threadlabs/looma/core";
+var TAG4 = "ui-editor-mention-menu";
+var MOBILE_BREAKPOINT = 768;
+var MENU_HEIGHT_ESTIMATE = 320;
+var MENU_WIDTH = 320;
+var OFFSET = 8;
+function finiteCoordinate(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function normalizeAnchorRect(value) {
+  if (!value || typeof value !== "object") return null;
+  const rect = value;
+  const x = finiteCoordinate(rect.x);
+  const y = finiteCoordinate(rect.y);
+  const width = finiteCoordinate(rect.width);
+  const height = finiteCoordinate(rect.height);
+  const left = finiteCoordinate(rect.left) ?? x;
+  const top = finiteCoordinate(rect.top) ?? y;
+  const right = finiteCoordinate(rect.right) ?? (left !== null && width !== null ? left + width : null);
+  const bottom = finiteCoordinate(rect.bottom) ?? (top !== null && height !== null ? top + height : null);
+  return left === null || top === null || right === null || bottom === null ? null : { left, top, right, bottom };
+}
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function dispatchMenuEvent(element, name, detail) {
+  element.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+}
+if (typeof HTMLElement !== "undefined") {
+  class UIEditorMentionMenuElement extends HTMLElement {
+    #open = false;
+    #query = "";
+    #items = [];
+    #selectedIndex = 0;
+    #loading = false;
+    #anchorRect = null;
+    #normalizedAnchorRect = null;
+    get open() {
+      return this.#open;
+    }
+    set open(value) {
+      this.#open = Boolean(value);
+      this.render();
+    }
+    get query() {
+      return this.#query;
+    }
+    set query(value) {
+      this.#query = typeof value === "string" ? value : "";
+      this.render();
+    }
+    get items() {
+      return this.#items;
+    }
+    set items(value) {
+      this.#items = Array.isArray(value) ? value.slice(0, MAX_MENTION_RESULT_LIMIT) : [];
+      if (this.#selectedIndex >= this.#items.length) this.#selectedIndex = 0;
+      this.render();
+    }
+    get selectedIndex() {
+      return this.#selectedIndex;
+    }
+    set selectedIndex(value) {
+      this.#selectedIndex = Number.isFinite(value) ? Math.max(0, value) : 0;
+      this.render();
+    }
+    get loading() {
+      return this.#loading;
+    }
+    set loading(value) {
+      this.#loading = Boolean(value);
+      this.render();
+    }
+    get anchorRect() {
+      return this.#anchorRect;
+    }
+    set anchorRect(value) {
+      const normalized = normalizeAnchorRect(value);
+      this.#anchorRect = normalized ? value : null;
+      this.#normalizedAnchorRect = normalized;
+      this.render();
+    }
+    connectedCallback() {
+      this.setAttribute("role", "listbox");
+      this.setAttribute("aria-label", "Mention a person");
+      this.addEventListener("mousedown", this.onMouseDown);
+      this.addEventListener("click", this.onClick);
+      this.addEventListener("mouseover", this.onMouseOver);
+      window.addEventListener("resize", this.onViewportChange);
+      window.addEventListener("scroll", this.onViewportChange, true);
+      window.visualViewport?.addEventListener("resize", this.onViewportChange);
+      window.visualViewport?.addEventListener("scroll", this.onViewportChange);
+      this.render();
+    }
+    disconnectedCallback() {
+      this.removeEventListener("mousedown", this.onMouseDown);
+      this.removeEventListener("click", this.onClick);
+      this.removeEventListener("mouseover", this.onMouseOver);
+      window.removeEventListener("resize", this.onViewportChange);
+      window.removeEventListener("scroll", this.onViewportChange, true);
+      window.visualViewport?.removeEventListener("resize", this.onViewportChange);
+      window.visualViewport?.removeEventListener("scroll", this.onViewportChange);
+    }
+    onMouseDown = (event) => event.preventDefault();
+    onClick = (event) => {
+      const target = event.target.closest("[data-index]");
+      const index = Number.parseInt(target?.dataset.index ?? "", 10);
+      if (Number.isFinite(index)) {
+        dispatchMenuEvent(
+          this,
+          "looma-editor-mention-menu-select",
+          { index }
+        );
+      }
+    };
+    onMouseOver = (event) => {
+      const target = event.target.closest("[data-index]");
+      const index = Number.parseInt(target?.dataset.index ?? "", 10);
+      if (!Number.isFinite(index) || index === this.#selectedIndex) return;
+      this.#selectedIndex = index;
+      dispatchMenuEvent(
+        this,
+        "looma-editor-mention-menu-highlight",
+        { index }
+      );
+      this.render();
+    };
+    onViewportChange = () => {
+      if (this.#open) this.applyHostPosition();
+    };
+    applyHostPosition() {
+      const rect = this.#normalizedAnchorRect;
+      if (!rect) {
+        this.style.display = "none";
+        return;
+      }
+      const viewport = getVisualViewportRect2(window);
+      this.style.display = "block";
+      this.style.position = "fixed";
+      this.style.zIndex = "500";
+      if (window.innerWidth < MOBILE_BREAKPOINT) {
+        const toolbarReserve = 56;
+        const height = Math.min(MENU_HEIGHT_ESTIMATE, Math.max(0, viewport.height - toolbarReserve));
+        this.style.left = `${viewport.left}px`;
+        this.style.top = `${viewport.top + viewport.height - height - toolbarReserve}px`;
+        this.style.right = "";
+        this.style.bottom = "";
+        this.style.width = `${viewport.width}px`;
+        this.style.maxHeight = `${height}px`;
+        return;
+      }
+      const spaceBelow = viewport.bottom - rect.bottom - OFFSET;
+      const spaceAbove = rect.top - viewport.top - OFFSET;
+      const top = spaceBelow >= MENU_HEIGHT_ESTIMATE || spaceBelow >= spaceAbove ? rect.bottom + OFFSET : rect.top - OFFSET - MENU_HEIGHT_ESTIMATE;
+      const left = Math.max(
+        viewport.left + 8,
+        Math.min(rect.left, viewport.right - MENU_WIDTH - 8)
+      );
+      this.style.top = `${Math.max(viewport.top + 8, top)}px`;
+      this.style.left = `${left}px`;
+      this.style.right = "";
+      this.style.bottom = "";
+      this.style.width = `${MENU_WIDTH}px`;
+      this.style.maxHeight = "";
+    }
+    render() {
+      const visible = this.#open && (this.#loading || this.#items.length > 0) && this.#normalizedAnchorRect;
+      this.hidden = !visible;
+      if (!visible) return;
+      this.applyHostPosition();
+      const optionIdPrefix = this.id || TAG4;
+      const selectedId = `${optionIdPrefix}-option-${this.#selectedIndex}`;
+      this.setAttribute("aria-busy", this.#loading ? "true" : "false");
+      if (this.#items.length > 0) this.setAttribute("aria-activedescendant", selectedId);
+      else this.removeAttribute("aria-activedescendant");
+      const items = this.#items.map((item, index) => {
+        const selected = index === this.#selectedIndex;
+        return [
+          `<li id="${optionIdPrefix}-option-${index}" class="ui-editor-mention-menu__item${selected ? " ui-editor-mention-menu__item--active" : ""}"`,
+          ` role="option" aria-selected="${selected}" data-index="${index}">`,
+          `<span class="ui-editor-mention-menu__avatar" aria-hidden="true">${escapeHtml(item.initials ?? item.label.slice(0, 2).toUpperCase())}</span>`,
+          `<span class="ui-editor-mention-menu__body">`,
+          `<span class="ui-editor-mention-menu__label">${escapeHtml(item.label)}</span>`,
+          item.detail ? `<span class="ui-editor-mention-menu__detail">${escapeHtml(item.detail)}</span>` : "",
+          `</span></li>`
+        ].join("");
+      }).join("");
+      this.innerHTML = [
+        `<div class="ui-editor-mention-menu">`,
+        `<div class="ui-editor-mention-menu__header">`,
+        `<span>People</span><span class="ui-editor-mention-menu__hint">Type after @ to search</span>`,
+        `</div>`,
+        this.#loading && this.#items.length === 0 ? `<div class="ui-editor-mention-menu__loading" role="status">Searching\u2026</div>` : `<ul class="ui-editor-mention-menu__list" role="presentation">${items}</ul>`,
+        `</div>`
+      ].join("");
+    }
+  }
+  if (typeof window !== "undefined" && !customElements.get(TAG4)) {
+    customElements.define(TAG4, UIEditorMentionMenuElement);
+  }
+}
+
 // src/table-overlay.ts
 import {
   createProximityCoordinator,
   loomaIconMarkup as loomaIconMarkup3
 } from "@threadlabs/looma/core";
-var TAG4 = "ui-editor-table-overlay";
+var TAG5 = "ui-editor-table-overlay";
 var DEFAULT_ROWS = 3;
 var DEFAULT_COLS = 3;
 function sameNumbers(left, right) {
@@ -789,37 +993,37 @@ if (typeof HTMLElement !== "undefined") {
       this.#proximity?.refresh();
     }
   }
-  if (typeof window !== "undefined" && !customElements.get(TAG4)) {
-    customElements.define(TAG4, UIEditorTableOverlayElement);
+  if (typeof window !== "undefined" && !customElements.get(TAG5)) {
+    customElements.define(TAG5, UIEditorTableOverlayElement);
   }
 }
 
 // src/slash-menu.ts
 import {
-  getVisualViewportRect as getVisualViewportRect2,
+  getVisualViewportRect as getVisualViewportRect3,
   loomaIconMarkup as loomaIconMarkup4
 } from "@threadlabs/looma/core";
-var TAG5 = "ui-editor-slash-menu";
-var MOBILE_BREAKPOINT = 768;
-var MENU_HEIGHT_ESTIMATE = 320;
-var MENU_WIDTH = 280;
-var OFFSET = 8;
-function finiteCoordinate(value) {
+var TAG6 = "ui-editor-slash-menu";
+var MOBILE_BREAKPOINT2 = 768;
+var MENU_HEIGHT_ESTIMATE2 = 320;
+var MENU_WIDTH2 = 280;
+var OFFSET2 = 8;
+function finiteCoordinate2(value) {
   return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
-function normalizeAnchorRect(value) {
+function normalizeAnchorRect2(value) {
   if (!value || typeof value !== "object") {
     return null;
   }
   const rect = value;
-  const x = finiteCoordinate(rect.x);
-  const y = finiteCoordinate(rect.y);
-  const width = finiteCoordinate(rect.width);
-  const height = finiteCoordinate(rect.height);
-  const left = finiteCoordinate(rect.left) ?? x;
-  const top = finiteCoordinate(rect.top) ?? y;
-  const right = finiteCoordinate(rect.right) ?? (left !== null && width !== null ? left + width : null);
-  const bottom = finiteCoordinate(rect.bottom) ?? (top !== null && height !== null ? top + height : null);
+  const x = finiteCoordinate2(rect.x);
+  const y = finiteCoordinate2(rect.y);
+  const width = finiteCoordinate2(rect.width);
+  const height = finiteCoordinate2(rect.height);
+  const left = finiteCoordinate2(rect.left) ?? x;
+  const top = finiteCoordinate2(rect.top) ?? y;
+  const right = finiteCoordinate2(rect.right) ?? (left !== null && width !== null ? left + width : null);
+  const bottom = finiteCoordinate2(rect.bottom) ?? (top !== null && height !== null ? top + height : null);
   if (left === null || top === null || right === null || bottom === null) {
     return null;
   }
@@ -834,7 +1038,7 @@ function dispatchSlashMenuEvent(element, name, detail) {
     })
   );
 }
-function escapeHtml(value) {
+function escapeHtml2(value) {
   return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 }
 if (typeof HTMLElement !== "undefined") {
@@ -877,7 +1081,7 @@ if (typeof HTMLElement !== "undefined") {
       return this.#anchorRect;
     }
     set anchorRect(value) {
-      const normalized = normalizeAnchorRect(value);
+      const normalized = normalizeAnchorRect2(value);
       this.#anchorRect = normalized ? value : null;
       this.#normalizedAnchorRect = normalized;
       this.render();
@@ -947,16 +1151,16 @@ if (typeof HTMLElement !== "undefined") {
         this.style.display = "none";
         return;
       }
-      const viewport = getVisualViewportRect2(window);
+      const viewport = getVisualViewportRect3(window);
       const viewportWidth = viewport.width;
       const viewportHeight = viewport.height;
       this.style.display = "block";
       this.style.position = "fixed";
       this.style.zIndex = "500";
-      if (window.innerWidth < MOBILE_BREAKPOINT) {
+      if (window.innerWidth < MOBILE_BREAKPOINT2) {
         const toolbarReserve = 56;
         const menuHeight = Math.min(
-          MENU_HEIGHT_ESTIMATE,
+          MENU_HEIGHT_ESTIMATE2,
           Math.max(0, viewportHeight - toolbarReserve)
         );
         this.style.left = `${viewport.left}px`;
@@ -968,16 +1172,16 @@ if (typeof HTMLElement !== "undefined") {
         return;
       }
       let top;
-      const spaceBelow = viewport.bottom - rect.bottom - OFFSET;
-      const spaceAbove = rect.top - viewport.top - OFFSET;
-      if (spaceBelow >= MENU_HEIGHT_ESTIMATE || spaceBelow >= spaceAbove) {
-        top = rect.bottom + OFFSET;
+      const spaceBelow = viewport.bottom - rect.bottom - OFFSET2;
+      const spaceAbove = rect.top - viewport.top - OFFSET2;
+      if (spaceBelow >= MENU_HEIGHT_ESTIMATE2 || spaceBelow >= spaceAbove) {
+        top = rect.bottom + OFFSET2;
       } else {
-        top = rect.top - OFFSET - MENU_HEIGHT_ESTIMATE;
+        top = rect.top - OFFSET2 - MENU_HEIGHT_ESTIMATE2;
       }
       let left = rect.left;
-      if (left + MENU_WIDTH > viewport.right - 8) {
-        left = viewport.right - MENU_WIDTH - 8;
+      if (left + MENU_WIDTH2 > viewport.right - 8) {
+        left = viewport.right - MENU_WIDTH2 - 8;
       }
       if (left < viewport.left + 8) {
         left = viewport.left + 8;
@@ -986,7 +1190,7 @@ if (typeof HTMLElement !== "undefined") {
       this.style.left = `${left}px`;
       this.style.right = "";
       this.style.bottom = "";
-      this.style.width = `${MENU_WIDTH}px`;
+      this.style.width = `${MENU_WIDTH2}px`;
       this.style.maxHeight = "";
     }
     render() {
@@ -1008,8 +1212,8 @@ if (typeof HTMLElement !== "undefined") {
           `>`,
           `<span class="ui-editor-slash-menu__icon" aria-hidden="true">${loomaIconMarkup4(item.icon)}</span>`,
           `<span class="ui-editor-slash-menu__body">`,
-          `<span class="ui-editor-slash-menu__title">${escapeHtml(item.title)}</span>`,
-          `<span class="ui-editor-slash-menu__description">${escapeHtml(item.description)}</span>`,
+          `<span class="ui-editor-slash-menu__title">${escapeHtml2(item.title)}</span>`,
+          `<span class="ui-editor-slash-menu__description">${escapeHtml2(item.description)}</span>`,
           `</span>`,
           `</li>`
         ].join("");
@@ -1018,7 +1222,7 @@ if (typeof HTMLElement !== "undefined") {
         `<div class="ui-editor-slash-menu">`,
         `<div class="ui-editor-slash-menu__header" aria-hidden="true">`,
         `<span class="ui-editor-slash-menu__header-label">Insert</span>`,
-        query ? `<span class="ui-editor-slash-menu__header-query">${escapeHtml(query)}</span>` : "",
+        query ? `<span class="ui-editor-slash-menu__header-query">${escapeHtml2(query)}</span>` : "",
         `</div>`,
         `<ul class="ui-editor-slash-menu__list" role="presentation">${items}</ul>`,
         `<div class="ui-editor-slash-menu__footer" aria-hidden="true">`,
@@ -1028,13 +1232,13 @@ if (typeof HTMLElement !== "undefined") {
       ].join("");
     }
   }
-  if (typeof window !== "undefined" && !customElements.get(TAG5)) {
-    customElements.define(TAG5, UIEditorSlashMenuElement);
+  if (typeof window !== "undefined" && !customElements.get(TAG6)) {
+    customElements.define(TAG6, UIEditorSlashMenuElement);
   }
 }
 
 // src/toolbar.ts
-var TAG6 = "ui-editor-toolbar";
+var TAG7 = "ui-editor-toolbar";
 if (typeof HTMLElement !== "undefined") {
   class UIEditorToolbarElement extends HTMLElement {
     connectedCallback() {
@@ -1046,8 +1250,8 @@ if (typeof HTMLElement !== "undefined") {
       }
     }
   }
-  if (typeof window !== "undefined" && !customElements.get(TAG6)) {
-    customElements.define(TAG6, UIEditorToolbarElement);
+  if (typeof window !== "undefined" && !customElements.get(TAG7)) {
+    customElements.define(TAG7, UIEditorToolbarElement);
   }
 }