quoin-editor 1.8.0 → 2.0.0

package/dist/{chunk-MSWA5ZZM.js → chunk-NL5J77VD.js}

@@ -23,25 +23,6 @@ function useEditorState(controller, selector, isEqual = Object.is) {
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 
-// src/view/selection/selection-decorations.ts
-var SELECTED = { class: "quoin-selected" };
-function isCrossSelection(selection) {
-  if (selection?.kind !== "text") return false;
-  const { anchor, head } = selection;
-  return anchor.block !== head.block || anchor.region !== head.region;
-}
-function selectionDecorations(state, mode) {
-  if (mode !== "decorations" || !isCrossSelection(state.selection)) return [];
-  return markRanges(state).map(({ block, region, from, to }) => ({
-    kind: "inline",
-    block,
-    region,
-    from,
-    to,
-    attrs: SELECTED
-  }));
-}
-
 // src/view/dom/attributes.ts
 var sortedEntries = (attrs) => dataAttributes(attrs, "");
 function setAttributes(element, attrs, prefix = "") {
@@ -837,6 +818,25 @@ function caretPosAt(controller, host, x, y) {
 // src/view/selection/native-interaction.ts
 var NATIVE_INTERACTION = "data-quoin-native";
 
+// src/view/selection/selection-decorations.ts
+var SELECTED = { class: "quoin-selected" };
+function isCrossSelection(selection) {
+  if (selection?.kind !== "text") return false;
+  const { anchor, head } = selection;
+  return anchor.block !== head.block || anchor.region !== head.region;
+}
+function selectionDecorations(state, mode) {
+  if (mode !== "decorations" || !isCrossSelection(state.selection)) return [];
+  return markRanges(state).map(({ block, region, from, to }) => ({
+    kind: "inline",
+    block,
+    region,
+    from,
+    to,
+    attrs: SELECTED
+  }));
+}
+
 // src/view/selection/cross-block-pointer.ts
 var DRAGGING = "data-quoin-dragging";
 var DRAG_DISTANCE = 4;
@@ -1033,7 +1033,7 @@ function inPlace(element, change) {
   change();
   for (const { at, left, top } of before) {
     const now = scrollOf(at);
-    if (now.left !== left || now.top !== top) at.scrollTo({ left, top, behavior: "instant" });
+    if (now.left !== left || now.top !== top) at.scrollTo?.({ left, top, behavior: "instant" });
   }
 }
 
@@ -1154,7 +1154,7 @@ function createNodeReveal(element) {
     show(selection, local) {
       const block = nodeOf(selection);
       if (block !== null && block !== pressed && (block !== shown || local && block === owed)) {
-        element(block)?.scrollIntoView({ block: "nearest" });
+        element(block)?.scrollIntoView?.({ block: "nearest" });
       }
       if (local) owed = null;
       shown = block;
@@ -2156,7 +2156,7 @@ function lineInView(host, last) {
   const line = lineEdgeRect(host, last);
   const view = host.ownerDocument.defaultView;
   if (!line || !view || line.top >= 0 && line.bottom <= view.innerHeight) return line;
-  host.scrollIntoView({ block: "nearest" });
+  host.scrollIntoView?.({ block: "nearest" });
   return lineEdgeRect(host, last);
 }
 function caretAtGoal(controller, host, at, y) {
@@ -2779,49 +2779,17 @@ function useQuoinEditor(options) {
   useEffect(() => () => controller.destroy(), [controller]);
   return controller;
 }
-function useReadOnly(controller) {
-  const subscribe = useCallback((notify) => controller.subscribeReadOnly(notify), [controller]);
-  const read = useCallback(() => controller.readOnly, [controller]);
-  return useSyncExternalStore(subscribe, read, read);
-}
-function SelectionSink({ label = "Selected content", blockLabel }) {
-  const controller = useViewController();
-  const ref = useRef(null);
-  const readOnly = useReadOnly(controller);
-  const name = useEditorState(
-    controller,
-    useCallback((state) => selectedBlockName(state, blockLabel), [blockLabel])
-  );
-  useIsomorphicLayoutEffect(() => {
-    const sink = ref.current;
-    return sink ? controller.registerSink(sink) : void 0;
-  }, [controller]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      contentEditable: !readOnly,
-      suppressContentEditableWarning: true,
-      role: "textbox",
-      "aria-label": name || label,
-      inputMode: name === null ? void 0 : "none",
-      "aria-multiline": name === null ? "true" : void 0,
-      "aria-readonly": readOnly ? "true" : void 0,
-      tabIndex: -1,
-      spellCheck: false,
-      "data-quoin-sink": "",
-      onFocus: () => {
-        if (heldBySink(controller.editor.state.selection)) focusSink(controller);
-      }
-    }
-  );
-}
 var headingPlaceholder = (_state, { type, attrs }) => type === "MARKDOWN" && attrs.kind === "heading" ? `Heading ${headingLevel(attrs.level)}` : void 0;
 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;
 }
+function useReadOnly(controller) {
+  const subscribe = useCallback((notify) => controller.subscribeReadOnly(notify), [controller]);
+  const read = useCallback(() => controller.readOnly, [controller]);
+  return useSyncExternalStore(subscribe, read, read);
+}
 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();
@@ -2868,6 +2836,178 @@ function EditableRegion({ block, region, label, id, placeholder, className }) {
     }
   );
 }
+var BLOCK_ERROR = "Block could not be drawn";
+var BlockErrorContext = createContext({ label: BLOCK_ERROR });
+var BlockDomIdScope = createContext("quoin");
+function useBlockDomId() {
+  const scope = useContext(BlockDomIdScope);
+  return useCallback((block) => `${scope}-${encodeURIComponent(block)}`, [scope]);
+}
+function useRegionDomId(block, region) {
+  return `${useBlockDomId()(block)}/${encodeURIComponent(region)}`;
+}
+function EmptyDocumentHost({ placeholder, label = "Paragraph" }) {
+  const controller = useViewController();
+  const ref = useRef(null);
+  const readOnly = useReadOnly(controller);
+  useIsomorphicLayoutEffect(() => {
+    const host = ref.current;
+    if (host === null) return void 0;
+    renderInline(host, [], []);
+    return controller.registerEmptyHost(host);
+  }, [controller]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      contentEditable: !readOnly,
+      suppressContentEditableWarning: true,
+      role: "textbox",
+      "aria-multiline": "true",
+      "aria-readonly": readOnly ? "true" : void 0,
+      "aria-label": label,
+      "data-quoin-host": "",
+      "data-quoin-empty": "",
+      "data-placeholder": readOnly ? void 0 : placeholder,
+      "aria-placeholder": readOnly ? void 0 : placeholder,
+      spellCheck: true,
+      onClick: () => ref.current?.focus()
+    }
+  );
+}
+
+// src/view/react/focus-owners.ts
+var focusOwners = /* @__PURE__ */ new WeakMap();
+
+// src/view/selection/selection-announcement.ts
+var SILENCE = { key: "", message: "" };
+function selectionAnnouncement({ doc, selection }, blocksSelected) {
+  if (selection === null || selection.kind === "text" && !isCrossSelection(selection)) return SILENCE;
+  if (selection.kind === "node") return { key: `node:${selection.block}`, message: blocksSelected(1) };
+  const anchor = selection.kind === "blocks" ? selection.anchor : selection.anchor.block;
+  const head = selection.kind === "blocks" ? selection.head : selection.head.block;
+  const first = doc.index.get(anchor);
+  const last = doc.index.get(head);
+  if (first === void 0 || last === void 0) return SILENCE;
+  const count = drawnBlockCount(doc, Math.min(first, last), Math.max(first, last) + 1);
+  return { key: `${selection.kind}:${anchor}:${head}`, message: blocksSelected(count) };
+}
+function heardNow({ editor, announcer, engagement }, blocksSelected) {
+  const spoken = announcer.current();
+  if (spoken !== null) return { key: `said:${spoken.serial}`, message: spoken.message };
+  return engagement.engaged ? selectionAnnouncement(editor.state, blocksSelected) : SILENCE;
+}
+function LiveRegion({ blocksSelected }) {
+  const controller = useViewController();
+  const subscribe = useCallback(
+    (notify) => {
+      const stopState = controller.editor.subscribe(() => notify());
+      const stopSpoken = controller.announcer.subscribe(notify);
+      const stopEngaged = controller.engagement.subscribe(notify);
+      return () => {
+        stopState();
+        stopSpoken();
+        stopEngaged();
+      };
+    },
+    [controller]
+  );
+  const read = useMemo(() => {
+    let last = SILENCE;
+    return () => {
+      const next = heardNow(controller, blocksSelected);
+      if (next.key !== last.key || next.message !== last.message) last = next;
+      return last;
+    };
+  }, [controller, blocksSelected]);
+  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) });
+}
+function SelectionSink({ label = "Selected content", blockLabel }) {
+  const controller = useViewController();
+  const ref = useRef(null);
+  const readOnly = useReadOnly(controller);
+  const name = useEditorState(
+    controller,
+    useCallback((state) => selectedBlockName(state, blockLabel), [blockLabel])
+  );
+  useIsomorphicLayoutEffect(() => {
+    const sink = ref.current;
+    return sink ? controller.registerSink(sink) : void 0;
+  }, [controller]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      contentEditable: !readOnly,
+      suppressContentEditableWarning: true,
+      role: "textbox",
+      "aria-label": name || label,
+      inputMode: name === null ? void 0 : "none",
+      "aria-multiline": name === null ? "true" : void 0,
+      "aria-readonly": readOnly ? "true" : void 0,
+      tabIndex: -1,
+      spellCheck: false,
+      "data-quoin-sink": "",
+      onFocus: () => {
+        if (heldBySink(controller.editor.state.selection)) focusSink(controller);
+      }
+    }
+  );
+}
+
+// src/view/react/SelectionWriter.tsx
+function SelectionWriter() {
+  const controller = useViewController();
+  const state = useEditorState(controller, wholeState);
+  useIsomorphicLayoutEffect(() => controller.afterRender(), [controller, state]);
+  return null;
+}
+var UNSUPPORTED_BLOCK = "Unsupported block";
+var UnsupportedBlockLabel = createContext(UNSUPPORTED_BLOCK);
+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 });
+}
+
+// src/view/react/block-status.ts
+function within(state, index, ends) {
+  const [anchor, head] = ends.map((id) => state.doc.index.get(id));
+  if (anchor === void 0 || head === void 0) return false;
+  return index >= Math.min(anchor, head) && index <= Math.max(anchor, head);
+}
+function covers(state, id, index) {
+  const { doc, schema, selection } = state;
+  if (selection === null) return false;
+  if (selection.kind === "node") return selection.block === id;
+  if (selection.kind === "blocks") return within(state, index, [selection.anchor, selection.head]);
+  if (!isCrossSelection(selection) || isTextFlow(schema, doc.blocks[index])) return false;
+  return within(state, index, [selection.anchor.block, selection.head.block]);
+}
+function blockStatus(state, id, choices = NO_CHOICES) {
+  const index = state.doc.index.get(id);
+  if (index === void 0) return "plain";
+  if (isHiddenAt(state.doc, index, choices)) return "hidden";
+  return covers(state, id, index) ? "selected" : "plain";
+}
 var CalloutBlock = ({ block }) => {
   const tone = typeof block.attrs.tone === "string" && block.attrs.tone !== "" ? block.attrs.tone : "info";
   return /* @__PURE__ */ jsx("div", { className: "quoin-callout", "data-tone": tone, children: /* @__PURE__ */ jsx(EditableRegion, { block: block.id, region: "body", label: `Callout, ${tone}` }) });
@@ -3023,8 +3163,6 @@ var ToggleBlock = ({ block, controller }) => {
     /* @__PURE__ */ jsx(EditableRegion, { block: block.id, region: "text", label: "Toggle" })
   ] });
 };
