@fusion.dev/helix-editor 0.220.0 → 0.221.0

package/dist/find/find.js

@@ -0,0 +1,143 @@
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+const NOTHING_FOUND = { current: -1, matches: [], query: undefined };
+export const editorFindKey = new PluginKey('helix-editor-find');
+const patternOf = (query, global) => {
+    if (query.search === '') {
+        return undefined;
+    }
+    const source = query.regex ? query.search : query.search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const flags = `${global ? 'g' : ''}${query.caseSensitive ? '' : 'i'}u`;
+    try {
+        return new RegExp(query.wholeWord ? `\\b(?:${source})\\b` : source, flags);
+    }
+    catch {
+        return undefined;
+    }
+};
+const BETWEEN = '\u0000';
+export const matchesIn = (doc, query) => {
+    const pattern = patternOf(query, true);
+    if (!pattern) {
+        return [];
+    }
+    const matches = [];
+    doc.descendants((node, pos) => {
+        if (!node.isTextblock) {
+            return true;
+        }
+        let text = '';
+        const at = [];
+        node.forEach((child, offset) => {
+            const start = pos + 1 + offset;
+            if (child.isText) {
+                const words = child.text ?? '';
+                for (let index = 0; index < words.length; index += 1) {
+                    at.push(start + index);
+                }
+                text += words;
+            }
+            else {
+                at.push(start);
+                text += BETWEEN;
+            }
+        });
+        for (const match of text.matchAll(pattern)) {
+            const found = match[0];
+            if (found !== '' && !found.includes(BETWEEN)) {
+                const first = at[match.index] ?? 0;
+                const last = at[match.index + found.length - 1] ?? first;
+                matches.push({ from: first, to: last + 1 });
+            }
+        }
+        return false;
+    });
+    return matches;
+};
+export const editorFind = () => new Plugin({
+    key: editorFindKey,
+    props: {
+        decorations: (state) => {
+            const found = editorFindKey.getState(state);
+            if (!found || found.matches.length === 0) {
+                return DecorationSet.empty;
+            }
+            return DecorationSet.create(state.doc, found.matches.map((match, index) => Decoration.inline(match.from, match.to, {
+                class: index === found.current ? 'helix-find-current' : 'helix-find-match',
+            })));
+        },
+    },
+    state: {
+        apply: (tr, found, _before, state) => {
+            const told = tr.getMeta(editorFindKey);
+            if (told) {
+                return told;
+            }
+            if (!found.query || !tr.docChanged) {
+                return found;
+            }
+            const matches = matchesIn(state.doc, found.query);
+            const was = found.matches[found.current];
+            const anchor = was ? tr.mapping.map(was.from) : 0;
+            const next = matches.findIndex((match) => match.from >= anchor);
+            return {
+                current: next === -1 ? matches.length - 1 : next,
+                matches,
+                query: found.query,
+            };
+        },
+        init: () => NOTHING_FOUND,
+    },
+});
+export const findResultOf = (state) => {
+    const found = editorFindKey.getState(state);
+    return found?.query ? { count: found.matches.length, index: found.current } : undefined;
+};
+export const findIn = (view, query, direction) => {
+    const { state } = view;
+    const matches = matchesIn(state.doc, query);
+    const { from, to } = state.selection;
+    let current = -1;
+    if (matches.length > 0) {
+        current =
+            direction === 'previous'
+                ? matches.findLastIndex((match) => match.from < from)
+                : matches.findIndex((match) => match.from >= (direction === 'next' ? to : from));
+        if (current === -1) {
+            current = direction === 'previous' ? matches.length - 1 : 0;
+        }
+    }
+    const tr = state.tr
+        .setMeta(editorFindKey, { current, matches, query })
+        .setMeta('addToHistory', false);
+    const selected = matches[current];
+    if (selected) {
+        tr.setSelection(TextSelection.create(tr.doc, selected.from, selected.to)).scrollIntoView();
+    }
+    view.dispatch(tr);
+    return { count: matches.length, index: current };
+};
+export const endFind = (view) => {
+    if (editorFindKey.getState(view.state)?.query) {
+        view.dispatch(view.state.tr.setMeta(editorFindKey, NOTHING_FOUND).setMeta('addToHistory', false));
+    }
+};
+export const replaceIn = (view, query, all) => {
+    const one = patternOf(query, false);
+    if (!one || !view.editable) {
+        return findIn(view, query, 'first');
+    }
+    const { state } = view;
+    const matches = matchesIn(state.doc, query);
+    const { from, to } = state.selection;
+    const chosen = all ? matches : matches.filter((match) => match.from === from && match.to === to);
+    if (chosen.length === 0) {
+        return findIn(view, query, 'next');
+    }
+    const tr = state.tr;
+    for (const match of [...chosen].reverse()) {
+        tr.insertText(state.doc.textBetween(match.from, match.to).replace(one, query.replace), match.from, match.to);
+    }
+    view.dispatch(tr);
+    return findIn(view, query, all ? 'first' : 'next');
+};

