@openeditor/react 0.0.30 → 0.0.32

package/README.md

@@ -2,7 +2,36 @@
 
 Headless React bindings for OpenEditor's web editor runtime.
 
-Pass `attachmentRuntime` to `useOpenEditorController` for editable attachments and to `OpenEditorViewer` for identity-based resolution/opening. Progress, cancellation, retry input, and errors remain transient node-view state and are never emitted through document JSON.
+Pass `imageRuntime` and `attachmentRuntime` to `useOpenEditorController` for
+host-backed media and to `OpenEditorViewer` for identity-based URL resolution.
+Progress, cancellation, retry input, and errors remain transient node-view state
+and are never emitted through document JSON.
+
+An inserted image starts as an empty image node—never a fake placeholder URL.
+The built-in node view offers upload, drag/drop, URL embedding, replacement,
+alternative-text editing, progress, retry, and removal. The upload button is
+shown only when the host supplies `selectImage` and `uploadImage`:
+
+```tsx
+const imageRuntime = {
+  selectImage: () => chooseImageFromYourPicker(),
+  validateImage: (input) => input.size && input.size > 15_000_000
+    ? { accepted: false, message: "Image is too large." }
+    : { accepted: true },
+  uploadImage: (input, { signal, onProgress } = {}) =>
+    uploadToYourStorage(input.source, { signal, onProgress }),
+  resolveImage: (imageId, { signal } = {}) =>
+    resolveImageFromYourStorage(imageId, { signal }),
+  replaceImage: (imageId, input, options) =>
+    replaceImageInYourStorage(imageId, input.source, options),
+};
+
+const controller = useOpenEditorController({ imageRuntime });
+```
+
+`uploadImage` and `replaceImage` return an `OpenEditorImageSnapshot`. Store a
+durable `imageId`, public `src`, or both; `resolveImage` may return a temporary
+owner-preview URL such as a `blob:` URL without serializing it.
 
 ## Public surface
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties, RefObject, ComponentType } from 'react';
-import { OpenEditorBlockRef, OpenEditorDocument, BlockSpec, ProseMirrorNode, OpenEditorUrlPolicy, OpenEditorUrlContext, OpenEditorPageRuntime, OpenEditorAttachmentRuntime, OpenEditorPageSnapshot, OpenEditorAuthoringCapabilities } from '@openeditor/core';
-export { OpenEditorBlockRef, OpenEditorPageRuntime, OpenEditorPageSnapshot, OpenEditorUrlContext, OpenEditorUrlPolicy, openEditorPublicUrlPolicy, openEditorUnsafeUrlPolicy } from '@openeditor/core';
+import { OpenEditorBlockRef, OpenEditorDocument, BlockSpec, ProseMirrorNode, OpenEditorUrlPolicy, OpenEditorUrlContext, OpenEditorPageRuntime, OpenEditorAttachmentRuntime, OpenEditorImageRuntime, OpenEditorPageSnapshot, OpenEditorAuthoringCapabilities } from '@openeditor/core';
+export { OpenEditorBlockRef, OpenEditorImageRuntime, OpenEditorImageSnapshot, OpenEditorImageUploadInput, OpenEditorPageRuntime, OpenEditorPageSnapshot, OpenEditorUrlContext, OpenEditorUrlPolicy, openEditorPublicUrlPolicy, openEditorUnsafeUrlPolicy } from '@openeditor/core';
 import { ExportFormat, OpenEditorExporters } from '@openeditor/exporters';
 export { seedDocument } from '@openeditor/extensions';
 import { Editor, AnyExtension, NodeConfig } from '@tiptap/core';
