@threadlabs/looma 0.1.6 → 0.1.7

package/vue/editor/index.js

@@ -181,13 +181,19 @@ var LoomaEditor = defineComponent2({
     const tableToolbarShell = ref(null);
     const tableOverlayShell = ref(null);
     const tableMenuShell = ref(null);
+    const mobileToolbarShell = ref(null);
     const dragOver = ref(false);
     const uploading = ref(false);
     const tablePickerOpen = ref(false);
     const tablePickerStyle = ref({});
+    const mobileToolbarStyle = ref({});
+    const mobile = ref(false);
+    const editorFocused = ref(false);
+    const mobileToolbarMode = ref("formatting");
     let dragLeaveTimer = null;
     let tableResizeActive = false;
     let tableInteractionActive = false;
+    let mobileTableControlsDismissed = false;
     const slash = reactive({
       active: false,
       items: [],
@@ -243,6 +249,28 @@ var LoomaEditor = defineComponent2({
       tableUi.alignment = "left";
       tableUi.background = null;
       tableUi.capabilities = { ...EMPTY_CAPABILITIES };
+      mobileTableControlsDismissed = false;
+      mobileToolbarMode.value = "formatting";
+    };
+    const updateMobileViewport = () => {
+      mobile.value = window.innerWidth <= 767;
+      if (!mobile.value) {
+        mobileToolbarStyle.value = {};
+        return;
+      }
+      nextTick(() => {
+        const viewport = window.visualViewport;
+        const viewportLeft = viewport?.offsetLeft ?? 0;
+        const viewportTop = viewport?.offsetTop ?? 0;
+        const viewportWidth = viewport?.width ?? window.innerWidth;
+        const viewportHeight = viewport?.height ?? window.innerHeight;
+        const toolbarHeight = mobileToolbarShell.value?.getBoundingClientRect().height || 56;
+        mobileToolbarStyle.value = {
+          left: `${viewportLeft}px`,
+          top: `${Math.max(viewportTop, viewportTop + viewportHeight - toolbarHeight)}px`,
+          width: `${viewportWidth}px`
+        };
+      });
     };
     const updateTableUi = () => {
       const instance = editor.value;
@@ -257,14 +285,15 @@ var LoomaEditor = defineComponent2({
         closeTableUi();
         return;
       }
+      if (!mobileTableControlsDismissed) mobileToolbarMode.value = "table";
       const rect = table.getBoundingClientRect();
       const maxToolbarWidth = Math.min(420, window.innerWidth - 24);
       const toolbarLeft = Math.min(
         Math.max(12, rect.left + (rect.width - maxToolbarWidth) / 2),
         Math.max(12, window.innerWidth - maxToolbarWidth - 12)
       );
-      tableUi.toolbarOpen = state.showToolbar;
-      tableUi.overlayOpen = true;
+      tableUi.toolbarOpen = state.showToolbar && !mobile.value;
+      tableUi.overlayOpen = !mobile.value;
       tableUi.alignment = state.cellAlignment;
       tableUi.background = state.cellBackground;
       tableUi.capabilities = state.capabilities;
@@ -282,20 +311,31 @@ var LoomaEditor = defineComponent2({
         height: `${rect.height}px`
       };
     };
+    const onEditorFocus = () => {
+      editorFocused.value = true;
+      updateTableUi();
+      updateMobileViewport();
+    };
+    const onEditorBlur = () => {
+      updateTableUi();
+      setTimeout(() => {
+        if (!tableInteractionActive && !editor.value?.isFocused) editorFocused.value = false;
+      }, 0);
+    };
     const bindEditorUi = (instance) => {
       if (!instance) return;
       instance.on("selectionUpdate", updateTableUi);
       instance.on("transaction", updateTableUi);
-      instance.on("focus", updateTableUi);
-      instance.on("blur", updateTableUi);
+      instance.on("focus", onEditorFocus);
+      instance.on("blur", onEditorBlur);
       nextTick(updateTableUi);
     };
     const unbindEditorUi = (instance) => {
       if (!instance) return;
       instance.off("selectionUpdate", updateTableUi);
       instance.off("transaction", updateTableUi);
-      instance.off("focus", updateTableUi);
-      instance.off("blur", updateTableUi);
+      instance.off("focus", onEditorFocus);
+      instance.off("blur", onEditorBlur);
     };
     watch(editor, (instance, previous) => {
       unbindEditorUi(previous);
@@ -305,16 +345,29 @@ var LoomaEditor = defineComponent2({
       const anchor = tablePickerAnchor.value;
       if (!anchor) return;
       const rect = anchor.getBoundingClientRect();
+      const viewport = window.visualViewport;
+      const viewportLeft = viewport?.offsetLeft ?? 0;
+      const viewportTop = viewport?.offsetTop ?? 0;
+      const viewportWidth = viewport?.width ?? window.innerWidth;
+      const viewportHeight = viewport?.height ?? window.innerHeight;
       const width = 220;
-      const left = Math.min(Math.max(12, rect.left), Math.max(12, window.innerWidth - width - 12));
+      const left = Math.min(
+        Math.max(viewportLeft + 12, rect.left),
+        Math.max(viewportLeft + 12, viewportLeft + viewportWidth - width - 12)
+      );
       const popoverHeight = tablePickerPopover.value?.getBoundingClientRect().height || 300;
       const top = Math.min(
-        Math.max(12, rect.bottom + 8),
-        Math.max(12, window.innerHeight - popoverHeight - 12)
+        Math.max(viewportTop + 12, rect.bottom + 8),
+        Math.max(viewportTop + 12, viewportTop + viewportHeight - popoverHeight - 12)
       );
-      tablePickerStyle.value = window.innerWidth <= 767 ? { position: "fixed", left: `${left}px`, bottom: `${Math.max(12, window.innerHeight - rect.top + 8)}px` } : { position: "fixed", top: `${top}px`, left: `${left}px` };
+      tablePickerStyle.value = window.innerWidth <= 767 ? {
+        position: "fixed",
+        left: `${left}px`,
+        top: `${Math.max(viewportTop + 12, viewportTop + viewportHeight - popoverHeight - 64)}px`
+      } : { position: "fixed", top: `${top}px`, left: `${left}px` };
     };
     const onViewportChange = () => {
+      updateMobileViewport();
       updateTableUi();
       updateTablePickerPosition();
       tableUi.menuOpen = false;
@@ -324,7 +377,7 @@ var LoomaEditor = defineComponent2({
       const inElement = (element) => Boolean(
         element && (path.includes(element) || event.target instanceof Node && element.contains(event.target))
       );
-      const inTableUi = inElement(tableToolbarShell.value) || inElement(tableOverlayShell.value) || inElement(tableMenuShell.value);
+      const inTableUi = inElement(tableToolbarShell.value) || inElement(tableOverlayShell.value) || inElement(tableMenuShell.value) || inElement(mobileToolbarShell.value);
       tableInteractionActive = inTableUi;
       if (inTableUi) setTimeout(() => {
         tableInteractionActive = false;
@@ -350,8 +403,11 @@ var LoomaEditor = defineComponent2({
       });
     };
     onMounted(() => {
+      updateMobileViewport();
       window.addEventListener("resize", onViewportChange);
       window.addEventListener("scroll", onViewportChange, true);
+      window.visualViewport?.addEventListener("resize", onViewportChange);
+      window.visualViewport?.addEventListener("scroll", onViewportChange);
       document.addEventListener("pointerdown", onDocumentPointerDown, true);
       document.addEventListener("pointerdown", onResizePointerDown, true);
       document.addEventListener("pointerup", onResizePointerUp, true);
@@ -359,6 +415,8 @@ var LoomaEditor = defineComponent2({
     onBeforeUnmount(() => {
       window.removeEventListener("resize", onViewportChange);
       window.removeEventListener("scroll", onViewportChange, true);
+      window.visualViewport?.removeEventListener("resize", onViewportChange);
+      window.visualViewport?.removeEventListener("scroll", onViewportChange);
       document.removeEventListener("pointerdown", onDocumentPointerDown, true);
       document.removeEventListener("pointerdown", onResizePointerDown, true);
       document.removeEventListener("pointerup", onResizePointerUp, true);
@@ -495,7 +553,7 @@ var LoomaEditor = defineComponent2({
         },
         onDrop
       }, [
-        instance && props.editable ? h2(BubbleMenu, {
+        instance && props.editable && !mobile.value ? h2(BubbleMenu, {
           editor: instance,
           pluginKey: "looma-text-formatting-menu",
           shouldShow: ({ editor: menuEditor, from, to }) => shouldShowTextFormattingToolbar(menuEditor, from, to),
@@ -507,6 +565,27 @@ var LoomaEditor = defineComponent2({
           }
         }, { default: () => renderToolbar(instance) }) : null,
         instance ? h2(EditorContent, { editor: instance }) : null,
+        instance && props.editable && mobile.value && editorFocused.value ? h2("div", {
+          ref: mobileToolbarShell,
+          class: "looma-editor__mobile-toolbar-shell",
+          "data-mode": mobileToolbarMode.value,
+          style: mobileToolbarStyle.value,
+          role: "toolbar",
+          "aria-label": mobileToolbarMode.value === "table" ? "Table editing" : "Text formatting"
+        }, mobileToolbarMode.value === "table" ? [
+          h2("button", {
+            class: "looma-editor__mobile-toolbar-back",
+            type: "button",
+            "aria-label": "Formatting tools",
+            onClick: () => {
+              mobileTableControlsDismissed = true;
+              mobileToolbarMode.value = "formatting";
+              editor.value?.commands.focus();
+              nextTick(updateMobileViewport);
+            }
+          }, "\u2190 Formatting"),
+          h2(EditorTableToolbar, tableProps)
+        ] : [renderToolbar(instance)]) : null,
         h2("input", {
           ref: fileInput,
           class: "looma-editor__file-input",

package/dist/looma/p-a7be33fd.entry.js

@@ -1 +0,0 @@
-import{r as i,g as a,h as o,H as e}from"./p-CEeiinfk.js";import{o as r,c as t,r as s}from"./p-CR7f2MQC.js";import{d as n}from"./p-JwSoedEO.js";const d=class{constructor(a){i(this,a)}get host(){return a(this)}open=!1;defaultOpen=!1;modal=!0;dismissible=!0;internalOpen=!1;overlayId=`ui-dialog-${Math.random().toString(36).slice(2,11)}`;dialogRef;syncFromProp(){this.internalOpen=this.open}syncOpen(){this.dialogRef&&(this.internalOpen?(this.dialogRef.showModal(),r({id:this.overlayId,modal:this.modal,element:this.host,dismissible:this.dismissible,requestClose:(i,a)=>this.handleRequestClose(i,a)})):(this.dialogRef.close(),t(this.overlayId)))}componentDidLoad(){this.syncFromProp(),this.internalOpen=this.internalOpen||this.defaultOpen,this.dialogRef?.addEventListener("close",this.onDialogClose),this.syncOpen()}disconnectedCallback(){this.dialogRef?.removeEventListener("close",this.onDialogClose),t(this.overlayId)}componentDidUpdate(){this.syncOpen()}handleRequestClose(i,a){this.internalOpen=!1,n(this.host,"close",{open:!1,reason:i,trigger:a})}onDialogClose=()=>{this.internalOpen&&(this.internalOpen=!1,t(this.overlayId),n(this.host,"close",{open:!1,reason:"programmatic",trigger:"programmatic"}))};onKeydown=i=>{"Escape"===i.key&&s("escape","keyboard")};render(){return o(e,{key:"2a2fcdfa1e3fac5eb3c0e3d6748cebdf388c216d","data-open":this.internalOpen?"":void 0,onKeyDown:this.onKeydown},o("dialog",{key:"c3eef2bb3bec77fa518269fce38c19c2ededda49",ref:i=>this.dialogRef=i,open:this.internalOpen},o("slot",{key:"9ae5c30d57096184ec287fd9dd134ff566b9fd39"})))}static get watchers(){return{open:[{syncFromProp:0}],internalOpen:[{syncOpen:0}]}}};d.style=":host{display:block}:host:not([data-open]){display:none}:host dialog{--ui-dialog-duration:var(--ui-motion-base);--ui-dialog-viewport-gap:var(--ui-space-4, 1rem);position:fixed;inset:0;inline-size:min(     calc(100% - (var(--ui-dialog-viewport-gap) * 2)),     var(--ui-dialog-max-width, 440px)   );max-inline-size:none;max-block-size:calc(100dvh - (var(--ui-dialog-viewport-gap) * 2));margin:auto;padding:var(--ui-space-4);overflow:auto;background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-dialog);box-shadow:var(--ui-shadow-dialog);visibility:hidden;pointer-events:none;opacity:0;transform:scale(0.96);transition:opacity var(--ui-dialog-duration) var(--ui-motion-ease),     transform var(--ui-dialog-duration) var(--ui-motion-ease),     visibility var(--ui-dialog-duration),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]{visibility:visible;pointer-events:auto;opacity:1;transform:scale(1);animation:ui-dialog-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-enter{from{opacity:0;transform:scale(0.96)}}:host dialog::backdrop{background-color:transparent;transition:background-color var(--ui-dialog-duration) var(--ui-motion-ease),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]::backdrop{background-color:var(--ui-overlay-backdrop);animation:ui-dialog-backdrop-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-backdrop-enter{from{background-color:transparent}}";export{d as ui_dialog}