quoin-editor 1.0.2 → 1.1.1

package/dist/{chunk-EPARJI4V.js → chunk-IEP7BPFN.js}

@@ -1,71 +1,9 @@
-import {
-  Transaction,
-  blockRangeSelection,
-  commonPrefix,
-  commonSuffix,
-  createEditor,
-  deleteBackward,
-  deleteForward,
-  deleteSelection,
-  deleteToLineEnd,
-  deleteToLineStart,
-  deleteWordBackward,
-  deleteWordForward,
-  detectMac,
-  endOf,
-  headBlockId,
-  hidingToggle,
-  insertHardBreak,
-  insertText,
-  isClosedToggle,
-  isCollapsed,
-  isTextFlow,
-  mapSelection,
-  markRanges,
-  nextGraphemeOffset,
-  nodeSelection,
-  prevGraphemeOffset,
-  primaryRegion,
-  rangeContent,
-  redo,
-  regionLength,
-  replaceInlineStep,
-  runCommands,
-  sameSelection,
-  selectionRange,
-  setAttrs,
-  setSelection,
-  startOf,
-  textSelection,
-  toggleMark,
-  toggleTask,
-  undo,
-  undoInputRule
-} from "./chunk-OBMBSU2S.js";
-import {
-  alignOrUndefined,
-  blockById,
-  dataAttributes,
-  firstNamed,
-  headingLevel,
-  inlineLength,
-  inlinePlainText,
-  inlineText,
-  markElement,
-  nodeLength,
-  optionalString,
-  orderedStart,
-  paletteOrUndefined,
-  requireBlockIndex,
-  sameAttrs,
-  sameItems,
-  sanitizeHref,
-  sliceInline,
-  writtenAttrs
-} from "./chunk-4XFXB37X.js";
-
-// src/view/react/use-editor-state.ts
-import { useCallback, useRef, useSyncExternalStore } from "react";
+import { toggleMark, hidingToggle, isTextFlow, markRanges, toggleTask, setAttrs, runCommands, setSelection, blockRangeSelection, primaryRegion, isClosedToggle, commonPrefix, commonSuffix, deleteSelection, detectMac, sameSelection, createEditor, endOf, startOf, nodeSelection, mapSelection, textSelection, rangeContent, headBlockId, redo, undo, insertHardBreak, undoInputRule, insertText, isCollapsed, nextGraphemeOffset, prevGraphemeOffset, Transaction, replaceInlineStep, selectionRange, regionLength, deleteBackward, deleteToLineEnd, deleteToLineStart, deleteWordForward, deleteWordBackward, deleteForward } from './chunk-L4D23LM2.js';
+import { alignOrUndefined, paletteOrUndefined, optionalString, headingLevel, sameItems, inlineLength, firstNamed, sameAttrs, blockById, orderedStart, nodeLength, inlineText, inlinePlainText, dataAttributes, writtenAttrs, markElement, sanitizeHref, sliceInline, requireBlockIndex } from './chunk-L6OW2FL3.js';
+import { createContext, memo, useRef, useContext, useCallback, useSyncExternalStore, useEffect, useLayoutEffect, Component, useState, useId, useMemo } from 'react';
+import { flushSync } from 'react-dom';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
 var wholeState = (state) => state;
 function useEditorState(controller, selector, isEqual = Object.is) {
   const last = useRef(null);
@@ -181,6 +119,11 @@ function segmentSignature(segment) {
   }
 }
 
