@threadlabs/looma 0.1.13 → 0.1.14

package/editor.css

@@ -149,10 +149,16 @@
 
 .looma-editor .ProseMirror img {
   max-width: 100%;
+  height: auto;
   margin: var(--ui-space-3) 0;
   border-radius: var(--ui-radius-2);
 }
 
+.looma-editor .ProseMirror img[data-looma-image]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 3px;
+}
+
 .looma-editor__file-input {
   position: absolute;
   width: 0;
@@ -161,6 +167,42 @@
   pointer-events: none;
 }
 
+.looma-editor__upload-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-space-3);
+  margin-top: var(--ui-space-3);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  border: 1px solid var(--ui-danger-solid);
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-danger-soft);
+  color: var(--ui-text);
+  font-size: var(--ui-font-size-sm);
+}
+
+.looma-editor__upload-error button {
+  min-height: 2rem;
+  padding: 0 var(--ui-space-3);
+  border: 0;
+  border-radius: var(--ui-radius-1);
+  background: var(--ui-danger-solid);
+  color: var(--ui-text-on-accent);
+  cursor: pointer;
+  font: inherit;
+  font-weight: var(--ui-font-semibold);
+}
+
+.looma-editor__upload-error button:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+
+.looma-editor__upload-error button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
 .looma-editor__drop-overlay {
   position: absolute;
   z-index: var(--ui-editor-drop-overlay-z-index, 10);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",

package/vue/editor/index.d.ts

@@ -4,6 +4,7 @@ import * as vue from 'vue';
 import { PropType } from 'vue';
 import { TableContextMenuActionEventDetail, InsertTableEventDetail, TableOverlayActionEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail } from '@threadlabs/looma/editor/ui';
 import { JSONContent, AnyExtension, Editor } from '@tiptap/core';
+import { OverlayTrigger } from '@threadlabs/looma/core';
 
 interface VueEditorAdapterEventMap {
     tableAction: TableContextMenuActionEventDetail;
@@ -87,9 +88,33 @@ declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {
     readonly EditorTableOverlay: "ui-editor-table-overlay";
 };
 
-interface LoomaImageUploadResult {
-    url: string;
+interface LoomaImageDescriptor {
+    src: string;
     alt?: string;
+    width?: number;
+    height?: number;
+    responsive?: boolean;
+}
+/** Browser-only attributes resolved by a host image-delivery provider. */
+interface LoomaImageRenditionAttributes {
+    src?: string;
+    srcset?: string;
+    sizes?: string;
+    loading?: "eager" | "lazy";
+    decoding?: "async" | "auto" | "sync";
+    fetchPriority?: "auto" | "high" | "low";
+}
+type LoomaImageAttributeResolver = (image: LoomaImageDescriptor) => LoomaImageRenditionAttributes | undefined;
+type LoomaImageActivationTrigger = Exclude<OverlayTrigger, "programmatic">;
+interface LoomaImageActivationDetail extends LoomaImageDescriptor {
+    trigger: LoomaImageActivationTrigger;
+}
+interface LoomaImageRenditionErrorDetail extends LoomaImageDescriptor {
+    trigger: "programmatic";
+}
+
+interface LoomaImageUploadResult extends Omit<LoomaImageDescriptor, "src"> {
+    url: string;
 }
 type LoomaImageUploader = (file: File) => Promise<string | LoomaImageUploadResult>;
 declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -124,6 +149,10 @@ declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
     };
+    resolveImageAttributes: {
+        type: PropType<LoomaImageAttributeResolver | undefined>;
+        default: undefined;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -131,6 +160,8 @@ declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
     update: (_value: JSONContent) => true;
     ready: (_editor: Editor) => true;
     uploadError: (_error: unknown, _file: File) => true;
+    imageActivate: (_detail: LoomaImageActivationDetail) => true;
+    imageRenditionError: (_detail: LoomaImageRenditionErrorDetail) => true;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     modelValue: {
         type: PropType<JSONContent>;
@@ -163,17 +194,24 @@ declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
     };
+    resolveImageAttributes: {
+        type: PropType<LoomaImageAttributeResolver | undefined>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: (_value: JSONContent) => any;
     onUpdate?: (_value: JSONContent) => any;
     onReady?: (_editor: Editor) => any;
     onUploadError?: (_error: unknown, _file: File) => any;
+    onImageActivate?: (_detail: LoomaImageActivationDetail) => any;
+    onImageRenditionError?: (_detail: LoomaImageRenditionErrorDetail) => any;
 }>, {
     placeholder: string;
     modelValue: JSONContent;
     editable: boolean;
     extensions: AnyExtension[];
     uploadImage: LoomaImageUploader | undefined;
+    resolveImageAttributes: LoomaImageAttributeResolver | undefined;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorInsertTableGrid, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor, type LoomaImageUploadResult, type LoomaImageUploader, type VueEditorAdapterEventMap };
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorInsertTableGrid, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor, type LoomaImageActivationDetail, type LoomaImageActivationTrigger, type LoomaImageAttributeResolver, type LoomaImageDescriptor, type LoomaImageRenditionAttributes, type LoomaImageRenditionErrorDetail, type LoomaImageUploadResult, type LoomaImageUploader, type VueEditorAdapterEventMap };

package/vue/editor/index.js

@@ -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")