@openleaf-editor/core 0.1.0-beta.1 → 0.1.0-beta.3

package/dist/commands.js

@@ -13,9 +13,12 @@
  * 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 { toggleMark, wrapIn } from 'prosemirror-commands';
+import {} from 'prosemirror-model';
 import { liftListItem, sinkListItem, splitListItem, wrapInList, } from 'prosemirror-schema-list';
-import { safeColor } from './css.js';
+import { MAX_INDENT, safeColor, safeDir, safeFontFamily, safeFontSize, safeLang, safeLineHeight, safeListStyle, } from './css.js';
+import { canInsertNode, markCommand, markIn, nodeCommand, nodeIn } from './command-helpers.js';
+import { CARRIED_ATTR } from './extensions.js';
 /**
  * Types are resolved from the state's schema, never from a captured singleton.
  *
@@ -31,28 +34,183 @@ import { safeColor } from './css.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;
     };
 }
 /* ------------------------------------------------------------------ *
@@ -70,11 +228,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) {
@@ -100,16 +258,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) {
@@ -129,20 +278,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;
 }
 /* ------------------------------------------------------------------ *
@@ -153,12 +304,24 @@ export const toggleItalic = markCommand('em', toggleMark);
 export const toggleUnderline = markCommand('underline', toggleMark);
 export const toggleStrike = markCommand('strike', toggleMark);
 export const toggleInlineCode = markCommand('code', toggleMark);
+export const toggleSubscript = markCommand('subscript', toggleMark);
+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 nodeCommand('heading', (type) => setBlockType(type, { level }));
+    return setBlockTypeCarrying('heading', () => ({ level }));
 }
 /**
  * Toggle a heading level: applying the level you are already in returns the
@@ -175,7 +338,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) => {
@@ -252,8 +415,18 @@ 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);
@@ -262,6 +435,65 @@ function toggleList(target) {
 export const splitListItemCommand = nodeCommand('list_item', (t) => splitListItem(t));
 export const indentListItem = nodeCommand('list_item', (t) => sinkListItem(t));
 export const outdentListItem = nodeCommand('list_item', (t) => liftListItem(t));
+/**
+ * Indent: nest a list item when the selection is in a list, otherwise add a
+ * `padding-inline-start` step on the text blocks. Outdent is the reverse, and
+ * lifting a top-level list item out of its list is still how you leave a list.
+ */
+export const indent = (state, dispatch, view) => {
+    if (enclosingList(state))
+        return indentListItem(state, dispatch, view);
+    return adjustIndent(1)(state, dispatch, view);
+};
+export const outdent = (state, dispatch, view) => {
+    if (enclosingList(state))
+        return outdentListItem(state, dispatch, view);
+    return adjustIndent(-1)(state, dispatch, view);
+};
+function adjustIndent(delta) {
+    return (state, dispatch) => {
+        const blocks = blocksWithAttr(state, 'indent');
+        if (blocks.length === 0)
+            return false;
+        if (dispatch) {
+            const tr = state.tr;
+            for (const { pos, node } of blocks) {
+                const current = node.attrs['indent'] ?? 0;
+                const next = Math.max(0, Math.min(MAX_INDENT, current + delta));
+                tr.setNodeMarkup(pos, undefined, { ...node.attrs, indent: next === 0 ? null : next });
+            }
+            dispatch(tr.scrollIntoView());
+        }
+        return true;
+    };
+}
+export function activeIndent(state) {
+    return uniformBlockAttr(state, 'indent');
+}
+export function setListStyle(style) {
+    return (state, dispatch) => {
+        const enclosing = enclosingList(state);
+        if (!enclosing)
+            return false;
+        const value = style === null ? null : safeListStyle(style);
+        if (style !== null && value === null)
+            return false;
+        if (dispatch) {
+            const node = state.doc.nodeAt(enclosing.pos);
+            if (!node)
+                return false;
+            dispatch(state.tr.setNodeMarkup(enclosing.pos, undefined, { ...node.attrs, listStyle: value }).scrollIntoView());
+        }
+        return true;
+    };
+}
+export function activeListStyle(state) {
+    const enclosing = enclosingList(state);
+    if (!enclosing)
+        return null;
+    const node = state.doc.nodeAt(enclosing.pos);
+    return node?.attrs['listStyle'] ?? null;
+}
 /* ------------------------------------------------------------------ *
  * Alignment
  * ------------------------------------------------------------------ */