@@ -19,7 +19,9 @@ type OpenEditorBlockInteractionStore = {
 
 declare const openEditorThemeTokenNames: readonly ["surface", "surfaceRaised", "surfaceMuted", "blockSurface", "text", "textSoft", "heading", "muted", "placeholder", "border", "borderStrong", "structuralLine", "accent", "accentText", "accentStrong", "buttonBackground", "buttonText", "codeBackground", "codeText", "link", "linkHover", "shadow", "fontSans", "fontMono", "radiusSmall", "radiusMedium", "radiusLarge", "spaceBlock", "spaceInline", "bodyFontSize", "bodyLineHeight", "headingFont", "headingLineHeight", "headingWeight", "heading1Size", "heading2Size", "heading3Size", "heading4Size", "heading5Size", "heading6Size"];
 type OpenEditorThemeToken = (typeof openEditorThemeTokenNames)[number];
-type OpenEditorTheme = Partial<Record<OpenEditorThemeToken, string>>;
+type OpenEditorTheme = {
+    surfaceRaised: string;
+} & Partial<Record<Exclude<OpenEditorThemeToken, "surfaceRaised">, string>>;
 type OpenEditorThemeStyle = CSSProperties & Record<`--oe-${string}`, string | undefined>;
 declare const createOpenEditorThemeStyle: (theme: OpenEditorTheme) => OpenEditorThemeStyle;
 declare const useOpenEditorThemeStyle: () => OpenEditorThemeStyle | undefined;
@@ -58,6 +60,7 @@ type OpenEditorReactProps = OpenEditorAuthoringCapabilities & {
     onFilePasteDrop?: (file: File) => boolean;
     pageRuntime?: OpenEditorPageRuntime;
     attachmentRuntime?: OpenEditorAttachmentRuntime<any>;
+    imageRuntime?: OpenEditorImageRuntime<any>;
     slashMenuItems?: readonly OpenEditorSlashMenuItem[];
     /** Consumer-owned blocks. Extension names and node types must be unique. */
     extensions?: readonly OpenEditorReactExtension[];
@@ -122,6 +125,7 @@ type OpenEditorController = {
     extensions: readonly OpenEditorReactExtension[];
     pageRuntime?: OpenEditorPageRuntime;
     attachmentRuntime?: OpenEditorAttachmentRuntime<any>;
+    imageRuntime?: OpenEditorImageRuntime<any>;
     enabledBlocks?: readonly string[];
     slashState: SlashState | null;
     dismissSlashMenu: () => void;
@@ -232,6 +236,7 @@ type OpenEditorViewerProps = {
     extensions?: readonly OpenEditorReactExtension[];
     pageRuntime?: OpenEditorPageRuntime;
     attachmentRuntime?: OpenEditorAttachmentRuntime<any>;
+    imageRuntime?: OpenEditorImageRuntime<any>;
     /** Safe by default. Supply an explicit host policy for trusted preview URLs such as `blob:`. */
     urlPolicy?: OpenEditorUrlPolicy;
 };
@@ -251,7 +256,7 @@ type OpenEditorPageHeaderProps = {
 };
 /** Canonical Notion-style page metadata editor shared by host page surfaces. */
 declare const OpenEditorPageHeader: ({ page, runtime, className, onPageChange, }: OpenEditorPageHeaderProps) => react.JSX.Element;
-declare const useOpenEditorController: ({ initialDocument, editable, placeholder, onChange, onFilePasteDrop, pageRuntime, attachmentRuntime, enabledBlocks, slashMenuItems, extensions, blockActions, }?: OpenEditorReactProps) => OpenEditorController;
+declare const useOpenEditorController: ({ initialDocument, editable, placeholder, onChange, onFilePasteDrop, pageRuntime, attachmentRuntime, imageRuntime, enabledBlocks, slashMenuItems, extensions, blockActions, }?: OpenEditorReactProps) => OpenEditorController;
 type OpenEditorBubbleMenuProps = {
     controller: OpenEditorController;
     children: ReactNode;
@@ -293,7 +298,7 @@ declare const sortBlockPickerItems: (items: readonly OpenEditorBlockPickerItem[]
 declare const getDefaultBlockPickerItems: (controller: OpenEditorController) => OpenEditorBlockPickerItem[];
 declare const getDefaultSlashMenuItems: (controller: OpenEditorController) => OpenEditorSlashMenuItem[];
 declare const OpenEditorContent: ({ controller, className, }: OpenEditorContentProps) => react.JSX.Element;
-declare const OpenEditorViewer: ({ document, className, renderers, extensions, pageRuntime, attachmentRuntime, urlPolicy, }: OpenEditorViewerProps) => react.JSX.Element;
-declare const useOpenEditor: ({ initialDocument, editable, placeholder, onChange, onFilePasteDrop, pageRuntime, attachmentRuntime, enabledBlocks, slashMenuItems, extensions, blockActions, }?: OpenEditorReactProps) => OpenEditorController;
+declare const OpenEditorViewer: ({ document, className, renderers, extensions, pageRuntime, attachmentRuntime, imageRuntime, urlPolicy, }: OpenEditorViewerProps) => react.JSX.Element;
+declare const useOpenEditor: ({ initialDocument, editable, placeholder, onChange, onFilePasteDrop, pageRuntime, attachmentRuntime, imageRuntime, enabledBlocks, slashMenuItems, extensions, blockActions, }?: OpenEditorReactProps) => OpenEditorController;
 
 export { type InsertRange, type OpenEditorBlockAction, type OpenEditorBlockActionContext, OpenEditorBlockDragHandle, type OpenEditorBlockDragHandleProps, type OpenEditorBlockPickerItem, OpenEditorBubbleMenu, type OpenEditorBubbleMenuProps, OpenEditorContent, type OpenEditorContentProps, type OpenEditorController, type OpenEditorExtensionMenu, type OpenEditorOverlayRect, OpenEditorPageHeader, type OpenEditorPageHeaderProps, type OpenEditorReactConfig, type OpenEditorReactExtension, type OpenEditorReactNodeExtension, type OpenEditorReactProps, type OpenEditorSlashMenuIcon, type OpenEditorSlashMenuIconProps, type OpenEditorSlashMenuItem, OpenEditorTableBubbleMenu, type OpenEditorTableBubbleMenuProps, type OpenEditorTableCommand, type OpenEditorTableController, type OpenEditorTableState, type OpenEditorTheme, OpenEditorThemeProvider, type OpenEditorThemeStyle, type OpenEditorThemeToken, OpenEditorViewer, type OpenEditorViewerProps, type OpenEditorViewerRenderer, type SlashState, canRunOpenEditorTableCommand, createOpenEditorThemeStyle, defineOpenEditorReactExtension, defineOpenEditorReactNode, formatAttachmentSize, getDefaultBlockPickerItems, getDefaultSlashMenuItems, getOpenEditorTableState, openEditorTableCommands, openEditorThemeTokenNames, runOpenEditorTableCommand, sortBlockPickerItems, sortSlashMenuItems, useOpenEditor, useOpenEditorBlockInteraction, useOpenEditorController, useOpenEditorThemeStyle };

package/dist/index.js

@@ -3,6 +3,7 @@ export { openEditorPublicUrlPolicy, openEditorUnsafeUrlPolicy } from '@openedito
 import { Checkbox } from '@base-ui/react/checkbox';
 import { shift as shift$1, flip, offset, arrow as arrow$1, size, autoPlacement, hide, inline, computePosition, autoUpdate } from '@floating-ui/dom';
 import { OpenEditorEmojiPicker } from '@openeditor/emoji';
+import { RefreshCw, Link2, Pencil, Trash2, Image as Image$1, Upload, X } from 'lucide-react';
 import React, { createContext, forwardRef, useRef, useState, useEffect, useContext, useMemo, useLayoutEffect, createRef, memo, createElement, version, useSyncExternalStore as useSyncExternalStore$1, useCallback, use, useDebugValue } from 'react';
 import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
 import { renderMermaidSVG } from 'beautiful-mermaid';
@@ -33094,6 +33095,7 @@ var createOpenEditorTableController = (getEditor) => ({
 });
 var OpenEditorPageRuntimeContext = createContext(void 0);
 var OpenEditorAttachmentRuntimeContext = createContext(void 0);
+var OpenEditorImageRuntimeContext = createContext(void 0);
 var defineOpenEditorReactExtension = (extension) => extension;
 var defineOpenEditorReactNode = ({
   block,
@@ -33421,6 +33423,262 @@ var Callout = Node3.create({
     return ReactNodeViewRenderer(OpenEditorCalloutNodeView);
   }
 });
+var imageSnapshotFromNode = (node) => ({
+  imageId: typeof node.attrs?.imageId === "string" ? node.attrs.imageId : null,
+  src: typeof node.attrs?.src === "string" && node.attrs.src.trim() ? node.attrs.src : null,
+  alt: typeof node.attrs?.alt === "string" ? node.attrs.alt : "",
+  width: typeof node.attrs?.width === "number" ? node.attrs.width : null,
+  height: typeof node.attrs?.height === "number" ? node.attrs.height : null
+});
+var resolvedImageSrc = (snapshot, runtimeResolved = false) => {
+  if (!snapshot?.src) return null;
+  const safe = openEditorPublicUrlPolicy(snapshot.src, "image");
+  if (safe) return safe;
+  const normalized = snapshot.src.trim();
+  return runtimeResolved && normalized.startsWith("blob:") ? normalized : null;
+};
+var webImageInput = (file) => ({
+  name: file.name,
+  mimeType: file.type || null,
+  size: file.size,
+  source: file
+});
+var OpenEditorImageNodeView = ({ editor, node, updateAttributes: updateAttributes2, deleteNode: deleteNode2, selected }) => {
+  const runtime = use(OpenEditorImageRuntimeContext);
+  const durable = imageSnapshotFromNode(node);
+  const hasImage = Boolean(durable.imageId || durable.src);
+  const [phase, setPhase] = useState(hasImage ? "ready" : "idle");
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState(null);
+  const [input, setInput] = useState(null);
+  const [resolved, setResolved] = useState(null);
+  const [showUrl, setShowUrl] = useState(false);
+  const [url, setUrl] = useState("");
+  const [editingAlt, setEditingAlt] = useState(false);
+  const [alt, setAlt] = useState(durable.alt);
+  const operationRef = useRef(0);
+  const abortRef = useRef(null);
+  const stopCurrent = () => {
+    operationRef.current += 1;
+    abortRef.current?.abort();
+    abortRef.current = null;
+  };
+  const isCurrent = (operation) => operationRef.current === operation;
+  useEffect(() => () => stopCurrent(), []);
+  useEffect(() => {
+    setAlt(durable.alt);
+  }, [durable.alt]);
+  useEffect(() => {
+    if (!durable.imageId || !runtime?.resolveImage) {
+      setResolved(null);
+      return;
+    }
+    const controller = new AbortController();
+    void runtime.resolveImage(durable.imageId, { signal: controller.signal }).then((snapshot) => {
+      if (!controller.signal.aborted) setResolved(snapshot);
+    }).catch(() => {
+      if (!controller.signal.aborted) setResolved(null);
+    });
+    return () => controller.abort();
+  }, [durable.imageId, runtime]);
+  const upload = async (selectedInput, replacing) => {
+    if (!runtime?.uploadImage) return;
+    stopCurrent();
+    const operation = operationRef.current;
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setInput(selectedInput);
+    setProgress(0);
+    setError(null);
+    setShowUrl(false);
+    setPhase("uploading");
+    try {
+      const validation = await runtime.validateImage?.(selectedInput);
+      if (!isCurrent(operation)) return;
+      if (validation && !validation.accepted) throw new Error(validation.message);
+      const callbacks = {
+        signal: controller.signal,
+        onProgress: (value) => {
+          if (isCurrent(operation)) setProgress(Math.max(0, Math.min(1, value)));
+        }
+      };
+      const uploaded = replacing && durable.imageId && runtime.replaceImage ? await runtime.replaceImage(durable.imageId, selectedInput, callbacks) : await runtime.uploadImage(selectedInput, callbacks);
+      if (!isCurrent(operation)) return;
+      updateAttributes2({ ...uploaded, alt: uploaded.alt || durable.alt });
+      if (uploaded.imageId && runtime.resolveImage) {
+        const nextResolved = await runtime.resolveImage(uploaded.imageId, { signal: controller.signal });
+        if (!isCurrent(operation)) return;
+        setResolved(nextResolved);
+      } else {
+        setResolved(uploaded);
+      }
+      setInput(null);
+      setProgress(1);
+      setPhase("ready");
+    } catch (cause) {
+      if (!isCurrent(operation) || controller.signal.aborted) return;
+      setError(cause instanceof Error ? cause.message : "Image upload failed.");
+      setPhase("error");
+    }
+  };
+  const selectAndUpload = async (replacing = false) => {
+    if (!runtime?.selectImage || !runtime.uploadImage) return;
+    stopCurrent();
+    const operation = operationRef.current;
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setError(null);
+    setPhase("selecting");
+    try {
+      const selectedInput = await runtime.selectImage({ signal: controller.signal });
+      if (!isCurrent(operation)) return;
+      if (!selectedInput) {
+        setPhase(hasImage ? "ready" : "idle");
+        return;
+      }
+      await upload(selectedInput, replacing);
+    } catch (cause) {
+      if (!isCurrent(operation) || controller.signal.aborted) return;
+      setError(cause instanceof Error ? cause.message : "Could not select an image.");
+      setPhase("error");
+    }
+  };
+  const submitUrl = (event) => {
+    event.preventDefault();
+    const safe = openEditorPublicUrlPolicy(url.trim(), "image");
+    if (!safe) {
+      setError("Enter a valid http or https image URL.");
+      return;
+    }
+    stopCurrent();
+    updateAttributes2({ imageId: null, src: safe, width: null, height: null });
+    setResolved(null);
+    setError(null);
+    setShowUrl(false);
+    setUrl("");
+    setPhase("ready");
+  };
+  const dropImage = (event) => {
+    if (!editor.isEditable || !runtime?.uploadImage) return;
+    const file = event.dataTransfer.files?.[0];
+    if (!file) return;
+    event.preventDefault();
+    event.stopPropagation();
+    void upload(webImageInput(file), hasImage);
+  };
+  const cancel = () => {
+    stopCurrent();
+    setInput(null);
+    setError(null);
+    setPhase(hasImage ? "ready" : "idle");
+  };
+  const preview = resolvedImageSrc(resolved, true) ?? resolvedImageSrc(durable);
+  const canUpload = Boolean(runtime?.selectImage && runtime.uploadImage);
+  const busy = phase === "selecting" || phase === "uploading";
+  return /* @__PURE__ */ jsxs(
+    NodeViewWrapper,
+    {
+      as: "figure",
+      className: "oe-image",
+      contentEditable: false,
+      "data-selected": selected ? "true" : void 0,
+      "data-state": phase,
+      onDragOver: (event) => {
+        if (canUpload) event.preventDefault();
+      },
+      onDrop: dropImage,
+      children: [
+        preview ? /* @__PURE__ */ jsxs("div", { className: "oe-image-preview", children: [
+          /* @__PURE__ */ jsx("img", { alt: durable.alt, draggable: false, height: durable.height ?? void 0, src: preview, width: durable.width ?? void 0 }),
+          editor.isEditable ? /* @__PURE__ */ jsxs("div", { "aria-label": "Image actions", className: "oe-image-actions", role: "toolbar", children: [
+            /* @__PURE__ */ jsxs("button", { onClick: () => {
+              if (canUpload) void selectAndUpload(true);
+              else setShowUrl(true);
+            }, type: "button", children: [
+              /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }),
+              " Replace"
+            ] }),
+            /* @__PURE__ */ jsx("button", { "aria-label": "Use image URL", onClick: () => {
+              setError(null);
+              setShowUrl(true);
+            }, title: "Replace from a link", type: "button", children: /* @__PURE__ */ jsx(Link2, { "aria-hidden": "true" }) }),
+            /* @__PURE__ */ jsxs("button", { onClick: () => setEditingAlt(true), type: "button", children: [
+              /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true" }),
+              " Alt text"
+            ] }),
+            /* @__PURE__ */ jsx("button", { "aria-label": "Remove image", className: "oe-image-remove", onClick: deleteNode2, title: "Remove image", type: "button", children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" }) })
+          ] }) : null
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "oe-image-empty", children: [
+          /* @__PURE__ */ jsx("span", { className: "oe-image-empty-icon", children: /* @__PURE__ */ jsx(Image$1, { "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "oe-image-empty-copy", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Add an image" }),
+            /* @__PURE__ */ jsx("span", { children: canUpload ? "Upload, drop, or embed from a link" : "Embed from a link" })
+          ] }),
+          canUpload ? /* @__PURE__ */ jsx("button", { "aria-busy": phase === "selecting", "aria-label": "Upload image", className: "oe-image-empty-action", disabled: busy, onClick: () => void selectAndUpload(false), title: "Upload image", type: "button", children: /* @__PURE__ */ jsx(Upload, { "aria-hidden": "true" }) }) : null,
+          /* @__PURE__ */ jsx("button", { "aria-label": "Use image URL", className: "oe-image-empty-action", disabled: busy, onClick: () => {
+            setError(null);
+            setShowUrl(true);
+          }, title: "Use image URL", type: "button", children: /* @__PURE__ */ jsx(Link2, { "aria-hidden": "true" }) }),
+          editor.isEditable ? /* @__PURE__ */ jsx("button", { "aria-label": "Remove empty image block", className: "oe-image-empty-action oe-image-remove", onClick: deleteNode2, title: "Remove image block", type: "button", children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }) }) : null
+        ] }),
+        phase === "uploading" ? /* @__PURE__ */ jsxs("div", { className: "oe-image-upload-status", children: [
+          /* @__PURE__ */ jsx("div", { className: "oe-image-progress", role: "progressbar", "aria-label": `Uploading ${input?.name ?? "image"}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(progress * 100), children: /* @__PURE__ */ jsx("span", { style: { width: `${progress * 100}%` } }) }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            Math.round(progress * 100),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: cancel, type: "button", children: "Cancel" })
+        ] }) : null,
+        showUrl ? /* @__PURE__ */ jsxs("form", { className: "oe-image-panel", onSubmit: submitUrl, children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            /* @__PURE__ */ jsx("span", { children: "Image URL" }),
+            /* @__PURE__ */ jsx("input", { autoFocus: true, "aria-label": "Image URL", inputMode: "url", onChange: (event) => setUrl(event.target.value), placeholder: "https://example.com/image.jpg", value: url })
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "oe-image-primary", type: "submit", children: "Use image" }),
+          /* @__PURE__ */ jsx("button", { onClick: () => {
+            setShowUrl(false);
+            setError(null);
+          }, type: "button", children: "Cancel" })
+        ] }) : null,
+        editingAlt ? /* @__PURE__ */ jsxs("form", { className: "oe-image-panel", onSubmit: (event) => {
+          event.preventDefault();
+          updateAttributes2({ alt });
+          setEditingAlt(false);
+        }, children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            /* @__PURE__ */ jsx("span", { children: "Alternative text" }),
+            /* @__PURE__ */ jsx("input", { autoFocus: true, "aria-label": "Alternative text", onChange: (event) => setAlt(event.target.value), placeholder: "Describe this image", value: alt })
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "oe-image-primary", type: "submit", children: "Save" }),
+          /* @__PURE__ */ jsx("button", { onClick: () => {
+            setAlt(durable.alt);
+            setEditingAlt(false);
+          }, type: "button", children: "Cancel" })
+        ] }) : null,
+        error ? /* @__PURE__ */ jsxs("div", { className: "oe-image-error", role: "alert", children: [
+          /* @__PURE__ */ jsx("span", { children: error }),
+          input ? /* @__PURE__ */ jsx("button", { onClick: () => void upload(input, hasImage), type: "button", children: "Retry" }) : null
+        ] }) : null
+      ]
+    }
+  );
+};
+var OpenEditorImage = index_default2.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      imageId: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-openeditor-image-id"),
+        renderHTML: (attributes) => attributes.imageId ? { "data-openeditor-image-id": attributes.imageId } : {}
+      },
+      src: { default: null }
+    };
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(OpenEditorImageNodeView);
+  }
+});
 var attachmentSnapshotFromNode = (node) => ({
   attachmentId: typeof node.attrs?.attachmentId === "string" ? node.attrs.attachmentId : null,
   name: typeof node.attrs?.name === "string" ? node.attrs.name : "",
@@ -33440,12 +33698,19 @@ var formatAttachmentSize = (size3) => {
   }
   return `${value >= 10 ? value.toFixed(0) : value.toFixed(1)} ${units[unit]}`;
 };
-var attachmentTypeLabel = (snapshot) => {
-  if (snapshot.mimeType) return snapshot.mimeType.split("/").at(-1)?.toUpperCase() ?? snapshot.mimeType;
-  const extension = snapshot.name.includes(".") ? snapshot.name.split(".").at(-1) : null;
-  return extension?.toUpperCase() ?? "FILE";
+var IMAGE_ATTACHMENT_EXTENSION = /\.(?:avif|gif|jpe?g|png|svg|webp)$/i;
+var AttachmentPreview = ({ snapshot, url }) => {
+  const isImage = snapshot.mimeType?.toLowerCase().startsWith("image/") || IMAGE_ATTACHMENT_EXTENSION.test(snapshot.name);
+  if (!url || !isImage) return null;
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "oe-attachment-thumbnail", children: /* @__PURE__ */ jsx("img", { alt: "", src: url }) });
+};
+var attachmentPreviewUrl = (url, allowBlob = false) => {
+  if (!url) return null;
+  const safeUrl = openEditorPublicUrlPolicy(url, "attachment");
+  if (safeUrl) return safeUrl;
+  const normalized = url.trim();
+  return allowBlob && normalized.startsWith("blob:") ? normalized : null;
 };
-var AttachmentIcon = ({ snapshot }) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "oe-attachment-icon", children: /* @__PURE__ */ jsx("span", { children: attachmentTypeLabel(snapshot).slice(0, 4) }) });
 var OpenEditorAttachmentNodeView = ({ editor, node, updateAttributes: updateAttributes2, deleteNode: deleteNode2 }) => {
   const runtime = use(OpenEditorAttachmentRuntimeContext);
   const durable = attachmentSnapshotFromNode(node);
@@ -33453,6 +33718,9 @@ var OpenEditorAttachmentNodeView = ({ editor, node, updateAttributes: updateAttr
   const [progress, setProgress] = useState(0);
   const [error, setError] = useState(null);
   const [input, setInput] = useState(null);
+  const [resolved, setResolved] = useState(null);
+  const [renaming, setRenaming] = useState(false);
+  const [draftName, setDraftName] = useState("");
   const operationRef = useRef(0);
   const abortRef = useRef(null);
   const isCurrent = (operation) => operationRef.current === operation;
@@ -33462,6 +33730,19 @@ var OpenEditorAttachmentNodeView = ({ editor, node, updateAttributes: updateAttr
     abortRef.current = null;
   };
   useEffect(() => () => stopCurrent(), []);
+  useEffect(() => {
+    if (!durable.attachmentId || !runtime?.resolveAttachment) {
+      setResolved(null);
+      return;
+    }
+    const controller = new AbortController();
+    void runtime.resolveAttachment(durable.attachmentId, { signal: controller.signal }).then((snapshot) => {
+      if (!controller.signal.aborted) setResolved(snapshot);
+    }).catch(() => {
+      if (!controller.signal.aborted) setResolved(null);
+    });
+    return () => controller.abort();
+  }, [durable.attachmentId, runtime]);
   const upload = async (selected, replacing) => {
     if (!runtime?.uploadAttachment) return;
     stopCurrent();
@@ -33471,6 +33752,8 @@ var OpenEditorAttachmentNodeView = ({ editor, node, updateAttributes: updateAttr
     setInput(selected);
     setProgress(0);
     setError(null);
+    setResolved(null);
+    setRenaming(false);
     setPhase("uploading");
     try {
       const validation = await runtime.validateAttachment?.(selected);
@@ -33485,6 +33768,11 @@ var OpenEditorAttachmentNodeView = ({ editor, node, updateAttributes: updateAttr
       setInput(null);
       setProgress(1);
       setPhase("ready");
+      if (uploaded.attachmentId && runtime.resolveAttachment) {
+        void runtime.resolveAttachment(uploaded.attachmentId, { signal: controller.signal }).then((snapshot) => {
+          if (isCurrent(operation) && !controller.signal.aborted) setResolved(snapshot);
+        }).catch(() => void 0);
+      }
     } catch (cause) {
       if (!isCurrent(operation) || controller.signal.aborted) return;
       setError(cause instanceof Error ? cause.message : "Upload failed.");
@@ -33528,26 +33816,46 @@ var OpenEditorAttachmentNodeView = ({ editor, node, updateAttributes: updateAttr
   };
   const name = durable.name || input?.name || "Choose a file";
   const display = durable.name ? durable : { ...durable, name, mimeType: input?.mimeType ?? null, size: input?.size ?? null };
+  const previewSnapshot = resolved ? { ...resolved, name } : display;
+  const previewUrl = attachmentPreviewUrl(previewSnapshot.url, Boolean(resolved));
+  const commitRename = () => {
+    const nextName = draftName.trim() || name;
+    setRenaming(false);
+    if (nextName === name) return;
+    updateAttributes2({ name: nextName });
+    if (durable.attachmentId) void runtime?.renameAttachment?.(durable.attachmentId, nextName);
+  };
   const open = () => {
-    if (runtime?.openAttachment) void runtime.openAttachment(durable);
-    else if (durable.url) window.open(durable.url, "_blank", "noopener,noreferrer");
+    const attachment = resolved ? { ...resolved, name } : durable;
+    if (runtime?.openAttachment) void runtime.openAttachment(attachment);
+    else if (attachment.url) window.open(attachment.url, "_blank", "noopener,noreferrer");
   };
   return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: "oe-attachment", "data-state": phase, children: [
-    /* @__PURE__ */ jsx(AttachmentIcon, { snapshot: display }),
+    (durable.attachmentId || durable.url) && phase !== "uploading" ? /* @__PURE__ */ jsx("button", { "aria-label": `Open ${name}`, className: "oe-attachment-open-control", contentEditable: false, onClick: open, type: "button" }) : null,
+    /* @__PURE__ */ jsx(AttachmentPreview, { snapshot: previewSnapshot, url: previewUrl }),
     /* @__PURE__ */ jsxs("div", { className: "oe-attachment-body", children: [
-      /* @__PURE__ */ jsx("input", { "aria-label": "File name", className: "oe-attachment-name", disabled: !editor.isEditable || phase === "uploading", value: name, onChange: (event) => updateAttributes2({ name: event.target.value }), onBlur: () => {
-        if (durable.attachmentId && durable.name) void runtime?.renameAttachment?.(durable.attachmentId, durable.name);
-      } }),
-      /* @__PURE__ */ jsx("div", { className: "oe-attachment-meta", children: [formatAttachmentSize(display.size), attachmentTypeLabel(display)].filter(Boolean).join(" \xB7 ") }),
+      renaming ? /* @__PURE__ */ jsx("input", { autoFocus: true, "aria-label": "Rename file", className: "oe-attachment-name oe-attachment-name-input", value: draftName, onBlur: commitRename, onChange: (event) => setDraftName(event.target.value), onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          event.currentTarget.blur();
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          setDraftName(name);
+          setRenaming(false);
+        }
+      } }) : /* @__PURE__ */ jsx("span", { className: "oe-attachment-name", children: name }),
       phase === "uploading" ? /* @__PURE__ */ jsx("div", { className: "oe-attachment-progress", role: "progressbar", "aria-label": `Uploading ${name}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(progress * 100), children: /* @__PURE__ */ jsx("span", { style: { width: `${progress * 100}%` } }) }) : null,
       error ? /* @__PURE__ */ jsx("div", { className: "oe-attachment-error", role: "alert", children: error }) : null
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "oe-attachment-actions", contentEditable: false, children: [
       phase === "uploading" || phase === "selecting" ? /* @__PURE__ */ jsx("button", { onClick: cancel, type: "button", children: "Cancel" }) : null,
       phase === "error" && input ? /* @__PURE__ */ jsx("button", { onClick: () => void upload(input, Boolean(durable.attachmentId)), type: "button", children: "Retry" }) : null,
-      (durable.attachmentId || durable.url) && phase !== "uploading" ? /* @__PURE__ */ jsx("button", { onClick: open, type: "button", children: "Open" }) : null,
-      editor.isEditable && runtime?.selectAttachment && runtime.uploadAttachment && phase !== "uploading" ? /* @__PURE__ */ jsx("button", { onClick: () => void selectAndUpload(Boolean(durable.attachmentId)), type: "button", children: "Replace" }) : null,
-      editor.isEditable ? /* @__PURE__ */ jsx("button", { "aria-label": `Remove ${name}`, onClick: remove, type: "button", children: "Remove" }) : null
+      editor.isEditable && durable.name && phase !== "uploading" && phase !== "selecting" ? /* @__PURE__ */ jsx("button", { "aria-label": `Rename ${name}`, onClick: () => {
+        setDraftName(name);
+        setRenaming(true);
+      }, title: "Rename file", type: "button", children: /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true" }) }) : null,
+      editor.isEditable && runtime?.selectAttachment && runtime.uploadAttachment && phase !== "uploading" ? /* @__PURE__ */ jsx("button", { "aria-label": `Replace ${name}`, onClick: () => void selectAndUpload(Boolean(durable.attachmentId)), title: "Replace file", type: "button", children: /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }) }) : null,
+      editor.isEditable ? /* @__PURE__ */ jsx("button", { "aria-label": `Remove ${name}`, className: "oe-attachment-remove", onClick: remove, title: "Remove file", type: "button", children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" }) }) : null
     ] })
   ] });
 };
@@ -33583,12 +33891,10 @@ var OpenEditorAttachmentViewer = ({
     return () => controller.abort();
   }, [cached.attachmentId, cached.url, runtime]);
   const snapshot = state.snapshot ?? cached;
+  const previewUrl = snapshot.url ? urlPolicy(snapshot.url, "attachment") : null;
   const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(AttachmentIcon, { snapshot }),
-    /* @__PURE__ */ jsxs("span", { className: "oe-attachment-body", children: [
-      /* @__PURE__ */ jsx("strong", { className: "oe-attachment-name", children: snapshot.name || "Attachment unavailable" }),
-      /* @__PURE__ */ jsx("span", { className: "oe-attachment-meta", children: state.phase === "resolving" ? "Loading\u2026" : state.phase === "missing" ? "Missing or inaccessible" : [formatAttachmentSize(snapshot.size), attachmentTypeLabel(snapshot)].filter(Boolean).join(" \xB7 ") })
-    ] })
+    /* @__PURE__ */ jsx(AttachmentPreview, { snapshot, url: previewUrl }),
+    /* @__PURE__ */ jsx("span", { className: "oe-attachment-body", children: /* @__PURE__ */ jsx("strong", { className: "oe-attachment-name", children: state.phase === "resolving" ? "Loading\u2026" : snapshot.name || "Attachment unavailable" }) })
   ] });
   if (state.phase === "ready" && runtime?.openAttachment) return /* @__PURE__ */ jsx("button", { className: "oe-attachment oe-attachment-viewer", "data-openeditor-attachment": true, onClick: () => void runtime.openAttachment?.(snapshot), type: "button", children: content });
   const href = snapshot.url ? urlPolicy(snapshot.url, "attachment") : null;
@@ -33846,7 +34152,7 @@ var ToggleListViewerItem = ({ children, initiallyOpen }) => {
         className: "oe-toggle-list-trigger",
         onClick: () => setOpen((current) => !current),
         type: "button",
-        children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "oe-toggle-list-chevron", children: "\u203A" })
+        children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "oe-toggle-list-chevron" })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "oe-toggle-list-content", children })
@@ -33929,7 +34235,7 @@ var createEditorExtensions = (getPlaceholder, customExtensions, slashSuggestion)
   }),
   index_default10.configure({ horizontalRule: false, link: false, underline: false }),
   Divider,