package/dist/index.d.ts

@@ -1 +1,13 @@
-export { type CodeMirrorOptions, codeMirrorEngine, connectEditor, languageName, languageNames, } from './codemirror/index.js';
+export type { BlockIdsOptions } from './block-ids/block-ids.js';
+export { blockIds, blockIdsKey, findBlock, newBlockId } from './block-ids/block-ids.js';
+export type { ConnectEditorOptions, EditorConnection } from './connect-editor/connect-editor.js';
+export { connectEditor, editorFrame, editorFrameKey } from './connect-editor/connect-editor.js';
+export type { EditorFindDirection, EditorFindQuery, EditorFindResult } from './find/find.js';
+export { editorFind, editorFindKey, endFind, findIn, findResultOf, matchesIn, replaceIn, } from './find/find.js';
+export type { EditorPluginsOptions } from './plugins/plugins.js';
+export { editorPlugins } from './plugins/plugins.js';
+export type { EditorSchemaOptions } from './schema/schema.js';
+export { BLOCK_ID_ATTRIBUTE, editorMarks, editorNodes, editorSchema, safeHref, withBlockId, } from './schema/schema.js';
+export { adoptEditorSheet, EDITOR_CSS } from './sheet/editor-sheet.js';
+export type { EditorFormats, EditorTool } from './tools/tools.js';
+export { EDITOR_TOOLS, formatsOf, markRange, setLink, toolCommands } from './tools/tools.js';

package/dist/index.js

@@ -1 +1,7 @@
-export { codeMirrorEngine, connectEditor, languageName, languageNames, } from './codemirror/index.js';
+export { blockIds, blockIdsKey, findBlock, newBlockId } from './block-ids/block-ids.js';
+export { connectEditor, editorFrame, editorFrameKey } from './connect-editor/connect-editor.js';
+export { editorFind, editorFindKey, endFind, findIn, findResultOf, matchesIn, replaceIn, } from './find/find.js';
+export { editorPlugins } from './plugins/plugins.js';
+export { BLOCK_ID_ATTRIBUTE, editorMarks, editorNodes, editorSchema, safeHref, withBlockId, } from './schema/schema.js';
+export { adoptEditorSheet, EDITOR_CSS } from './sheet/editor-sheet.js';
+export { EDITOR_TOOLS, formatsOf, markRange, setLink, toolCommands } from './tools/tools.js';

package/dist/plugins/plugins.d.ts

@@ -0,0 +1,33 @@
+import type { Schema } from 'prosemirror-model';
+import type { Command, Plugin } from 'prosemirror-state';
+import { type EditorTool } from '../tools/tools.js';
+/** What `editorPlugins` takes. */
+export interface EditorPluginsOptions {
+    /**
+     * The commands to run in place of Helix's, by tool, such as undo and redo
+     * where y-prosemirror keeps the history: its `undoCommand` and
+     * `redoCommand`. The keys run them too.
+     */
+    commands?: Partial<Record<EditorTool, Command>> | undefined;
+    /**
+     * Whether `prosemirror-history` keeps the undo history. `false` where
+     * another plugin keeps it, such as y-prosemirror's `yUndoPlugin`.
+     */
+    history?: boolean | undefined;
+    /**
+     * Whether Markdown typed at the start of a line makes a block, such as
+     * `# ` a heading and `- ` a list. On by default.
+     */
+    markdown?: boolean | undefined;
+}
+/**
+ * The plugins a document Helix's toolbar edits takes: the keys for every
+ * tool, Enter, Tab, and Shift+Tab in a list, Shift+Enter for a line break,
+ * Markdown typed at the start of a line, undo history, the cursors drawn while
+ * something is dragged and where no text can stand, `blockIds`, the find
+ * bar's search, and the plugin `connectEditor` speaks to the frame through.
+ *
+ * **Tab moves in a list only.** Anywhere else it is the browser's, and leaves
+ * the document, so the document is never a place the keyboard cannot leave.
+ */
+export declare const editorPlugins: (schema: Schema, options?: EditorPluginsOptions) => Plugin[];

