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

package/dist/commands.js

@@ -14,7 +14,13 @@
  */
 import { redo, undo } from 'prosemirror-history';
 import { setBlockType, toggleMark, wrapIn } from 'prosemirror-commands';
+import { Slice } from 'prosemirror-model';
 import { liftListItem, sinkListItem, splitListItem, wrapInList, } from 'prosemirror-schema-list';
+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';
 /**
  * Types are resolved from the state's schema, never from a captured singleton.
  *
@@ -152,12 +158,26 @@ 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 function setHeading(level) {
-    return nodeCommand('heading', (type) => setBlockType(type, { 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);
+    };
 }
 /**
  * Toggle a heading level: applying the level you are already in returns the
@@ -261,6 +281,437 @@ 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
+ * ------------------------------------------------------------------ */
+/**
+ * The text blocks in the selection that can carry an alignment.
+ *
+ * Membership is decided by asking whether the node carries an `align`
+ * attribute, not by naming paragraph and heading. A plugin that adds an
+ * 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 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;
+    });
+    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.
+ *
+ * Null means "no explicit alignment", which is a genuinely different state from
+ * "aligned left" and is reported as such: an unaligned paragraph follows the
+ * document's reading direction, so it renders right-aligned in Arabic or Hebrew.
+ * Reporting it as left would make the left button light up on text that is not
+ * left-aligned, and would make `aria-pressed="true"` a lie about a paragraph
+ * nobody has aligned.
+ *
+ * A selection spanning blocks with different alignments also reports null.
+ * Showing the first block's value as the state of all of them is a lie the
+ * author acts on -- they see "centred", press it to turn it off, and one
+ * paragraph they never looked at moves.
+ */
+export function activeTextAlign(state) {
+    const blocks = alignableBlocks(state);
+    const first = blocks[0];
+    if (!first)
+        return null;
+    const value = first.node.attrs['align'] ?? null;
+    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.
+ *
+ * Reports true whenever there is something to align, even if it already carries
+ * this value. The alternative -- returning false because the work is already
+ * done -- would make the toolbar render the button for the CURRENT alignment as
+ * disabled, since a command's no-dispatch call is what drives enabled state.
+ */
+export function setTextAlign(align) {
+    return (state, dispatch) => {
+        const blocks = alignableBlocks(state);
+        if (blocks.length === 0)
+            return false;
+        if (dispatch) {
+            const tr = state.tr;
+            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 });
+            }
+            dispatch(tr.scrollIntoView());
+        }
+        return true;
+    };
+}
+/**
+ * Toggle an alignment: applying the one already in force clears it.
+ *
+ * The same reasoning as `toggleHeading`. An author who centred a paragraph by
+ * accident reaches for the control they just pressed, and having it do nothing
+ * because "centre" is already the value leaves them hunting for an
+ * un-centre button that does not exist.
+ */
+export function toggleTextAlign(align) {
+    return (state, dispatch, view) => {
+        const next = activeTextAlign(state) === align ? null : 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
+ * ------------------------------------------------------------------ */
+/**
+ * Apply a colour mark, replacing any existing one of the same kind.
+ *
+ * Not `toggleMark`: with attributes, toggling means "the same colour twice
+ * removes it", so choosing red on text that is already red would clear it --
+ * and choosing red on text that is blue would leave two overlapping marks whose
+ * winner is decided by mark order. A colour picker is a set operation, so the
+ * existing mark is removed first and the new one added over the whole range.
+ *
+ * With an empty selection the colour goes onto the stored marks, so it applies
+ * to what the author types next. That is the same behaviour as pressing Bold on
+ * an empty cursor, and leaving it out is the most common complaint about colour
+ * pickers -- you choose a colour, type, and get black text.
+ */
+function colorCommand(name, color) {
+    return (state, dispatch) => {
+        const type = markIn(state, name);
+        if (!type)
+            return false;
+        // A colour the schema would refuse is a bug in the caller, not a formatting
+        // request. Declining is better than writing an attribute that will be
+        // dropped on the next parse, which would look like the editor losing edits.
+        const value = color === null ? null : safeColor(color);
+        if (color !== null && value === null)
+            return false;
+        const { empty, from, to } = state.selection;
+        if (empty) {
+            const current = state.storedMarks ?? state.selection.$from.marks();
+            const stripped = current.filter((mark) => mark.type !== type);
+            if (value === null && stripped.length === current.length)
+                return false;
+            if (dispatch) {
+                dispatch(state.tr.setStoredMarks(value === null ? stripped : [...stripped, type.create({ color: value })]));
+            }
+            return true;
+        }
+        if (value === null && !state.doc.rangeHasMark(from, to, type))
+            return false;
+        if (dispatch) {
+            const tr = state.tr.removeMark(from, to, type);
+            if (value !== null)
+                tr.addMark(from, to, type.create({ color: value }));
+            dispatch(tr.scrollIntoView());
+        }
+        return true;
+    };
+}
+/** Attribute of a colour mark across the selection, or null when absent or mixed. */
+function activeColor(state, name) {
+    const type = markIn(state, name);
+    if (!type)
+        return null;
+    const { empty, $from, from, to } = state.selection;
+    if (empty) {
+        const found = type.isInSet(state.storedMarks ?? $from.marks());
+        return found ? found.attrs['color'] : null;
+    }
+    let value = null;
+    let uniform = true;
+    state.doc.nodesBetween(from, to, (child) => {
+        if (!child.isText)
+            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;
+}
+export function setTextColor(color) {
+    return colorCommand('text_color', color);
+}
+export function setBackgroundColor(color) {
+    return colorCommand('background_color', color);
+}
+export const clearTextColor = colorCommand('text_color', null);
+export const clearBackgroundColor = colorCommand('background_color', null);
+export function activeTextColor(state) {
+    return activeColor(state, 'text_color');
+}
+export function activeBackgroundColor(state) {
+    return activeColor(state, 'background_color');
+}
+function attrMarkCommand(name, attr, value, validate) {
+    return (state, dispatch) => {
+        const type = markIn(state, name);
+        if (!type)
+            return false;
+        const next = value === null ? null : validate(value);
+        if (value !== null && next === null)
+            return false;
+        const { empty, from, to } = 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 && !state.doc.rangeHasMark(from, to, type))
+            return false;
+        if (dispatch) {
+            const tr = state.tr.removeMark(from, to, type);
+            if (next !== null)
+                tr.addMark(from, to, type.create({ [attr]: next }));
+            dispatch(tr.scrollIntoView());
+        }
+        return true;
+    };
+}
+function activeMarkAttr(state, name, attr) {
+    const type = markIn(state, name);
+    if (!type)
+        return null;
+    const { empty, $from, from, to } = state.selection;
+    if (empty) {
+        const found = type.isInSet(state.storedMarks ?? $from.marks());
+        return found ? found.attrs[attr] : null;
+    }
+    let value = null;
+    let uniform = true;
+    state.doc.nodesBetween(from, to, (child) => {
+        if (!child.isText)
+            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) {
+    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. 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 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) {
+            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 (state.doc.rangeHasMark(from, to, 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)
+            tr = tr.removeMark(from, to, 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;
+};
 /**
  * Apply or update a link across the selection.
  *
@@ -279,7 +730,13 @@ export function setLink(attrs) {
         if (dispatch) {
             const tr = state.tr;
             tr.removeMark(from, to, type);
-            tr.addMark(from, to, type.create({ ...attrs }));
+            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;
@@ -298,22 +755,194 @@ export const unsetLink = (state, dispatch) => {
 };
 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 imageType = nodeIn(state, 'image');
-            if (!imageType)
+            const type = nodeIn(state, 'named_anchor');
+            if (!type)
                 return false;
-            const image = imageType.create({
+            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,
-                // 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());
+                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;
     };