@openleaf-editor/core 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/commands.js

@@ -13,14 +13,15 @@
  * button disabled-state free -- the same function answers "can I?" and "do it".
  */
 import { redo, undo } from 'prosemirror-history';
-import { setBlockType, toggleMark, wrapIn } from 'prosemirror-commands';
-import { Slice } from 'prosemirror-model';
+import { toggleMark, wrapIn } from 'prosemirror-commands';
+import { Fragment, } from 'prosemirror-model';
 import { liftListItem, sinkListItem, splitListItem, wrapInList, } from 'prosemirror-schema-list';
+import { NodeSelection, Selection, } from 'prosemirror-state';
 import { MAX_INDENT, safeColor, safeDir, safeFontFamily, safeFontSize, safeLang, safeLineHeight, safeListStyle, } from './css.js';
-import { safeAllowList, safeEmbedSrc } from './embed.js';
-import { parseHtml } from './html.js';
-import { IMAGE_ALIGN_CLASSES, safeClassList, safeId } from './tokens.js';
-import { isSafeUrl } from './url.js';
+import { canInsertNode, markCommand, markIn, nodeCommand, nodeIn } from './command-helpers.js';
+import { CARRIED_ATTR } from './extensions.js';
+import { selectedImage } from './insert-commands.js';
+import { IMAGE_ALIGNMENTS } from './tokens.js';
 /**
  * Types are resolved from the state's schema, never from a captured singleton.
  *
@@ -36,28 +37,183 @@ import { isSafeUrl } from './url.js';
  * renders that as a disabled button. Throwing would take the editor down
  * because a plugin trimmed the schema.
  */