+// src/view/dom/decoration-attrs.ts
+function withoutEventHandlers(attrs) {
+  return Object.fromEntries(Object.entries(attrs).filter(([name]) => !/^on/i.test(name)));
+}
+
 // src/view/dom/mark-elements.ts
 function create(doc, tag, attributes) {
   const element = doc.createElement(tag);
@@ -205,7 +148,7 @@ var created = /* @__PURE__ */ new WeakSet();
 function decorationElement(attrs, doc) {
   const element = doc.createElement("span");
   element.setAttribute("data-quoin-deco", "");
-  setAttributes(element, attrs);
+  setAttributes(element, withoutEventHandlers(attrs));
   return element;
 }
 function wrapperDepth(marks, decorations) {
@@ -706,6 +649,11 @@ function entryEdge(controller, block, direction) {
   return drawn && !entersAsNode(controller, block) ? edge : nodeSelection(block);
 }
 var ownNode = (controller, block, direction) => direction < 0 && entersAsNode(controller, block) ? nodeSelection(block) : null;
+var canBeEntered = (controller) => (block) => {
+  const { schema } = controller.editor.state;
+  const region = isTextFlow(schema, block) ? primaryRegion(schema, block) : null;
+  return region === null || controller.registry.get(block.id, region) !== void 0 || entersAsNode(controller, block.id);
+};
 var holdsTextHead = (controller) => (block) => isTextFlow(controller.editor.state.schema, block) && entryEdge(controller, block.id, 1).kind === "text";
 function neighbourHead(controller, from, direction) {
   const target = neighbourBlock(controller.editor.state.doc, from, direction, holdsTextHead(controller));
@@ -713,7 +661,7 @@ function neighbourHead(controller, from, direction) {
   return edge?.kind === "text" ? edge.head : null;
 }
 function moveToNeighbour(controller, from, direction) {
-  const target = neighbourBlock(controller.editor.state.doc, from, direction);
+  const target = neighbourBlock(controller.editor.state.doc, from, direction, canBeEntered(controller));
   if (target === null) return false;
   dispatchSelection(controller, entryEdge(controller, target.id, direction));
   return true;
@@ -901,6 +849,13 @@ function createCrossBlockPointer(controller) {
         startDragging();
         follow(x, y);
       }
+      function pressWhole(block) {
+        if (entryEdge(controller, block, 1).kind !== "node") return;
+        const pressed = blockById(controller.editor.state.doc, block);
+        if (pressed !== void 0 && !canBeEntered(controller)(pressed)) return select(blockRangeSelection(block));
+        controller.nodeReveal.pressed(block);
+        select(nodeSelection(block));
+      }
       function onPointerDown(event) {
         end();
         preventMouseDown = false;
@@ -914,10 +869,7 @@ function createCrossBlockPointer(controller) {
           if (event.shiftKey) extendFrom(host, event.clientX, event.clientY);
         } else if (block !== void 0 && !(control && root.contains(control))) {
           press = { kind: "blocks", start: block, x: event.clientX, y: event.clientY };
-          if (!event.shiftKey && entryEdge(controller, block, 1).kind === "node") {
-            controller.nodeReveal.pressed(block);
-            select(nodeSelection(block));
-          }
+          if (!event.shiftKey) pressWhole(block);
         } else {
           return;
         }
@@ -1906,7 +1858,7 @@ function reconcileHost(controller, block, region, caretHint) {
   if (element === void 0 || inline === void 0) return false;
   const before = inlineText(inline);
   const after = readDomText(element);
-  const edit = before === after ? null : textDiff(before, after, caretHint ?? domCaretOffset(element));
+  const edit = before === after ? null : textDiff(before, after, domCaretOffset(element));
   if (edit === null) return false;
   const at = (offset) => ({ block, region, offset });
   controller.edit(() => {
@@ -2151,7 +2103,7 @@ function landing(controller, { head }, direction, extend) {
   }
   const own2 = extend ? null : ownNode(controller, head.block, direction);
   if (own2 !== null) return own2;
-  const accept = extend ? holdsTextHead(controller) : void 0;
+  const accept = extend ? holdsTextHead(controller) : canBeEntered(controller);
   const target = neighbourBlock(controller.editor.state.doc, head.block, direction, accept);
   return target && (landAtGoal(controller, target, direction) ?? entryEdge(controller, target.id, direction));
 }
@@ -2295,12 +2247,12 @@ function attachInput(controller, root) {
   };
   const onInput = (event) => fallback.onInput(event);
   const onCompositionStart = (event) => {
-    if (inHost(event) || inEmptyHost(event)) composition.start(event);
+    if (inHost(event) || inEmptyHost(event)) composition.start();
     else if (inSink(event)) sinkComposition.start();
   };
   const onCompositionEnd = (event) => {
     if (inSink(event)) sinkComposition.end();
-    else composition.end(event);
+    else composition.end();
   };
   const detachClipboard = attachClipboard(controller, root, catchUp);
   const unlisten = listen(root, {
@@ -2666,28 +2618,18 @@ var ViewController = class {
     else element.focus({ preventScroll });
   }
 };
-
-// src/view/react/editor-context.ts
-import { createContext, useContext } from "react";
 var QuoinEditorContext = createContext(null);
 function useViewController() {
   const controller = useContext(QuoinEditorContext);
   if (controller === null) throw new Error("useViewController must be called inside an EditorView");
   return controller;
 }
-
-// src/view/react/use-quoin-editor.ts
-import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
-import { flushSync } from "react-dom";
-
-// src/view/react/use-isomorphic-layout-effect.ts
-import { useEffect, useLayoutEffect } from "react";
 var useIsomorphicLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
 
 // src/view/react/use-quoin-editor.ts
 function useQuoinEditor(options) {
   const { blocks, readOnly = false } = options;
-  const callbacks = useRef2(options);
+  const callbacks = useRef(options);
   const [controller] = useState(() => {
     const editor = createEditor({
       blocks,
@@ -2712,30 +2654,21 @@ function useQuoinEditor(options) {
   useIsomorphicLayoutEffect(() => {
     controller.setReadOnly(readOnly);
   }, [controller, readOnly]);
-  useEffect2(() => () => controller.destroy(), [controller]);
+  useEffect(() => () => controller.destroy(), [controller]);
   return controller;
 }
-
-// src/view/react/SelectionSink.tsx
-import { useCallback as useCallback3, useRef as useRef3 } from "react";
-
-// src/view/react/use-read-only.ts
-import { useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore2 } from "react";
 function useReadOnly(controller) {
-  const subscribe = useCallback2((notify) => controller.subscribeReadOnly(notify), [controller]);
-  const read = useCallback2(() => controller.readOnly, [controller]);
-  return useSyncExternalStore2(subscribe, read, read);
+  const subscribe = useCallback((notify) => controller.subscribeReadOnly(notify), [controller]);
+  const read = useCallback(() => controller.readOnly, [controller]);
+  return useSyncExternalStore(subscribe, read, read);
 }
-
-// src/view/react/SelectionSink.tsx
-import { jsx } from "react/jsx-runtime";
 function SelectionSink({ label = "Selected content", blockLabel }) {
   const controller = useViewController();
-  const ref = useRef3(null);
+  const ref = useRef(null);
   const readOnly = useReadOnly(controller);
   const name = useEditorState(
     controller,
-    useCallback3((state) => selectedBlockName(state, blockLabel), [blockLabel])
+    useCallback((state) => selectedBlockName(state, blockLabel), [blockLabel])
   );
   useIsomorphicLayoutEffect(() => {
     const sink = ref.current;
@@ -2761,28 +2694,19 @@ function SelectionSink({ label = "Selected content", blockLabel }) {
     }
   );
 }
-
-// src/view/react/EditableRegion.tsx
-import { useCallback as useCallback4, useContext as useContext2, useRef as useRef4 } from "react";
-
-// src/view/react/block-placeholder.ts
-import { createContext as createContext2 } from "react";
 var headingPlaceholder = (_state, { type, attrs }) => type === "MARKDOWN" && attrs.kind === "heading" ? `Heading ${headingLevel(attrs.level)}` : void 0;
-var BlockPlaceholderContext = createContext2(headingPlaceholder);
+var BlockPlaceholderContext = createContext(headingPlaceholder);
 function regionPlaceholder(state, blockId, region, placeholderOf) {
   const block = blockById(state.doc, blockId);
   return block !== void 0 && primaryRegion(state.schema, block) === region ? placeholderOf(state, block) : void 0;
 }
-
-// src/view/react/EditableRegion.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
 var samePainted = (a, b) => a.inline === b.inline && a.placeholder === b.placeholder && sameDecorations(a.decorations, b.decorations);
 function EditableRegion({ block, region, label, id, placeholder, className }) {
   const controller = useViewController();
-  const placeholderOf = useContext2(BlockPlaceholderContext);
-  const ref = useRef4(null);
+  const placeholderOf = useContext(BlockPlaceholderContext);
+  const ref = useRef(null);
   const readOnly = useReadOnly(controller);
-  const select = useCallback4(
+  const select = useCallback(
     (state) => {
       const inline2 = regionInline(state, block, region);
       const empty = inline2 === void 0 || inlineLength(inline2) === 0;
@@ -2802,7 +2726,7 @@ function EditableRegion({ block, region, label, id, placeholder, className }) {
   useIsomorphicLayoutEffect(() => {
     controller.renderHost(block, region);
   }, [controller, block, region, inline, decorations]);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -2822,15 +2746,9 @@ function EditableRegion({ block, region, label, id, placeholder, className }) {
     }
   );
 }
-
-// src/view/react/default-renderers.tsx
-import { useContext as useContext3 } from "react";
-
-// src/view/react/callout-block.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
 var CalloutBlock = ({ block }) => {
   const tone = typeof block.attrs.tone === "string" && block.attrs.tone !== "" ? block.attrs.tone : "info";
-  return /* @__PURE__ */ jsx3("div", { className: "quoin-callout", "data-tone": tone, children: /* @__PURE__ */ jsx3(EditableRegion, { block: block.id, region: "body", label: `Callout, ${tone}` }) });
+  return /* @__PURE__ */ jsx("div", { className: "quoin-callout", "data-tone": tone, children: /* @__PURE__ */ jsx(EditableRegion, { block: block.id, region: "body", label: `Callout, ${tone}` }) });
 };
 
 // src/view/react/block-command.ts
@@ -2845,14 +2763,11 @@ function onBlock(id, command) {
 
 // src/view/react/prevent-mouse-focus.ts
 var keepFocus = (event) => event.preventDefault();
-
-// src/view/react/TaskCheckbox.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
 function TaskCheckbox({ block, controller, label, labelledBy }) {
   const checked = block.attrs.checked === true;
   const flip2 = flipCommand(block);
   const readOnly = useReadOnly(controller);
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -2868,7 +2783,7 @@ function TaskCheckbox({ block, controller, label, labelledBy }) {
       onClick: () => {
         if (flip2 && !controller.readOnly) controller.run(onBlock(block.id, flip2));
       },
-      children: checked ? /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx4("path", { d: "M3.5 8.5l3 3 6-7", fill: "none", stroke: "currentColor", strokeWidth: "2" }) }) : null
+      children: checked ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-7", fill: "none", stroke: "currentColor", strokeWidth: "2" }) }) : null
     }
   );
 }
@@ -2913,18 +2828,15 @@ function useOrderedNumber(controller, blockId) {
     return index === void 0 ? 1 : orderedNumber(doc, index);
   });
 }
-
-// src/view/react/markdown-block.tsx
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var REGION = "text";
 function TextRegion({ block, label }) {
-  return /* @__PURE__ */ jsx5(EditableRegion, { block: block.id, region: REGION, label });
+  return /* @__PURE__ */ jsx(EditableRegion, { block: block.id, region: REGION, label });
 }
 function NumberedItem({ block, controller }) {
   const number = useOrderedNumber(controller, block.id);
   return /* @__PURE__ */ jsxs("div", { className: "quoin-list-item", "data-list": "ordered", children: [
-    /* @__PURE__ */ jsx5("span", { className: "quoin-marker", "aria-hidden": "true", children: `${number}.` }),
-    /* @__PURE__ */ jsx5(TextRegion, { block, label: `Numbered list item ${number}` })
+    /* @__PURE__ */ jsx("span", { className: "quoin-marker", "aria-hidden": "true", children: `${number}.` }),
+    /* @__PURE__ */ jsx(TextRegion, { block, label: `Numbered list item ${number}` })
   ] });
 }
 var MarkdownBlock = (props) => {
@@ -2932,44 +2844,38 @@ var MarkdownBlock = (props) => {
   switch (block.attrs.kind) {
     case "heading": {
       const level = headingLevel(block.attrs.level);
-      return /* @__PURE__ */ jsx5("div", { role: "heading", "aria-level": level, className: "quoin-heading", children: /* @__PURE__ */ jsx5(TextRegion, { block, label: `Heading ${level}` }) });
+      return /* @__PURE__ */ jsx("div", { role: "heading", "aria-level": level, className: "quoin-heading", children: /* @__PURE__ */ jsx(TextRegion, { block, label: `Heading ${level}` }) });
     }
     case "bullet":
       return /* @__PURE__ */ jsxs("div", { className: "quoin-list-item", "data-list": "bullet", children: [
-        /* @__PURE__ */ jsx5("span", { className: "quoin-marker", "aria-hidden": "true", children: "\u2022" }),
-        /* @__PURE__ */ jsx5(TextRegion, { block, label: "Bullet list item" })
+        /* @__PURE__ */ jsx("span", { className: "quoin-marker", "aria-hidden": "true", children: "\u2022" }),
+        /* @__PURE__ */ jsx(TextRegion, { block, label: "Bullet list item" })
       ] });
     case "ordered":
-      return /* @__PURE__ */ jsx5(NumberedItem, { ...props });
+      return /* @__PURE__ */ jsx(NumberedItem, { ...props });
     case "task":
       return /* @__PURE__ */ jsxs("div", { className: "quoin-task", "data-checked": block.attrs.checked === true, children: [
-        /* @__PURE__ */ jsx5(TaskCheckbox, { block, controller: props.controller }),
-        /* @__PURE__ */ jsx5(TextRegion, { block, label: "Task" })
+        /* @__PURE__ */ jsx(TaskCheckbox, { block, controller: props.controller }),
+        /* @__PURE__ */ jsx(TextRegion, { block, label: "Task" })
       ] });
     case "quote":
-      return /* @__PURE__ */ jsx5("div", { className: "quoin-quote", children: /* @__PURE__ */ jsx5(TextRegion, { block, label: "Quote" }) });
+      return /* @__PURE__ */ jsx("div", { className: "quoin-quote", children: /* @__PURE__ */ jsx(TextRegion, { block, label: "Quote" }) });
     default:
-      return /* @__PURE__ */ jsx5(TextRegion, { block, label: "Paragraph" });
+      return /* @__PURE__ */ jsx(TextRegion, { block, label: "Paragraph" });
   }
 };
-
-// src/view/react/use-reader-choices.ts
-import { useSyncExternalStore as useSyncExternalStore3 } from "react";
 function useReaderChoices(controller) {
   const store = readerToggles(controller);
-  return useSyncExternalStore3(store.subscribe, () => store.choices, () => store.choices);
+  return useSyncExternalStore(store.subscribe, () => store.choices, () => store.choices);
 }
 function useToggleOpen(controller, block) {
   return shownOpen(block, useReaderChoices(controller));
 }
-
-// src/view/react/ToggleChevron.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
 function ToggleChevron({ block, controller, label = "Toggle", controls }) {
   const open = useToggleOpen(controller, block);
   const readOnly = useReadOnly(controller);
   const flip2 = flipCommand(block);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -2984,48 +2890,57 @@ function ToggleChevron({ block, controller, label = "Toggle", controls }) {
         if (controller.readOnly) readerToggles(controller).flip(block);
         else if (flip2) controller.run(onBlock(block.id, flip2));
       },
-      children: /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx6("path", { d: "M6 3.5l4.5 4.5L6 12.5", fill: "none", stroke: "currentColor", strokeWidth: "2" }) })
+      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M6 3.5l4.5 4.5L6 12.5", fill: "none", stroke: "currentColor", strokeWidth: "2" }) })
     }
   );
 }
-
-// src/view/react/toggle-block.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var ToggleBlock = ({ block, controller }) => {
   const open = useToggleOpen(controller, block);
-  return /* @__PURE__ */ jsxs2("div", { className: "quoin-toggle", "data-open": open, children: [
-    /* @__PURE__ */ jsx7(ToggleChevron, { block, controller }),
-    /* @__PURE__ */ jsx7(EditableRegion, { block: block.id, region: "text", label: "Toggle" })
+  return /* @__PURE__ */ jsxs("div", { className: "quoin-toggle", "data-open": open, children: [
+    /* @__PURE__ */ jsx(ToggleChevron, { block, controller }),
+    /* @__PURE__ */ jsx(EditableRegion, { block: block.id, region: "text", label: "Toggle" })
   ] });
 };
-
-// src/view/react/unsupported-block-label.ts
-import { createContext as createContext3 } from "react";
 var UNSUPPORTED_BLOCK = "Unsupported block";
-var UnsupportedBlockLabel = createContext3(UNSUPPORTED_BLOCK);
-
-// src/view/react/default-renderers.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+var UnsupportedBlockLabel = createContext(UNSUPPORTED_BLOCK);
 var defaultRenderers = {
   MARKDOWN: MarkdownBlock,
   CALLOUT: CalloutBlock,
   TOGGLE: ToggleBlock
 };
 var VoidBlockFallback = ({ block }) => {
-  const label = useContext3(UnsupportedBlockLabel);
-  if (block.type === "DIVIDER") return /* @__PURE__ */ jsx8("div", { className: "quoin-void", contentEditable: false, role: "separator" });
-  return /* @__PURE__ */ jsx8("div", { className: "quoin-void", contentEditable: false, role: "group", "aria-label": label, children: label });
+  const label = useContext(UnsupportedBlockLabel);
+  if (block.type === "DIVIDER") return /* @__PURE__ */ jsx("div", { className: "quoin-void", contentEditable: false, role: "separator" });
+  return /* @__PURE__ */ jsx("div", { className: "quoin-void", contentEditable: false, role: "group", "aria-label": label, children: label });
 };
-
-// src/view/react/BlockShell.tsx
-import { memo, useRef as useRef5 } from "react";
-
-// src/view/react/block-dom-id.ts
-import { createContext as createContext4, useCallback as useCallback5, useContext as useContext4 } from "react";
-var BlockDomIdScope = createContext4("quoin");
+var BLOCK_ERROR = "Block could not be drawn";
+var BlockErrorContext = createContext({ label: BLOCK_ERROR });
+var Boundary = class extends Component {
+  state = { block: this.props.block, renderer: this.props.renderer, failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  static getDerivedStateFromProps(props, state) {
+    const same = props.block === state.block && props.renderer === state.renderer;
+    return same ? null : { block: props.block, renderer: props.renderer, failed: false };
+  }
+  componentDidCatch(error) {
+    this.props.report?.(error instanceof Error ? error : new Error(String(error)));
+  }
+  render() {
+    if (!this.state.failed) return this.props.children;
+    const { label } = this.props;
+    return /* @__PURE__ */ jsx("div", { className: "quoin-void", contentEditable: false, role: "group", "aria-label": label, children: label });
+  }
+};
+function BlockErrorBoundary({ block, renderer, children }) {
+  const { label, report } = useContext(BlockErrorContext);
+  return /* @__PURE__ */ jsx(Boundary, { block, renderer, label, report, children });
+}
+var BlockDomIdScope = createContext("quoin");
 function useBlockDomId() {
-  const scope = useContext4(BlockDomIdScope);
-  return useCallback5((block) => `${scope}-${encodeURIComponent(block)}`, [scope]);
+  const scope = useContext(BlockDomIdScope);
+  return useCallback((block) => `${scope}-${encodeURIComponent(block)}`, [scope]);
 }
 function useRegionDomId(block, region) {
   return `${useBlockDomId()(block)}/${encodeURIComponent(region)}`;
@@ -3051,16 +2966,18 @@ function blockStatus(state, id, choices = NO_CHOICES) {
   if (isHiddenAt(state.doc, index, choices)) return "hidden";
   return covers(state, id, index) ? "selected" : "plain";
 }
-
-// src/view/react/BlockShell.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+function safeAttrs(decorations) {
+  const attrs = Object.assign({}, ...decorations.map((decoration) => decoration.attrs));
+  for (const name of Object.keys(attrs)) if (!/^(data|aria)-/.test(name)) delete attrs[name];
+  return attrs;
+}
 function rendererFor(renderers, type) {
   for (const table of [renderers, defaultRenderers]) if (Object.hasOwn(table, type)) return table[type];
   return VoidBlockFallback;
 }
 var BlockShell = memo(function BlockShell2({ block, renderers }) {
   const controller = useViewController();
-  const ref = useRef5(null);
+  const ref = useRef(null);
   const domId = useBlockDomId();
   const choices = useReaderChoices(controller);
   const status = useEditorState(controller, (state) => blockStatus(state, block.id, choices));
@@ -3073,10 +2990,10 @@ var BlockShell = memo(function BlockShell2({ block, renderers }) {
   if (hidden) return null;
   const Renderer = rendererFor(renderers, block.type);
   const { kind, color, background, align } = block.attrs;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ...Object.assign({}, ...decorations.map((decoration) => decoration.attrs)),
+      ...safeAttrs(decorations),
       ref,
       id: domId(block.id),
       "data-quoin-block": "",
@@ -3090,20 +3007,13 @@ var BlockShell = memo(function BlockShell2({ block, renderers }) {
       style: { "--quoin-indent": block.indent },
       tabIndex: -1,
       "data-selected": status === "selected" ? "true" : void 0,
-      children: /* @__PURE__ */ jsx9(Renderer, { block, controller })
+      children: /* @__PURE__ */ jsx(BlockErrorBoundary, { block, renderer: Renderer, children: /* @__PURE__ */ jsx(Renderer, { block, controller }) })
     }
   );
 });
-
-// src/view/react/EditorView.tsx
-import { useId, useRef as useRef7 } from "react";
-
-// src/view/react/EmptyDocumentHost.tsx
-import { useRef as useRef6 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
 function EmptyDocumentHost({ placeholder, label = "Paragraph" }) {
   const controller = useViewController();
-  const ref = useRef6(null);
+  const ref = useRef(null);
   const readOnly = useReadOnly(controller);
   useIsomorphicLayoutEffect(() => {
     const host = ref.current;
@@ -3111,7 +3021,7 @@ function EmptyDocumentHost({ placeholder, label = "Paragraph" }) {
     renderInline(host, [], []);
     return controller.registerEmptyHost(host);
   }, [controller]);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -3134,9 +3044,6 @@ function EmptyDocumentHost({ placeholder, label = "Paragraph" }) {
 // src/view/react/focus-owners.ts
 var focusOwners = /* @__PURE__ */ new WeakMap();
 
-// src/view/react/LiveRegion.tsx
-import { useCallback as useCallback6, useMemo, useSyncExternalStore as useSyncExternalStore4 } from "react";
-
 // src/view/selection/selection-announcement.ts
 var SILENCE = { key: "", message: "" };
 function selectionAnnouncement({ doc, selection }, blocksSelected) {
@@ -3150,9 +3057,6 @@ function selectionAnnouncement({ doc, selection }, blocksSelected) {
   const count = drawnBlockCount(doc, Math.min(first, last), Math.max(first, last) + 1);
   return { key: `${selection.kind}:${anchor}:${head}`, message: blocksSelected(count) };
 }
-
-// src/view/react/LiveRegion.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
 function heardNow({ editor, announcer }, blocksSelected) {
   const spoken = announcer.current();
   if (spoken !== null) return { key: `said:${spoken.serial}`, message: spoken.message };
@@ -3160,7 +3064,7 @@ function heardNow({ editor, announcer }, blocksSelected) {
 }
 function LiveRegion({ blocksSelected }) {
   const controller = useViewController();
-  const subscribe = useCallback6(
+  const subscribe = useCallback(
     (notify) => {
       const stopState = controller.editor.subscribe(() => notify());
       const stopSpoken = controller.announcer.subscribe(notify);
@@ -3179,8 +3083,8 @@ function LiveRegion({ blocksSelected }) {
       return last;
     };
   }, [controller, blocksSelected]);
-  const { key, message } = useSyncExternalStore4(subscribe, read, read);
-  return /* @__PURE__ */ jsx11("div", { className: "quoin-visually-hidden", role: "status", "aria-live": "polite", "aria-atomic": "true", children: message !== "" && /* @__PURE__ */ jsx11("span", { children: message }, key) });
+  const { key, message } = useSyncExternalStore(subscribe, read, read);
+  return /* @__PURE__ */ jsx("div", { className: "quoin-visually-hidden", role: "status", "aria-live": "polite", "aria-atomic": "true", children: message !== "" && /* @__PURE__ */ jsx("span", { children: message }, key) });
 }
 
 // src/view/react/SelectionWriter.tsx
@@ -3190,23 +3094,16 @@ function SelectionWriter() {
   useIsomorphicLayoutEffect(() => controller.afterRender(), [controller, state]);
   return null;
 }
-
-// src/view/react/use-block-elements.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
 function useBlockElements(blocks, renderers) {
-  const [made] = useState2(() => /* @__PURE__ */ new WeakMap());
+  const [made] = useState(() => /* @__PURE__ */ new WeakMap());
   return blocks.map((block) => {
     const known2 = made.get(block);
     if (known2?.renderers === renderers) return known2.element;
-    const element = /* @__PURE__ */ jsx12(BlockShell, { block, renderers }, block.id);
+    const element = /* @__PURE__ */ jsx(BlockShell, { block, renderers }, block.id);
     made.set(block, { renderers, element });
     return element;
   });
 }
-
-// src/view/react/EditorView.tsx
-import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
 var NO_RENDERERS = {};
 var HINT = "Press Escape, then Tab, to leave the editor.";
 var BLOCKS_SELECTED = (count) => `${count} ${count === 1 ? "block" : "blocks"} selected`;
@@ -3221,18 +3118,21 @@ function EditorView({
   selectedContentLabel,
   blockLabel,
   unsupportedBlockLabel = UNSUPPORTED_BLOCK,
+  blockErrorLabel = BLOCK_ERROR,
+  onBlockError,
   placeholder,
   blockPlaceholder = headingPlaceholder,
   blocksSelectedLabel = BLOCKS_SELECTED,
   children
 }) {
-  const root = useRef7(null);
+  const root = useRef(null);
   const hintId = useId();
   const blockIdScope = useId();
   const blocks = useEditorState(controller, (state) => state.doc.blocks);
+  const blockError = useMemo(() => ({ label: blockErrorLabel, report: onBlockError }), [blockErrorLabel, onBlockError]);
   const shells = useBlockElements(blocks, renderers);
   useIsomorphicLayoutEffect(() => root.current ? controller.attach(root.current) : void 0, [controller]);
-  return /* @__PURE__ */ jsx13(QuoinEditorContext.Provider, { value: controller, children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx(QuoinEditorContext.Provider, { value: controller, children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref: root,
@@ -3243,62 +3143,17 @@ function EditorView({
       "aria-describedby": hintId,
       onFocusCapture: (event) => focusOwners.set(event.target, controller),
       children: [
-        /* @__PURE__ */ jsx13(BlockDomIdScope.Provider, { value: blockIdScope, children: /* @__PURE__ */ jsx13(UnsupportedBlockLabel.Provider, { value: unsupportedBlockLabel, children: /* @__PURE__ */ jsx13(BlockPlaceholderContext.Provider, { value: blockPlaceholder, children: blocks.length === 0 ? /* @__PURE__ */ jsx13(EmptyDocumentHost, { placeholder, label: paragraphLabel }) : shells }) }) }),
+        /* @__PURE__ */ jsx(BlockDomIdScope.Provider, { value: blockIdScope, children: /* @__PURE__ */ jsx(UnsupportedBlockLabel.Provider, { value: unsupportedBlockLabel, children: /* @__PURE__ */ jsx(BlockErrorContext.Provider, { value: blockError, children: /* @__PURE__ */ jsx(BlockPlaceholderContext.Provider, { value: blockPlaceholder, children: blocks.length === 0 ? /* @__PURE__ */ jsx(EmptyDocumentHost, { placeholder, label: paragraphLabel }) : shells }) }) }) }),
         children,
-        /* @__PURE__ */ jsx13(SelectionSink, { label: selectedContentLabel, blockLabel }),
-        /* @__PURE__ */ jsx13("div", { id: hintId, className: "quoin-visually-hidden", children: hint }),
-        /* @__PURE__ */ jsx13(LiveRegion, { blocksSelected: blocksSelectedLabel }),
-        /* @__PURE__ */ jsx13(SelectionWriter, {})
+        /* @__PURE__ */ jsx(SelectionSink, { label: selectedContentLabel, blockLabel }),
+        /* @__PURE__ */ jsx("div", { id: hintId, className: "quoin-visually-hidden", children: hint }),
+        /* @__PURE__ */ jsx(LiveRegion, { blocksSelected: blocksSelectedLabel }),
+        /* @__PURE__ */ jsx(SelectionWriter, {})
       ]
     }
   ) });
 }
 
-export {
-  dispatchSelection,
-  wholeState,
-  useEditorState,
-  useReadOnly,
-  isCrossSelection,
-  NODE_ENTRY,
-  visibleBlockIndexes,
-  drawnBlockCount,
-  neighbourBlock,
-  moveToNeighbour,
-  textDiff,
-  domMapOf,
-  renderInline,
-  domToPos,
-  posToDom,
-  caretFromPoint,
-  caretClientRect,
-  lineEdgeRect,
-  isOnFirstLine,
-  isOnLastLine,
-  isComposingKey,
-  NATIVE_INTERACTION,
-  useIsomorphicLayoutEffect,
-  onBlock,
-  listen,
-  createAutoScroll,
-  hostKey,
-  regionInline,
-  handleCopy,
-  ViewController,
-  useViewController,
-  useQuoinEditor,
-  useBlockDomId,
-  useRegionDomId,
-  focusOwners,
-  SelectionSink,
-  EditableRegion,
-  TaskCheckbox,
-  useOrderedNumber,
-  useToggleOpen,
-  ToggleChevron,
-  defaultRenderers,
-  VoidBlockFallback,
-  BlockShell,
-  EditorView
-};
-//# sourceMappingURL=chunk-EPARJI4V.js.map
+export { BlockErrorContext, BlockShell, EditableRegion, EditorView, NATIVE_INTERACTION, NODE_ENTRY, SelectionSink, TaskCheckbox, ToggleChevron, ViewController, VoidBlockFallback, caretClientRect, caretFromPoint, createAutoScroll, defaultRenderers, dispatchSelection, domMapOf, domToPos, drawnBlockCount, focusOwners, handleCopy, hostKey, isComposingKey, isCrossSelection, isOnFirstLine, isOnLastLine, lineEdgeRect, listen, moveToNeighbour, neighbourBlock, onBlock, posToDom, regionInline, renderInline, textDiff, useBlockDomId, useEditorState, useIsomorphicLayoutEffect, useOrderedNumber, useQuoinEditor, useReadOnly, useRegionDomId, useToggleOpen, useViewController, visibleBlockIndexes, wholeState };
+//# sourceMappingURL=chunk-IEP7BPFN.js.map
+//# sourceMappingURL=chunk-IEP7BPFN.js.map