-  index_default2.configure({ allowBase64: true }),
+  OpenEditorImage.configure({ allowBase64: true }),
   index_default3.configure({ openOnClick: false }),
   index_default8,
   index_default6,
@@ -33998,6 +34304,7 @@ var useOpenEditorController = ({
   onFilePasteDrop,
   pageRuntime,
   attachmentRuntime,
+  imageRuntime,
   enabledBlocks,
   slashMenuItems = [],
   extensions = EMPTY_EXTENSIONS,
@@ -34345,6 +34652,7 @@ var useOpenEditorController = ({
     extensions,
     pageRuntime,
     attachmentRuntime,
+    imageRuntime,
     enabledBlocks,
     slashState,
     dismissSlashMenu,
@@ -34790,6 +35098,27 @@ var renderHeadingViewer = (node, children) => {
       return /* @__PURE__ */ jsx("h6", { ...props, children });
   }
 };
+var OpenEditorImageViewer = ({ node, resolveUrl }) => {
+  const runtime = use(OpenEditorImageRuntimeContext);
+  const durable = imageSnapshotFromNode(node);
+  const [resolved, setResolved] = useState(null);
+  useEffect(() => {
+    if (!durable.imageId || !runtime?.resolveImage) {
+      setResolved(null);
+      return;
+    }
+    const controller = new AbortController();
+    void runtime.resolveImage(durable.imageId, { signal: controller.signal }).then((snapshot) => {
+      if (!controller.signal.aborted) setResolved(snapshot);
+    }).catch(() => {
+      if (!controller.signal.aborted) setResolved(null);
+    });
+    return () => controller.abort();
+  }, [durable.imageId, runtime]);
+  const src = resolvedImageSrc(resolved, true) ?? resolveUrl(durable.src, "image");
+  if (!src) return null;
+  return /* @__PURE__ */ jsx("img", { alt: durable.alt, height: durable.height ?? void 0, src, width: durable.width ?? void 0 });
+};
 var BUILT_IN_VIEWER_RENDERERS = {
   paragraph: ({ node, children }) => /* @__PURE__ */ jsx("p", { style: viewerTextAlignStyle(node), children: node.content?.length ? children : /* @__PURE__ */ jsx("br", {}) }),
   heading: ({ node, children }) => renderHeadingViewer(node, children),
@@ -34802,12 +35131,7 @@ var BUILT_IN_VIEWER_RENDERERS = {
     return /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children: getNodeText(node) }) });
   },
   divider: () => /* @__PURE__ */ jsx("hr", {}),