-function markIn(state, name) {
-    return state.schema.marks[name];
+/* ------------------------------------------------------------------ *
+ * Two things every command in this file has to get right
+ * ------------------------------------------------------------------ */
+/**
+ * The selected ranges. For an ordinary selection there is exactly one; for a
+ * table selection there is one per cell.
+ *
+ * `selection.from` and `selection.to` are the bounds of a SINGLE range, not the
+ * union of all of them. That is fine for a text selection and silently wrong for
+ * a `CellSelection` from prosemirror-tables: selecting a column of a 3x2 table
+ * gives `ranges.length === 2` while `from`/`to` describe the interior of one
+ * cell. Every command that read those two numbers therefore coloured, sized or
+ * cleared one cell of a selected column and left the others untouched.
+ *
+ * What made it a bug rather than an unimplemented feature is that `toggleBold`
+ * was never affected: it goes through prosemirror-commands' `toggleMark`, which
+ * iterates ranges. So on one identical selection, Bold worked and colour did
+ * not, which an author reads as the editor failing at random rather than as a
+ * limitation they could work around.
+ *
+ * A named accessor rather than inlining `state.selection.ranges` everywhere,
+ * because the point that needs to survive future edits is "never destructure
+ * from/to for an operation over a selection", and a function is where that
+ * reasoning can live.
+ */
+function selectedRanges(state) {
+    return state.selection.ranges;
 }
-function nodeIn(state, name) {
-    return state.schema.nodes[name];
+/** True when any selected range carries this mark. */
+function anyRangeHasMark(state, type) {
+    return selectedRanges(state).some((range) => state.doc.rangeHasMark(range.$from.pos, range.$to.pos, type));
 }
-/** Build a command that needs one mark type, declining when it is absent. */
-function markCommand(name, build) {
-    return (state, dispatch, view) => {
-        const type = markIn(state, name);
-        if (!type)
-            return false;
-        return build(type)(state, dispatch, view);
-    };
+/** Remove a mark from every selected range, optionally re-adding it. */
+function replaceMarkInRanges(state, tr, type, attrs) {
+    for (const range of selectedRanges(state)) {
+        const { pos: from } = range.$from;
+        const { pos: to } = range.$to;
+        tr.removeMark(from, to, type);
+        if (attrs !== null)
+            tr.addMark(from, to, type.create(attrs));
+    }
 }
-/** Build a command that needs one node type, declining when it is absent. */
-function nodeCommand(name, build) {
-    return (state, dispatch, view) => {
+/**
+ * The attributes to give a node being retyped, so that changing a block's TYPE
+ * does not also change everything else about it.
+ *
+ * Every attribute the destination type also declares comes across unchanged;
+ * anything it does not declare is dropped, because there is nowhere to put it.
+ * The one that matters most is `__openleafCarried`, the residue holding `class`,
+ * every `data-*` and all unmodelled CSS -- and `dir`, which schema.ts makes a
+ * first-class attribute precisely because dropping it silently breaks Arabic,
+ * Hebrew and Persian content.
+ *
+ * Three separate mechanisms used to lose all of it, which is why the fix is a
+ * shared helper rather than four local patches. `setHeading` hand-built its
+ * attribute object and listed four names, so anything added to the schema
+ * afterwards fell back to a default. `setParagraph` and `toggleCodeBlock` passed
+ * no attributes at all. `toggleList` called `setNodeMarkup(pos, type)` and
+ * prosemirror-transform does `type.create(undefined, ...)` there -- it does NOT
+ * fall back to the old node's attributes, which is the part that reads as though
+ * it should be safe and is not.
+ *
+ * It also silently broke `formats.ts`: `setBlockClass` writes the chosen format
+ * class into the carried residue, so applying a format and then changing the
+ * heading level removed the format.
+ */
+function carryOver(from, to, overrides = {}) {
+    const out = {};
+    const declared = new Set(Object.keys(to.spec.attrs ?? {}));
+    for (const name of declared) {
+        if (name in from.attrs)
+            out[name] = from.attrs[name];
+    }
+    /*
+     * An `id` outlives the block type it was written on.
+     *
+     * `heading` declares `id` and `paragraph` does not, so demoting a heading to
+     * a paragraph dropped it -- and an id on a heading is not decoration, it is
+     * the target of every in-page link and every table-of-contents entry pointing
+     * at that section. Changing a block's type is not a request to break the
+     * links to it.
+     *
+     * It moves into the carried residue rather than into an attribute, because
+     * the destination type has no such attribute to move it into. That is exactly
+     * what residue is for, and it is already where a `<p id="x">` parsed from
+     * stored content keeps its id, so both routes arrive at one representation.
+     */
+    if (!declared.has('id') && declared.has(CARRIED_ATTR)) {
+        const id = from.attrs['id'];
+        if (typeof id === 'string' && id !== '') {
+            const carried = { ...(out[CARRIED_ATTR] ?? {}) };
+            if (carried['id'] === undefined)
+                carried['id'] = id;
+            out[CARRIED_ATTR] = carried;
+        }
+    }
+    return { ...out, ...overrides };
+}
+/**
+ * `setBlockType`, with per-node attributes and every selected range.
+ *
+ * prosemirror-commands' own `setBlockType` takes ONE attribute object and
+ * applies it to every block in the selection, which cannot express "keep each
+ * block's own residue". prosemirror-transform's `Transform.setBlockType` does
+ * accept a function, so the applicability check and the loop are reproduced here
+ * against that. The shape is deliberately the same as upstream's so the two stay
+ * comparable.
+ */
+function setBlockTypeCarrying(name, overrides = () => ({})) {
+    return (state, dispatch) => {
         const type = nodeIn(state, name);
         if (!type)
             return false;
-        return build(type)(state, dispatch, view);
+        const attrsFor = (node) => carryOver(node, type, overrides(node));
+        let applicable = false;
+        for (const range of selectedRanges(state)) {
+            if (applicable)
+                break;
+            state.doc.nodesBetween(range.$from.pos, range.$to.pos, (node, pos) => {
+                if (applicable)
+                    return false;
+                // `hasMarkup` is what makes "set paragraph on a plain paragraph" report
+                // false, and it has to be asked with the attributes this call would
+                // actually write -- otherwise a no-op conversion looks like a change.
+                if (!node.isTextblock || node.hasMarkup(type, attrsFor(node)))
+                    return;
+                // A figure is a textblock (`content: 'inline+'`) but its children are an
+                // image and a caption -- retyping it produces an <h2> holding a
+                // <figcaption>. `heading` and `paragraph` also accept inline content, so
+                // `validContent` is not enough; isolating is what marks a textblock that
+                // is not a retypable paragraph.
+                if (node.type.spec.isolating)
+                    return;
+                // `code_block` cannot hold an image or a figcaption, which is where the
+                // TransformError came from when this check was missing.
+                if (!type.validContent(node.content))
+                    return;
+                if (node.type === type) {
+                    applicable = true;
+                    return;
+                }
+                const $pos = state.doc.resolve(pos);
+                const index = $pos.index();
+                applicable = $pos.parent.canReplaceWith(index, index + 1, type);
+                return;
+            });
+        }
+        if (!applicable)
+            return false;
+        if (dispatch) {
+            const tr = state.tr;
+            for (const range of selectedRanges(state)) {
+                // Per node, not the whole range: `setBlockType` on a span that also
+                // covers a figure would still try to retype that figure, which is the
+                // TransformError a select-all used to throw even after the
+                // applicability check started skipping it.
+                state.doc.nodesBetween(range.$from.pos, range.$to.pos, (node, pos) => {
+                    if (!node.isTextblock || node.hasMarkup(type, attrsFor(node)))
+                        return;
+                    if (node.type.spec.isolating)
+                        return;
+                    if (!type.validContent(node.content))
+                        return;
+                    if (node.type !== type) {
+                        const $pos = state.doc.resolve(pos);
+                        const index = $pos.index();
+                        if (!$pos.parent.canReplaceWith(index, index + 1, type))
+                            return;
+                    }
+                    const mappedFrom = tr.mapping.map(pos);
+                    const mappedTo = tr.mapping.map(pos + node.nodeSize);
+                    tr.setBlockType(mappedFrom, mappedTo, type, attrsFor);
+                });
+            }
+            dispatch(tr.scrollIntoView());
+        }
+        return true;
     };
 }
 /* ------------------------------------------------------------------ *
@@ -75,11 +231,11 @@ export function isMarkActive(state, markName) {
     const type = markIn(state, markName);
     if (!type)
         return false;
-    const { from, $from, to, empty } = state.selection;
+    const { $from, empty } = state.selection;
     if (empty) {
         return !!type.isInSet(state.storedMarks ?? $from.marks());
     }
-    return state.doc.rangeHasMark(from, to, type);
+    return anyRangeHasMark(state, type);
 }
 /** Is the selection inside a node of this type (with these attributes)? */
 export function isNodeActive(state, nodeName, attrs) {
@@ -105,16 +261,7 @@ export function isNodeActive(state, nodeName, attrs) {
 }
 /** Can a node of this type be inserted at the current selection? */
 export function canInsert(state, nodeName) {
-    const type = nodeIn(state, nodeName);
-    if (!type)
-        return false;
-    const { $from } = state.selection;
-    for (let depth = $from.depth; depth >= 0; depth -= 1) {
-        const index = $from.index(depth);
-        if ($from.node(depth).canReplaceWith(index, index, type))
-            return true;
-    }
-    return false;
+    return canInsertNode(state, nodeName);
 }
 /** The heading level at the cursor, or null when not in a heading. */
 export function activeHeadingLevel(state) {
@@ -134,20 +281,22 @@ export function activeLink(state) {
     const type = markIn(state, 'link');
     if (!type)
         return null;
-    const { $from, empty, from, to } = state.selection;
+    const { $from, empty } = state.selection;
     if (empty) {
         const found = type.isInSet($from.marks());
         return found ? found.attrs : null;
     }
     let attrs = null;
-    state.doc.nodesBetween(from, to, (child) => {
-        if (attrs)
-            return false;
-        const found = type.isInSet(child.marks);
-        if (found)
-            attrs = found.attrs;
-        return true;
-    });
+    for (const range of selectedRanges(state)) {
+        state.doc.nodesBetween(range.$from.pos, range.$to.pos, (child) => {
+            if (attrs)
+                return false;
+            const found = type.isInSet(child.marks);
+            if (found)
+                attrs = found.attrs;
+            return true;
+        });
+    }
     return attrs;
 }
 /* ------------------------------------------------------------------ *
@@ -163,21 +312,19 @@ export const toggleSuperscript = markCommand('superscript', toggleMark);
 /* ------------------------------------------------------------------ *
  * Block commands
  * ------------------------------------------------------------------ */
-export const setParagraph = nodeCommand('paragraph', (type) => setBlockType(type));
+export const setParagraph = setBlockTypeCarrying('paragraph');
+/**
+ * `level` is the only attribute this command decides; everything else about the
+ * block is the author's and travels with it.
+ *
+ * `id` needs no special case any more, and that is a property of the schema
+ * rather than a shortcut: `paragraph` does not declare an `id`, so `carryOver`
+ * cannot promote one from a paragraph, while a heading's own `id` is declared
+ * and does come across. A paragraph stored as `<p id="x">` keeps its id anyway,
+ * through the carried residue, which is where an unmodelled attribute belongs.
+ */
 export function setHeading(level) {
-    return (state, dispatch, view) => {
-        const type = nodeIn(state, 'heading');
-        if (!type)
-            return false;
-        const parent = state.selection.$from.parent;
-        const attrs = {
-            level,
-            dir: parent.attrs['dir'] ?? null,
-            align: parent.attrs['align'] ?? null,
-            id: parent.type === type ? (parent.attrs['id'] ?? null) : null,
-        };
-        return setBlockType(type, attrs)(state, dispatch, view);
-    };
+    return setBlockTypeCarrying('heading', () => ({ level }));
 }
 /**
  * Toggle a heading level: applying the level you are already in returns the
@@ -194,7 +341,7 @@ export function toggleHeading(level) {
 export const toggleCodeBlock = (state, dispatch, view) => {
     if (isNodeActive(state, 'code_block'))
         return setParagraph(state, dispatch, view);
-    return nodeCommand('code_block', (type) => setBlockType(type))(state, dispatch, view);
+    return setBlockTypeCarrying('code_block')(state, dispatch, view);
 };
 export const wrapInBlockquote = nodeCommand('blockquote', (type) => wrapIn(type));
 export const toggleBlockquote = (state, dispatch, view) => {
@@ -271,14 +418,93 @@ function toggleList(target) {
             const type = nodeIn(state, target);
             if (!type)
                 return false;
-            if (dispatch)
-                dispatch(state.tr.setNodeMarkup(enclosing.pos, type).scrollIntoView());
+            const node = state.doc.nodeAt(enclosing.pos);
+            if (!node)
+                return false;
+            // Attributes must be passed explicitly. `setNodeMarkup(pos, type)` reads
+            // as "change the type and leave the rest alone" and does not do that:
+            // prosemirror-transform calls `type.create(undefined, ...)`, so every
+            // attribute silently reverts to its default. `start` is genuinely dropped
+            // here because a `<ul>` has no such concept; `listStyle` and the residue
+            // holding `class` and every `data-*` are not.
+            if (dispatch) {
+                dispatch(state.tr.setNodeMarkup(enclosing.pos, type, carryOver(node, type)).scrollIntoView());
+            }
             return true;
         }
         return nodeCommand(target, (type) => wrapInList(type))(state, dispatch, view);
     };
 }
-export const splitListItemCommand = nodeCommand('list_item', (t) => splitListItem(t));
+/**
+ * Split a list item, including items that hold extra `block*` after the
+ * paragraph.
+ *
+ * Stock `splitListItem` already splits a non-empty item at depth 2, so
+ * following blocks travel with the new item -- Word and Google Docs. Its empty
+ * handling only runs when the empty textblock is the *last* child. Extra
+ * `block*` after the paragraph skips that branch, and Enter either creates a
+ * sibling `<li>` (never leaves) or the chained base keymap inserts a sibling
+ * `<p>` inside the same item.
+ *
+ * Enter on an empty bullet is how authors leave a list. Extra children are
+ * promoted to siblings of the list and the empty paragraph is dropped so we
+ * do not store `<p></p>` next to a callout. Nested empty last inner items
+ * (no extra children) still go through stock, which outdents one level.
+ */
+function splitListItemAllowingExtraBlocks(itemType) {
+    const split = splitListItem(itemType);
+    return (state, dispatch) => {
+        const { $from, $to } = state.selection;
+        if ($from.depth >= 3 && $from.sameParent($to) && $from.node(-1).type === itemType) {
+            if ($from.parent.content.size === 0 && $from.node(-1).childCount > $from.indexAfter(-1)) {
+                return leaveListPromotingExtra(state, dispatch);
+            }
+        }
+        return split(state, dispatch);
+    };
+}
+function leaveListPromotingExtra(state, dispatch) {
+    const { $from } = state.selection;
+    const item = $from.node(-1);
+    const emptyIndex = $from.index(-1);
+    const kept = [];
+    for (let i = 0; i < item.childCount; i++) {
+        if (i !== emptyIndex)
+            kept.push(item.child(i));
+    }
+    const list = $from.node(-2);
+    const itemIndex = $from.index(-2);
+    const before = [];
+    const after = [];
+    for (let i = 0; i < list.childCount; i++) {
+        if (i < itemIndex)
+            before.push(list.child(i));
+        else if (i > itemIndex)
+            after.push(list.child(i));
+    }
+    const beforeList = before.length > 0 ? list.copy(Fragment.from(before)) : null;
+    const afterList = after.length > 0 ? list.copy(Fragment.from(after)) : null;
+    const replacement = [];
+    if (beforeList)
+        replacement.push(beforeList);
+    replacement.push(...kept);
+    if (afterList)
+        replacement.push(afterList);
+    const parent = $from.node(-3);
+    const listIndex = $from.index(-3);
+    const replaceFrag = Fragment.from(replacement);
+    if (!parent.canReplace(listIndex, listIndex + 1, replaceFrag))
+        return false;
+    if (dispatch) {
+        const listPos = $from.before(-2);
+        const tr = state.tr.replaceWith(listPos, listPos + list.nodeSize, replaceFrag);
+        const beforeSize = beforeList ? beforeList.nodeSize : 0;
+        tr.setSelection(Selection.near(tr.doc.resolve(listPos + beforeSize)));
+        dispatch(tr.scrollIntoView());
+    }
+    return true;
+}
+export const splitListItemCommand = nodeCommand('list_item', splitListItemAllowingExtraBlocks);
 export const indentListItem = nodeCommand('list_item', (t) => sinkListItem(t));
 export const outdentListItem = nodeCommand('list_item', (t) => liftListItem(t));
 /**
@@ -353,14 +579,21 @@ export function activeListStyle(state) {
  */
 function blocksWithAttr(state, attr) {
     const found = [];
-    const { from, to } = state.selection;
-    state.doc.nodesBetween(from, to, (node, pos) => {
-        if (!node.isTextblock)
-            return true;
-        if (Object.hasOwn(node.attrs, attr))
-            found.push({ pos, node });
-        return false;
-    });
+    // Deduplicated by position: callers write one `setNodeMarkup` per entry, and
+    // two writes to the same position in one transaction would have the second
+    // one built from a node the first already replaced.
+    const seen = new Set();
+    for (const range of selectedRanges(state)) {
+        state.doc.nodesBetween(range.$from.pos, range.$to.pos, (node, pos) => {
+            if (!node.isTextblock)
+                return true;
+            if (Object.hasOwn(node.attrs, attr) && !seen.has(pos)) {
+                seen.add(pos);
+                found.push({ pos, node });
+            }
+            return false;
+        });
+    }
     return found;
 }
 function uniformBlockAttr(state, attr) {
@@ -371,8 +604,57 @@ function uniformBlockAttr(state, attr) {
     const value = first.node.attrs[attr] ?? null;
     return blocks.every((b) => (b.node.attrs[attr] ?? null) === value) ? value : null;
 }
+/**
+ * True when this alignment is one an image can store.
+ *
+ * `image.attrs.align` is `left` / `right` / `center` (a float or a block
+ * centre). Justify is a text-block value only: writing it onto an image
+ * would serialize as the class `undefined`.
+ */
+function isImageAlign(align) {
+    return align === null || IMAGE_ALIGNMENTS.includes(align);
+}
+/**
+ * The nodes in the selection that can carry an alignment.
+ *
+ * Textblocks that declare `align`, and `image` nodes whose alignment is a
+ * float/centre class rather than `text-align`. A NodeSelection on an image
+ * -- or on the figure wrapping one -- is only that image: walking the parent
+ * paragraph as well would float the picture AND centre the paragraph, which
+ * is not what Align right means when the author has clicked the picture.
+ *
+ * `blocksWithAttr` stops inside a textblock, so it never sees an inline
+ * image. Alignment has to look inside, but only for a non-empty range: a
+ * caret beside an image must not retarget it, the same trap `selectedImage`
+ * refuses.
+ */
 function alignableBlocks(state) {
-    return blocksWithAttr(state, 'align');
+    const selected = selectedImage(state);
+    if (selected) {
+        const node = state.doc.nodeAt(selected.pos);
+        return node && node.type.name === 'image' ? [{ pos: selected.pos, node }] : [];
+    }
+    const found = [];
+    const seen = new Set();
+    for (const range of selectedRanges(state)) {
+        const from = range.$from.pos;
+        const to = range.$to.pos;
+        const coverImages = from !== to;
+        state.doc.nodesBetween(from, to, (node, pos) => {
+            if (coverImages && node.type.name === 'image' && Object.hasOwn(node.attrs, 'align') && !seen.has(pos)) {
+                seen.add(pos);
+                found.push({ pos, node });
+            }
+            if (!node.isTextblock)
+                return true;
+            if (Object.hasOwn(node.attrs, 'align') && !seen.has(pos)) {
+                seen.add(pos);
+                found.push({ pos, node });
+            }
+            return coverImages;
+        });
+    }
+    return found;
 }
 /**
  * The alignment of the selection, or null when it has none or is mixed.
@@ -398,7 +680,11 @@ export function activeTextAlign(state) {
     return blocks.every((b) => (b.node.attrs['align'] ?? null) === value) ? value : null;
 }
 /**
- * Set the alignment of every alignable block in the selection. `null` clears it.
+ * Set the alignment of every alignable node in the selection. `null` clears it.
+ *
+ * Images store `left` / `right` / `center` on `image.attrs.align`; serialization
+ * maps those to the `ol-*` classes. Justify is skipped on images, because it
+ * is not an image alignment.
  *
  * Reports true whenever there is something to align, even if it already carries
  * this value. The alternative -- returning false because the work is already
@@ -407,17 +693,24 @@ export function activeTextAlign(state) {
  */
 export function setTextAlign(align) {
     return (state, dispatch) => {
-        const blocks = alignableBlocks(state);
+        const blocks = alignableBlocks(state).filter(({ node }) => node.type.name !== 'image' || isImageAlign(align));
         if (blocks.length === 0)
             return false;
         if (dispatch) {
             const tr = state.tr;
+            const selected = selectedImage(state);
             for (const { pos, node } of blocks) {
                 // No position mapping needed: an attribute-only change replaces a node
                 // with one of identical size, so earlier edits cannot shift later
                 // positions in this loop.
                 tr.setNodeMarkup(pos, undefined, { ...node.attrs, align });
             }
+            // Keep a clicked image selected. `setNodeMarkup` replaces the node, and
+            // without this the selection collapses beside it -- `activeTextAlign`
+            // would then read the parent paragraph and the toolbar would go dark.
+            if (selected) {
+                tr.setSelection(NodeSelection.create(tr.doc, tr.mapping.map(selected.pos)));
+            }
             dispatch(tr.scrollIntoView());
         }
         return true;
@@ -516,7 +809,7 @@ function colorCommand(name, color) {
         const value = color === null ? null : safeColor(color);
         if (color !== null && value === null)
             return false;
-        const { empty, from, to } = state.selection;
+        const { empty } = state.selection;
         if (empty) {
             const current = state.storedMarks ?? state.selection.$from.marks();
             const stripped = current.filter((mark) => mark.type !== type);
@@ -527,12 +820,11 @@ function colorCommand(name, color) {
             }
             return true;
         }
-        if (value === null && !state.doc.rangeHasMark(from, to, type))
+        if (value === null && !anyRangeHasMark(state, type))
             return false;
         if (dispatch) {
-            const tr = state.tr.removeMark(from, to, type);
-            if (value !== null)
-                tr.addMark(from, to, type.create({ color: value }));
+            const tr = state.tr;
+            replaceMarkInRanges(state, tr, type, value === null ? null : { color: value });
             dispatch(tr.scrollIntoView());
         }
         return true;
@@ -543,24 +835,37 @@ function activeColor(state, name) {
     const type = markIn(state, name);
     if (!type)
         return null;
-    const { empty, $from, from, to } = state.selection;
+    const { empty, $from } = state.selection;
     if (empty) {
         const found = type.isInSet(state.storedMarks ?? $from.marks());
         return found ? found.attrs['color'] : null;
     }
+    // `seen` is load-bearing: `null` means both "not visited yet" and "unmarked
+    // text", so without a separate flag a selection that starts unmarked and then
+    // hits a coloured run would report the colour as uniform.
+    let seen = false;
     let value = null;
     let uniform = true;
-    state.doc.nodesBetween(from, to, (child) => {
-        if (!child.isText)
+    // Over every range, for the same reason the command below writes over every
+    // range: reading one cell of a selected column and reporting it as the state
+    // of all of them puts a colour in the swatch that most of the selection does
+    // not have.
+    for (const range of selectedRanges(state)) {
+        state.doc.nodesBetween(range.$from.pos, range.$to.pos, (child) => {
+            if (!child.isText)
+                return true;
+            const found = type.isInSet(child.marks);
+            const colour = found ? found.attrs['color'] : null;
+            if (!seen) {
+                value = colour;
+                seen = true;
+            }
+            else if (colour !== value) {
+                uniform = false;
+            }
             return true;
-        const found = type.isInSet(child.marks);
-        const colour = found ? found.attrs['color'] : null;
-        if (value === null && uniform)
-            value = colour;
-        else if (colour !== value)
-            uniform = false;
-        return true;
-    });
+        });
+    }
     // Mixed colours report null for the same reason mixed alignment does: a
     // swatch showing one of them invites the author to act on all of them.
     return uniform ? value : null;
@@ -587,7 +892,7 @@ function attrMarkCommand(name, attr, value, validate) {
         const next = value === null ? null : validate(value);
         if (value !== null && next === null)
             return false;
-        const { empty, from, to } = state.selection;
+        const { empty } = state.selection;
         if (empty) {
             const current = state.storedMarks ?? state.selection.$from.marks();
             const stripped = current.filter((mark) => mark.type !== type);
@@ -598,12 +903,11 @@ function attrMarkCommand(name, attr, value, validate) {
             }
             return true;
         }
-        if (next === null && !state.doc.rangeHasMark(from, to, type))
+        if (next === null && !anyRangeHasMark(state, type))
             return false;
         if (dispatch) {
-            const tr = state.tr.removeMark(from, to, type);
-            if (next !== null)
-                tr.addMark(from, to, type.create({ [attr]: next }));
+            const tr = state.tr;
+            replaceMarkInRanges(state, tr, type, next === null ? null : { [attr]: next });
             dispatch(tr.scrollIntoView());
         }
         return true;
@@ -613,24 +917,33 @@ function activeMarkAttr(state, name, attr) {
     const type = markIn(state, name);
     if (!type)
         return null;
-    const { empty, $from, from, to } = state.selection;
+    const { empty, $from } = state.selection;
     if (empty) {
         const found = type.isInSet(state.storedMarks ?? $from.marks());
         return found ? found.attrs[attr] : null;
     }
+    // Same sentinel problem as activeColor: without `seen`, an unmarked run at
+    // the start of the selection is overwritten by the first marked value and
+    // the dropdown claims the whole range has that family or size.
+    let seen = false;
     let value = null;
     let uniform = true;
-    state.doc.nodesBetween(from, to, (child) => {
-        if (!child.isText)
+    for (const range of selectedRanges(state)) {
+        state.doc.nodesBetween(range.$from.pos, range.$to.pos, (child) => {
+            if (!child.isText)
+                return true;
+            const found = type.isInSet(child.marks);
+            const current = found ? found.attrs[attr] : null;
+            if (!seen) {
+                value = current;
+                seen = true;
+            }
+            else if (current !== value) {
+                uniform = false;
+            }
             return true;
-        const found = type.isInSet(child.marks);
-        const current = found ? found.attrs[attr] : null;
-        if (value === null && uniform)
-            value = current;
-        else if (current !== value)
-            uniform = false;
-        return true;
-    });
+        });
+    }
     return uniform ? value : null;
 }
 export function setFontFamily(family) {
@@ -655,12 +968,14 @@ export function activeLanguage(state) {
  * Strip character formatting and block decoration from the selection.
  *
  * Links stay: they are a destination, not a look. Direction stays: it is
- * content. Headings and lists stay: they are structure. Alignment, indent,
- * line height, fonts, colours, and the common character marks go.
+ * content. Language stays: it is the same kind of fact as direction, only
+ * modelled as a mark (`<span lang>`) rather than a node attribute. Headings
+ * and lists stay: they are structure. Alignment, indent, line height, fonts,
+ * colours, and the common character marks go.
  */
 export const clearFormatting = (state, dispatch) => {
-    const keep = new Set(['link']);
-    const { empty, from, to, $from } = state.selection;
+    const keep = new Set(['link', 'language']);
+    const { empty, $from } = state.selection;
     const marks = Object.values(state.schema.marks).filter((type) => !keep.has(type.name));
     if (empty) {
         const current = state.storedMarks ?? $from.marks();
@@ -687,7 +1002,7 @@ export const clearFormatting = (state, dispatch) => {
     }
     let hasMarks = false;
     for (const type of marks) {
-        if (state.doc.rangeHasMark(from, to, type))
+        if (anyRangeHasMark(state, type))
             hasMarks = true;
     }
     const blocks = blocksWithAttr(state, 'align');
@@ -698,8 +1013,11 @@ export const clearFormatting = (state, dispatch) => {
         return false;
     if (dispatch) {
         let tr = state.tr;
-        for (const type of marks)
-            tr = tr.removeMark(from, to, type);
+        for (const type of marks) {
+            for (const range of selectedRanges(state)) {
+                tr = tr.removeMark(range.$from.pos, range.$to.pos, type);
+            }
+        }
         for (const { pos, node } of blocks) {
             tr = tr.setNodeMarkup(pos, undefined, {
                 ...node.attrs,
@@ -712,241 +1030,7 @@ export const clearFormatting = (state, dispatch) => {
     }
     return true;
 };
-/**
- * Apply or update a link across the selection.
- *
- * Removes any existing link first: without that, updating a link that only
- * partially overlaps the selection leaves two adjacent links with different
- * hrefs, which looks fine and is wrong.
- */
-export function setLink(attrs) {
-    return (state, dispatch) => {
-        const type = markIn(state, 'link');
-        if (!type)
-            return false;
-        const { from, to, empty } = state.selection;
-        if (empty)
-            return false;
-        if (dispatch) {
-            const tr = state.tr;
-            tr.removeMark(from, to, type);
-            tr.addMark(from, to, type.create({
-                href: attrs.href,
-                title: attrs.title ?? null,
-                target: attrs.target ?? null,
-                rel: attrs.rel ?? null,
-                id: safeId(attrs.id),
-            }));
-            dispatch(tr.scrollIntoView());
-        }
-        return true;
-    };
-}
-export const unsetLink = (state, dispatch) => {
-    const type = markIn(state, 'link');
-    if (!type)
-        return false;
-    const { from, to, empty } = state.selection;
-    if (empty || !state.doc.rangeHasMark(from, to, type))
-        return false;
-    if (dispatch)
-        dispatch(state.tr.removeMark(from, to, type).scrollIntoView());
-    return true;
-};
-export function insertImage(attrs) {
-    return (state, dispatch) => {
-        const imageType = nodeIn(state, 'image');
-        if (!imageType)
-            return false;
-        const image = imageType.create({
-            src: attrs.src,
-            // An absent alt and alt="" mean different things to a screen reader:
-            // "undescribed" versus "decorative". Never collapse them.
-            alt: attrs.alt ?? null,
-            title: attrs.title ?? null,
-            width: attrs.width ?? null,
-            height: attrs.height ?? null,
-            align: attrs.align ?? null,
-            className: safeClassList(attrs.className ?? null, IMAGE_ALIGN_CLASSES),
-        });
-        if (attrs.caption !== undefined && attrs.caption !== null) {
-            if (!canInsert(state, 'figure'))
-                return false;
-            const figureType = nodeIn(state, 'figure');
-            const captionType = nodeIn(state, 'figcaption');
-            if (!figureType || !captionType)
-                return false;
-            if (dispatch) {
-                const caption = attrs.caption === '' ? captionType.create() : captionType.create(null, state.schema.text(attrs.caption));
-                dispatch(state.tr.replaceSelectionWith(figureType.create(null, [image, caption])).scrollIntoView());
-            }
-            return true;
-        }
-        if (!canInsert(state, 'image'))
-            return false;
-        if (dispatch)
-            dispatch(state.tr.replaceSelectionWith(image).scrollIntoView());
-        return true;
-    };
-}
-export function insertText(text) {
-    return (state, dispatch) => {
-        if (text === '')
-            return false;
-        if (dispatch)
-            dispatch(state.tr.insertText(text).scrollIntoView());
-        return true;
-    };
-}
-export const insertNonBreakingSpace = insertText('\u00a0');
-export const insertPageBreak = (state, dispatch) => {
-    if (!canInsert(state, 'page_break'))
-        return false;
-    if (dispatch) {
-        const type = nodeIn(state, 'page_break');
-        if (!type)
-            return false;
-        dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView());
-    }
-    return true;
-};
-export function insertNamedAnchor(id) {
-    return (state, dispatch) => {
-        const value = safeId(id);
-        if (!value || !canInsert(state, 'named_anchor'))
-            return false;
-        if (dispatch) {
-            const type = nodeIn(state, 'named_anchor');
-            if (!type)
-                return false;
-            dispatch(state.tr.replaceSelectionWith(type.create({ id: value })).scrollIntoView());
-        }
-        return true;
-    };
-}
-export function setHeadingId(id) {
-    return (state, dispatch) => {
-        const type = nodeIn(state, 'heading');
-        if (!type)
-            return false;
-        const { $from } = state.selection;
-        for (let depth = $from.depth; depth >= 0; depth -= 1) {
-            const node = $from.node(depth);
-            if (node.type !== type)
-                continue;
-            if (dispatch) {
-                dispatch(state.tr
-                    .setNodeMarkup($from.before(depth), undefined, { ...node.attrs, id: safeId(id) })
-                    .scrollIntoView());
-            }
-            return true;
-        }
-        return false;
-    };
-}
-export function insertDetails(summaryText = 'Details') {
-    return (state, dispatch) => {
-        if (!canInsert(state, 'details'))
-            return false;
-        const detailsType = nodeIn(state, 'details');
-        const summaryType = nodeIn(state, 'summary');
-        const paragraphType = nodeIn(state, 'paragraph');
-        if (!detailsType || !summaryType || !paragraphType)
-            return false;
-        if (dispatch) {
-            const body = paragraphType.createAndFill();
-            if (!body)
-                return false;
-            const node = detailsType.create(null, [
-                summaryType.create(null, summaryText === '' ? undefined : state.schema.text(summaryText)),
-                body,
-            ]);
-            dispatch(state.tr.replaceSelectionWith(node).scrollIntoView());
-        }
-        return true;
-    };
-}
-export function insertVideo(attrs) {
-    return (state, dispatch) => {
-        if (!isSafeUrl(attrs.src) || !canInsert(state, 'video'))
-            return false;
-        if (dispatch) {
-            const type = nodeIn(state, 'video');
-            if (!type)
-                return false;
-            dispatch(state.tr
-                .replaceSelectionWith(type.create({
-                src: attrs.src,
-                title: attrs.title ?? null,
-                width: attrs.width ?? null,
-                height: attrs.height ?? null,
-                controls: attrs.controls !== false,
-                poster: attrs.poster && isSafeUrl(attrs.poster) ? attrs.poster : null,
-            }))
-                .scrollIntoView());
-        }
-        return true;
-    };
-}
-export function insertAudio(attrs) {
-    return (state, dispatch) => {
-        if (!isSafeUrl(attrs.src) || !canInsert(state, 'audio'))
-            return false;
-        if (dispatch) {
-            const type = nodeIn(state, 'audio');
-            if (!type)
-                return false;
-            dispatch(state.tr
-                .replaceSelectionWith(type.create({
-                src: attrs.src,
-                title: attrs.title ?? null,
-                controls: attrs.controls !== false,
-            }))
-                .scrollIntoView());
-        }
-        return true;
-    };
-}
-export function insertIframe(attrs) {
-    return (state, dispatch) => {
-        const src = safeEmbedSrc(attrs.src);
-        if (!src || !canInsert(state, 'iframe'))
-            return false;
-        if (dispatch) {
-            const type = nodeIn(state, 'iframe');
-            if (!type)
-                return false;
-            dispatch(state.tr
-                .replaceSelectionWith(type.create({
-                src,
-                title: attrs.title ?? null,
-                width: attrs.width ?? null,
-                height: attrs.height ?? null,
-                allow: safeAllowList(attrs.allow),
-                allowfullscreen: attrs.allowfullscreen !== false,
-            }))
-                .scrollIntoView());
-        }
-        return true;
-    };
-}
-/**
- * Parse HTML against the live schema and insert it.
- *
- * Used by the snippet picker. The HTML still goes through the same parse
- * pipeline as stored content, so a snippet cannot smuggle in a `<script>`.
- */
-export function insertHtml(html) {
-    return (state, dispatch) => {
-        const parsed = parseHtml(html, { schema: state.schema });
-        if (parsed.childCount === 0)
-            return false;
-        if (dispatch) {
-            dispatch(state.tr.replaceSelection(new Slice(parsed.content, 0, 0)).scrollIntoView());
-        }
-        return true;
-    };
-}
+export { insertAudio, insertDetails, insertHtml, insertIframe, insertImage, insertNamedAnchor, insertNonBreakingSpace, insertPageBreak, insertText, insertVideo, selectedImage, selectedMedia, setHeadingId, setLink, unsetLink, updateImage, updateMedia, } from './insert-commands.js';
 /* ------------------------------------------------------------------ *
  * History
  * ------------------------------------------------------------------ */