package/dist/plugins/plugins.js

@@ -0,0 +1,102 @@
+import { baseKeymap, chainCommands, exitCode } from 'prosemirror-commands';
+import { dropCursor } from 'prosemirror-dropcursor';
+import { gapCursor } from 'prosemirror-gapcursor';
+import { history } from 'prosemirror-history';
+import { inputRules, textblockTypeInputRule, undoInputRule, wrappingInputRule, } from 'prosemirror-inputrules';
+import { keymap } from 'prosemirror-keymap';
+import { liftListItem, sinkListItem, splitListItem } from 'prosemirror-schema-list';
+import { blockIds } from '../block-ids/block-ids.js';
+import { editorFrame } from '../connect-editor/connect-editor.js';
+import { editorFind } from '../find/find.js';
+import { toolCommands } from '../tools/tools.js';
+const KEYS = [
+    ['Mod-z', 'undo'],
+    ['Shift-Mod-z', 'redo'],
+    ['Mod-y', 'redo'],
+    ['Mod-b', 'bold'],
+    ['Mod-i', 'italic'],
+    ['Shift-Mod-x', 'strike'],
+    ['Mod-e', 'code'],
+    ['Mod-Alt-0', 'paragraph'],
+    ['Mod-Alt-1', 'heading-1'],
+    ['Mod-Alt-2', 'heading-2'],
+    ['Mod-Alt-3', 'heading-3'],
+    ['Mod-Alt-8', 'code-block'],
+    ['Shift-Mod-8', 'bullet-list'],
+    ['Shift-Mod-7', 'ordered-list'],
+    ['Shift-Mod-9', 'quote'],
+];
+const inList = (state, item) => {
+    const { $from } = state.selection;
+    for (let depth = $from.depth; depth > 0; depth -= 1) {
+        if ($from.node(depth).type === item) {
+            return true;
+        }
+    }
+    return false;
+};
+const markdownRules = (schema) => {
+    const { nodes } = schema;
+    const rules = [];
+    if (nodes.blockquote) {
+        rules.push(wrappingInputRule(/^\s*>\s$/, nodes.blockquote));
+    }
+    if (nodes.ordered_list) {
+        rules.push(wrappingInputRule(/^(\d+)\.\s$/, nodes.ordered_list, (match) => ({ order: Number(match[1]) }), (match, node) => node.childCount + node.attrs.order === Number(match[1])));
+    }
+    if (nodes.bullet_list) {
+        rules.push(wrappingInputRule(/^\s*([-+*])\s$/, nodes.bullet_list));
+    }
+    if (nodes.code_block) {
+        rules.push(textblockTypeInputRule(/^```$/, nodes.code_block));
+    }
+    if (nodes.heading) {
+        rules.push(textblockTypeInputRule(/^(#{1,6})\s$/, nodes.heading, (match) => ({
+            level: match[1]?.length ?? 1,
+        })));
+    }
+    return rules;
+};
+export const editorPlugins = (schema, options = {}) => {
+    const commands = toolCommands(schema, options.commands);
+    const keys = {};
+    for (const [key, tool] of KEYS) {
+        const command = commands[tool];
+        if (command) {
+            keys[key] = command;
+        }
+    }
+    const item = schema.nodes.list_item;
+    if (item) {
+        keys.Enter = splitListItem(item);
+        keys.Tab = (state, dispatch) => {
+            if (!inList(state, item)) {
+                return false;
+            }
+            sinkListItem(item)(state, dispatch);
+            return true;
+        };
+        keys['Shift-Tab'] = liftListItem(item);
+    }
+    const lineBreak = schema.nodes.hard_break;
+    if (lineBreak) {
+        keys['Shift-Enter'] = chainCommands(exitCode, (state, dispatch) => {
+            if (dispatch) {
+                dispatch(state.tr.replaceSelectionWith(lineBreak.create()).scrollIntoView());
+            }
+            return true;
+        });
+    }
+    keys.Backspace = undoInputRule;
+    return [
+        ...(options.markdown === false ? [] : [inputRules({ rules: markdownRules(schema) })]),
+        keymap(keys),
+        keymap(baseKeymap),
+        dropCursor({ class: 'helix-editor-drop-cursor', color: false }),
+        gapCursor(),
+        ...(options.history === false ? [] : [history()]),
+        blockIds(),
+        editorFind(),
+        editorFrame(),
+    ];
+};

package/dist/schema/schema.d.ts

@@ -0,0 +1,53 @@
+import { type MarkSpec, type NodeSpec, Schema } from 'prosemirror-model';
+/** The attribute a block's id is written to in HTML. */
+export declare const BLOCK_ID_ATTRIBUTE = "data-block-id";
+/**
+ * Whether an address may be a link's, and the address to write: a web page,
+ * mail, a phone number, or a path on the page's own site. An address with no
+ * scheme, such as `fusion.dev/helix`, is taken as a web page. Any other
+ * scheme, `javascript:` among them, is refused with an empty string, so a
+ * link pasted from elsewhere cannot run anything when the document is served.
+ */
+export declare const safeHref: (href: string) => string;
+/**
+ * Helix's blocks, under ProseMirror's own names, so a document reads and
+ * writes Markdown through `prosemirror-markdown` as it is.
+ *
+ * **Each block carries an id**, written to `data-block-id`, which comments,
+ * provenance, and an agent's edits address a block by. `blockIds` keeps them
+ * unique.
+ *
+ * **A paragraph or a heading runs in the direction its own words take**,
+ * `dir="auto"`, so an Arabic paragraph in an English document runs right to
+ * left. A code block runs left to right, as code does in every script.
+ */
+export declare const editorNodes: Record<string, NodeSpec>;
+/**
+ * Helix's marks, under ProseMirror's names: a link, emphasis, strong text,
+ * struck-through text, and inline code.
+ */
+export declare const editorMarks: Record<string, MarkSpec>;
+/**
+ * A block spec of your own that keeps an id as Helix's blocks do: the `id`
+ * attribute, read from `data-block-id` and written back to it. A spec that
+ * already declares `id` is returned as it is.
+ */
+export declare const withBlockId: (spec: NodeSpec) => NodeSpec;
+/** What `editorSchema` takes beyond Helix's own blocks and marks. */
+export interface EditorSchemaOptions {
+    /**
+     * Marks of your own, added after Helix's, or one of Helix's replaced by
+     * giving its name.
+     */
+    marks?: Record<string, MarkSpec> | undefined;
+    /**
+     * Nodes of your own, added after Helix's, or one of Helix's replaced by
+     * giving its name. A block among them takes an id as Helix's do.
+     */
+    nodes?: Record<string, NodeSpec> | undefined;
+}
+/**
+ * The schema of a document Helix's toolbar edits: its blocks, each with an
+ * id, and its marks, with any of your own added.
+ */
+export declare const editorSchema: (options?: EditorSchemaOptions) => Schema;

package/dist/schema/schema.js

@@ -0,0 +1,292 @@
+import { Schema, } from 'prosemirror-model';
+export const BLOCK_ID_ATTRIBUTE = 'data-block-id';
+export const safeHref = (href) => {
+    const address = href.trim();
+    if (address === '') {
+        return '';
+    }
+    if (/^(?:https?:|mailto:|tel:)/i.test(address) || /^(?:[/#?]|\.\.?\/)/.test(address)) {
+        return address;
+    }
+    if (/^[a-z][a-z0-9+.-]*:/i.test(address)) {
+        return '';
+    }
+    return `https://${address}`;
+};
+const blockAttributes = (node, more = {}) => typeof node.attrs.id === 'string' && node.attrs.id !== ''
+    ? { [BLOCK_ID_ATTRIBUTE]: node.attrs.id, ...more }
+    : more;
+const idOf = (dom) => ({
+    id: dom.getAttribute(BLOCK_ID_ATTRIBUTE),
+});
+const ID = { id: { default: null, validate: 'string|null' } };
+const NODES = [
+    ['doc', { content: 'block+' }],
+    [
+        'paragraph',
+        {
+            attrs: ID,
+            content: 'inline*',
+            group: 'block',
+            parseDOM: [{ getAttrs: idOf, tag: 'p' }],
+            toDOM: (node) => ['p', blockAttributes(node, { dir: 'auto' }), 0],
+        },
+    ],
+    [
+        'heading',
+        {
+            attrs: { ...ID, level: { default: 1, validate: 'number' } },
+            content: 'inline*',
+            defining: true,
+            group: 'block',
+            parseDOM: [1, 2, 3, 4, 5, 6].map((level) => ({
+                getAttrs: (dom) => ({ ...idOf(dom), level }),
+                tag: `h${level}`,
+            })),
+            toDOM: (node) => [
+                `h${node.attrs.level}`,
+                blockAttributes(node, { dir: 'auto' }),
+                0,
+            ],
+        },
+    ],
+    [
+        'blockquote',
+        {
+            attrs: ID,
+            content: 'block+',
+            defining: true,
+            group: 'block',
+            parseDOM: [{ getAttrs: idOf, tag: 'blockquote' }],
+            toDOM: (node) => ['blockquote', blockAttributes(node), 0],
+        },
+    ],
+    [
+        'code_block',
+        {
+            attrs: { ...ID, language: { default: '', validate: 'string' } },
+            code: true,
+            content: 'text*',
+            defining: true,
+            group: 'block',
+            marks: '',
+            parseDOM: [
+                {
+                    getAttrs: (dom) => ({
+                        ...idOf(dom),
+                        language: dom.getAttribute('data-language') ??
+                            /\blanguage-(\S+)/.exec(dom.querySelector('code')?.className ?? '')?.[1] ??
+                            '',
+                    }),
+                    preserveWhitespace: 'full',
+                    tag: 'pre',
+                },
+            ],
+            toDOM: (node) => [
+                'pre',
+                blockAttributes(node, {
+                    dir: 'ltr',
+                    ...(node.attrs.language ? { 'data-language': node.attrs.language } : {}),
+                }),
+                ['code', 0],
+            ],
+        },
+    ],
+    [
+        'horizontal_rule',
+        {
+            attrs: ID,
+            group: 'block',
+            parseDOM: [{ getAttrs: idOf, tag: 'hr' }],
+            toDOM: (node) => ['hr', blockAttributes(node)],
+        },
+    ],
+    [
+        'bullet_list',
+        {
+            attrs: ID,
+            content: 'list_item+',
+            group: 'block',
+            parseDOM: [{ getAttrs: idOf, tag: 'ul' }],
+            toDOM: (node) => ['ul', blockAttributes(node), 0],
+        },
+    ],
+    [
+        'ordered_list',
+        {
+            attrs: { ...ID, order: { default: 1, validate: 'number' } },
+            content: 'list_item+',
+            group: 'block',
+            parseDOM: [
+                {
+                    getAttrs: (dom) => ({
+                        ...idOf(dom),
+                        order: dom.hasAttribute('start') ? Number(dom.getAttribute('start')) || 1 : 1,
+                    }),
+                    tag: 'ol',
+                },
+            ],
+            toDOM: (node) => [
+                'ol',
+                blockAttributes(node, node.attrs.order === 1 ? {} : { start: String(node.attrs.order) }),
+                0,
+            ],
+        },
+    ],
+    [
+        'list_item',
+        {
+            attrs: ID,
+            content: 'paragraph block*',
+            defining: true,
+            parseDOM: [{ getAttrs: idOf, tag: 'li' }],
+            toDOM: (node) => ['li', blockAttributes(node), 0],
+        },
+    ],
+    ['text', { group: 'inline' }],
+    [
+        'hard_break',
+        {
+            group: 'inline',
+            inline: true,
+            parseDOM: [{ tag: 'br' }],
+            selectable: false,
+            toDOM: () => ['br'],
+        },
+    ],
+];
+export const editorNodes = Object.fromEntries(NODES);
+const MARKS = [
+    [
+        'link',
+        {
+            attrs: {
+                href: { validate: 'string' },
+                title: { default: null, validate: 'string|null' },
+            },
+            inclusive: false,
+            parseDOM: [
+                {
+                    getAttrs: (dom) => {
+                        const href = safeHref(dom.getAttribute('href') ?? '');
+                        return href === '' ? false : { href, title: dom.getAttribute('title') };
+                    },
+                    tag: 'a[href]',
+                },
+            ],
+            toDOM: (mark) => [
+                'a',
+                mark.attrs.title
+                    ? { href: mark.attrs.href, title: mark.attrs.title }
+                    : { href: mark.attrs.href },
+                0,
+            ],
+        },
+    ],
+    [
+        'em',
+        {
+            parseDOM: [
+                { tag: 'i' },
+                { tag: 'em' },
+                { getAttrs: (value) => value === 'italic' && null, style: 'font-style' },
+            ],
+            toDOM: () => ['em', 0],
+        },
+    ],
+    [
+        'strong',
+        {
+            parseDOM: [
+                { tag: 'strong' },
+                { getAttrs: (dom) => dom.style.fontWeight !== 'normal' && null, tag: 'b' },
+                {
+                    getAttrs: (value) => /^(?:bold(?:er)?|[5-9]\d{2,})$/.test(value) && null,
+                    style: 'font-weight',
+                },
+            ],
+            toDOM: () => ['strong', 0],
+        },
+    ],
+    [
+        'strike',
+        {
+            parseDOM: [
+                { tag: 's' },
+                { tag: 'del' },
+                { tag: 'strike' },
+                {
+                    getAttrs: (value) => value.includes('line-through') && null,
+                    style: 'text-decoration',
+                },
+            ],
+            toDOM: () => ['s', 0],
+        },
+    ],
+    [
+        'code',
+        {
+            code: true,
+            parseDOM: [{ tag: 'code' }],
+            toDOM: () => ['code', 0],
+        },
+    ],
+];
+export const editorMarks = Object.fromEntries(MARKS);
+const isBlock = (name, spec, top) => name !== top && name !== 'text' && spec.inline !== true;
+const withId = (output, id) => {
+    if (typeof id !== 'string' || id === '') {
+        return output;
+    }
+    if (Array.isArray(output)) {
+        const [tag, second, ...rest] = output;
+        if (second && typeof second === 'object' && !Array.isArray(second) && !('nodeType' in second)) {
+            return [
+                tag,
+                { ...second, [BLOCK_ID_ATTRIBUTE]: id },
+                ...rest,
+            ];
+        }
+        return (second === undefined
+            ? [tag, { [BLOCK_ID_ATTRIBUTE]: id }]
+            : [tag, { [BLOCK_ID_ATTRIBUTE]: id }, second, ...rest]);
+    }
+    const dom = 'dom' in output
+        ? output.dom
+        : output;
+    if (dom instanceof Element) {
+        dom.setAttribute(BLOCK_ID_ATTRIBUTE, id);
+    }
+    return output;
+};
+export const withBlockId = (spec) => {
+    if (spec.attrs && 'id' in spec.attrs) {
+        return spec;
+    }
+    const toDOM = spec.toDOM;
+    return {
+        ...spec,
+        attrs: { ...spec.attrs, ...ID },
+        ...(spec.parseDOM
+            ? {
+                parseDOM: spec.parseDOM.map((rule) => 'tag' in rule && rule.tag
+                    ? {
+                        ...rule,
+                        getAttrs: (dom) => {
+                            const attrs = rule.getAttrs ? rule.getAttrs(dom) : null;
+                            return attrs === false ? false : { ...(attrs ?? {}), ...idOf(dom) };
+                        },
+                    }
+                    : rule),
+            }
+            : {}),
+        ...(toDOM ? { toDOM: (node) => withId(toDOM(node), node.attrs.id) } : {}),
+    };
+};
+export const editorSchema = (options = {}) => {
+    const nodes = {};
+    for (const [name, spec] of Object.entries({ ...editorNodes, ...options.nodes })) {
+        nodes[name] = isBlock(name, spec, 'doc') ? withBlockId(spec) : spec;
+    }
+    return new Schema({ marks: { ...editorMarks, ...options.marks }, nodes });
+};

package/dist/sheet/editor-sheet.d.ts

@@ -0,0 +1,17 @@
+/**
+ * What ProseMirror needs from a stylesheet to edit correctly, and what it
+ * draws beside the text, in your tokens: the node a reader selected, the
+ * cursor between two blocks where no text can stand, the line where a drop
+ * lands, the words in an empty document, and the find bar's matches.
+ *
+ * **In the page and not in the frame's shadow root**, because the document
+ * is the page's own element, which the frame's sheet reaches only at its
+ * outer edge. Each rule is `:where()`, so any rule of the page's own wins over
+ * it, and the page needs no stylesheet from ProseMirror.
+ */
+export declare const EDITOR_CSS = "\n:where(.ProseMirror) {\n  font-feature-settings: \"liga\" 0;\n  font-variant-ligatures: none;\n  overflow-wrap: break-word;\n  position: relative;\n  white-space: pre-wrap;\n  white-space: break-spaces;\n}\n\n:where(.ProseMirror pre) {\n  white-space: pre-wrap;\n}\n\n:where(.ProseMirror li) {\n  position: relative;\n}\n\n:where(.ProseMirror-hideselection *)::selection {\n  background: transparent;\n}\n\n:where(.ProseMirror-hideselection) {\n  caret-color: transparent;\n}\n\n:where(.ProseMirror [draggable][contenteditable=\"false\"]) {\n  user-select: text;\n}\n\n:where(.ProseMirror-selectednode) {\n  outline: var(--helix-size-focus-ring, 2px) solid var(--editor-selected-color, var(--helix-color-focus-ring, Highlight));\n  outline-offset: var(--helix-size-focus-offset, 2px);\n}\n\n:where(li.ProseMirror-selectednode) {\n  outline: none;\n}\n\n:where(li.ProseMirror-selectednode)::after {\n  border: var(--helix-size-focus-ring, 2px) solid var(--editor-selected-color, var(--helix-color-focus-ring, Highlight));\n  content: \"\";\n  inset-block: calc(var(--helix-size-focus-ring, 2px) * -1);\n  inset-inline: calc(var(--helix-space-lg, 1.5rem) * -1) calc(var(--helix-size-focus-ring, 2px) * -1);\n  pointer-events: none;\n  position: absolute;\n}\n\nimg.ProseMirror-separator {\n  border: none !important;\n  display: inline !important;\n  margin: 0 !important;\n}\n\n:where(.ProseMirror-gapcursor) {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n:where(.ProseMirror-gapcursor)::after {\n  animation: helix-editor-blink 1.1s steps(2, start) infinite;\n  border-block-start: var(--helix-border-thin, 1px) solid currentColor;\n  content: \"\";\n  display: block;\n  inline-size: var(--helix-space-lg, 1.5rem);\n  inset-block-start: -2px;\n  position: absolute;\n}\n\n:where(.ProseMirror-focused .ProseMirror-gapcursor) {\n  display: block;\n}\n\n@keyframes helix-editor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.ProseMirror-gapcursor)::after {\n    animation: none;\n  }\n}\n\n:where(.helix-editor-drop-cursor) {\n  background-color: var(--helix-color-primary, Highlight);\n}\n\n:where(.helix-find-match) {\n  background-color: light-dark(\n    oklch(from var(--helix-color-warning, oklch(0.52 0.11 75)) 0.93 0.07 h),\n    color-mix(in oklab, var(--helix-color-warning, oklch(0.82 0.185 75)) 32%, transparent)\n  );\n}\n\n:where(.helix-find-current) {\n  background-color: oklch(from var(--helix-color-warning, oklch(0.52 0.11 75)) 0.8 0.16 h);\n  color: oklch(from var(--helix-color-warning, oklch(0.52 0.11 75)) 0.25 0.04 h);\n}\n\n:where(.helix-editor-placeholder)::before {\n  block-size: 0;\n  color: var(--editor-placeholder-color, var(--helix-color-foreground-subtle, GrayText));\n  content: attr(data-placeholder);\n  float: inline-start;\n  pointer-events: none;\n}\n";
+/**
+ * Adds the editor's rules to the document or shadow root a view is drawn in,
+ * once. They stay there after the view goes, matching nothing.
+ */
+export declare const adoptEditorSheet: (root: Document | ShadowRoot) => void;