@openeditor/react 0.0.28 → 0.0.29

package/README.md

@@ -19,6 +19,40 @@ Pass `attachmentRuntime` to `useOpenEditorController` for editable attachments a
 
 This package intentionally does not import CSS and does not render styled menus. Use `@openeditor/ui` for the optional styled components.
 
+## Read-only rendering and URL policy
+
+`OpenEditorViewer` renders the portable document through an explicit registry of
+built-in and structural renderers. Unknown nodes are preserved for forward
+readability but carry `data-openeditor-unknown-node` so unsupported content never
+silently appears to be a fully supported block. Built-in viewer output and safe
+HTML export share stable `oe-*` classes and `data-openeditor-*` hooks for document
+semantics such as columns, tasks, toggles, callouts, tables, pages, and files.
+
+Viewer URLs use `openEditorPublicUrlPolicy` by default. The policy covers links,
+images, pages, and attachments, including snapshots returned by page and
+attachment runtimes. It accepts HTTP(S) and ordinary relative references, plus
+`mailto:` and `tel:` for text links, while rejecting executable and local-preview
+schemes. Owner previews can opt into a narrowly scoped policy:
+
+```tsx
+import {
+  OpenEditorViewer,
+  openEditorPublicUrlPolicy,
+  type OpenEditorUrlPolicy,
+} from "@openeditor/react";
+
+const previewUrlPolicy: OpenEditorUrlPolicy = (value, context) => {
+  if (context === "attachment" && value.startsWith("blob:")) return value;
+  return openEditorPublicUrlPolicy(value, context);
+};
+
+<OpenEditorViewer document={document} urlPolicy={previewUrlPolicy} />;
+```
+
+Custom viewer renderers receive both `urlPolicy` and a typed `resolveUrl` helper.
+The host remains responsible for arbitrary custom renderer output and for actions
+performed inside `openPage` or `openAttachment` callbacks.
+
 ## Block actions
 
 Every addressable node has a persistent `openeditor-id`. The block interaction
