smartrte-react 1.0.0-beta.8 → 1.1.0

package/dist/components/CanonicalAuthorityEditor.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { atomDeclarations, continueListNumbering, createList, createNodeId, deleteAtom, executeMarkTool, indentBlockCommand, indentList, inlineToolDeclarations, isTextNode, insertAtom, insertTableColumnCommand, insertTableCommand, insertTableRowCommand, mergeTableCellsCommand, moveListItems, moveTableColumnCommand, moveTableRowCommand, setTableCellAttributesCommand, setTableColumnWidthCommand, setTableRowHeightCommand, parseCanonicalListHtml, parseCanonicalListMarkdown, removeTableColumnCommand, removeTableCommand, removeTableRowCommand, resizeAtom, runAtomUpload, restartListNumbering, serializeCanonicalListHtml, serializeCanonicalListMarkdown, setListChecked, setListPreset, setListStyle, setTableHeaderCommand, setBlockAttributes, setBlockTypeCommand, moveBlockCommand, outdentBlockCommand, splitTableCellCommand, unwrapBlocks, wrapBlocks, unwrapList, updateAtom, outdentList, commentRangeFromSelection, rebaseCommentThreadsThroughTransaction, foundationSchema, resolvePos, suggestDeleteCommand, suggestInsertOperation, acceptSuggestionCommand, rejectSuggestionCommand, structuralSuggestionFromNode, acceptStructuralSuggestionCommand, rebaseStructuralSuggestionsThroughTransaction, } from "smartrte-core/foundation";
+import { atomDeclarations, continueListNumbering, createList, createNodeId, deleteAtom, executeMarkTool, indentBlockCommand, indentList, inlineToolDeclarations, isTextNode, insertAtom, insertTableColumnCommand, insertTableCommand, insertTableRowCommand, mergeTableCellsCommand, moveListItems, moveTableColumnCommand, moveTableRowCommand, setTableCellAttributesCommand, setTableColumnWidthCommand, setTableRowHeightCommand, parseCanonicalListHtml, parseCanonicalListMarkdown, removeTableColumnCommand, removeTableCommand, removeTableRowCommand, reportMarkApplication, resizeAtom, runAtomUpload, restartListNumbering, serializeCanonicalListHtml, serializeCanonicalListMarkdown, setListChecked, setListPreset, setListStyle, setTableHeaderCommand, setBlockAttributes, setBlockTypeCommand, moveBlockCommand, outdentBlockCommand, splitTableCellCommand, unwrapBlocks, wrapBlocks, unwrapList, updateAtom, outdentList, commentRangeFromSelection, rebaseCommentThreadsThroughTransaction, foundationSchema, resolvePos, suggestDeleteCommand, suggestInsertOperation, acceptSuggestionCommand, rejectSuggestionCommand, structuralSuggestionFromNode, acceptStructuralSuggestionCommand, rebaseStructuralSuggestionsThroughTransaction, } from "smartrte-core/foundation";
 import { FOUNDATION_SMART_LIST_PRESETS as SMART_LIST_PRESETS } from "smartrte-core/foundation";
 import { ensureStyleSheet } from "../theme.js";
 import { VersionHistoryPanel } from "./VersionHistoryPanel.js";
@@ -17,6 +17,7 @@ import { TableSizePickerPopover } from "./TableSizePickerPopover.js";
 import { FormulaLibraryPopover } from "./FormulaLibraryPopover.js";
 import { SpecialCharacterPopover } from "./SpecialCharacterPopover.js";
 import { TableBorderPopover, BORDER_WIDTH_PRESETS } from "./TableBorderPopover.js";
+import { BlockquoteBorderPopover } from "./BlockquoteBorderPopover.js";
 import { TableResizeHandles } from "./TableResizeHandles.js";
 import { MediaOverlay } from "./MediaOverlay.js";
 import { MediaDetailsPopover } from "./MediaDetailsPopover.js";
@@ -129,10 +130,23 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     const [linkPopover, setLinkPopover] = useState(null);
     const [colorPopover, setColorPopover] = useState(null);
     const [recentColors, setRecentColors] = useState({ text: [], background: [], border: [] });
+    /**
+     * "Let both bullet and number list tool icon work as toggle and on click
+     * text should [adopt] respective preset list" - the plain Bulleted
+     * list/Numbered list buttons always applied a generic disc/decimal
+     * marker, ignoring whatever glyph preset (e.g. "❖ ➢ ■") the user had
+     * already picked from the "List preset" dropdown elsewhere in the same
+     * session. Session-only React state, matching recentColors' own
+     * documented "no localStorage" convention above - not persisted across
+     * reloads.
+     */
+    const [lastListPreset, setLastListPreset] = useState({ bullet: null, ordered: null });
     const [tableSizePopover, setTableSizePopover] = useState(null);
     const [tableBorderPopover, setTableBorderPopover] = useState(null);
+    const [blockquoteBorderPopover, setBlockquoteBorderPopover] = useState(null);
     const [mediaDetailsPopover, setMediaDetailsPopover] = useState(null);
     const borderPreviewCheckpointRef = useRef(null);
+    const blockquoteBorderPreviewCheckpointRef = useRef(null);
     const [formulaLibraryPopover, setFormulaLibraryPopover] = useState(null);
     const [specialCharPopover, setSpecialCharPopover] = useState(null);
     const [recentSpecialChars, setRecentSpecialChars] = useState([]);
@@ -272,6 +286,35 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     };
     const blockScope = () => runtime.editor.resolveScope({ want: "block-range" });
     const blockContext = () => ({ schema: runtime.editor.schema, positions: runtime.editor.positions });
+    /**
+     * `SelectionDescription` (resolveScope({want:"describe"})) tracks mark
+     * coverage (markCoverage below) but has no equivalent for block
+     * *attributes* - `blockTypes` is the closest thing, and it's just node
+     * types, not attrs. This mirrors foundation/block/commands.ts's own
+     * (core-internal, not exported) blockScopes/selectedBlockIds traversal -
+     * a "mixed" scope is a caret/selection spanning more than one real
+     * block-range part (e.g. a paragraph plus a list item), each of which
+     * carries its own blockIds.
+     */
+    const selectedLineHeightBlockIds = (scope) => {
+        const collect = (candidate) => candidate.kind === "block-range" ? candidate.blockIds
+            : candidate.kind === "mixed" ? candidate.parts.flatMap(collect)
+                : [];
+        return [...new Set(collect(scope))];
+    };
+    /** `undefined` = no block selected/no override anywhere, a number = every selected block shares that exact value, `"mixed"` = selected blocks disagree - same three-state shape as markCoverage's boolean|"mixed"|undefined. */
+    const currentLineHeight = () => {
+        const ids = selectedLineHeightBlockIds(blockScope());
+        if (!ids.length)
+            return undefined;
+        const values = ids.map((id) => {
+            const value = findNode(runtime.editor.document, id)?.attrs?.lineHeight;
+            return typeof value === "number" ? value : undefined;
+        });
+        const unique = [...new Set(values)];
+        return unique.length === 1 ? unique[0] : "mixed";
+    };
+    const setLineHeight = (value) => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { lineHeight: value } }, blockContext()));
     const listScope = () => runtime.editor.resolveScope({ want: "list-selection" });
     const tableScope = () => runtime.editor.resolveScope({ want: "table-grid" });
     const atomScope = () => runtime.editor.resolveScope({ want: "atomic-node" });
@@ -347,15 +390,16 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
         ? runtime.surface.renderer?.mapping.nodeToDom(currentAtomScope.nodeId)
         : undefined;
     const selectedAtomNode = atomSelected ? findNode(runtime.editor.document, currentAtomScope.nodeId) : null;
-    // A divider (<hr>) is atomic/selectable (so ordinary caret/Backspace/
-    // Delete behavior around it works, and the toolbar's "Delete selected
-    // atom" button applies to it), but it has no src/alt/width/height at
-    // all - MediaOverlay and the media-specific Edit/Resize actions assume
-    // every atom is a real media item, and unconditionally showing them for
-    // a divider surfaced nonsensical empty/undefined values with no
-    // sensible edit or resize target. Media-only UI is gated on this
-    // instead of plain atomSelected; delete stays available for any atom.
-    const mediaAtomSelected = atomSelected && selectedAtomNode?.type !== "divider";
+    // A divider (<hr>) or page break is atomic/selectable (so ordinary caret/
+    // Backspace/Delete behavior around it works, and the toolbar's "Delete
+    // selected atom" button applies to it), but neither has any src/alt/
+    // width/height at all - MediaOverlay and the media-specific Edit/Resize
+    // actions assume every atom is a real media item, and unconditionally
+    // showing them for one of these surfaced nonsensical empty/undefined
+    // values with no sensible edit or resize target. Media-only UI is gated
+    // on this instead of plain atomSelected; delete stays available for any
+    // atom.
+    const mediaAtomSelected = atomSelected && selectedAtomNode?.type !== "divider" && selectedAtomNode?.type !== "page_break";
     // Formula (like divider above) has no width/height concept - KaTeX sizes
     // its own rendering from the source/font-size, not stored dimensions, so
     // "Enlarge/Shrink selected media" and MediaOverlay's resize handle had no
@@ -366,11 +410,18 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     // node.type.includes("formula") for its own correct "Formula source"
     // prompt.
     const resizableAtomSelected = mediaAtomSelected && selectedAtomNode?.type !== "formula" && selectedAtomNode?.type !== "block_formula";
