@threadlabs/looma 0.1.13 → 0.1.15

package/vue/editor/index.js

@@ -2,7 +2,7 @@ import {
   IconButton,
   createAdapterComponent,
   toHTMLElement
-} from "../chunk-YN4IUYVY.js";
+} from "../chunk-IITL6UBR.js";
 
 // src/editor/index.ts
 import "@threadlabs/looma/editor";
@@ -130,6 +130,188 @@ import {
   getVisualViewportRect,
   LOOMA_ICONS
 } from "@threadlabs/looma/core";
+
+// src/editor/image-delivery.ts
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+function optionalString(value) {
+  return typeof value === "string" && value.length > 0 ? value : void 0;
+}
+function normalizeImageDimension(value) {
+  return typeof value === "number" && Number.isSafeInteger(value) && value > 0 ? value : void 0;
+}
+function imageDescriptorFromAttrs(attrs) {
+  const src = optionalString(attrs.src);
+  if (!src) return null;
+  const alt = typeof attrs.alt === "string" ? attrs.alt : void 0;
+  const width = normalizeImageDimension(attrs.width);
+  const height = normalizeImageDimension(attrs.height);
+  return {
+    src,
+    ...alt !== void 0 ? { alt } : {},
+    ...width ? { width } : {},
+    ...height ? { height } : {},
+    ...attrs.responsive === true ? { responsive: true } : {}
+  };
+}
+function transientAttributes(resolver, image) {
+  const attributes = {
+    "aria-label": image.alt ? `Open image: ${image.alt}` : "Open image",
+    "data-looma-image": "",
+    role: "button",
+    src: image.src,
+    tabindex: "0"
+  };
+  if (!image.responsive || !resolver) return attributes;
+  let rendition;
+  try {
+    rendition = resolver(image);
+  } catch {
+    return attributes;
+  }
+  if (!rendition) return attributes;
+  const src = optionalString(rendition.src);
+  const srcset = optionalString(rendition.srcset);
+  const sizes = optionalString(rendition.sizes);
+  if (src) attributes.src = src;
+  if (srcset) attributes.srcset = srcset;
+  if (sizes) attributes.sizes = sizes;
+  if (rendition.loading === "eager" || rendition.loading === "lazy") {
+    attributes.loading = rendition.loading;
+  }
+  if (["async", "auto", "sync"].includes(rendition.decoding ?? "")) {
+    attributes.decoding = rendition.decoding;
+  }
+  if (["auto", "high", "low"].includes(rendition.fetchPriority ?? "")) {
+    attributes.fetchpriority = rendition.fetchPriority;
+  }
+  if (src && src !== image.src || srcset) attributes["data-looma-rendition"] = "true";
+  return attributes;
+}
+function createDecorations(doc, resolver, failedRenditions) {
+  const decorations = [];
+  const currentSources = /* @__PURE__ */ new Set();
+  doc.descendants((node, position) => {
+    if (node.type.name !== "image") return;
+    const image = imageDescriptorFromAttrs(node.attrs);
+    if (!image) return;
+    currentSources.add(image.src);
+    decorations.push(Decoration.node(
+      position,
+      position + node.nodeSize,
+      transientAttributes(failedRenditions.has(image.src) ? void 0 : resolver, image)
+    ));
+  });
+  for (const src of failedRenditions) {
+    if (!currentSources.has(src)) failedRenditions.delete(src);
+  }
+  return DecorationSet.create(doc, decorations);
+}
+function rangeContainsImage(doc, from, to) {
+  const start = Math.max(0, Math.min(from - 1, doc.content.size));
+  const end = Math.max(start, Math.min(to + 1, doc.content.size));
+  let found = false;
+  doc.nodesBetween(start, end, (node) => {
+    if (node.type.name !== "image") return !found;
+    found = true;
+    return false;
+  });
+  return found;
+}
+function transactionChangesImages(transaction) {
+  let changed = false;
+  transaction.mapping.maps.forEach((stepMap) => {
+    stepMap.forEach((oldStart, oldEnd, newStart, newEnd) => {
+      if (rangeContainsImage(transaction.before, oldStart, oldEnd) || rangeContainsImage(transaction.doc, newStart, newEnd)) changed = true;
+    });
+  });
+  return changed;
+}
+function createLoomaImageDeliveryController(options) {
+  const pluginKey = new PluginKey("looma-image-delivery");
+  const failedRenditions = /* @__PURE__ */ new Set();
+  const refresh = (editor) => {
+    editor.view.dispatch(editor.state.tr.setMeta(pluginKey, true));
+  };
+  const extension = Extension.create({
+    name: "loomaImageDelivery",
+    addGlobalAttributes() {
+      return [{
+        types: ["image"],
+        attributes: {
+          width: {
+            default: null,
+            parseHTML: (element) => normalizeImageDimension(Number(element.getAttribute("width"))) ?? null,
+            renderHTML: (attributes) => normalizeImageDimension(attributes.width) ? { width: normalizeImageDimension(attributes.width) } : {}
+          },
+          height: {
+            default: null,
+            parseHTML: (element) => normalizeImageDimension(Number(element.getAttribute("height"))) ?? null,
+            renderHTML: (attributes) => normalizeImageDimension(attributes.height) ? { height: normalizeImageDimension(attributes.height) } : {}
+          },
+          responsive: {
+            default: null,
+            parseHTML: (element) => element.hasAttribute("data-looma-responsive") || null,
+            renderHTML: (attributes) => attributes.responsive === true ? { "data-looma-responsive": "" } : {}
+          }
+        }
+      }];
+    },
+    addProseMirrorPlugins() {
+      return [new Plugin({
+        key: pluginKey,
+        state: {
+          init: (_, state) => createDecorations(
+            state.doc,
+            options.resolveAttributes(),
+            failedRenditions
+          ),
+          apply: (transaction, previous) => {
+            if (!transaction.getMeta(pluginKey) && !transactionChangesImages(transaction)) {
+              return previous.map(transaction.mapping, transaction.doc);
+            }
+            return createDecorations(
+              transaction.doc,
+              options.resolveAttributes(),
+              failedRenditions
+            );
+          }
+        },
+        props: {
+          decorations: (state) => pluginKey.getState(state)
+        }
+      })];
+    }
+  });
+  return {
+    extension,
+    markRenditionFailed: (editor, src) => {
+      if (failedRenditions.has(src)) return false;
+      failedRenditions.add(src);
+      refresh(editor);
+      return true;
+    },
+    reset: (editor) => {
+      failedRenditions.clear();
+      refresh(editor);
+    }
+  };
+}
+function imageUploadContent(image) {
+  return {
+    type: "image",
+    attrs: {
+      src: image.src,
+      alt: image.alt,
+      ...image.width ? { width: image.width } : {},
+      ...image.height ? { height: image.height } : {},
+      ...image.responsive === true ? { responsive: true } : {}
+    }
+  };
+}
+
+// src/editor/LoomaEditor.ts
 var EMPTY_DOCUMENT = { type: "doc", content: [] };
 var EMPTY_CAPABILITIES = {
   canAddRowBefore: false,
@@ -189,13 +371,19 @@ var LoomaEditor = defineComponent2({
     uploadImage: {
       type: Function,
       default: void 0
+    },
+    resolveImageAttributes: {
+      type: Function,
+      default: void 0
     }
   },
   emits: {
     "update:modelValue": (_value) => true,
     update: (_value) => true,
     ready: (_editor) => true,
-    uploadError: (_error, _file) => true
+    uploadError: (_error, _file) => true,
+    imageActivate: (_detail) => true,
+    imageRenditionError: (_detail) => true
   },
   setup(props, { attrs, emit, expose }) {
     const root = ref(null);
@@ -208,6 +396,7 @@ var LoomaEditor = defineComponent2({
     const mobileToolbarShell = ref(null);
     const dragOver = ref(false);
     const uploading = ref(false);
+    const failedUpload = ref(null);
     const tablePickerOpen = ref(false);
     const tablePickerStyle = ref({});
     const mobileToolbarStyle = ref({});
@@ -249,9 +438,13 @@ var LoomaEditor = defineComponent2({
         Object.assign(slash, state);
       }
     });
+    const imageDelivery = createLoomaImageDeliveryController({
+      resolveAttributes: () => props.resolveImageAttributes
+    });
     const editor = useEditor({
       extensions: [
         ...getDefaultEditorExtensions({ placeholder: props.placeholder }),
+        imageDelivery.extension,
         slashExtension,
         ...props.extensions
       ],
@@ -265,6 +458,10 @@ var LoomaEditor = defineComponent2({
       }
     });
     watch(() => props.editable, (editable) => editor.value?.setEditable(editable));
+    watch(() => props.resolveImageAttributes, () => {
+      const instance = editor.value;
+      if (instance) imageDelivery.reset(instance);
+    });
     watch(() => props.modelValue, (value) => {
       const instance = editor.value;
       if (!instance || sameDocument(instance.getJSON(), value)) return;
@@ -441,6 +638,49 @@ var LoomaEditor = defineComponent2({
         nextTick(updateTableUi);
       });
     };
+    const imageForElement = (element) => {
+      const instance = editor.value;
+      if (!instance) return null;
+      try {
+        const position = instance.view.posAtDOM(element, 0);
+        const node = instance.state.doc.nodeAt(position);
+        return node?.type.name === "image" ? imageDescriptorFromAttrs(node.attrs) : null;
+      } catch {
+        return null;
+      }
+    };
+    const imageElementForEvent = (event) => {
+      const element = event.target instanceof Element ? event.target.closest("img[data-looma-image]") : null;
+      return element && root.value?.contains(element) ? element : null;
+    };
+    const activateImage = (element, trigger) => {
+      const image = imageForElement(element);
+      if (image) emit("imageActivate", { ...image, trigger });
+    };
+    const onImageClick = (event) => {
+      const element = imageElementForEvent(event);
+      if (element && !props.editable) activateImage(element, "pointer");
+    };
+    const onImageDoubleClick = (event) => {
+      const element = imageElementForEvent(event);
+      if (element && props.editable) activateImage(element, "pointer");
+    };
+    const onImageKeyDown = (event) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      const element = imageElementForEvent(event);
+      if (!element) return;
+      event.preventDefault();
+      activateImage(element, "keyboard");
+    };
+    const onImageError = (event) => {
+      const element = imageElementForEvent(event);
+      if (!element || element.dataset.loomaRendition !== "true") return;
+      const image = imageForElement(element);
+      if (!image) return;
+      const instance = editor.value;
+      if (!instance || !imageDelivery.markRenditionFailed(instance, image.src)) return;
+      emit("imageRenditionError", { ...image, trigger: "programmatic" });
+    };
     onMounted(() => {
       updateMobileViewport();
       window.addEventListener("resize", onViewportChange);
@@ -450,6 +690,7 @@ var LoomaEditor = defineComponent2({
       document.addEventListener("pointerdown", onDocumentPointerDown, true);
       document.addEventListener("pointerdown", onResizePointerDown, true);
       document.addEventListener("pointerup", onResizePointerUp, true);
+      root.value?.addEventListener("error", onImageError, true);
     });
     onBeforeUnmount(() => {
       window.removeEventListener("resize", onViewportChange);
@@ -459,6 +700,7 @@ var LoomaEditor = defineComponent2({
       document.removeEventListener("pointerdown", onDocumentPointerDown, true);
       document.removeEventListener("pointerdown", onResizePointerDown, true);
       document.removeEventListener("pointerup", onResizePointerUp, true);
+      root.value?.removeEventListener("error", onImageError, true);
       unbindEditorUi(editor.value);
       if (dragLeaveTimer) clearTimeout(dragLeaveTimer);
       if (tablePointerFrame !== null) cancelAnimationFrame(tablePointerFrame);
@@ -469,8 +711,18 @@ var LoomaEditor = defineComponent2({
       try {
         const result = await props.uploadImage(file);
         const image = typeof result === "string" ? { url: result } : result;
-        editor.value.chain().focus().setImage({ src: image.url, alt: image.alt ?? file.name }).run();
+        const width = normalizeImageDimension(image.width);
+        const height = normalizeImageDimension(image.height);
+        editor.value.chain().focus().insertContent(imageUploadContent({
+          src: image.url,
+          alt: image.alt ?? file.name,
+          ...width ? { width } : {},
+          ...height ? { height } : {},
+          ...image.responsive === true ? { responsive: true } : {}
+        })).run();
+        failedUpload.value = null;
       } catch (error) {
+        failedUpload.value = { file };
         emit("uploadError", error, file);
       } finally {
         uploading.value = false;
@@ -658,7 +910,10 @@ var LoomaEditor = defineComponent2({
             dragOver.value = false;
           }, 100);
         },
-        onDrop
+        onDrop,
+        onClick: onImageClick,
+        onDblclick: onImageDoubleClick,
+        onKeydown: onImageKeyDown
       }, [
         instance && props.editable && !mobile.value ? h2(BubbleMenu, {
           editor: instance,
@@ -703,6 +958,20 @@ var LoomaEditor = defineComponent2({
           "aria-hidden": "true",
           onChange: onFileChange
         }),
+        failedUpload.value ? h2("div", {
+          class: "looma-editor__upload-error",
+          role: "alert"
+        }, [
+          h2("span", "Couldn\u2019t upload image."),
+          h2("button", {
+            type: "button",
+            disabled: uploading.value,
+            onClick: () => {
+              const attempt = failedUpload.value;
+              if (attempt) void insertImage(attempt.file);
+            }
+          }, uploading.value ? "Retrying\u2026" : "Retry")
+        ]) : null,
         dragOver.value ? h2("div", { class: "looma-editor__drop-overlay", "aria-hidden": "true" }, [
           loomaIcon("image"),
           h2("span", "Drop image to upload")

package/vue/index.d.ts

@@ -30,6 +30,21 @@ interface VueAdapterEventMap {
         reason: string;
         trigger: string;
     };
+    reorder: {
+        sourceId: string;
+        targetId: string;
+        position: "before" | "inside" | "after";
+        sourceType: string;
+        targetType: string;
+        sourceScope: string;
+        targetScope: string;
+        trigger: string;
+    };
+    expand: {
+        id: string;
+        expanded: boolean;
+        trigger: string;
+    };
 }
 
 declare const Stack: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -140,6 +155,12 @@ declare const SearchResultRow: vue.DefineComponent<{}, () => vue.VNode<vue.Rende
 declare const TopBar: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const Tree: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const TreeItem: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const ADAPTER_COMPONENT_TAG_MAP: {
     readonly Stack: "ui-stack";
     readonly Inline: "ui-inline";
@@ -177,7 +198,9 @@ declare const ADAPTER_COMPONENT_TAG_MAP: {
     readonly SearchShell: "ui-search-shell";
     readonly SearchResultRow: "ui-search-result-row";
     readonly TopBar: "ui-top-bar";
+    readonly Tree: "ui-tree";
+    readonly TreeItem: "ui-tree-item";
 };
 declare const VUE_ADAPTER_NOTE = "Thin adapter only: attrs and slots pass through to custom elements and DOM events map to typed callbacks.";
 
-export { ADAPTER_COMPONENT_TAG_MAP, AffordanceScope, Avatar, AvatarGroup, Badge, Button, Center, Checkbox, Cluster, ContextMenu, Dialog, Disclosure, FloatingActionButton, FormField, Grid, IconButton, Inline, Input, Menu, MenuItem, Popover, Radio, RadioGroup, Reel, SearchResultRow, SearchShell, Select, Separator, Sidebar, Stack, Switch, Switcher, Tabs, Textarea, ToastRegion, Tooltip, TopBar, VUE_ADAPTER_NOTE, type VueAdapterEventMap };
+export { ADAPTER_COMPONENT_TAG_MAP, AffordanceScope, Avatar, AvatarGroup, Badge, Button, Center, Checkbox, Cluster, ContextMenu, Dialog, Disclosure, FloatingActionButton, FormField, Grid, IconButton, Inline, Input, Menu, MenuItem, Popover, Radio, RadioGroup, Reel, SearchResultRow, SearchShell, Select, Separator, Sidebar, Stack, Switch, Switcher, Tabs, Textarea, ToastRegion, Tooltip, TopBar, Tree, TreeItem, VUE_ADAPTER_NOTE, type VueAdapterEventMap };

package/vue/index.js

@@ -36,8 +36,10 @@ import {
   ToastRegion,
   Tooltip,
   TopBar,
+  Tree,
+  TreeItem,
   VUE_ADAPTER_NOTE
-} from "./chunk-YN4IUYVY.js";
+} from "./chunk-IITL6UBR.js";
 export {
   ADAPTER_COMPONENT_TAG_MAP,
   AffordanceScope,
@@ -76,5 +78,7 @@ export {
   ToastRegion,
   Tooltip,
   TopBar,
+  Tree,
+  TreeItem,
   VUE_ADAPTER_NOTE
 };