@openeditor/react 0.0.27 → 0.0.29

package/dist/index.js

@@ -1,11 +1,12 @@
-import { DEFAULT_CALLOUT_EMOJI, normalizeEmoji, DEFAULT_PAGE_EMOJI, normalizeDocument, toProseMirrorDocument, createDocument as createDocument$1, 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, useRef, useEffect, 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 { toExportBundle } from '@openeditor/exporters';
+import { exportDocumentUnsafe, exportDocument } from '@openeditor/exporters';
 import { openEditorInsertPresets, resolveOpenEditorInsertBlock, defaultBlockRegistry } from '@openeditor/extensions';
 export { seedDocument } from '@openeditor/extensions';
 import ReactDOM, { flushSync, createPortal } from 'react-dom';
@@ -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 : "";
@@ -31524,11 +31532,12 @@ var OpenEditorPageNodeView = ({ editor, node, updateAttributes: updateAttributes
   };
   const updateIcon = async (nextIcon) => {
     updateAttributes2({ icon: nextIcon });
-    if (!page?.pageId || !runtime?.updatePageIcon) return;
+    if (!page?.pageId || !runtime) return;
     setResolvedPage({ ...page, icon: nextIcon });
     setError(null);
     try {
-      await runtime.updatePageIcon(page.pageId, nextIcon);
+      const updated = await runtime.updatePage(page.pageId, { icon: nextIcon });
+      if (updated) setResolvedPage(updated);
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : "Could not update the page icon.");
     }
@@ -31557,7 +31566,7 @@ var OpenEditorPageNodeView = ({ editor, node, updateAttributes: updateAttributes
           OpenEditorEmojiPicker,
           {
             className: "oe-page-icon-trigger",
-            disabled: !editor.isEditable,
+            disabled: !editor.isEditable || !runtime,
             emoji: icon,
             label: "Change page emoji",
             popupStyle: themeStyle,
@@ -31608,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);
@@ -31619,12 +31631,68 @@ 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,
+  runtime,
+  className = "oe-page-header",
+  onPageChange
+}) => {
+  const [title, setTitle] = useState(page.title);
+  const [icon, setIcon] = useState(normalizeEmoji(page.icon, DEFAULT_PAGE_EMOJI));
+  const [error, setError] = useState(null);
+  useEffect(() => setTitle(page.title), [page.pageId, page.title]);
+  useEffect(() => setIcon(normalizeEmoji(page.icon, DEFAULT_PAGE_EMOJI)), [page.icon, page.pageId]);
+  const updatePage = async (update) => {
+    setError(null);
+    try {
+      const resolved = await runtime.updatePage(page.pageId, update);
+      const next = resolved ?? { ...page, ...update };
+      setTitle(next.title);
+      setIcon(normalizeEmoji(next.icon, DEFAULT_PAGE_EMOJI));
+      onPageChange?.(next);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not update the page.");
+    }
+  };
+  return /* @__PURE__ */ jsxs("header", { className: `oe-page-header${className === "oe-page-header" ? "" : ` ${className}`}`, children: [
+    /* @__PURE__ */ jsx(
+      OpenEditorEmojiPicker,
+      {
+        emoji: icon,
+        label: "Change page icon",
+        onEmojiSelect: (nextIcon) => {
+          setIcon(nextIcon);
+          void updatePage({ icon: nextIcon });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-label": "Page title",
+        className: "oe-page-header-title",
+        onBlur: () => {
+          const nextTitle = title.trim() || "Untitled";
+          setTitle(nextTitle);
+          if (nextTitle !== page.title) void updatePage({ title: nextTitle });
+        },
+        onChange: (event) => setTitle(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") event.currentTarget.blur();
+        },
+        value: title
+      }
+    ),
+    error ? /* @__PURE__ */ jsx("span", { className: "oe-page-error", role: "alert", children: error }) : null
+  ] });
 };
 var MermaidPreview = ({ code }) => {
   const rendered = useMemo(() => {
@@ -31652,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",
       {
@@ -31698,7 +31766,7 @@ var MermaidDiagram = Node3.create({
     return ReactNodeViewRenderer(OpenEditorDiagramNodeView);
   }
 });
-var createEditorExtensions = (placeholder, customExtensions) => [
+var createEditorExtensions = (getPlaceholder, customExtensions) => [
   index_default12.configure({
     attributeName: OPENEDITOR_BLOCK_ID_ATTR,
     types: "all",
@@ -31719,7 +31787,7 @@ var createEditorExtensions = (placeholder, customExtensions) => [
   index_default6,
   index_default5,
   index_default10.configure({ types: ["heading", "paragraph"] }),
-  index_default4.configure({ placeholder, showOnlyCurrent: true }),
+  index_default4.configure({ placeholder: () => getPlaceholder(), showOnlyCurrent: true }),
   Columns,
   Column,
   ToggleList,
@@ -31825,12 +31893,12 @@ var useOpenEditorController = ({
   onFilePasteDrop,
   pageRuntime,
   attachmentRuntime,
+  enabledBlocks,
   slashMenuItems = [],
   extensions = EMPTY_EXTENSIONS,
   blockActions = []
 } = {}) => {
   const [document2, setDocument] = useState(() => normalizeDocument(initialDocument));
-  const [initialEditorContent] = useState(() => toProseMirrorDocument(document2));
   const [selectedBlock, setSelectedBlock] = useState("paragraph");
   const [slashState, setSlashState] = useState(null);
   const [selectionBubbleState, setSelectionBubbleState] = useState(null);
@@ -31839,12 +31907,29 @@ var useOpenEditorController = ({
   const slashStateRef = useRef(null);
   const selectionBubbleStateRef = useRef(null);
   const documentMetaRef = useRef(document2.meta);
+  const placeholderRef = useRef(placeholder);
+  placeholderRef.current = placeholder;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onFilePasteDropRef = useRef(onFilePasteDrop);
+  onFilePasteDropRef.current = onFilePasteDrop;
+  const isBlockEnabled = (blockName) => {
+    const canonicalName = /^heading[1-6]$/.test(blockName) ? "heading" : blockName;
+    if (!isOpenEditorBlockEnabled(canonicalName, { enabledBlocks })) return false;
+    if (canonicalName === "attachment") {
+      return Boolean(attachmentRuntime?.selectAttachment && attachmentRuntime.uploadAttachment);
+    }
+    if (canonicalName === "page") return Boolean(pageRuntime?.createPage);
+    return true;
+  };
+  const isBlockEnabledRef = useRef(isBlockEnabled);
+  isBlockEnabledRef.current = isBlockEnabled;
   const registry = useMemo(() => createReactBlockRegistry(extensions), [extensions]);
   const exporters = useMemo(() => createReactExporters(extensions), [extensions]);
   const editor = useEditor({
     immediatelyRender: false,
-    extensions: createEditorExtensions(placeholder, extensions),
-    content: initialEditorContent,
+    extensions: createEditorExtensions(() => placeholderRef.current, extensions),
+    content: toProseMirrorDocument(document2),
     editable,
     editorProps: {
       attributes: {
@@ -31861,6 +31946,12 @@ var useOpenEditorController = ({
           try {
             const payload = JSON.parse(encoded);
             if (payload.format === "openeditor-blocks" && payload.version === 1 && Array.isArray(payload.blocks)) {
+              const firstBlock = payload.blocks[0];
+              const blockName = firstBlock ? findBlockSpecForNode(registry, firstBlock)?.name : void 0;
+              if (blockName && !isBlockEnabledRef.current(blockName)) {
+                event.preventDefault();
+                return true;
+              }
               const nodes = payload.blocks.map(
                 (node) => view.state.schema.nodeFromJSON(regenerateClipboardNodeIds(node))
               );
@@ -31877,7 +31968,7 @@ var useOpenEditorController = ({
           }
         }
         const file = event.clipboardData?.files?.[0];
-        if (!file || !onFilePasteDrop?.(file)) {
+        if (!file || !isBlockEnabledRef.current("attachment") || !onFilePasteDropRef.current?.(file)) {
           return false;
         }
         event.preventDefault();
@@ -31885,7 +31976,7 @@ var useOpenEditorController = ({
       },
       handleDrop: (_view, event, _slice, moved) => {
         const file = event.dataTransfer?.files?.[0];
-        if (moved || !file || !onFilePasteDrop?.(file)) {
+        if (moved || !file || !isBlockEnabledRef.current("attachment") || !onFilePasteDropRef.current?.(file)) {
           return false;
         }
         event.preventDefault();
@@ -31907,7 +31998,7 @@ var useOpenEditorController = ({
         documentMetaRef.current
       );
       setDocument(nextDocument);
-      onChange?.(nextDocument);
+      onChangeRef.current?.(nextDocument);
       setSlashState(getSlashState(currentEditor));
       setSelectionBubbleState(
         isPointerSelectingRef.current ? null : getSelectionBubbleState(currentEditor)
@@ -31923,10 +32014,12 @@ var useOpenEditorController = ({
       }
     }
   }, [extensions]);
-  const exports = useMemo(
-    () => toExportBundle(document2, exporters),
-    [document2, exporters]
-  );
+  useEffect(() => {
+    editor?.setEditable(editable, false);
+  }, [editable, editor]);
+  useEffect(() => {
+    if (editor && !editor.isDestroyed) editor.view.dispatch(editor.state.tr);
+  }, [editor, placeholder]);
   useEffect(() => {
     slashStateRef.current = slashState;
   }, [slashState]);
@@ -31975,7 +32068,7 @@ var useOpenEditorController = ({
     };
   }, [editor]);
   const insertBlock = (blockName = selectedBlock, range) => {
-    if (!editor) {
+    if (!editor || !isBlockEnabled(blockName)) {
       return false;
     }
     const block = resolveOpenEditorInsertBlock(blockName, registry);
@@ -31985,14 +32078,14 @@ var useOpenEditorController = ({
       return range ? commandChain.deleteRange(range) : commandChain;
     };
     if (blockName === "page" && pageRuntime?.createPage) {
-      const prepared = chain().run();
-      if (!prepared) return false;
       setSlashState(null);
       void pageRuntime.createPage({
         title: "Untitled",
         icon: DEFAULT_PAGE_EMOJI
       }).then((created) => {
-        editor.chain().focus().insertContent({
+        const insertion = editor.chain().focus();
+        const prepared = range ? insertion.deleteRange(range) : insertion;
+        prepared.insertContent({
           ...block,
           attrs: {
             ...block.attrs,
@@ -32002,9 +32095,7 @@ var useOpenEditorController = ({
           },
           content: [{ type: "text", text: created.title || "Untitled" }]
         }).run();
-      }).catch(() => {
-        editor.chain().focus().insertContent(block).run();
-      });
+      }).catch(() => void 0);
       return true;
     }
     const inserted = chain().insertContent(block).run();
@@ -32017,7 +32108,9 @@ var useOpenEditorController = ({
     }
     const normalized = normalizeDocument(nextDocument);
     documentMetaRef.current = normalized.meta;
-    editor.commands.setContent(toProseMirrorDocument(normalized));
+    editor.commands.setContent(toProseMirrorDocument(normalized), { emitUpdate: false });
+    setDocument(normalized);
+    onChangeRef.current?.(normalized);
   };
   const resolveBlock = (block) => block ?? (editor ? selectedBlockRef(editor, registry) : null);
   const resolveBlockAt = (position) => editor ? blockRefAtPosition(editor, position, registry) : null;
@@ -32091,10 +32184,10 @@ var useOpenEditorController = ({
     editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
   };
   const setParagraph = () => {
-    editor?.chain().focus().setParagraph().run();
+    if (isBlockEnabled("paragraph")) editor?.chain().focus().setParagraph().run();
   };
   const toggleHeading = (level) => {
-    editor?.chain().focus().toggleHeading({ level }).run();
+    if (isBlockEnabled("heading")) editor?.chain().focus().toggleHeading({ level }).run();
   };
   const toggleBold = () => {
     editor?.chain().focus().toggleBold().run();
@@ -32112,19 +32205,19 @@ var useOpenEditorController = ({
     editor?.chain().focus().toggleCode().run();
   };
   const toggleBulletList = () => {
-    editor?.chain().focus().toggleBulletList().run();
+    if (isBlockEnabled("bulletList")) editor?.chain().focus().toggleBulletList().run();
   };
   const toggleOrderedList = () => {
-    editor?.chain().focus().toggleOrderedList().run();
+    if (isBlockEnabled("orderedList")) editor?.chain().focus().toggleOrderedList().run();
   };
   const toggleTaskList = () => {
-    editor?.chain().focus().toggleTaskList().run();
+    if (isBlockEnabled("taskList")) editor?.chain().focus().toggleTaskList().run();
   };
   const toggleBlockquote = () => {
-    editor?.chain().focus().toggleBlockquote().run();
+    if (isBlockEnabled("blockquote")) editor?.chain().focus().toggleBlockquote().run();
   };
   const toggleCodeBlock = () => {
-    editor?.chain().focus().toggleCodeBlock().run();
+    if (isBlockEnabled("codeBlock")) editor?.chain().focus().toggleCodeBlock().run();
   };
   const undo2 = () => {
     editor?.chain().focus().undo().run();
@@ -32135,7 +32228,8 @@ var useOpenEditorController = ({
   const controller = {
     document: document2,
     editor,
-    exports,
+    export: (format) => exportDocument(document2, format),
+    exportUnsafe: (format) => exportDocumentUnsafe(document2, format, exporters),
     ready: editor !== null,
     editable,
     placeholder,
@@ -32158,6 +32252,7 @@ var useOpenEditorController = ({
     undo: undo2,
     redo: redo2,
     insertBlock,
+    isBlockEnabled,
     setLink,
     getActiveLink: () => editor?.getAttributes("link").href,
     selectBlock,
@@ -32178,6 +32273,7 @@ var useOpenEditorController = ({
     extensions,
     pageRuntime,
     attachmentRuntime,
+    enabledBlocks,
     slashState,
     selectionBubbleState
   };
@@ -32402,9 +32498,9 @@ var sortMenuItems = (items) => [...items].sort((left, right) => {
 });
 var sortSlashMenuItems = (items) => sortMenuItems(items);
 var sortBlockPickerItems = (items) => sortMenuItems(items);
-var getExtensionInsertMenu = (extension) => extension.insertMenu ?? extension.slashMenu;
+var getExtensionInsertMenu = (extension) => extension.insertMenu;
 var getDefaultBlockPickerItems = (controller) => sortBlockPickerItems([
-  ...openEditorInsertPresets.map((preset, index) => ({
+  ...openEditorInsertPresets.filter((preset) => controller.isBlockEnabled(preset.key)).map((preset, index) => ({
     key: preset.key,
     label: preset.label,
     group: preset.group,
@@ -32412,7 +32508,7 @@ var getDefaultBlockPickerItems = (controller) => sortBlockPickerItems([
     order: (index + 1) * 100,
     insert: () => controller.insertBlock(preset.key)
   })),
-  ...controller.extensions.filter((extension) => getExtensionInsertMenu(extension) !== false).map((extension) => {
+  ...controller.extensions.filter((extension) => getExtensionInsertMenu(extension) !== false && controller.isBlockEnabled(extension.block.name)).map((extension) => {
     const menu = getExtensionInsertMenu(extension) || void 0;
     return {
       key: extension.block.name,
@@ -32428,7 +32524,7 @@ var getDefaultBlockPickerItems = (controller) => sortBlockPickerItems([
 var getDefaultSlashMenuItems = (controller) => {
   const internalController = controller;
   return sortSlashMenuItems([
-    ...openEditorInsertPresets.map((preset, index) => ({
+    ...openEditorInsertPresets.filter((preset) => controller.isBlockEnabled(preset.key)).map((preset, index) => ({
       key: preset.key,
       label: preset.label,
       group: preset.group,
@@ -32460,7 +32556,7 @@ var getDefaultSlashMenuItems = (controller) => {
         return true;
       }
     },
-    ...controller.extensions.filter((extension) => getExtensionInsertMenu(extension) !== false).map((extension) => {
+    ...controller.extensions.filter((extension) => getExtensionInsertMenu(extension) !== false && controller.isBlockEnabled(extension.block.name)).map((extension) => {
       const menu = getExtensionInsertMenu(extension) || void 0;
       return {
         key: extension.block.name,
@@ -32475,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":
@@ -32488,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,
@@ -32602,19 +32702,20 @@ 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;
 
-export { NodeViewContent, NodeViewWrapper, OpenEditorBlockDragHandle, OpenEditorContent, OpenEditorThemeProvider, OpenEditorViewer, createOpenEditorThemeStyle, defineOpenEditorReactExtension, defineOpenEditorReactNode, formatAttachmentSize, getDefaultBlockPickerItems, getDefaultSlashMenuItems, openEditorThemeTokenNames, sortBlockPickerItems, sortSlashMenuItems, useOpenEditor, useOpenEditorBlockInteraction, useOpenEditorController, useOpenEditorThemeStyle };
+export { NodeViewContent, NodeViewWrapper, OpenEditorBlockDragHandle, OpenEditorContent, OpenEditorPageHeader, OpenEditorThemeProvider, OpenEditorViewer, createOpenEditorThemeStyle, defineOpenEditorReactExtension, defineOpenEditorReactNode, formatAttachmentSize, getDefaultBlockPickerItems, getDefaultSlashMenuItems, openEditorThemeTokenNames, sortBlockPickerItems, sortSlashMenuItems, useOpenEditor, useOpenEditorBlockInteraction, useOpenEditorController, useOpenEditorThemeStyle };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map