+    // A divider/page break has no editable field and no width/height, but it
+    // is still a real, selectable, deletable atom - right-clicking one should
+    // surface the same kind of Delete-only action menu formula already gets
+    // (docs/bugs/horizontal-line-not-visibly-selectable.md), not the silence
+    // `mediaAtomSelected` alone produces (that flag exists to hide fields
+    // that don't apply, not to hide a delete affordance entirely).
+    const actionOnlyAtomSelected = atomSelected && (selectedAtomNode?.type === "divider" || selectedAtomNode?.type === "page_break");
     const selectedAtomId = atomSelected && "nodeId" in currentAtomScope ? currentAtomScope.nodeId : null;
     useEffect(() => {
-        if (mediaContextMenu && (!mediaAtomSelected || mediaContextMenu.nodeId !== selectedAtomId))
+        if (mediaContextMenu && (!(mediaAtomSelected || actionOnlyAtomSelected) || mediaContextMenu.nodeId !== selectedAtomId))
             setMediaContextMenu(null);
-    }, [mediaContextMenu, mediaAtomSelected, selectedAtomId]);
+    }, [mediaContextMenu, mediaAtomSelected, actionOnlyAtomSelected, selectedAtomId]);
     useEffect(() => {
         if (mediaResizeTarget && (!mediaAtomSelected || mediaResizeTarget.nodeId !== selectedAtomId))
             setMediaResizeTarget(null);
@@ -453,9 +504,36 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
         return "paragraph";
     };
     const currentBlockType = blockTypeAt(runtime.editor.selection.head);
+    /**
+     * Nearest enclosing blockquote ancestor of `pos` (defaulting to the
+     * current selection head), or undefined outside one. For a nested
+     * blockquote this resolves to the innermost one - shared by the toggle
+     * button's active state, the toggle command itself, the right-click
+     * gate, and the blockquote styling context-menu items below, so all
+     * four can never drift apart on "which blockquote is this."
+     */
+    const findBlockquoteAncestor = (pos = runtime.editor.selection.head) => [...runtime.editor.resolve({ pos }).ancestors].reverse().find((node) => node.type === "blockquote");
+    const currentBlockquoteActive = Boolean(findBlockquoteAncestor());
+    /** A synthetic block-range scope targeting exactly one blockquote node's own id - the shape setBlockAttributes/wrapBlocks/unwrapBlocks all expect. */
+    const blockquoteScopeFor = (blockId, pos) => ({
+        kind: "block-range",
+        blockIds: [blockId],
+        promotedFromPartial: false,
+        commonParentId: null,
+        range: { from: pos, to: pos },
+        isolatingAncestorId: null,
+        clamped: false,
+    });
     const currentListPreset = currentListParts.length === 1 && typeof rootList?.attrs?.preset === "string"
         ? rootList.attrs.preset
         : "";
+    // The Bulleted/Numbered list buttons' own split-control style pickers -
+    // scoped to one kind each, so unlike the shared "List preset" select above
+    // (which lists both kinds together) each only shows/reflects presets of
+    // its own kind, and reads as unset (native placeholder) when the active
+    // preset (if any) belongs to the other kind.
+    const currentBulletPreset = SMART_LIST_PRESETS.find((preset) => preset.id === currentListPreset)?.kind === "bullet" ? currentListPreset : "";
+    const currentOrderedPreset = SMART_LIST_PRESETS.find((preset) => preset.id === currentListPreset)?.kind === "ordered" ? currentListPreset : "";
     const toggleCheckedItems = () => {
         if (currentListScope.kind !== "list-selection" || currentList?.attrs?.checkable !== true)
             return;
@@ -503,17 +581,30 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     const toggleList = (style, checkable = false) => {
         const selectedList = listScope();
         const context = blockContext();
+        // A checklist's marker is a checkbox, not a bullet/number glyph - never
+        // substitute a remembered preset for it. Otherwise, reapply whichever
+        // preset the user last picked from the "List preset" dropdown for this
+        // same kind (bullet/ordered), instead of always resetting to the
+        // generic disc/decimal marker - see lastListPreset's own doc comment.
+        // setListStyle's own params type has no `preset` field (it's a
+        // deliberately distinct command from setListPreset - see setListPreset
+        // itself clearing `style` and vice versa), so this is a real branch,
+        // not just a differently-shaped params object.
+        const rememberedPreset = checkable ? null : lastListPreset[style === "decimal" ? "ordered" : "bullet"];
         if (selectedList.kind === "list-selection") {
             const rootId = outermostListId(selectedList.listId);
             const list = findNode(runtime.editor.document, rootId);
             const sameStyle = listActiveKind(list) === (style === "decimal" ? "ordered" : "bullet") && Boolean(list?.attrs?.checkable) === checkable;
+            const target = { ...selectedList, listId: rootId };
             const operations = sameStyle
                 // Toggling an already-active style off is deliberately scoped to just
                 // the current item (selectedList), not the whole list.
                 ? unwrapList(runtime.editor.document, selectedList, { splitListIds: ids(4) }, context)
                 // Applying a genuinely different style/type is a whole-list decision
                 // regardless of how deep the cursor is nested.
-                : setListStyle(runtime.editor.document, { ...selectedList, listId: rootId }, { style, checkable }, context);
+                : rememberedPreset
+                    ? setListPreset(runtime.editor.document, target, { preset: rememberedPreset }, context)
+                    : setListStyle(runtime.editor.document, target, { style, checkable }, context);
             runtime.executeOperations(operations, { preserveSelectionById: true });
             return;
         }
@@ -523,9 +614,45 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
         // per block, on top of one list per originally-flat contiguous group —
         // over-provision generously rather than compute the exact worst case.
         runtime.executeOperations(createList(runtime.editor.document, selectedBlocks, {
-            listIds: ids(Math.max(1, count * 2)), itemIds: ids(Math.max(1, count)), style, checkable,
+            listIds: ids(Math.max(1, count * 2)), itemIds: ids(Math.max(1, count)), checkable,
+            ...(rememberedPreset ? { preset: rememberedPreset } : { style }),
         }, context), { preserveSelectionById: true });
     };
+    /**
+     * The Bulleted/Numbered list buttons' own split-control style picker
+     * (a native `<select>`, not a custom-positioned dropdown - see the
+     * `.srte-split-control` styling) - lets the user choose a specific preset
+     * directly from the button itself, instead of only ever getting the
+     * plain/remembered default from a click and having to visit the separate
+     * "More list tools" menu to pick a named style. Applies to an existing
+     * list (whole-list, like the shared "List preset" select) or creates a
+     * brand-new list with that preset when nothing is selected yet - unlike
+     * that shared select, which only ever edits an already-existing list.
+     * Scope is resolved fresh here (not from the outer currentListScope/
+     * currentListParts consts) to match toggleList's own convention of
+     * re-resolving at click time rather than trusting a render-time snapshot.
+     */
+    const applyListPreset = (preset) => {
+        const pickedKind = SMART_LIST_PRESETS.find((candidate) => candidate.id === preset)?.kind;
+        const selectedList = listScope();
+        const context = blockContext();
+        if (selectedList.kind === "list-selection") {
+            const parts = listSelectionParts(selectedList);
+            if (parts.length !== 1)
+                return;
+            const rootId = outermostListId(parts[0].listId);
+            runtime.executeOperations(setListPreset(runtime.editor.document, { ...parts[0], listId: rootId }, { preset }, context), { preserveSelectionById: true });
+        }
+        else {
+            const selectedBlocks = blockScope();
+            const count = selectedBlocks.kind === "block-range" ? selectedBlocks.blockIds.length : 1;
+            runtime.executeOperations(createList(runtime.editor.document, selectedBlocks, {
+                listIds: ids(Math.max(1, count * 2)), itemIds: ids(Math.max(1, count)), checkable: false, preset,
+            }, context), { preserveSelectionById: true });
+        }
+        if (pickedKind)
+            setLastListPreset((previous) => ({ ...previous, [pickedKind]: preset }));
+    };
     const runList = (action) => {
         const scope = listScope();
         const context = blockContext();
@@ -596,6 +723,16 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
         const value = cell?.attrs?.[attr];
         return typeof value === "string" ? value : undefined;
     };
+    const currentBlockquoteColor = (blockId, attr) => {
+        const value = findNode(runtime.editor.document, blockId)?.attrs?.[attr];
+        return typeof value === "string" ? value : undefined;
+    };
+    /** Blockquote's *effective* left border (only one side exists, unlike table_cell's 4 - no `sides` toggle concept needed at all). */
+    const currentBlockquoteBorderDraft = (blockId) => {
+        const value = findNode(runtime.editor.document, blockId)?.attrs?.borderLeft;
+        const parsed = parseBorderShorthand(value);
+        return { style: parsed?.style ?? "solid", widthPx: parsed?.widthPx ?? BORDER_WIDTH_PRESETS[0].px, hex: parsed?.hex ?? "#000000" };
+    };
     const CELL_BORDER_SIDE_KEYS = { top: "borderTop", right: "borderRight", bottom: "borderBottom", left: "borderLeft" };
     /** Reads the cell's *effective* per-side border (a side's own override, falling back to the legacy uniform `borders` value) to seed the Border options popover. */
     const currentCellBorderDraft = (scope) => {
@@ -645,6 +782,39 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
         setTableBorderPopover(null);
         runtime.focus();
     };
+    /** Same shape as applyCellBorderDraft, but for the one side a blockquote has - the whole draft always applies to borderLeft, no per-side toggle to reduce down first. */
+    const applyBlockquoteBorderDraft = (blockId, draft, options) => {
+        const scope = blockquoteScopeFor(blockId, runtime.editor.selection.head);
+        runtime.executeOperations(setBlockAttributes(runtime.editor.document, scope, { attrs: { borderLeft: composeBorderShorthand(draft.widthPx, draft.style, draft.hex) } }, blockContext()), { preserveSelectionById: true, ...options });
+    };
+    const previewBlockquoteBorder = (draft) => {
+        if (!blockquoteBorderPopover)
+            return;
+        if (!blockquoteBorderPreviewCheckpointRef.current)
+            blockquoteBorderPreviewCheckpointRef.current = runtime.createCheckpoint();
+        runtime.restoreCheckpoint(blockquoteBorderPreviewCheckpointRef.current);
+        applyBlockquoteBorderDraft(blockquoteBorderPopover.blockId, draft, { addToHistory: false });
+    };
+    const applyBlockquoteBorderCommit = (draft) => {
+        if (!blockquoteBorderPopover)
+            return;
+        if (blockquoteBorderPreviewCheckpointRef.current) {
+            runtime.restoreCheckpoint(blockquoteBorderPreviewCheckpointRef.current);
+            blockquoteBorderPreviewCheckpointRef.current = null;
+        }
+        applyBlockquoteBorderDraft(blockquoteBorderPopover.blockId, draft, { addToHistory: true });
+        recordRecentColor("border", draft.hex);
+        setBlockquoteBorderPopover(null);
+        runtime.focus();
+    };
+    const cancelBlockquoteBorderPopover = () => {
+        if (blockquoteBorderPreviewCheckpointRef.current) {
+            runtime.restoreCheckpoint(blockquoteBorderPreviewCheckpointRef.current);
+            blockquoteBorderPreviewCheckpointRef.current = null;
+        }
+        setBlockquoteBorderPopover(null);
+        runtime.focus();
+    };
     const recordRecentColor = (bucket, hex) => {
         setRecentColors((current) => ({
             ...current,
@@ -658,12 +828,17 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
         if (colorPopover.target.kind === "mark") {
             applyMarkAttrs(colorPopover.target.markId, { value: hex }, options);
         }
-        else {
+        else if (colorPopover.target.kind === "cell") {
             // Uses the scope captured when the popover opened, not a fresh
             // tableScope() re-resolved against the live selection - see the
             // colorPopover state's own doc comment for why.
             runtime.executeOperations(setTableCellAttributesCommand(runtime.editor.document, colorPopover.target.scope, { attrs: { [colorPopover.target.attr]: hex } }, blockContext()), { preserveSelectionById: true, ...options });
         }
+        else {
+            // Same captured-id-at-click-time discipline as the cell case above.
+            const scope = blockquoteScopeFor(colorPopover.target.blockId, runtime.editor.selection.head);
+            runtime.executeOperations(setBlockAttributes(runtime.editor.document, scope, { attrs: { [colorPopover.target.attr]: hex } }, blockContext()), { preserveSelectionById: true, ...options });
+        }
     };
     /**
      * Live preview while dragging the in-page saturation/hue picker (or typing
@@ -722,18 +897,10 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     const toggleBlockquote = () => {
         const scope = blockScope();
         const resolved = runtime.editor.resolve({ pos: runtime.editor.selection.head });
-        const ancestor = [...resolved.ancestors].reverse().find((node) => node.type === "blockquote");
+        const ancestor = findBlockquoteAncestor();
         const context = blockContext();
         if (ancestor) {
-            const quoteScope = {
-                kind: "block-range",
-                blockIds: [ancestor.id],
-                promotedFromPartial: false,
-                commonParentId: null,
-                range: { from: resolved.pos, to: resolved.pos },
-                isolatingAncestorId: null,
-                clamped: false,
-            };
+            const quoteScope = blockquoteScopeFor(ancestor.id, resolved.pos);
             runtime.executeOperations(unwrapBlocks(runtime.editor.document, quoteScope, { type: "blockquote" }, context), { preserveSelectionById: true });
             return;
         }
@@ -895,6 +1062,29 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                 onSelect: () => setTableBorderPopover({ x: openX, y: openY, scope: tableGridScope, initial: currentCellBorderDraft(tableGridScope) }),
             });
         }
+        else {
+            // Table cell checked first (above) - a right-click inside a table
+            // nested inside a blockquote shows cell options, not these.
+            const blockquoteAncestor = findBlockquoteAncestor();
+            if (blockquoteAncestor) {
+                const openX = contextMenu?.x ?? 0;
+                const openY = contextMenu?.y ?? 0;
+                const blockId = blockquoteAncestor.id;
+                items.push({
+                    id: "blockquote.contextMenu.backgroundColor",
+                    label: "Blockquote background colour",
+                    onSelect: () => setColorPopover({ x: openX, y: openY, target: { kind: "blockquote", attr: "backgroundColor", blockId }, initialValue: currentBlockquoteColor(blockId, "backgroundColor") }),
+                }, {
+                    id: "blockquote.contextMenu.textColor",
+                    label: "Blockquote text colour",
+                    onSelect: () => setColorPopover({ x: openX, y: openY, target: { kind: "blockquote", attr: "textColor", blockId }, initialValue: currentBlockquoteColor(blockId, "textColor") }),
+                }, {
+                    id: "blockquote.contextMenu.borderOptions",
+                    label: "Blockquote border options",
+                    onSelect: () => setBlockquoteBorderPopover({ x: openX, y: openY, blockId, initial: currentBlockquoteBorderDraft(blockId) }),
+                });
+            }
+        }
         return items;
     };
     /**
@@ -1397,6 +1587,26 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
             return false;
         return entry.coverage === "all" ? true : "mixed";
     };
+    /**
+     * Whether clicking this mark tool right now would do anything at all - a
+     * node type can declare `marks: ""` (code_block, every atom) to disallow
+     * every mark, and applyMarkCommand already silently skips owners that
+     * disallow the mark rather than erroring - previously that made these
+     * buttons stay fully clickable no-ops with zero feedback inside a code
+     * block or with an image selected. Reuses reportMarkApplication (already
+     * built for exactly this question, previously only exercised by tests)
+     * rather than re-deriving the schema check: "allowed somewhere" is
+     * ownerCount > ownerIdsSkipped.length, i.e. at least one touched owner
+     * does NOT skip it. Deliberately "somewhere", not "everywhere" - a
+     * selection spanning both a normal paragraph and a code block still
+     * partially applies to the paragraph half today, and disabling here
+     * would take that capability away for no reason.
+     */
+    const markToolAllowed = (id) => {
+        const scope = runtime.editor.resolveScope({ want: "inline-range" });
+        const report = reportMarkApplication(runtime.editor.document, scope, markTool(id).markType, blockContext());
+        return report.ownerCount > report.ownerIdsSkipped.length;
+    };
     const toggleMark = (id) => { executeMarkTool(runtime.editor, markTool(id), "toggle"); runtime.focus(); };
     const openLinkPopover = (event) => {
         const description = runtime.editor.resolveScope({ want: "describe" });
@@ -1427,14 +1637,39 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     // twice; below 1440px (including mobile) this copy is what's reachable,
     // same as before. "Code" isn't promoted - see the docs/bugs/ writeup on
     // why it stayed the dropdown's sole remaining item at wide widths.
-    const textStylesMenuItems = _jsxs(_Fragment, { children: [t.code && _jsx(ToolbarMenuItem, { icon: "code", label: "Code", pressed: markCoverage("inlineCode"), disabled: readOnly, onClick: () => toggleMark("inlineCode") }), t.superscript && _jsx(ToolbarMenuItem, { icon: "superscript", label: "Superscript", pressed: markCoverage("superscript"), disabled: readOnly, onClick: () => toggleMark("superscript"), widePromote: true }), t.subscript && _jsx(ToolbarMenuItem, { icon: "subscript", label: "Subscript", pressed: markCoverage("subscript"), disabled: readOnly, onClick: () => toggleMark("subscript"), widePromote: true }), t.textColor && _jsx(ToolbarMenuItem, { icon: "textColor", label: "Text colour", disabled: readOnly, widePromote: true, onClick: (event) => {
+    const textStylesMenuItems = _jsxs(_Fragment, { children: [t.code && _jsx(ToolbarMenuItem, { icon: "code", label: "Code", pressed: markCoverage("inlineCode"), disabled: readOnly || !markToolAllowed("inlineCode"), onClick: () => toggleMark("inlineCode") }), t.superscript && _jsx(ToolbarMenuItem, { icon: "superscript", label: "Superscript", pressed: markCoverage("superscript"), disabled: readOnly || !markToolAllowed("superscript"), onClick: () => toggleMark("superscript"), widePromote: true }), t.subscript && _jsx(ToolbarMenuItem, { icon: "subscript", label: "Subscript", pressed: markCoverage("subscript"), disabled: readOnly || !markToolAllowed("subscript"), onClick: () => toggleMark("subscript"), widePromote: true }), t.textColor && _jsx(ToolbarMenuItem, { icon: "textColor", label: "Text colour", disabled: readOnly || !markToolAllowed("textColor"), widePromote: true, onClick: (event) => {
                     const rect = event.currentTarget.getBoundingClientRect();
                     setColorPopover({ x: rect.left, y: rect.bottom + 4, target: { kind: "mark", markId: "textColor" }, initialValue: currentMarkColor("textColor") });
-                } }), t.backgroundColor && _jsx(ToolbarMenuItem, { icon: "backgroundColor", label: "Background colour", disabled: readOnly, widePromote: true, onClick: (event) => {
+                } }), t.backgroundColor && _jsx(ToolbarMenuItem, { icon: "backgroundColor", label: "Background colour", disabled: readOnly || !markToolAllowed("backgroundColor"), widePromote: true, onClick: (event) => {
                     const rect = event.currentTarget.getBoundingClientRect();
                     setColorPopover({ x: rect.left, y: rect.bottom + 4, target: { kind: "mark", markId: "backgroundColor" }, initialValue: currentMarkColor("backgroundColor") });
-                } }), t.fontSize && _jsx(ToolbarMenuItem, { icon: "fontSize", label: "Font size", disabled: readOnly, onClick: () => applyAttributedMark("fontSize"), widePromote: true }), t.fontFamily && _jsx(ToolbarMenuItem, { icon: "fontFamily", label: "Font family", disabled: readOnly, onClick: () => applyAttributedMark("fontFamily"), widePromote: true })] });
+                } }), t.fontSize && _jsx(ToolbarMenuItem, { icon: "fontSize", label: "Font size", disabled: readOnly || !markToolAllowed("fontSize"), onClick: () => applyAttributedMark("fontSize"), widePromote: true }), t.fontFamily && _jsx(ToolbarMenuItem, { icon: "fontFamily", label: "Font family", disabled: readOnly || !markToolAllowed("fontFamily"), onClick: () => applyAttributedMark("fontFamily"), widePromote: true })] });
     const showMoreTextStyles = t.code || t.superscript || t.subscript || t.textColor || t.backgroundColor || t.fontSize || t.fontFamily;
+    /**
+     * Line spacing - matches Google Docs' own reference shape: a short preset
+     * list plus a custom/exact value entry, with a checkmark on whichever
+     * preset (or "Default") currently applies. "Default" clears the
+     * attribute entirely (setLineHeight(undefined)) rather than writing an
+     * explicit "1" - the block then renders at the browser/font's own
+     * natural line-height, matching how no override ever forces a value for
+     * align/indent either. A mixed-value selection (blocks disagreeing)
+     * shows no checkmark on any entry, matching every comparison below
+     * evaluating false against the "mixed" sentinel with no special-casing
+     * needed.
+     */
+    const LINE_HEIGHT_PRESETS = [1, 1.15, 1.5, 2, 2.5];
+    const lineHeightMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { label: "Default", pressed: currentLineHeight() === undefined, disabled: readOnly, onClick: () => setLineHeight(undefined) }), LINE_HEIGHT_PRESETS.map((preset) => _jsx(ToolbarMenuItem, { label: String(preset), pressed: currentLineHeight() === preset, disabled: readOnly, onClick: () => setLineHeight(preset) }, preset)), _jsx("div", { className: "srte-menu-separator" }), _jsxs("div", { className: "srte-line-height-custom", style: { padding: "4px 8px", display: "flex", alignItems: "center", gap: 6 }, children: [_jsx("span", { "aria-hidden": "true", style: { fontSize: 12, whiteSpace: "nowrap" }, children: "Custom:" }), _jsx("input", { "aria-label": "Custom line spacing", type: "number", min: 0.1, max: 10, step: 0.05, disabled: readOnly, defaultValue: (() => { const current = currentLineHeight(); return typeof current === "number" && !LINE_HEIGHT_PRESETS.includes(current) ? current : ""; })(), placeholder: "e.g. 1.75", style: { width: "100%", minWidth: 0 }, onKeyDown: (event) => {
+                            if (event.key !== "Enter")
+                                return;
+                            const value = Number(event.currentTarget.value);
+                            if (Number.isFinite(value) && value >= 0.1 && value <= 10)
+                                setLineHeight(value);
+                            event.currentTarget.closest("details")?.removeAttribute("open");
+                        }, onBlur: (event) => {
+                            const value = Number(event.currentTarget.value);
+                            if (event.currentTarget.value && Number.isFinite(value) && value >= 0.1 && value <= 10)
+                                setLineHeight(value);
+                        } }, String((() => { const current = currentLineHeight(); return typeof current === "number" && !LINE_HEIGHT_PRESETS.includes(current) ? current : "none"; })()))] })] });
     const paragraphToolsMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { icon: "moveUp", label: "Move block up", disabled: readOnly, onClick: () => runBlock("up") }), _jsx(ToolbarMenuItem, { icon: "moveDown", label: "Move block down", disabled: readOnly, onClick: () => runBlock("down") }), _jsx(ToolbarMenuItem, { icon: "indent", label: "Indent block", disabled: readOnly, onClick: () => runBlock("indent") }), _jsx(ToolbarMenuItem, { icon: "outdent", label: "Outdent block", disabled: readOnly, onClick: () => runBlock("outdent") })] });
     /**
      * Named multi-level marker presets (decimal/lower-alpha/upper-alpha/
@@ -1455,6 +1690,9 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                 // the cursor is nested — see outermostListId.
                 const rootId = outermostListId(currentListParts[0].listId);
                 runtime.executeOperations(setListPreset(runtime.editor.document, { ...currentListParts[0], listId: rootId }, { preset }, blockContext()), { preserveSelectionById: true });
+                const pickedKind = SMART_LIST_PRESETS.find((candidate) => candidate.id === preset)?.kind;
+                if (pickedKind)
+                    setLastListPreset((previous) => ({ ...previous, [pickedKind]: preset }));
             }, style: { width: "100%" }, children: [_jsx("option", { value: "", children: "List preset" }), SMART_LIST_PRESETS.map((preset) => _jsx("option", { value: preset.id, children: preset.kind === "bullet" ? `Bullet · ${preset.label}` : `Number · ${preset.label}` }, preset.id))] }) });
     const listToolsMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { icon: "checkSquare", label: "Check selected items", pressed: currentListScope.kind === "list-selection" && currentListScope.items.every((item) => findNode(runtime.editor.document, item.itemId)?.attrs?.checked === true), disabled: readOnly || currentList?.attrs?.checkable !== true, onClick: toggleCheckedItems }), _jsx(ToolbarMenuItem, { icon: "indent", label: "Indent list item", disabled: readOnly || !canIndent, onClick: () => runList("indent") }), _jsx(ToolbarMenuItem, { icon: "outdent", label: "Outdent list item", disabled: readOnly || currentListParts.length === 0, onClick: () => runList("outdent") }), _jsx(ToolbarMenuItem, { icon: "moveUp", label: "Move item up", disabled: readOnly || !canMoveUp, onClick: () => runList("up") }), _jsx(ToolbarMenuItem, { icon: "moveDown", label: "Move item down", disabled: readOnly || !canMoveDown, onClick: () => runList("down") }), _jsx(ToolbarMenuItem, { icon: "restart", label: "Restart numbering", disabled: readOnly || !orderedList, onClick: restartNumbering }), _jsx(ToolbarMenuItem, { icon: "continueNumbering", label: "Continue numbering", disabled: readOnly || !orderedList, onClick: () => runtime.executeOperations(continueListNumbering(runtime.editor.document, currentListScope, {}, blockContext()), { preserveSelectionById: true }) })] });
     // Remove link/Insert formula/Special characters also get a standalone
@@ -1467,7 +1705,7 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                 } }), t.specialCharacters && _jsx(ToolbarMenuItem, { icon: "specialChar", label: "Special characters", disabled: readOnly, widePromote: true, onClick: (event) => {
                     const rect = event.currentTarget.getBoundingClientRect();
                     setSpecialCharPopover({ x: rect.left, y: rect.bottom + 4 });
-                } }), _jsx(ToolbarMenuItem, { icon: "edit", label: "Edit selected media", disabled: readOnly || !mediaAtomSelected, onClick: () => editSelectedAtom() }), _jsx(ToolbarMenuItem, { icon: "zoomIn", label: "Enlarge selected media", disabled: readOnly || !resizableAtomSelected, onClick: () => editSelectedAtom(20) }), _jsx(ToolbarMenuItem, { icon: "zoomOut", label: "Shrink selected media", disabled: readOnly || !resizableAtomSelected, onClick: () => editSelectedAtom(-20) }), _jsx(ToolbarMenuItem, { icon: "delete", label: "Delete selected media", disabled: readOnly || !atomSelected, onClick: () => runtime.executeOperations(deleteAtom(runtime.editor.document, atomScope(), {}, blockContext())) })] });
+                } }), t.horizontalLine && _jsx(ToolbarMenuItem, { icon: "divider", label: "Horizontal line", disabled: readOnly, widePromote: true, onClick: () => { insertBlockAtom("divider", {}, createNodeId()); runtime.focus(); } }), t.pageBreak && _jsx(ToolbarMenuItem, { icon: "pageBreak", label: "Page break", disabled: readOnly, widePromote: true, onClick: () => { insertBlockAtom("page_break", {}, createNodeId()); runtime.focus(); } }), _jsx(ToolbarMenuItem, { icon: "edit", label: "Edit selected media", disabled: readOnly || !mediaAtomSelected, onClick: () => editSelectedAtom() }), _jsx(ToolbarMenuItem, { icon: "zoomIn", label: "Enlarge selected media", disabled: readOnly || !resizableAtomSelected, onClick: () => editSelectedAtom(20) }), _jsx(ToolbarMenuItem, { icon: "zoomOut", label: "Shrink selected media", disabled: readOnly || !resizableAtomSelected, onClick: () => editSelectedAtom(-20) }), _jsx(ToolbarMenuItem, { icon: "delete", label: "Delete selected media", disabled: readOnly || !atomSelected, onClick: () => runtime.executeOperations(deleteAtom(runtime.editor.document, atomScope(), {}, blockContext())) })] });
     // "Remove row"/"Remove column"/"Remove table" renamed to "Delete ..." -
     // matches the right-click table context menu's existing wording
     // (table/plugin.ts's table.contextMenu.removeRow/removeColumn/removeTable
@@ -1481,7 +1719,7 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                     const rect = event.currentTarget.getBoundingClientRect();
                     setTableBorderPopover({ x: rect.left, y: rect.bottom + 4, scope: scope, initial: currentCellBorderDraft(scope) });
                 } })] });
-    const saveCopyMenuItems = _jsxs(_Fragment, { children: [t.saveAsHtml && _jsx(ToolbarMenuItem, { label: "Save as HTML", onClick: () => runExport("html") }), t.saveAsMarkdown && _jsx(ToolbarMenuItem, { label: "Save as Markdown", onClick: () => runExport("markdown") }), t.saveAsWord && _jsx(ToolbarMenuItem, { label: "Save as Word document", onClick: () => void runDocxExport() }), t.saveAsPdf && _jsx(ToolbarMenuItem, { label: "Save as PDF", onClick: runPdfExport }), t.saveAsSmartRte && _jsx(ToolbarMenuItem, { icon: "json", label: "Save as Smart RTE file", onClick: () => runExport("native") })] });
+    const saveCopyMenuItems = _jsxs(_Fragment, { children: [t.saveAsHtml && _jsx(ToolbarMenuItem, { label: "Save as HTML", onClick: () => runExport("html") }), t.saveAsMarkdown && _jsx(ToolbarMenuItem, { label: "Save as Markdown", onClick: () => runExport("markdown") }), t.saveAsWord && _jsx(ToolbarMenuItem, { label: "Save as Word document", onClick: () => void runDocxExport() }), t.saveAsPdf && _jsx(ToolbarMenuItem, { label: "Print / Save as PDF", onClick: runPdfExport }), t.saveAsSmartRte && _jsx(ToolbarMenuItem, { icon: "json", label: "Save as Smart RTE file", onClick: () => runExport("native") })] });
     const showSaveCopy = t.saveAsHtml || t.saveAsMarkdown || t.saveAsWord || t.saveAsPdf || t.saveAsSmartRte;
     // "Review" splits into two independently-toggleable tools (comments,
     // suggestions) - not an arbitrary split, it maps directly onto the two
@@ -1492,22 +1730,24 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
     const suggestionsMenuItems = _jsxs(_Fragment, { children: [_jsx(ToolbarMenuItem, { icon: "suggest", label: "Suggest deletion", disabled: !canSuggestDelete, onClick: suggestDelete }), _jsx(ToolbarMenuItem, { icon: "suggest", label: "Suggest insertion", disabled: readOnly || !suggestionProvider, onClick: startSuggestInsert }), _jsx(ToolbarMenuItem, { icon: "suggest", label: "Suggest removing this", disabled: readOnly || !suggestionProvider, onClick: suggestBlockRemoval }), _jsx(ToolbarMenuItem, { icon: "suggestions", label: "Suggestions", pressed: suggestionPanelOpen, disabled: !suggestionProvider, onClick: () => setSuggestionPanelOpen((open) => !open) }), _jsx(ToolbarMenuItem, { icon: "showEdits", label: "Show edits", pressed: trackChangesEnabled, title: "Tracks ordinary typing and edits within a single paragraph as suggestions. Merging paragraphs together - typing over a selection that spans multiple paragraphs, or pressing Backspace/Delete at a paragraph boundary - still applies directly and can't be reviewed as a suggestion.", disabled: readOnly || !suggestionProvider, onClick: () => setTrackChangesEnabled((enabled) => !enabled) })] });
     const reviewMenuItems = _jsxs(_Fragment, { children: [showCommentsTool && commentsMenuItems, showCommentsTool && showSuggestionsTool && _jsx("div", { className: "srte-menu-separator" }), showSuggestionsTool && suggestionsMenuItems] });
     const showReviewDropdown = showCommentsTool || showSuggestionsTool;
-    return _jsxs("section", { className: `srte-root srte-editor srte-canonical-authority${className ? ` ${className}` : ""}`, "data-smart-authority": "canonical", children: [_jsxs("div", { className: "srte-toolbar", role: "toolbar", "aria-label": "Formatting toolbar", children: [_jsxs(ToolbarGroup, { children: [t.bold && _jsx(ToolbarButton, { icon: "bold", label: "Bold", pressed: markCoverage("bold"), disabled: readOnly, onClick: () => toggleMark("bold") }), t.italic && _jsx(ToolbarButton, { icon: "italic", label: "Italic", pressed: markCoverage("italic"), disabled: readOnly, onClick: () => toggleMark("italic") }), t.underline && _jsx(ToolbarButton, { icon: "underline", label: "Underline", pressed: markCoverage("underline"), disabled: readOnly, onClick: () => toggleMark("underline") }), t.strikethrough && _jsx(ToolbarButton, { icon: "strikethrough", label: "Strikethrough", pressed: markCoverage("strikethrough"), disabled: readOnly, onClick: () => toggleMark("strikethrough") }), t.superscript && _jsx(ToolbarButton, { icon: "superscript", label: "Superscript", pressed: markCoverage("superscript"), disabled: readOnly, onClick: () => toggleMark("superscript"), widePromote: true }), t.subscript && _jsx(ToolbarButton, { icon: "subscript", label: "Subscript", pressed: markCoverage("subscript"), disabled: readOnly, onClick: () => toggleMark("subscript"), widePromote: true }), t.textColor && _jsx(ToolbarButton, { icon: "textColor", label: "Text colour", disabled: readOnly, widePromote: true, onClick: (event) => {
+    return _jsxs("section", { className: `srte-root srte-editor srte-canonical-authority${className ? ` ${className}` : ""}`, "data-smart-authority": "canonical", children: [_jsxs("div", { className: "srte-toolbar", role: "toolbar", "aria-label": "Formatting toolbar", children: [_jsxs(ToolbarGroup, { children: [t.bold && _jsx(ToolbarButton, { icon: "bold", label: "Bold", pressed: markCoverage("bold"), disabled: readOnly || !markToolAllowed("bold"), onClick: () => toggleMark("bold") }), t.italic && _jsx(ToolbarButton, { icon: "italic", label: "Italic", pressed: markCoverage("italic"), disabled: readOnly || !markToolAllowed("italic"), onClick: () => toggleMark("italic") }), t.underline && _jsx(ToolbarButton, { icon: "underline", label: "Underline", pressed: markCoverage("underline"), disabled: readOnly || !markToolAllowed("underline"), onClick: () => toggleMark("underline") }), t.strikethrough && _jsx(ToolbarButton, { icon: "strikethrough", label: "Strikethrough", pressed: markCoverage("strikethrough"), disabled: readOnly || !markToolAllowed("strikethrough"), onClick: () => toggleMark("strikethrough") }), t.superscript && _jsx(ToolbarButton, { icon: "superscript", label: "Superscript", pressed: markCoverage("superscript"), disabled: readOnly || !markToolAllowed("superscript"), onClick: () => toggleMark("superscript"), widePromote: true }), t.subscript && _jsx(ToolbarButton, { icon: "subscript", label: "Subscript", pressed: markCoverage("subscript"), disabled: readOnly || !markToolAllowed("subscript"), onClick: () => toggleMark("subscript"), widePromote: true }), t.textColor && _jsx(ToolbarButton, { icon: "textColor", label: "Text colour", disabled: readOnly || !markToolAllowed("textColor"), widePromote: true, onClick: (event) => {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     setColorPopover({ x: rect.left, y: rect.bottom + 4, target: { kind: "mark", markId: "textColor" }, initialValue: currentMarkColor("textColor") });
-                                } }), t.backgroundColor && _jsx(ToolbarButton, { icon: "backgroundColor", label: "Background colour", disabled: readOnly, widePromote: true, onClick: (event) => {
+                                } }), t.backgroundColor && _jsx(ToolbarButton, { icon: "backgroundColor", label: "Background colour", disabled: readOnly || !markToolAllowed("backgroundColor"), widePromote: true, onClick: (event) => {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     setColorPopover({ x: rect.left, y: rect.bottom + 4, target: { kind: "mark", markId: "backgroundColor" }, initialValue: currentMarkColor("backgroundColor") });
-                                } }), t.fontSize && _jsx(ToolbarButton, { icon: "fontSize", label: "Font size", disabled: readOnly, onClick: () => applyAttributedMark("fontSize"), widePromote: true }), t.fontFamily && _jsx(ToolbarButton, { icon: "fontFamily", label: "Font family", disabled: readOnly, onClick: () => applyAttributedMark("fontFamily"), widePromote: true }), showMoreTextStyles && _jsx(ToolbarDropdown, { icon: "textColor", label: "More text styles", priority: 2, children: textStylesMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.blockType && _jsxs("select", { "aria-label": "Block type", title: "Block type", value: currentBlockType, disabled: readOnly, onChange: (event) => transactBlock(setBlockTypeCommand(runtime.editor.document, blockScope(), {
+                                } }), t.fontSize && _jsx(ToolbarButton, { icon: "fontSize", label: "Font size", disabled: readOnly || !markToolAllowed("fontSize"), onClick: () => applyAttributedMark("fontSize"), widePromote: true }), t.fontFamily && _jsx(ToolbarButton, { icon: "fontFamily", label: "Font family", disabled: readOnly || !markToolAllowed("fontFamily"), onClick: () => applyAttributedMark("fontFamily"), widePromote: true }), showMoreTextStyles && _jsx(ToolbarDropdown, { icon: "textColor", label: "More text styles", priority: 2, children: textStylesMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.blockType && _jsxs("select", { className: "srte-block-type-select", "aria-label": "Block type", title: "Block type", value: currentBlockType, disabled: readOnly, onChange: (event) => transactBlock(setBlockTypeCommand(runtime.editor.document, blockScope(), {
                                     type: event.target.value === "paragraph" ? "paragraph" : event.target.value === "code_block" ? "code_block" : "heading",
                                     attrs: event.target.value.startsWith("heading-") ? { level: Number(event.target.value.slice(8)) } : {},
-                                }, blockContext())), children: [_jsx("option", { value: "paragraph", children: "Paragraph" }), Array.from({ length: 6 }, (_, index) => _jsxs("option", { value: `heading-${index + 1}`, children: ["Heading ", index + 1] }, index + 1)), _jsx("option", { value: "code_block", children: "Code block" })] }), t.alignLeft && _jsx(ToolbarButton, { icon: "alignLeft", label: "Align left", ariaLabel: "Align left", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "left" } }, blockContext())) }), t.alignCenter && _jsx(ToolbarButton, { icon: "alignCenter", label: "Align center", ariaLabel: "Align center", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "center" } }, blockContext())) }), t.alignRight && _jsx(ToolbarButton, { icon: "alignRight", label: "Align right", ariaLabel: "Align right", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "right" } }, blockContext())) }), t.alignJustify && _jsx(ToolbarButton, { icon: "alignJustify", label: "Justify", ariaLabel: "Align justify", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "justify" } }, blockContext())) }), t.quote && _jsx(ToolbarButton, { icon: "quote", label: "Quote", ariaLabel: "Blockquote", disabled: readOnly, onClick: toggleBlockquote }), _jsx(ToolbarDropdown, { icon: "moveUp", label: "More paragraph tools", priority: 2, children: paragraphToolsMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.bulletedList && _jsx(ToolbarButton, { icon: "bulletedList", label: "Bulleted list", ariaLabel: "Bulleted list", pressed: listStyleActive("disc"), disabled: readOnly, onClick: () => toggleList("disc") }), t.numberedList && _jsx(ToolbarButton, { icon: "numberedList", label: "Numbered list", ariaLabel: "Numbered list", pressed: listStyleActive("decimal"), disabled: readOnly, onClick: () => toggleList("decimal") }), t.checklist && _jsx(ToolbarButton, { icon: "checklist", label: "Checklist", ariaLabel: "Checklist", pressed: listStyleActive("disc", true), disabled: readOnly, onClick: () => toggleList("disc", true) }), _jsxs(ToolbarDropdown, { icon: "restart", label: "More list tools", priority: 2, children: [listPresetSelect, t.listPreset && _jsx("div", { className: "srte-menu-separator" }), listToolsMenuItems] })] }), _jsxs(ToolbarGroup, { children: [t.link && _jsx(ToolbarButton, { icon: "link", label: "Link", ariaLabel: "Insert or edit link", disabled: readOnly, onClick: openLinkPopover }), showImageTool && _jsx(ToolbarButton, { icon: "image", label: "Image", ariaLabel: "Insert image", disabled: readOnly, onClick: () => setMediaKind("image") }), t.removeLink && _jsx(ToolbarButton, { icon: "unlink", label: "Remove link", disabled: readOnly, onClick: removeLink, widePromote: true }), t.insertFormula && _jsx(ToolbarButton, { icon: "formula", label: "Insert formula", disabled: readOnly, widePromote: true, onClick: (event) => {
+                                }, blockContext())), children: [_jsx("option", { value: "paragraph", children: "Paragraph" }), Array.from({ length: 6 }, (_, index) => _jsxs("option", { value: `heading-${index + 1}`, children: ["Heading ", index + 1] }, index + 1)), _jsx("option", { value: "code_block", children: "Code block" })] }), t.alignLeft && _jsx(ToolbarButton, { icon: "alignLeft", label: "Align left", ariaLabel: "Align left", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "left" } }, blockContext())) }), t.alignCenter && _jsx(ToolbarButton, { icon: "alignCenter", label: "Align center", ariaLabel: "Align center", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "center" } }, blockContext())) }), t.alignRight && _jsx(ToolbarButton, { icon: "alignRight", label: "Align right", ariaLabel: "Align right", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "right" } }, blockContext())) }), t.alignJustify && _jsx(ToolbarButton, { icon: "alignJustify", label: "Justify", ariaLabel: "Align justify", iconOnly: true, disabled: readOnly, onClick: () => transactBlock(setBlockAttributes(runtime.editor.document, blockScope(), { attrs: { align: "justify" } }, blockContext())) }), t.lineHeight && _jsx(ToolbarDropdown, { icon: "lineHeight", label: "Line spacing", priority: 2, children: lineHeightMenuItems }), t.quote && _jsx(ToolbarButton, { icon: "quote", label: "Quote", ariaLabel: "Blockquote", pressed: currentBlockquoteActive, disabled: readOnly, onClick: toggleBlockquote }), _jsx(ToolbarDropdown, { icon: "moveUp", label: "More paragraph tools", priority: 2, children: paragraphToolsMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.bulletedList && (t.listPreset ? _jsxs("span", { className: "srte-split-control", children: [_jsx(ToolbarButton, { icon: "bulletedList", label: "Bulleted list", ariaLabel: "Bulleted list", pressed: listStyleActive("disc"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("disc") }), _jsxs("select", { "aria-label": "Bulleted list style", title: "Bulleted list style", disabled: readOnly || (currentListScope.kind === "list-selection" && currentListParts.length !== 1), value: currentBulletPreset, onChange: (event) => { const preset = event.target.value; if (preset)
+                                            applyListPreset(preset); }, children: [_jsx("option", { value: "", children: "Bulleted list style" }), SMART_LIST_PRESETS.filter((preset) => preset.kind === "bullet").map((preset) => _jsx("option", { value: preset.id, children: preset.label }, preset.id))] })] }) : _jsx(ToolbarButton, { icon: "bulletedList", label: "Bulleted list", ariaLabel: "Bulleted list", pressed: listStyleActive("disc"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("disc") })), t.numberedList && (t.listPreset ? _jsxs("span", { className: "srte-split-control", children: [_jsx(ToolbarButton, { icon: "numberedList", label: "Numbered list", ariaLabel: "Numbered list", pressed: listStyleActive("decimal"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("decimal") }), _jsxs("select", { "aria-label": "Numbered list style", title: "Numbered list style", disabled: readOnly || (currentListScope.kind === "list-selection" && currentListParts.length !== 1), value: currentOrderedPreset, onChange: (event) => { const preset = event.target.value; if (preset)
+                                            applyListPreset(preset); }, children: [_jsx("option", { value: "", children: "Numbered list style" }), SMART_LIST_PRESETS.filter((preset) => preset.kind === "ordered").map((preset) => _jsx("option", { value: preset.id, children: preset.label }, preset.id))] })] }) : _jsx(ToolbarButton, { icon: "numberedList", label: "Numbered list", ariaLabel: "Numbered list", pressed: listStyleActive("decimal"), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("decimal") })), t.checklist && _jsx(ToolbarButton, { icon: "checklist", label: "Checklist", ariaLabel: "Checklist", pressed: listStyleActive("disc", true), disabled: readOnly, narrowIconOnly: true, onClick: () => toggleList("disc", true) }), _jsxs(ToolbarDropdown, { icon: "restart", label: "More list tools", priority: 2, children: [listPresetSelect, t.listPreset && _jsx("div", { className: "srte-menu-separator" }), listToolsMenuItems] })] }), _jsxs(ToolbarGroup, { children: [t.link && _jsx(ToolbarButton, { icon: "link", label: "Link", ariaLabel: "Insert or edit link", disabled: readOnly || !markToolAllowed("link"), onClick: openLinkPopover }), showImageTool && _jsx(ToolbarButton, { icon: "image", label: "Image", ariaLabel: "Insert image", disabled: readOnly, onClick: () => setMediaKind("image") }), t.removeLink && _jsx(ToolbarButton, { icon: "unlink", label: "Remove link", disabled: readOnly, onClick: removeLink, widePromote: true }), t.insertFormula && _jsx(ToolbarButton, { icon: "formula", label: "Insert formula", disabled: readOnly, widePromote: true, onClick: (event) => {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     setFormulaLibraryPopover({ x: rect.left, y: rect.bottom + 4 });
                                 } }), t.specialCharacters && _jsx(ToolbarButton, { icon: "specialChar", label: "Special characters", disabled: readOnly, widePromote: true, onClick: (event) => {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     setSpecialCharPopover({ x: rect.left, y: rect.bottom + 4 });
-                                } }), _jsx(ToolbarDropdown, { icon: "video", label: "More to insert", priority: 2, children: insertMoreMenuItems })] }), showInsertTable && _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: "table", label: "Insert table", ariaLabel: "Insert table", disabled: readOnly, onClick: (event) => {
+                                } }), t.horizontalLine && _jsx(ToolbarButton, { icon: "divider", label: "Horizontal line", disabled: readOnly, widePromote: true, onClick: () => { insertBlockAtom("divider", {}, createNodeId()); runtime.focus(); } }), t.pageBreak && _jsx(ToolbarButton, { icon: "pageBreak", label: "Page break", disabled: readOnly, widePromote: true, onClick: () => { insertBlockAtom("page_break", {}, createNodeId()); runtime.focus(); } }), _jsx(ToolbarDropdown, { icon: "video", label: "More to insert", priority: 2, children: insertMoreMenuItems })] }), showInsertTable && _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { icon: "table", label: "Insert table", ariaLabel: "Insert table", disabled: readOnly, onClick: (event) => {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     setTableSizePopover({ x: rect.left, y: rect.bottom + 4 });
                                 } }), _jsx(ToolbarDropdown, { icon: "mergeCells", label: "Table tools", priority: 2, children: tableToolsMenuItems })] }), _jsx("input", { ref: importRef, type: "file", accept: ".html,.htm,.md,.markdown,.docx,.pdf,text/html,text/markdown,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf", hidden: true, onChange: (event) => {
@@ -1515,20 +1755,22 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                             if (file)
                                 void runImport(file);
                             event.currentTarget.value = "";
-                        } }), _jsxs(ToolbarGroup, { children: [t.import && _jsx(ToolbarButton, { icon: "import", label: "Import", ariaLabel: "Import document", disabled: readOnly, onClick: () => importRef.current?.click() }), showSaveCopy && _jsx(ToolbarDropdown, { icon: "saveCopy", label: "Save a copy", priority: 2, children: saveCopyMenuItems }), showVersionHistoryTool && _jsx(ToolbarButton, { icon: "history", label: "Version history", ariaLabel: "Version history", disabled: readOnly, onClick: () => setVersionHistoryOpen(true) }), showReviewDropdown && _jsx(ToolbarDropdown, { icon: "comments", label: "Review", priority: 2, children: reviewMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.undo && _jsx(ToolbarButton, { icon: "undo", label: "Undo", ariaLabel: "Undo", disabled: readOnly, onClick: () => { runtime.editor.undo(); runtime.focus(); } }), t.redo && _jsx(ToolbarButton, { icon: "redo", label: "Redo", ariaLabel: "Redo", disabled: readOnly, onClick: () => { runtime.editor.redo(); runtime.focus(); } })] }), _jsxs(MobileMoreMenu, { children: [textStylesMenuItems, _jsx("div", { className: "srte-menu-separator" }), paragraphToolsMenuItems, _jsx("div", { className: "srte-menu-separator" }), listPresetSelect, listToolsMenuItems, _jsx("div", { className: "srte-menu-separator" }), insertMoreMenuItems, showInsertTable && _jsxs(_Fragment, { children: [_jsx("div", { className: "srte-menu-separator" }), tableToolsMenuItems] }), showSaveCopy && _jsxs(_Fragment, { children: [_jsx("div", { className: "srte-menu-separator" }), saveCopyMenuItems] }), showReviewDropdown && _jsxs(_Fragment, { children: [_jsx("div", { className: "srte-menu-separator" }), reviewMenuItems] })] })] }), mediaKind === "image" && mediaManager && mediaProvider && _jsx(MediaManager, { open: true, onClose: () => setMediaKind(null), adapter: mediaManagerAdapter, onSelect: selectFromMediaManager }), mediaKind && mediaProvider && !(mediaKind === "image" && mediaManager) && _jsx(MediaPicker, { kind: mediaKind, onPick: (file) => void insertMediaFile(mediaKind, file), onCancel: () => setMediaKind(null) }), showVersionHistoryTool && _jsx(VersionHistoryPanel, { open: versionHistoryOpen, onClose: () => setVersionHistoryOpen(false), runtime: runtime, versionProvider: versionProvider }), showCommentsTool && rootRef.current && runtime.surface.renderer?.mapping && _jsx(CommentMarkers, { positions: runtime.editor.positions, mapping: runtime.surface.renderer.mapping, containerElement: rootRef.current, threads: threads, activeThreadId: activeThreadId, onSelectThread: selectThread }), showCommentsTool && _jsx(CommentThreadPanel, { open: commentPanelOpen, onClose: () => { setCommentPanelOpen(false); setPendingCommentRange(null); }, threads: threads, activeThreadId: activeThreadId, onSelectThread: selectThread, pendingRange: pendingCommentRange, onCreateThread: createThread, onReply: replyToThread, onResolve: setThreadResolved, onDelete: deleteThread, busyThreadId: busyThreadId }), showSuggestionsTool && rootRef.current && runtime.surface.renderer?.mapping && _jsx(StructuralSuggestionMarkers, { positions: runtime.editor.positions, mapping: runtime.surface.renderer.mapping, containerElement: rootRef.current, suggestions: structuralSuggestions, activeSuggestionId: activeSuggestionId, onSelectSuggestion: selectSuggestion }), showSuggestionsTool && _jsx(SuggestionPanel, { open: suggestionPanelOpen, onClose: () => { setSuggestionPanelOpen(false); setPendingSuggestInsertAt(null); }, document: runtime.editor.document, structuralSuggestions: structuralSuggestions, activeId: activeSuggestionId, onSelect: selectSuggestion, pendingInsert: Boolean(pendingSuggestInsertAt), onSubmitInsert: submitSuggestInsert, onAcceptInline: acceptInlineSuggestion, onRejectInline: rejectInlineSuggestion, onAcceptStructural: acceptStructural, onRejectStructural: rejectStructural, busyId: busySuggestionId }), linkPopover && _jsx(LinkEditorPopover, { x: linkPopover.x, y: linkPopover.y, initialHref: linkPopover.href, initialOpenInNewTab: linkPopover.openInNewTab, showTextInput: linkPopover.collapsed && !linkPopover.editingExisting, showRemove: linkPopover.editingExisting, autoFocus: !linkPopover.autoTriggered, onApply: applyLink, onRemove: removeLink, onCancel: () => {
+                        } }), _jsxs(ToolbarGroup, { children: [t.import && _jsx(ToolbarButton, { icon: "import", label: "Import", ariaLabel: "Import document", disabled: readOnly, onClick: () => importRef.current?.click() }), showSaveCopy && _jsx(ToolbarDropdown, { icon: "saveCopy", label: "Save a copy", priority: 2, children: saveCopyMenuItems }), showVersionHistoryTool && _jsx(ToolbarButton, { icon: "history", label: "Version history", ariaLabel: "Version history", disabled: readOnly, onClick: () => setVersionHistoryOpen(true) }), showReviewDropdown && _jsx(ToolbarDropdown, { icon: "comments", label: "Review", priority: 2, children: reviewMenuItems })] }), _jsxs(ToolbarGroup, { children: [t.undo && _jsx(ToolbarButton, { icon: "undo", label: "Undo", ariaLabel: "Undo", disabled: readOnly, onClick: () => { runtime.editor.undo(); runtime.focus(); } }), t.redo && _jsx(ToolbarButton, { icon: "redo", label: "Redo", ariaLabel: "Redo", disabled: readOnly, onClick: () => { runtime.editor.redo(); runtime.focus(); } })] }), _jsxs(MobileMoreMenu, { children: [textStylesMenuItems, _jsx("div", { className: "srte-menu-separator" }), paragraphToolsMenuItems, t.lineHeight && _jsx("div", { className: "srte-menu-separator" }), t.lineHeight && lineHeightMenuItems, _jsx("div", { className: "srte-menu-separator" }), listPresetSelect, listToolsMenuItems, _jsx("div", { className: "srte-menu-separator" }), insertMoreMenuItems, showInsertTable && _jsxs(_Fragment, { children: [_jsx("div", { className: "srte-menu-separator" }), tableToolsMenuItems] }), showSaveCopy && _jsxs(_Fragment, { children: [_jsx("div", { className: "srte-menu-separator" }), saveCopyMenuItems] }), showReviewDropdown && _jsxs(_Fragment, { children: [_jsx("div", { className: "srte-menu-separator" }), reviewMenuItems] })] })] }), mediaKind === "image" && mediaManager && mediaProvider && _jsx(MediaManager, { open: true, onClose: () => setMediaKind(null), adapter: mediaManagerAdapter, onSelect: selectFromMediaManager }), mediaKind && mediaProvider && !(mediaKind === "image" && mediaManager) && _jsx(MediaPicker, { kind: mediaKind, onPick: (file) => void insertMediaFile(mediaKind, file), onCancel: () => setMediaKind(null) }), showVersionHistoryTool && _jsx(VersionHistoryPanel, { open: versionHistoryOpen, onClose: () => setVersionHistoryOpen(false), runtime: runtime, versionProvider: versionProvider }), showCommentsTool && rootRef.current && runtime.surface.renderer?.mapping && _jsx(CommentMarkers, { positions: runtime.editor.positions, mapping: runtime.surface.renderer.mapping, containerElement: rootRef.current, threads: threads, activeThreadId: activeThreadId, onSelectThread: selectThread }), showCommentsTool && _jsx(CommentThreadPanel, { open: commentPanelOpen, onClose: () => { setCommentPanelOpen(false); setPendingCommentRange(null); }, threads: threads, activeThreadId: activeThreadId, onSelectThread: selectThread, pendingRange: pendingCommentRange, onCreateThread: createThread, onReply: replyToThread, onResolve: setThreadResolved, onDelete: deleteThread, busyThreadId: busyThreadId }), showSuggestionsTool && rootRef.current && runtime.surface.renderer?.mapping && _jsx(StructuralSuggestionMarkers, { positions: runtime.editor.positions, mapping: runtime.surface.renderer.mapping, containerElement: rootRef.current, suggestions: structuralSuggestions, activeSuggestionId: activeSuggestionId, onSelectSuggestion: selectSuggestion }), showSuggestionsTool && _jsx(SuggestionPanel, { open: suggestionPanelOpen, onClose: () => { setSuggestionPanelOpen(false); setPendingSuggestInsertAt(null); }, document: runtime.editor.document, structuralSuggestions: structuralSuggestions, activeId: activeSuggestionId, onSelect: selectSuggestion, pendingInsert: Boolean(pendingSuggestInsertAt), onSubmitInsert: submitSuggestInsert, onAcceptInline: acceptInlineSuggestion, onRejectInline: rejectInlineSuggestion, onAcceptStructural: acceptStructural, onRejectStructural: rejectStructural, busyId: busySuggestionId }), linkPopover && _jsx(LinkEditorPopover, { x: linkPopover.x, y: linkPopover.y, initialHref: linkPopover.href, initialOpenInNewTab: linkPopover.openInNewTab, showTextInput: linkPopover.collapsed && !linkPopover.editingExisting, showRemove: linkPopover.editingExisting, autoFocus: !linkPopover.autoTriggered, onApply: applyLink, onRemove: removeLink, onCancel: () => {
                     setLinkOverlayDismissedAt(runtime.editor.selection.head);
                     setLinkPopover(null);
                     runtime.focus();
-                } }), !readOnly && mediaResizeTarget && mediaResizeTarget.nodeId === selectedAtomId && mediaAtomSelected && selectedAtomElement && _jsx(MediaOverlay, { atomElement: selectedAtomElement, alt: typeof selectedAtomNode?.attrs?.alt === "string" ? selectedAtomNode.attrs.alt : "", width: typeof selectedAtomNode?.attrs?.width === "number" ? selectedAtomNode.attrs.width : undefined, height: typeof selectedAtomNode?.attrs?.height === "number" ? selectedAtomNode.attrs.height : undefined, src: typeof selectedAtomNode?.attrs?.src === "string" ? selectedAtomNode.attrs.src : undefined, showMenu: false, resizable: resizableAtomSelected, onEdit: () => undefined, onResize: () => undefined, onResizeTo: resizeSelectedAtomTo, onDelete: () => undefined, onDismiss: () => setMediaResizeTarget(null) }), !readOnly && mediaContextMenu && mediaAtomSelected && selectedAtomElement && _jsx(MediaOverlay, { atomElement: selectedAtomElement, alt: typeof selectedAtomNode?.attrs?.alt === "string" ? selectedAtomNode.attrs.alt : "", width: typeof selectedAtomNode?.attrs?.width === "number" ? selectedAtomNode.attrs.width : undefined, height: typeof selectedAtomNode?.attrs?.height === "number" ? selectedAtomNode.attrs.height : undefined, src: typeof selectedAtomNode?.attrs?.src === "string" ? selectedAtomNode.attrs.src : undefined, x: mediaContextMenu.x, y: mediaContextMenu.y, resizable: resizableAtomSelected, onEdit: () => { setMediaContextMenu(null); editSelectedAtom(); }, onResize: (by) => { setMediaContextMenu(null); editSelectedAtom(by); }, onResizeTo: resizeSelectedAtomTo, onDelete: () => { setMediaContextMenu(null); deleteSelectedAtom(); }, onDismiss: () => { setMediaContextMenu(null); runtime.focus(); } }), colorPopover && _jsx(ColorPickerPopover, { x: colorPopover.x, y: colorPopover.y, label: colorPopover.target.kind === "mark"
+                } }), !readOnly && mediaResizeTarget && mediaResizeTarget.nodeId === selectedAtomId && mediaAtomSelected && selectedAtomElement && _jsx(MediaOverlay, { atomElement: selectedAtomElement, alt: typeof selectedAtomNode?.attrs?.alt === "string" ? selectedAtomNode.attrs.alt : "", width: typeof selectedAtomNode?.attrs?.width === "number" ? selectedAtomNode.attrs.width : undefined, height: typeof selectedAtomNode?.attrs?.height === "number" ? selectedAtomNode.attrs.height : undefined, src: typeof selectedAtomNode?.attrs?.src === "string" ? selectedAtomNode.attrs.src : undefined, showMenu: false, resizable: resizableAtomSelected, onEdit: () => undefined, onResize: () => undefined, onResizeTo: resizeSelectedAtomTo, onDelete: () => undefined, onDismiss: () => setMediaResizeTarget(null) }), !readOnly && mediaContextMenu && (mediaAtomSelected || actionOnlyAtomSelected) && selectedAtomElement && _jsx(MediaOverlay, { atomElement: selectedAtomElement, alt: typeof selectedAtomNode?.attrs?.alt === "string" ? selectedAtomNode.attrs.alt : "", width: typeof selectedAtomNode?.attrs?.width === "number" ? selectedAtomNode.attrs.width : undefined, height: typeof selectedAtomNode?.attrs?.height === "number" ? selectedAtomNode.attrs.height : undefined, src: typeof selectedAtomNode?.attrs?.src === "string" ? selectedAtomNode.attrs.src : undefined, x: mediaContextMenu.x, y: mediaContextMenu.y, resizable: resizableAtomSelected, editable: mediaAtomSelected, onEdit: () => { setMediaContextMenu(null); editSelectedAtom(); }, onResize: (by) => { setMediaContextMenu(null); editSelectedAtom(by); }, onResizeTo: resizeSelectedAtomTo, onDelete: () => { setMediaContextMenu(null); deleteSelectedAtom(); }, onDismiss: () => { setMediaContextMenu(null); runtime.focus(); } }), colorPopover && _jsx(ColorPickerPopover, { x: colorPopover.x, y: colorPopover.y, label: colorPopover.target.kind === "mark"
                     ? (colorPopover.target.markId === "textColor" ? "Text colour" : "Background colour")
-                    : colorPopover.target.attr === "textColor" ? "Cell text colour" : "Cell background colour", ...(colorPopover.initialValue ? { initialValue: colorPopover.initialValue } : {}), recentColors: recentColors[colorBucketFor(colorPopover.target)], onPreview: previewColor, onApply: applyColor, onCancel: cancelColorPopover }), tableSizePopover && _jsx(TableSizePickerPopover, { x: tableSizePopover.x, y: tableSizePopover.y, onInsert: (rows, columns) => {
+                    : colorPopover.target.kind === "blockquote"
+                        ? (colorPopover.target.attr === "textColor" ? "Blockquote text colour" : "Blockquote background colour")
+                        : colorPopover.target.attr === "textColor" ? "Cell text colour" : "Cell background colour", ...(colorPopover.initialValue ? { initialValue: colorPopover.initialValue } : {}), recentColors: recentColors[colorBucketFor(colorPopover.target)], onPreview: previewColor, onApply: applyColor, onCancel: cancelColorPopover }), tableSizePopover && _jsx(TableSizePickerPopover, { x: tableSizePopover.x, y: tableSizePopover.y, onInsert: (rows, columns) => {
                     setTableSizePopover(null);
                     insertTable(rows, columns);
                     runtime.focus();
                 }, onCancel: () => {
                     setTableSizePopover(null);
                     runtime.focus();
-                } }), tableBorderPopover && _jsx(TableBorderPopover, { x: tableBorderPopover.x, y: tableBorderPopover.y, initial: tableBorderPopover.initial, recentColors: recentColors.border, onPreview: previewCellBorder, onApply: applyCellBorderCommit, onCancel: cancelTableBorderPopover }), mediaDetailsPopover && _jsx(MediaDetailsPopover, { x: mediaDetailsPopover.x, y: mediaDetailsPopover.y, initial: mediaDetailsPopover.initial, onApply: applyMediaDetails, onCancel: () => { setMediaDetailsPopover(null); runtime.focus(); } }), formulaLibraryPopover && _jsx(FormulaLibraryPopover, { x: formulaLibraryPopover.x, y: formulaLibraryPopover.y, onInsert: insertFormulaFromLibrary, onCancel: () => { setFormulaLibraryPopover(null); runtime.focus(); } }), specialCharPopover && _jsx(SpecialCharacterPopover, { x: specialCharPopover.x, y: specialCharPopover.y, recentCharacters: recentSpecialChars, onInsert: insertSpecialCharacter, onCancel: () => { setSpecialCharPopover(null); runtime.focus(); } }), !readOnly && selectedTableElement && _jsx(TableResizeHandles, { tableElement: selectedTableElement, onResizeColumn: resizeTableColumn, onResizeRow: resizeTableRow }), contextMenu && _jsx(ContextMenu, { x: contextMenu.x, y: contextMenu.y, items: resolveContextMenuItems(), onDismiss: () => { setContextMenu(null); runtime.focus(); } }), _jsx("div", { ref: rootRef, className: "srte-editor", "data-placeholder": placeholder, contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", "aria-label": "Smart RTE editing surface", "aria-multiline": "true", onMouseDown: (event) => {
+                } }), tableBorderPopover && _jsx(TableBorderPopover, { x: tableBorderPopover.x, y: tableBorderPopover.y, initial: tableBorderPopover.initial, recentColors: recentColors.border, onPreview: previewCellBorder, onApply: applyCellBorderCommit, onCancel: cancelTableBorderPopover }), blockquoteBorderPopover && _jsx(BlockquoteBorderPopover, { x: blockquoteBorderPopover.x, y: blockquoteBorderPopover.y, initial: blockquoteBorderPopover.initial, recentColors: recentColors.border, onPreview: previewBlockquoteBorder, onApply: applyBlockquoteBorderCommit, onCancel: cancelBlockquoteBorderPopover }), mediaDetailsPopover && _jsx(MediaDetailsPopover, { x: mediaDetailsPopover.x, y: mediaDetailsPopover.y, initial: mediaDetailsPopover.initial, onApply: applyMediaDetails, onCancel: () => { setMediaDetailsPopover(null); runtime.focus(); } }), formulaLibraryPopover && _jsx(FormulaLibraryPopover, { x: formulaLibraryPopover.x, y: formulaLibraryPopover.y, onInsert: insertFormulaFromLibrary, onCancel: () => { setFormulaLibraryPopover(null); runtime.focus(); } }), specialCharPopover && _jsx(SpecialCharacterPopover, { x: specialCharPopover.x, y: specialCharPopover.y, recentCharacters: recentSpecialChars, onInsert: insertSpecialCharacter, onCancel: () => { setSpecialCharPopover(null); runtime.focus(); } }), !readOnly && selectedTableElement && _jsx(TableResizeHandles, { tableElement: selectedTableElement, onResizeColumn: resizeTableColumn, onResizeRow: resizeTableRow }), contextMenu && _jsx(ContextMenu, { x: contextMenu.x, y: contextMenu.y, items: resolveContextMenuItems(), onDismiss: () => { setContextMenu(null); runtime.focus(); } }), _jsx("div", { ref: rootRef, className: "srte-editor", "data-placeholder": placeholder, contentEditable: !readOnly, suppressContentEditableWarning: true, role: "textbox", "aria-label": "Smart RTE editing surface", "aria-multiline": "true", onMouseDown: (event) => {
                     // A Ctrl/Cmd+click on a link is meant to open it (onClick below),
                     // not move the caret into it - but native mousedown's own default
                     // action *is* the caret-repositioning, and mousedown fires (and
@@ -1591,7 +1833,7 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                             runtime.editor.setSelection({ type: "node", anchor: range.from, head: range.to }, { source: "api" });
                             runtime.surface.renderer?.render(runtime.editor.document, runtime.editor.selection);
                         }
-                        if (mapped.node.type !== "divider" && mapped.node.type !== "unknown") {
+                        if (mapped.node.type !== "unknown") {
                             setContextMenu(null);
                             const isImage = mapped.node.type === "image" || mapped.node.type === "block_image";
                             if (isImage) {
@@ -1635,10 +1877,16 @@ export const CanonicalAuthorityEditor = forwardRef(function CanonicalAuthorityEd
                         }
                     }
                     // A right-click that is not handled by the media branch above and
-                    // does not resolve to a table cell opens no generic menu.
+                    // does not resolve to a table cell or a blockquote opens no
+                    // generic menu. Table cell checked first: a right-click inside a
+                    // table nested inside a blockquote should still show cell
+                    // options, matching "closest/innermost container wins."
                     const rightClickTableScope = runtime.editor.resolveScope({ want: "table-grid" });
                     if ("kind" in rightClickTableScope && rightClickTableScope.kind === "table-grid") {
                         setContextMenu({ x: event.clientX, y: event.clientY });
                     }
+                    else if (findBlockquoteAncestor()) {
+                        setContextMenu({ x: event.clientX, y: event.clientY });
+                    }
                 }, style: { minHeight, maxHeight, overflow: "auto" } })] });
 });