@@ -273,23 +505,36 @@ export const outdentListItem = nodeCommand('list_item', (t) => liftListItem(t));
  * alignable block -- a caption, a callout -- gets the toolbar control and the
  * keyboard shortcut for free, and this function does not have to learn its name.
  */
-function alignableBlocks(state) {
+function blocksWithAttr(state, attr) {
     const found = [];
-    const { from, to } = state.selection;
-    state.doc.nodesBetween(from, to, (node, pos) => {
-        if (!node.isTextblock)
-            return true;
-        // Asked of the node's resolved attributes rather than its type's spec:
-        // `spec.attrs` is optional and undeclared in the public typings, whereas
-        // every node carries every attribute its type declares.
-        if (Object.hasOwn(node.attrs, 'align'))
-            found.push({ pos, node });
-        // Never descend into a text block: its inline children are not alignable
-        // and walking them on every keystroke is work with no result.
-        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) {
+    const blocks = blocksWithAttr(state, attr);
+    const first = blocks[0];
+    if (!first)
+        return null;
+    const value = first.node.attrs[attr] ?? null;
+    return blocks.every((b) => (b.node.attrs[attr] ?? null) === value) ? value : null;
+}
+function alignableBlocks(state) {
+    return blocksWithAttr(state, 'align');
+}
 /**
  * The alignment of the selection, or null when it has none or is mixed.
  *
@@ -353,6 +598,57 @@ export function toggleTextAlign(align) {
         return setTextAlign(next)(state, dispatch, view);
     };
 }
+export function setLineHeight(value) {
+    return setBlockStringAttr('lineHeight', value, safeLineHeight);
+}
+export function activeLineHeight(state) {
+    return uniformBlockAttr(state, 'lineHeight');
+}
+export function setDir(dir) {
+    return (state, dispatch) => {
+        const blocks = blocksWithAttr(state, 'dir');
+        if (blocks.length === 0)
+            return false;
+        const value = dir === null ? null : safeDir(dir);
+        if (dir !== null && value === null)
+            return false;
+        if (dispatch) {
+            const tr = state.tr;
+            for (const { pos, node } of blocks) {
+                tr.setNodeMarkup(pos, undefined, { ...node.attrs, dir: value });
+            }
+            dispatch(tr.scrollIntoView());
+        }
+        return true;
+    };
+}
+export function toggleDir(dir) {
+    return (state, dispatch, view) => {
+        const next = activeDir(state) === dir ? null : dir;
+        return setDir(next)(state, dispatch, view);
+    };
+}
+export function activeDir(state) {
+    return uniformBlockAttr(state, 'dir');
+}
+function setBlockStringAttr(attr, value, validate) {
+    return (state, dispatch) => {
+        const blocks = blocksWithAttr(state, attr);
+        if (blocks.length === 0)
+            return false;
+        const next = value === null ? null : validate(value);
+        if (value !== null && next === null)
+            return false;
+        if (dispatch) {
+            const tr = state.tr;
+            for (const { pos, node } of blocks) {
+                tr.setNodeMarkup(pos, undefined, { ...node.attrs, [attr]: next });
+            }
+            dispatch(tr.scrollIntoView());
+        }
+        return true;
+    };
+}
 /* ------------------------------------------------------------------ *
  * Colour
  * ------------------------------------------------------------------ */
@@ -381,7 +677,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);
@@ -392,12 +688,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;
@@ -408,24 +703,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;
@@ -444,63 +752,153 @@ export function activeTextColor(state) {
 export function activeBackgroundColor(state) {
     return activeColor(state, 'background_color');
 }
-/**
- * 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) {
+function attrMarkCommand(name, attr, value, validate) {
     return (state, dispatch) => {
-        const type = markIn(state, 'link');
+        const type = markIn(state, name);
         if (!type)
             return false;
-        const { from, to, empty } = state.selection;
-        if (empty)
+        const next = value === null ? null : validate(value);
+        if (value !== null && next === null)
+            return false;
+        const { empty } = state.selection;
+        if (empty) {
+            const current = state.storedMarks ?? state.selection.$from.marks();
+            const stripped = current.filter((mark) => mark.type !== type);
+            if (next === null && stripped.length === current.length)
+                return false;
+            if (dispatch) {
+                dispatch(state.tr.setStoredMarks(next === null ? stripped : [...stripped, type.create({ [attr]: next })]));
+            }
+            return true;
+        }
+        if (next === null && !anyRangeHasMark(state, type))
             return false;
         if (dispatch) {
             const tr = state.tr;
-            tr.removeMark(from, to, type);
-            tr.addMark(from, to, type.create({ ...attrs }));
+            replaceMarkInRanges(state, tr, type, next === null ? null : { [attr]: next });
             dispatch(tr.scrollIntoView());
         }
         return true;
     };
 }
-export const unsetLink = (state, dispatch) => {
-    const type = markIn(state, 'link');
+function activeMarkAttr(state, name, attr) {
+    const type = markIn(state, name);
     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) => {
-        if (!canInsert(state, 'image'))
+        return null;
+    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;
+    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;
+        });
+    }
+    return uniform ? value : null;
+}
+export function setFontFamily(family) {
+    return attrMarkCommand('font_family', 'family', family, safeFontFamily);
+}
+export function setFontSize(size) {
+    return attrMarkCommand('font_size', 'size', size, safeFontSize);
+}
+export function setLanguage(lang) {
+    return attrMarkCommand('language', 'lang', lang, safeLang);
+}
+export function activeFontFamily(state) {
+    return activeMarkAttr(state, 'font_family', 'family');
+}
+export function activeFontSize(state) {
+    return activeMarkAttr(state, 'font_size', 'size');
+}
+export function activeLanguage(state) {
+    return activeMarkAttr(state, 'language', 'lang');
+}
+/**
+ * Strip character formatting and block decoration from the selection.
+ *
+ * Links stay: they are a destination, not a look. Direction stays: it is
+ * 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', '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();
+        const stripped = current.filter((mark) => keep.has(mark.type.name));
+        const blocks = blocksWithAttr(state, 'align');
+        const canClearBlocks = blocks.some((b) => b.node.attrs['align'] != null ||
+            b.node.attrs['lineHeight'] != null ||
+            b.node.attrs['indent'] != null);
+        if (stripped.length === current.length && !canClearBlocks)
             return false;
         if (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,
-            });
-            dispatch(state.tr.replaceSelectionWith(image).scrollIntoView());
+            let tr = state.tr.setStoredMarks(stripped);
+            for (const { pos, node } of blocks) {
+                tr = tr.setNodeMarkup(pos, undefined, {
+                    ...node.attrs,
+                    align: null,
+                    lineHeight: null,
+                    indent: null,
+                });
+            }
+            dispatch(tr.scrollIntoView());
         }
         return true;
-    };
-}
+    }
+    let hasMarks = false;
+    for (const type of marks) {
+        if (anyRangeHasMark(state, type))
+            hasMarks = true;
+    }
+    const blocks = blocksWithAttr(state, 'align');
+    const canClearBlocks = blocks.some((b) => b.node.attrs['align'] != null ||
+        b.node.attrs['lineHeight'] != null ||
+        b.node.attrs['indent'] != null);
+    if (!hasMarks && !canClearBlocks)
+        return false;
+    if (dispatch) {
+        let tr = state.tr;
+        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,
+                align: null,
+                lineHeight: null,
+                indent: null,
+            });
+        }
+        dispatch(tr.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
  * ------------------------------------------------------------------ */