@threadlabs/looma 0.1.0 → 0.1.2

package/README.md

@@ -15,7 +15,7 @@ import { EditorToolbar, getDefaultEditorExtensions } from "@threadlabs/looma/vue
 
 Vue and Tiptap are optional to the package as a whole. `/vue` needs only Vue 3.5
 or newer. Looma's `/editor` and `/vue/editor` surfaces are Tiptap-backed and
-require the declared Tiptap 2 peers; `/vue/editor` consumers must also install
-`@tiptap/vue-3@^2.11.5` for `useEditor` and `EditorContent`. `/editor/ui` is the
-low-level UI-only boundary. See the repository getting-started guide for the
-full CSS and adapter setup.
+ship Looma's concrete extension set within those subpaths; `/vue/editor` consumers
+must also install `@tiptap/vue-3@^2.11.5` for `useEditor`, `EditorContent`, and a
+compatible Tiptap core. `/editor/ui` is the low-level UI-only boundary. See the
+repository getting-started guide for the full CSS and adapter setup.

package/editor/{chunk-NOOV344H.js → chunk-PQAV4KXC.js}

@@ -11,6 +11,7 @@ function dispatchTableAction(element, action) {
 }
 if (typeof HTMLElement !== "undefined") {
   class UIEditorTableContextMenuElement extends HTMLElement {
+    positionFrame = null;
     static get observedAttributes() {
       return [
         "open",
@@ -32,9 +33,15 @@ if (typeof HTMLElement !== "undefined") {
     connectedCallback() {
       this.render();
       this.addEventListener("click", this.onClick);
+      window.addEventListener("resize", this.scheduleViewportPosition);
     }
     disconnectedCallback() {
       this.removeEventListener("click", this.onClick);
+      window.removeEventListener("resize", this.scheduleViewportPosition);
+      if (this.positionFrame !== null) {
+        cancelAnimationFrame(this.positionFrame);
+        this.positionFrame = null;
+      }
     }
     attributeChangedCallback() {
       this.render();
@@ -47,6 +54,26 @@ if (typeof HTMLElement !== "undefined") {
         dispatchTableAction(this, action);
       }
     }
+    positionWithinViewport = () => {
+      this.positionFrame = null;
+      const menu = this.querySelector(".ui-editor-table-context-menu");
+      if (!menu) return;
+      menu.style.translate = "";
+      const rect = menu.getBoundingClientRect();
+      const gutter = 12;
+      const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+      const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+      const offsetX = rect.right > viewportWidth - gutter ? viewportWidth - gutter - rect.right : Math.max(0, gutter - rect.left);
+      const offsetY = rect.bottom > viewportHeight - gutter ? viewportHeight - gutter - rect.bottom : Math.max(0, gutter - rect.top);
+      if (offsetX !== 0 || offsetY !== 0) {
+        menu.style.translate = `${offsetX}px ${offsetY}px`;
+      }
+    };
+    scheduleViewportPosition = () => {
+      if (!this.isConnected) return;
+      if (this.positionFrame !== null) cancelAnimationFrame(this.positionFrame);
+      this.positionFrame = requestAnimationFrame(this.positionWithinViewport);
+    };
     render() {
       const open = this.getBoolAttr("open");
       this.hidden = !open;
@@ -123,6 +150,7 @@ if (typeof HTMLElement !== "undefined") {
       });
       html += "</div>";
       this.innerHTML = html;
+      this.scheduleViewportPosition();
     }
   }
   if (typeof window !== "undefined" && !customElements.get(TAG)) {