-var UNSUPPORTED_BLOCK = "Unsupported block";
-var UnsupportedBlockLabel = createContext(UNSUPPORTED_BLOCK);
 var defaultRenderers = {
   MARKDOWN: MarkdownBlock,
   CALLOUT: CalloutBlock,
@@ -3035,59 +3173,6 @@ var VoidBlockFallback = ({ block }) => {
   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 });
 };
-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 = useContext(BlockDomIdScope);
-  return useCallback((block) => `${scope}-${encodeURIComponent(block)}`, [scope]);
-}
-function useRegionDomId(block, region) {
-  return `${useBlockDomId()(block)}/${encodeURIComponent(region)}`;
-}
-
-// src/view/react/block-status.ts
-function within(state, index, ends) {
-  const [anchor, head] = ends.map((id) => state.doc.index.get(id));
-  if (anchor === void 0 || head === void 0) return false;
-  return index >= Math.min(anchor, head) && index <= Math.max(anchor, head);
-}
-function covers(state, id, index) {
-  const { doc, schema, selection } = state;
-  if (selection === null) return false;
-  if (selection.kind === "node") return selection.block === id;
-  if (selection.kind === "blocks") return within(state, index, [selection.anchor, selection.head]);
-  if (!isCrossSelection(selection) || isTextFlow(schema, doc.blocks[index])) return false;
-  return within(state, index, [selection.anchor.block, selection.head.block]);
-}
-function blockStatus(state, id, choices = NO_CHOICES) {
-  const index = state.doc.index.get(id);
-  if (index === void 0) return "plain";
-  if (isHiddenAt(state.doc, index, choices)) return "hidden";
-  return covers(state, id, index) ? "selected" : "plain";
-}
 var unwatched = () => () => {
 };
 function useEngaged(controller, watching) {
@@ -3141,91 +3226,6 @@ var BlockShell = memo(function BlockShell2({ block, renderers }) {
     }
   );
 });