-  image: ({ node, resolveUrl }) => {
-    const src = resolveUrl(node.attrs?.src, "image");
-    if (!src) return null;
-    const dimension = (value) => typeof value === "string" || typeof value === "number" ? value : void 0;
-    return /* @__PURE__ */ jsx("img", { alt: typeof node.attrs?.alt === "string" ? node.attrs.alt : "", height: dimension(node.attrs?.height), src, title: typeof node.attrs?.title === "string" ? node.attrs.title : void 0, width: dimension(node.attrs?.width) });
-  },
+  image: ({ node, resolveUrl }) => /* @__PURE__ */ jsx(OpenEditorImageViewer, { node, resolveUrl }),
   columns: ({ node, children }) => {
     const columnCount = Math.min(Math.max(node.content?.length ?? 0, 2), 4);
     return /* @__PURE__ */ jsx("section", { className: "oe-columns", "data-openeditor-columns": node.content?.length ?? 0, style: { "--oe-column-count": columnCount }, children });
@@ -34864,7 +35188,7 @@ var OpenEditorContent = ({
   className = "oe-canvas"
 }) => {
   const internalController = controller;
-  return /* @__PURE__ */ jsx(OpenEditorAttachmentRuntimeContext.Provider, { value: internalController.attachmentRuntime, children: /* @__PURE__ */ jsx(OpenEditorPageRuntimeContext.Provider, { value: internalController.pageRuntime, children: /* @__PURE__ */ jsx(EditorContent, { editor: internalController.editor, className }) }) });
+  return /* @__PURE__ */ jsx(OpenEditorImageRuntimeContext.Provider, { value: internalController.imageRuntime, children: /* @__PURE__ */ jsx(OpenEditorAttachmentRuntimeContext.Provider, { value: internalController.attachmentRuntime, children: /* @__PURE__ */ jsx(OpenEditorPageRuntimeContext.Provider, { value: internalController.pageRuntime, children: /* @__PURE__ */ jsx(EditorContent, { editor: internalController.editor, className }) }) }) });
 };
 var OpenEditorViewer = ({
   document: document2,
@@ -34873,6 +35197,7 @@ var OpenEditorViewer = ({
   extensions = EMPTY_EXTENSIONS,
   pageRuntime,
   attachmentRuntime,
+  imageRuntime,
   urlPolicy = openEditorPublicUrlPolicy
 }) => {
   const registry = useMemo(() => createReactBlockRegistry(extensions), [extensions]);
@@ -34880,9 +35205,9 @@ var OpenEditorViewer = ({
     ...Object.fromEntries(extensions.map((extension) => [extension.block.name, extension.viewer])),
     ...renderers
   }), [extensions, renderers]);
-  return /* @__PURE__ */ jsx(OpenEditorAttachmentRuntimeContext.Provider, { value: attachmentRuntime, children: /* @__PURE__ */ jsx(OpenEditorPageRuntimeContext.Provider, { value: pageRuntime, children: /* @__PURE__ */ jsx("div", { className, children: normalizeDocument(document2).content.map(
+  return /* @__PURE__ */ jsx(OpenEditorImageRuntimeContext.Provider, { value: imageRuntime, children: /* @__PURE__ */ jsx(OpenEditorAttachmentRuntimeContext.Provider, { value: attachmentRuntime, children: /* @__PURE__ */ jsx(OpenEditorPageRuntimeContext.Provider, { value: pageRuntime, children: /* @__PURE__ */ jsx("div", { className, children: normalizeDocument(document2).content.map(
     (node, index) => renderViewerNode(node, `viewer-${index}`, mergedRenderers, registry, urlPolicy)
-  ) }) }) });
+  ) }) }) }) });
 };
 var useOpenEditor = useOpenEditorController;