@@ -208,7 +242,11 @@ const productCard = defineOpenEditorReactNode({
     keywords: ["product", "commerce", "card"],
     order: 250,
   },
-  viewer: ({ node }) => <article>{String(node.attrs?.title ?? "")}</article>,
+  viewer: ({ node, resolveUrl }) => (
+    <article>
+      <a href={resolveUrl(node.attrs?.href, "link")}>{String(node.attrs?.title ?? "")}</a>
+    </article>
+  ),
   exporters: {
     html: {
       acmeProductCard: ({ node, escapeHtml }) =>

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, OpenEditorPageRuntime, OpenEditorAttachmentRuntime, OpenEditorPageSnapshot, OpenEditorAuthoringCapabilities } from '@openeditor/core';
-export { OpenEditorBlockRef, OpenEditorPageRuntime, OpenEditorPageSnapshot } from '@openeditor/core';
+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 { ExportFormat, OpenEditorExporters } from '@openeditor/exporters';
 export { seedDocument } from '@openeditor/extensions';
 import { AnyExtension, NodeConfig } from '@tiptap/core';
@@ -17,7 +17,7 @@ type OpenEditorBlockInteractionStore = {
     subscribe: (listener: () => void) => () => void;
 };
 
-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"];
+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 OpenEditorThemeStyle = CSSProperties & Record<`--oe-${string}`, string | undefined>;
@@ -169,6 +169,8 @@ type OpenEditorBlockPickerItem = {
 type OpenEditorViewerRenderer = (context: {
     node: ProseMirrorNode;
     children: ReactNode;
+    urlPolicy: OpenEditorUrlPolicy;
+    resolveUrl: (value: unknown, context: OpenEditorUrlContext) => string | undefined;
 }) => ReactNode;
 type OpenEditorExtensionMenu = {
     label?: string;
@@ -210,6 +212,8 @@ type OpenEditorViewerProps = {
     extensions?: readonly OpenEditorReactExtension[];
     pageRuntime?: OpenEditorPageRuntime;
     attachmentRuntime?: OpenEditorAttachmentRuntime<any>;
+    /** Safe by default. Supply an explicit host policy for trusted preview URLs such as `blob:`. */
+    urlPolicy?: OpenEditorUrlPolicy;
 };
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
@@ -250,7 +254,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, }: OpenEditorViewerProps) => 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;
 
 export { type InsertRange, type OpenEditorBlockAction, type OpenEditorBlockActionContext, OpenEditorBlockDragHandle, type OpenEditorBlockDragHandleProps, type OpenEditorBlockPickerItem, 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, type OpenEditorTheme, OpenEditorThemeProvider, type OpenEditorThemeStyle, type OpenEditorThemeToken, OpenEditorViewer, type OpenEditorViewerProps, type OpenEditorViewerRenderer, type SelectionBubbleState, type SlashState, createOpenEditorThemeStyle, defineOpenEditorReactExtension, defineOpenEditorReactNode, formatAttachmentSize, getDefaultBlockPickerItems, getDefaultSlashMenuItems, openEditorThemeTokenNames, sortBlockPickerItems, sortSlashMenuItems, useOpenEditor, useOpenEditorBlockInteraction, useOpenEditorController, useOpenEditorThemeStyle };

package/dist/index.js

@@ -1,8 +1,9 @@
-import { DEFAULT_CALLOUT_EMOJI, normalizeEmoji, DEFAULT_PAGE_EMOJI, normalizeDocument, toProseMirrorDocument, createDocument as createDocument$1, isOpenEditorBlockEnabled, createBlockRegistry, OPENEDITOR_BLOCK_ID_ATTR, createBlockId, fromProseMirrorDocument, findBlockSpecForNode } from '@openeditor/core';
+import { DEFAULT_CALLOUT_EMOJI, normalizeEmoji, DEFAULT_PAGE_EMOJI, normalizeDocument, toProseMirrorDocument, createDocument as createDocument$1, openEditorPublicUrlPolicy, isOpenEditorBlockEnabled, createBlockRegistry, OPENEDITOR_BLOCK_ID_ATTR, createBlockId, fromProseMirrorDocument, findBlockSpecForNode } from '@openeditor/core';
+export { openEditorPublicUrlPolicy, openEditorUnsafeUrlPolicy } from '@openeditor/core';
 import { Checkbox } from '@base-ui/react/checkbox';
 import { shift as shift$1, autoUpdate, computePosition } from '@floating-ui/dom';
 import { OpenEditorEmojiPicker } from '@openeditor/emoji';
-import React, { createContext, forwardRef, useContext, useMemo, createRef, memo, createElement, version, useState, useEffect, useRef, useSyncExternalStore as useSyncExternalStore$1, useCallback, use, useDebugValue, Fragment as Fragment$2, useLayoutEffect } from 'react';
+import React, { createContext, forwardRef, useContext, useMemo, createRef, memo, createElement, version, useState, useEffect, useRef, useSyncExternalStore as useSyncExternalStore$1, useCallback, use, useDebugValue, useLayoutEffect } from 'react';
 import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
 import { renderMermaidSVG } from 'beautiful-mermaid';
 import { exportDocumentUnsafe, exportDocument } from '@openeditor/exporters';
@@ -6288,9 +6289,20 @@ var openEditorThemeTokenNames = [
   "radiusMedium",
   "radiusLarge",
   "spaceBlock",
-  "spaceInline"
+  "spaceInline",
+  "bodyFontSize",
+  "bodyLineHeight",
+  "headingFont",
+  "headingLineHeight",
+  "headingWeight",
+  "heading1Size",
+  "heading2Size",
+  "heading3Size",
+  "heading4Size",
+  "heading5Size",
+  "heading6Size"
 ];
-var cssName = (token) => `--oe-${token.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`)}`;
+var cssName = (token) => `--oe-${token.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Za-z])(\d)/g, "$1-$2").replace(/(\d)([A-Z])/g, "$1-$2").toLowerCase()}`;
 var createOpenEditorThemeStyle = (theme) => Object.fromEntries(
   openEditorThemeTokenNames.flatMap(
     (token) => theme[token] === void 0 ? [] : [[cssName(token), theme[token]]]
@@ -30999,16 +31011,7 @@ var createStandardAttributes = (attributeNames) => Object.fromEntries(
     }
   ])
 );
-var isSafeUrl = (value, allowDataImage) => {
-  const normalized = value.trim().toLowerCase();
-  if (normalized.startsWith("javascript:") || normalized.startsWith("vbscript:")) {
-    return false;
-  }
-  if (normalized.startsWith("data:")) {
-    return allowDataImage && normalized.startsWith("data:image/");
-  }
-  return true;
-};
+var isSafePastedUrl = (value, context, allowDataImage) => allowDataImage && /^data:image\//i.test(value.trim()) || openEditorPublicUrlPolicy(value, context) !== null;
 var sanitizePastedHtml = (html) => {
   const parser = new DOMParser();
   const parsed = parser.parseFromString(html, "text/html");
@@ -31030,7 +31033,8 @@ var sanitizePastedHtml = (html) => {
     const allowDataImage = element.tagName.toLowerCase() === "img";
     for (const attribute of URL_ATTRIBUTES) {
       const value = element.getAttribute(attribute);
-      if (value !== null && !isSafeUrl(value, allowDataImage)) {
+      const context = attribute === "src" ? "image" : "link";
+      if (value !== null && !isSafePastedUrl(value, context, allowDataImage && attribute === "src")) {
         element.removeAttribute(attribute);
       }
     }
@@ -31442,7 +31446,10 @@ var Attachment = Node3.create({
     return ReactNodeViewRenderer(OpenEditorAttachmentNodeView);
   }
 });
-var OpenEditorAttachmentViewer = ({ node }) => {
+var OpenEditorAttachmentViewer = ({
+  node,
+  urlPolicy
+}) => {
   const runtime = use(OpenEditorAttachmentRuntimeContext);
   const cached = attachmentSnapshotFromNode(node);
   const [state, setState] = useState({ phase: cached.attachmentId && runtime?.resolveAttachment ? "resolving" : cached.url ? "ready" : "missing", snapshot: cached });
@@ -31466,9 +31473,10 @@ var OpenEditorAttachmentViewer = ({ node }) => {
       /* @__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 ") })
     ] })
   ] });
-  if (state.phase === "ready" && runtime?.openAttachment) return /* @__PURE__ */ jsx("button", { className: "oe-attachment oe-attachment-viewer", onClick: () => void runtime.openAttachment?.(snapshot), type: "button", children: content });
-  if (state.phase === "ready" && snapshot.url) return /* @__PURE__ */ jsx("a", { className: "oe-attachment oe-attachment-viewer", href: snapshot.url, rel: "noreferrer", target: "_blank", children: content });
-  return /* @__PURE__ */ jsx("div", { className: "oe-attachment oe-attachment-viewer", "data-state": state.phase, children: content });
+  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;
+  if (state.phase === "ready" && href) return /* @__PURE__ */ jsx("a", { className: "oe-attachment oe-attachment-viewer", "data-openeditor-attachment": true, href, rel: "noopener noreferrer", target: "_blank", children: content });
+  return /* @__PURE__ */ jsx("div", { className: "oe-attachment oe-attachment-viewer", "data-openeditor-attachment": true, "data-state": state.phase, children: content });
 };
 var pageSnapshotFromNode = (node) => {
   const pageId = typeof node.attrs?.pageId === "string" ? node.attrs.pageId : "";
@@ -31609,7 +31617,10 @@ var Page = Node3.create({
     return ReactNodeViewRenderer(OpenEditorPageNodeView);
   }
 });
-var OpenEditorPageViewer = ({ node }) => {
+var OpenEditorPageViewer = ({
+  node,
+  urlPolicy
+}) => {
   const runtime = use(OpenEditorPageRuntimeContext);
   const cached = pageSnapshotFromNode(node);
   const [page] = useResolvedPageSnapshot(cached, runtime);
@@ -31620,12 +31631,13 @@ var OpenEditorPageViewer = ({ node }) => {
     /* @__PURE__ */ jsx("span", { className: "oe-page-arrow", "aria-hidden": "true", children: "\u2192" })
   ] });
   if (page && runtime?.openPage) {
-    return /* @__PURE__ */ jsx("button", { className: "oe-page oe-page-viewer", onClick: () => void runtime.openPage?.(page), type: "button", children: content });
+    return /* @__PURE__ */ jsx("button", { className: "oe-page oe-page-viewer", "data-openeditor-page": true, onClick: () => void runtime.openPage?.(page), type: "button", children: content });
   }
-  if (page?.href) {
-    return /* @__PURE__ */ jsx("a", { className: "oe-page oe-page-viewer", href: page.href, children: content });
+  const href = page?.href ? urlPolicy(page.href, "page") : null;
+  if (href) {
+    return /* @__PURE__ */ jsx("a", { className: "oe-page oe-page-viewer", "data-openeditor-page": true, href, children: content });
   }
-  return /* @__PURE__ */ jsx("div", { className: "oe-page oe-page-viewer", children: content });
+  return /* @__PURE__ */ jsx("div", { className: "oe-page oe-page-viewer", "data-openeditor-page": true, children: content });
 };
 var OpenEditorPageHeader = ({
   page,
@@ -31708,7 +31720,7 @@ var MermaidPreview = ({ code }) => {
 };
 var ToggleListViewerItem = ({ children, initiallyOpen }) => {
   const [open, setOpen] = useState(initiallyOpen);
-  return /* @__PURE__ */ jsxs("li", { className: "oe-toggle-list-item", "data-open": open ? "true" : "false", children: [
+  return /* @__PURE__ */ jsxs("li", { className: "oe-toggle-list-item", "data-open": open ? "true" : "false", "data-openeditor-toggle-list-item": true, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -32559,7 +32571,7 @@ var getDefaultSlashMenuItems = (controller) => {
     ...controller.slashMenuItems
   ]);
 };
-var renderTextWithMarks = (text, marks = [], key) => marks.reduceRight((children, mark, index) => {
+var renderTextWithMarks = (text, marks = [], key, urlPolicy) => marks.reduceRight((children, mark, index) => {
   const nodeKey = `${key}-${mark.type}-${index}`;
   switch (mark.type) {
     case "bold":
@@ -32572,106 +32584,110 @@ var renderTextWithMarks = (text, marks = [], key) => marks.reduceRight((children
       return /* @__PURE__ */ jsx("s", { children }, nodeKey);
     case "code":
       return /* @__PURE__ */ jsx("code", { children }, nodeKey);
-    case "link":
-      return /* @__PURE__ */ jsx("a", { href: typeof mark.attrs?.href === "string" ? mark.attrs.href : void 0, children }, nodeKey);
+    case "link": {
+      const href = typeof mark.attrs?.href === "string" ? urlPolicy(mark.attrs.href, "link") : null;
+      if (!href) return children;
+      const target = typeof mark.attrs?.target === "string" && ["_blank", "_self", "_parent", "_top"].includes(mark.attrs.target) ? mark.attrs.target : void 0;
+      const declaredRel = typeof mark.attrs?.rel === "string" ? mark.attrs.rel.split(/\s+/).filter(Boolean) : [];
+      const rel = target === "_blank" ? Array.from(/* @__PURE__ */ new Set([...declaredRel, "noopener", "noreferrer"])).join(" ") : declaredRel.join(" ") || void 0;
+      return /* @__PURE__ */ jsx("a", { href, rel, target, children }, nodeKey);
+    }
     default:
       return children;
   }
 }, text);
-var renderViewerNode = (node, key, renderers, registry = defaultBlockRegistry) => {
+var resolveViewerUrl = (urlPolicy, value, context) => typeof value === "string" ? urlPolicy(value, context) ?? void 0 : void 0;
+var viewerTextAlignStyle = (node) => {
+  const textAlign = node.attrs?.textAlign;
+  return typeof textAlign === "string" && ["left", "center", "right", "justify"].includes(textAlign) ? { textAlign } : void 0;
+};
+var positiveIntegerAttribute = (value) => typeof value === "number" && Number.isInteger(value) && value > 0 ? value : void 0;
+var renderHeadingViewer = (node, children) => {
+  const props = { style: viewerTextAlignStyle(node) };
+  const level = typeof node.attrs?.level === "number" ? Math.min(Math.max(node.attrs.level, 1), 6) : 2;
+  switch (level) {
+    case 1:
+      return /* @__PURE__ */ jsx("h1", { ...props, children });
+    case 2:
+      return /* @__PURE__ */ jsx("h2", { ...props, children });
+    case 3:
+      return /* @__PURE__ */ jsx("h3", { ...props, children });
+    case 4:
+      return /* @__PURE__ */ jsx("h4", { ...props, children });
+    case 5:
+      return /* @__PURE__ */ jsx("h5", { ...props, children });
+    default:
+      return /* @__PURE__ */ jsx("h6", { ...props, children });
+  }
+};
+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),
+  bulletList: ({ children }) => /* @__PURE__ */ jsx("ul", { children }),
+  orderedList: ({ node, children }) => /* @__PURE__ */ jsx("ol", { start: positiveIntegerAttribute(node.attrs?.start), children }),
+  taskList: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "oe-task-list", "data-openeditor-task-list": true, "data-type": "taskList", children }),
+  blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", { children }),
+  codeBlock: ({ node }) => {
+    const language = typeof node.attrs?.language === "string" && node.attrs.language.trim() ? node.attrs.language.trim() : null;
+    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) });
+  },
+  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 });
+  },
+  table: ({ children }) => /* @__PURE__ */ jsx("table", { "data-openeditor-table": "", children: /* @__PURE__ */ jsx("tbody", { children }) }),
+  toggleList: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "oe-toggle-list", "data-openeditor-toggle-list": true, children }),
+  callout: ({ node, children }) => /* @__PURE__ */ jsxs("aside", { className: "oe-callout", "data-emoji": normalizeEmoji(node.attrs?.emoji, DEFAULT_CALLOUT_EMOJI), "data-openeditor-callout": true, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "oe-callout-emoji", children: normalizeEmoji(node.attrs?.emoji, DEFAULT_CALLOUT_EMOJI) }),
+    /* @__PURE__ */ jsx("div", { className: "oe-callout-content", children })
+  ] }),
+  diagram: ({ node }) => {
+    const code = typeof node.attrs?.code === "string" ? node.attrs.code : "";
+    return /* @__PURE__ */ jsx("figure", { className: "oe-diagram", "data-openeditor-diagram": true, children: /* @__PURE__ */ jsx(MermaidPreview, { code }) });
+  },
+  page: ({ node, urlPolicy }) => /* @__PURE__ */ jsx(OpenEditorPageViewer, { node, urlPolicy }),
+  attachment: ({ node, urlPolicy }) => /* @__PURE__ */ jsx(OpenEditorAttachmentViewer, { node, urlPolicy })
+};
+var STRUCTURAL_VIEWER_RENDERERS = {
+  column: ({ children }) => /* @__PURE__ */ jsx("div", { className: "oe-column", "data-openeditor-column": true, children }),
+  tableRow: ({ children }) => /* @__PURE__ */ jsx("tr", { children }),
+  tableHeader: ({ node, children }) => /* @__PURE__ */ jsx("th", { colSpan: positiveIntegerAttribute(node.attrs?.colspan), rowSpan: positiveIntegerAttribute(node.attrs?.rowspan), scope: typeof node.attrs?.scope === "string" ? node.attrs.scope : void 0, children }),
+  tableCell: ({ node, children }) => /* @__PURE__ */ jsx("td", { colSpan: positiveIntegerAttribute(node.attrs?.colspan), rowSpan: positiveIntegerAttribute(node.attrs?.rowspan), children }),
+  listItem: ({ children }) => /* @__PURE__ */ jsx("li", { children }),
+  taskItem: ({ node, children }) => {
+    const checked = Boolean(node.attrs?.checked);
+    return /* @__PURE__ */ jsxs("li", { className: "oe-task-item", "data-checked": checked ? "true" : "false", "data-openeditor-task-item": true, children: [
+      /* @__PURE__ */ jsx("span", { className: "oe-task-item-checkbox", children: /* @__PURE__ */ jsx(OpenEditorTaskCheckbox, { checked, label: checked ? "Completed task" : "Incomplete task", readOnly: true, tabIndex: -1 }) }),
+      /* @__PURE__ */ jsx("div", { children })
+    ] });
+  },
+  toggleListItem: ({ node, children }) => /* @__PURE__ */ jsx(ToggleListViewerItem, { initiallyOpen: node.attrs?.open !== false, children }),
+  hardBreak: () => /* @__PURE__ */ jsx("br", {})
+};
+var renderViewerNode = (node, key, renderers, registry = defaultBlockRegistry, urlPolicy = openEditorPublicUrlPolicy) => {
   if (node.type === "text") {
-    return renderTextWithMarks(node.text ?? "", node.marks, key);
+    return renderTextWithMarks(node.text ?? "", node.marks, key, urlPolicy);
   }
-  const children = node.content?.map((child, index) => renderViewerNode(child, `${key}-${index}`, renderers, registry)) ?? null;
+  const children = node.content?.map((child, index) => renderViewerNode(child, `${key}-${index}`, renderers, registry, urlPolicy)) ?? null;
   const blockKey = findBlockSpecForNode(registry, node)?.name ?? node.type;
-  const customRenderer = renderers?.[blockKey];
-  if (customRenderer) {
-    return /* @__PURE__ */ jsx(Fragment$2, { children: customRenderer({ node, children }) }, key);
-  }
-  switch (blockKey) {
-    case "paragraph":
-      return /* @__PURE__ */ jsx("p", { children: node.content?.length ? children : /* @__PURE__ */ jsx("br", {}) }, key);
-    case "heading": {
-      const level = typeof node.attrs?.level === "number" ? Math.min(Math.max(node.attrs.level, 1), 6) : 2;
-      switch (level) {
-        case 1:
-          return /* @__PURE__ */ jsx("h1", { children }, key);
-        case 2:
-          return /* @__PURE__ */ jsx("h2", { children }, key);
-        case 3:
-          return /* @__PURE__ */ jsx("h3", { children }, key);
-        case 4:
-          return /* @__PURE__ */ jsx("h4", { children }, key);
-        case 5:
-          return /* @__PURE__ */ jsx("h5", { children }, key);
-        default:
-          return /* @__PURE__ */ jsx("h6", { children }, key);
-      }
-    }
-    case "bulletList":
-      return /* @__PURE__ */ jsx("ul", { children }, key);
-    case "orderedList":
-      return /* @__PURE__ */ jsx("ol", { children }, key);
-    case "taskList":
-      return /* @__PURE__ */ jsx("ul", { "data-type": "taskList", children }, key);
-    case "blockquote":
-      return /* @__PURE__ */ jsx("blockquote", { children }, key);
-    case "codeBlock":
-      return /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: node.content?.map((child) => child.text ?? "").join("") }) }, key);
-    case "divider":
-      return /* @__PURE__ */ jsx("hr", {}, key);
-    case "image":
-      return /* @__PURE__ */ jsx("img", { src: typeof node.attrs?.src === "string" ? node.attrs.src : "", alt: typeof node.attrs?.alt === "string" ? node.attrs.alt : "" }, key);
-    case "columns":
-      return /* @__PURE__ */ jsx("section", { children }, key);
-    case "table":
-      return /* @__PURE__ */ jsx("table", { "data-openeditor-table": "", children: /* @__PURE__ */ jsx("tbody", { children }) }, key);
-    case "toggleList":
-      return /* @__PURE__ */ jsx("ul", { "data-openeditor-toggle-list": true, children }, key);
-    case "callout":
-      return /* @__PURE__ */ jsxs("aside", { className: "oe-callout", children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "oe-callout-emoji", children: normalizeEmoji(node.attrs?.emoji, DEFAULT_CALLOUT_EMOJI) }),
-        /* @__PURE__ */ jsx("div", { className: "oe-callout-content", children })
-      ] }, key);
-    case "diagram": {
-      const code = typeof node.attrs?.code === "string" ? node.attrs.code : "";
-      return /* @__PURE__ */ jsx("figure", { className: "oe-diagram", children: /* @__PURE__ */ jsx(MermaidPreview, { code }) }, key);
-    }
-    case "page":
-      return /* @__PURE__ */ jsx(OpenEditorPageViewer, { node }, key);
-    case "attachment":
-      return /* @__PURE__ */ jsx(OpenEditorAttachmentViewer, { node }, key);
-    default:
-      if (node.type === "column") {
-        return /* @__PURE__ */ jsx("div", { children }, key);
-      }
-      if (node.type === "tableRow") {
-        return /* @__PURE__ */ jsx("tr", { children }, key);
-      }
-      if (node.type === "tableHeader") {
-        return /* @__PURE__ */ jsx("th", { children }, key);
-      }
-      if (node.type === "tableCell") {
-        return /* @__PURE__ */ jsx("td", { children }, key);
-      }
-      if (node.type === "listItem") {
-        return /* @__PURE__ */ jsx("li", { children }, key);
-      }
-      if (node.type === "taskItem") {
-        const checked = Boolean(node.attrs?.checked);
-        return /* @__PURE__ */ jsxs("li", { "data-checked": checked ? "true" : "false", children: [
-          /* @__PURE__ */ jsx("span", { className: "oe-task-item-checkbox", "aria-hidden": "true", children: /* @__PURE__ */ jsx(OpenEditorTaskCheckbox, { checked, label: "Task item checkbox", readOnly: true, tabIndex: -1 }) }),
-          /* @__PURE__ */ jsx("div", { children })
-        ] }, key);
-      }
-      if (node.type === "toggleListItem") {
-        return /* @__PURE__ */ jsx(ToggleListViewerItem, { initiallyOpen: node.attrs?.open !== false, children }, key);
-      }
-      if (node.type === "hardBreak") {
-        return /* @__PURE__ */ jsx("br", {}, key);
-      }
-      return /* @__PURE__ */ jsx("div", { children }, key);
-  }
+  const builtInRenderer = Object.hasOwn(BUILT_IN_VIEWER_RENDERERS, blockKey) ? BUILT_IN_VIEWER_RENDERERS[blockKey] : void 0;
+  const renderer = renderers?.[blockKey] ?? builtInRenderer ?? STRUCTURAL_VIEWER_RENDERERS[node.type];
+  const context = {
+    node,
+    children,
+    urlPolicy,
+    resolveUrl: (value, urlContext) => resolveViewerUrl(urlPolicy, value, urlContext)
+  };
+  if (!renderer) return /* @__PURE__ */ jsx("div", { "data-openeditor-unknown-node": node.type, children }, key);
+  const Renderer = renderer;
+  return /* @__PURE__ */ createElement(Renderer, { ...context, key });
 };
 var OpenEditorContent = ({
   controller,
@@ -32686,15 +32702,16 @@ var OpenEditorViewer = ({
   renderers,
   extensions = EMPTY_EXTENSIONS,
   pageRuntime,
-  attachmentRuntime
+  attachmentRuntime,
+  urlPolicy = openEditorPublicUrlPolicy
 }) => {
-  const registry = createReactBlockRegistry(extensions);
-  const extensionRenderers = Object.fromEntries(
-    extensions.map((extension) => [extension.block.name, extension.viewer])
-  );
-  const mergedRenderers = { ...extensionRenderers, ...renderers };
+  const registry = useMemo(() => createReactBlockRegistry(extensions), [extensions]);
+  const mergedRenderers = useMemo(() => ({
+    ...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(
-    (node, index) => renderViewerNode(node, `viewer-${index}`, mergedRenderers, registry)
+    (node, index) => renderViewerNode(node, `viewer-${index}`, mergedRenderers, registry, urlPolicy)
   ) }) }) });
 };
 var useOpenEditor = useOpenEditorController;