-function EmptyDocumentHost({ placeholder, label = "Paragraph" }) {
-  const controller = useViewController();
-  const ref = useRef(null);
-  const readOnly = useReadOnly(controller);
-  useIsomorphicLayoutEffect(() => {
-    const host = ref.current;
-    if (host === null) return void 0;
-    renderInline(host, [], []);
-    return controller.registerEmptyHost(host);
-  }, [controller]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      contentEditable: !readOnly,
-      suppressContentEditableWarning: true,
-      role: "textbox",
-      "aria-multiline": "true",
-      "aria-readonly": readOnly ? "true" : void 0,
-      "aria-label": label,
-      "data-quoin-host": "",
-      "data-quoin-empty": "",
-      "data-placeholder": readOnly ? void 0 : placeholder,
-      "aria-placeholder": readOnly ? void 0 : placeholder,
-      spellCheck: true,
-      onClick: () => ref.current?.focus()
-    }
-  );
-}
-
-// src/view/react/focus-owners.ts
-var focusOwners = /* @__PURE__ */ new WeakMap();
-
-// src/view/selection/selection-announcement.ts
-var SILENCE = { key: "", message: "" };
-function selectionAnnouncement({ doc, selection }, blocksSelected) {
-  if (selection === null || selection.kind === "text" && !isCrossSelection(selection)) return SILENCE;
-  if (selection.kind === "node") return { key: `node:${selection.block}`, message: blocksSelected(1) };
-  const anchor = selection.kind === "blocks" ? selection.anchor : selection.anchor.block;
-  const head = selection.kind === "blocks" ? selection.head : selection.head.block;
-  const first = doc.index.get(anchor);
-  const last = doc.index.get(head);
-  if (first === void 0 || last === void 0) return SILENCE;
-  const count = drawnBlockCount(doc, Math.min(first, last), Math.max(first, last) + 1);
-  return { key: `${selection.kind}:${anchor}:${head}`, message: blocksSelected(count) };
-}
-function heardNow({ editor, announcer, engagement }, blocksSelected) {
-  const spoken = announcer.current();
-  if (spoken !== null) return { key: `said:${spoken.serial}`, message: spoken.message };
-  return engagement.engaged ? selectionAnnouncement(editor.state, blocksSelected) : SILENCE;
-}
-function LiveRegion({ blocksSelected }) {
-  const controller = useViewController();
-  const subscribe = useCallback(
-    (notify) => {
-      const stopState = controller.editor.subscribe(() => notify());
-      const stopSpoken = controller.announcer.subscribe(notify);
-      const stopEngaged = controller.engagement.subscribe(notify);
-      return () => {
-        stopState();
-        stopSpoken();
-        stopEngaged();
-      };
-    },
-    [controller]
-  );
-  const read = useMemo(() => {
-    let last = SILENCE;
-    return () => {
-      const next = heardNow(controller, blocksSelected);
-      if (next.key !== last.key || next.message !== last.message) last = next;
-      return last;
-    };
-  }, [controller, blocksSelected]);
-  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
-function SelectionWriter() {
-  const controller = useViewController();
-  const state = useEditorState(controller, wholeState);
-  useIsomorphicLayoutEffect(() => controller.afterRender(), [controller, state]);
-  return null;
-}
 function useBlockElements(blocks, renderers) {
   const [made] = useState(() => /* @__PURE__ */ new WeakMap());
   return blocks.map((block) => {
@@ -3289,6 +3289,6 @@ function EditorView({
   ) });
 }
 
-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-MSWA5ZZM.js.map
-//# sourceMappingURL=chunk-MSWA5ZZM.js.map
+export { BlockErrorContext, EditableRegion, EditorView, NATIVE_INTERACTION, NODE_ENTRY, TaskCheckbox, ToggleChevron, ViewController, caretClientRect, caretFromPoint, createAutoScroll, dispatchSelection, domMapOf, domToPos, drawnBlockCount, focusOwners, handleCopy, hostKey, isComposingKey, isOnFirstLine, isOnLastLine, lineEdgeRect, listen, moveToNeighbour, neighbourBlock, onBlock, posToDom, regionInline, renderInline, textDiff, useBlockDomId, useEditorState, useIsomorphicLayoutEffect, useOrderedNumber, useQuoinEditor, useReadOnly, useRegionDomId, useToggleOpen, useViewController, visibleBlockIndexes, wholeState };
+//# sourceMappingURL=chunk-NL5J77VD.js.map
+//# sourceMappingURL=chunk-NL5J77VD.js.map