edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/equation/EquationView.svelte

@@ -1,34 +1,43 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import type { Edytor } from '../../edytor.svelte.js';
-	import { equationLabels, equationViews } from './equation.svelte.js';
+	import { equationEnglish, labelsOf } from '../../labels.js';
+	import { equationViews } from './equation.svelte.js';
 
 	/**
 	 * An equation as drawn: KaTeX's markup, its source while KaTeX loads (or
-	 * with no loader), the source marked invalid when KaTeX cannot read it,
-	 * or the placeholder when it is empty. Reads its view's renderer from the
-	 * editor it renders in (a suggestion's preview included).
+	 * with no loader), the source marked invalid when KaTeX cannot read it
+	 * (the app's `error` snippet, if any), or the placeholder when it is
+	 * empty (the app's `placeholder`, if any). Reads its view's renderer from
+	 * the editor it renders in (a suggestion's preview included).
 	 */
 	let { expression, display }: { expression: string; display: boolean } = $props();
 
 	const edytor = getContext<Edytor | undefined>('edytor');
 	const view = $derived(edytor ? equationViews.get(edytor) : undefined);
-	const labels = $derived(equationLabels.of(edytor));
+	const labels = $derived(labelsOf(edytor, 'equation', equationEnglish));
 	const drawn = $derived(expression ? (view?.renderer.draw(expression, display) ?? null) : null);
 </script>
 
 {#if !expression}
-	<span data-edytor-equation-placeholder
-		><span aria-hidden="true" data-edytor-equation-icon>√x</span>{display
-			? labels.blockPlaceholder
-			: labels.inlinePlaceholder}</span
-	>
+	{@const label = display ? labels.blockPlaceholder : labels.inlinePlaceholder}
+	{#if view?.placeholder}{@render view.placeholder({ display, label })}{:else}<span
+			data-edytor-equation-placeholder
+			><span aria-hidden="true" data-edytor-equation-icon>√x</span>{label}</span
+		>{/if}
 {:else if drawn && 'html' in drawn}
 	<!-- KaTeX's markup, drawn untrusted (`trust: false`). -->
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html drawn.html}
 {:else if drawn}
-	<span data-edytor-equation-error title="{labels.invalid}: {drawn.error}">{expression}</span>
+	{#if view?.error}{@render view.error({
+			display,
+			expression,
+			error: drawn.error,
+			label: labels.invalid
+		})}{:else}<span data-edytor-equation-error title="{labels.invalid}: {drawn.error}"
+			>{expression}</span
+		>{/if}
 {:else}
 	<span data-edytor-equation-source>{expression}</span>
 {/if}

package/dist/plugins/equation/equation.svelte.d.ts

@@ -1,27 +1,70 @@
+import { type Snippet } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
 import type { Edytor } from '../../edytor.svelte.js';
-import { type EquationLabels, type PartialLabels } from '../../labels.js';
 /** The part of KaTeX the plugin uses: `katex.renderToString`. */
 export type KatexLike = {
     renderToString: (tex: string, options?: Record<string, unknown>) => string;
 };
-/** Loads KaTeX when an equation first shows: `() => import('katex')`. */
+/** Loads KaTeX when an equation first shows: `() => import('katex')` from your bundle. */
 export type KatexLoader = () => Promise<KatexLike | {
     default: KatexLike;
 }>;
 export type EquationPluginOptions = {
     /**
-     * Loads KaTeX, lazily, the first time an equation is drawn in a browser:
-     * `() => import('katex')` (KaTeX is an optional peer dependency; import
-     * its stylesheet, `katex/dist/katex.min.css`, in your app). Without it,
-     * an equation shows its TeX source.
+     * Where KaTeX comes from, loaded the first time an equation is drawn in a
+     * browser (a server render shows the TeX source and loads nothing):
+     *
+     * - absent: jsDelivr (`KATEX_CDN`, KaTeX `KATEX_VERSION`): its module and
+     *   its stylesheet, added once to the page's head; your app bundles and
+     *   imports nothing.
+     * - a URL: another copy of KaTeX's `dist` files (`katex.mjs`,
+     *   `katex.min.css` and its `fonts/`), as for jsDelivr.
+     * - a loader, `() => import('katex')`: KaTeX from your bundle (the
+     *   optional peer dependency); import its stylesheet,
+     *   `katex/dist/katex.min.css`, in your app.
+     * - `false`: none; an equation shows its TeX source.
+     *
+     * If KaTeX fails to load, equations keep showing their source.
      */
-    katex?: KatexLoader;
+    katex?: KatexLoader | string | false;
     /** TeX macros every equation reads (`{ '\\RR': '\\mathbb{R}' }`). */
     macros?: Record<string, string>;
-    /** The words the equations and their editor show, over the English ones. */
-    labels?: PartialLabels<'equation'>;
-    /** The slash menu's keywords by command id (`block.equation`, `equation.inline`), which replace its own. */
-    keywords?: Partial<Record<string, string[]>>;
+    /**
+     * The editor's panel and its words (the source's field, KaTeX's error, Done): it
+     * renders under the edited equation while `editor.target` is set
+     * (centered under a block equation; without it, nothing shows). Put
+     * `{@attach editor.field}` on the source's field.
+     */
+    panel?: Snippet<[EquationEditor]>;
+    /**
+     * An empty equation's placeholder (default: `√x` and the view's
+     * `equation.blockPlaceholder` or `inlinePlaceholder`). A click on it
+     * opens the editor, as on any equation.
+     */
+    placeholder?: Snippet<[EquationPlaceholderPayload]>;
+    /**
+     * An equation KaTeX cannot read (default: its source, marked invalid,
+     * KaTeX's message in its title).
+     */
+    error?: Snippet<[EquationErrorPayload]>;
+};
+/** What an equation's `placeholder` snippet receives. */
+export type EquationPlaceholderPayload = {
+    /** A block equation (`true`) or an inline one. */
+    display: boolean;
+    /** The view's placeholder for it (`equation.blockPlaceholder`, `inlinePlaceholder`). */
+    label: string;
+};
+/** What an equation's `error` snippet receives. */
+export type EquationErrorPayload = {
+    /** A block equation (`true`) or an inline one. */
+    display: boolean;
+    /** Its TeX source. */
+    expression: string;
+    /** KaTeX's message. */
+    error: string;
+    /** The view's word for it (`equation.invalid`). */
+    label: string;
 };
 /** The data of a block equation and of an inline one: its TeX source. */
 export type EquationData = {
@@ -68,23 +111,11 @@ export declare class EquationRenderer {
  * the display asked (`display="block"`: a block), else `undefined`.
  */
 export declare const parseEquation: (element: HTMLElement, display: boolean) => EquationData | undefined;
-/** Each view's equation labels: the first equation plugin listed claims them, as its kinds. */
-export declare const equationLabels: {
-    claim: (view: object | undefined, labels: EquationLabels) => void;
-    of: (view: object | undefined) => EquationLabels;
-};
 /** The equation being edited: a block equation, or an inline one (`atom`) in block `block`. */
 export type EquationTarget = {
     block: string;
     atom?: string;
 };
-/** The edited equation's box, layer-relative. */
-export type EquationBox = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
 /**
  * One view's equation editor (Notion's): a click on an equation of an
  * editable view (Enter on a selected one, or a new empty one) opens its
@@ -95,17 +126,21 @@ export type EquationBox = {
  * press or a focus outside close it; an inline equation closed empty is
  * removed. The editor then gives the keys back: a block equation stays
  * selected, the caret goes after an inline one.
+ *
+ * What a `panel` snippet receives: the equation being edited (`target`,
+ * `display` for a block one), its source (`expression`, written by
+ * `set`), KaTeX's error (`error`) and `close()`.
+ * Put `{@attach editor.field}` on the source's field: it takes the focus
+ * as the editor opens, Enter (Shift+Enter: a newline in a block equation)
+ * and Escape close the editor, and focus leaving the panel closes it.
  */
 export declare class EquationEditor {
     #private;
     private edytor;
-    readonly renderer: EquationRenderer;
-    readonly labels: EquationLabels;
     /** The equation being edited (reactive). */
     target: EquationTarget | null;
-    /** Its box, measured in the overlay's frame. */
-    box: EquationBox | null;
-    constructor(edytor: Edytor, renderer: EquationRenderer, labels?: EquationLabels);
+    /** The view is readonly (reactive): the editor closes. */
+    get readonly(): boolean;
     /** A block equation is edited (a field of several lines). */
     get display(): boolean;
     /** The edited equation's TeX source (reactive through its block's cell). */
@@ -124,19 +159,22 @@ export declare class EquationEditor {
      * caret after the inline one.
      */
     close: (keys?: boolean) => void;
-    /** The view turned readonly: the editor closes, the equation as it is. */
-    lock: () => void;
-    /** A press anywhere (capture): one outside the editor and its equation closes it. */
-    pressed: (event: MouseEvent) => void;
-    /** Focus left the field for somewhere outside the editor: it closes. */
-    blurred: (event: FocusEvent) => void;
-    /** The overlay measure: the edited equation's box; gone, the editor closes. */
-    measure: (host: HTMLElement, origin: DOMRect) => () => void;
+    /**
+     * The source's field (`{@attach editor.field}`, a `textarea` or an
+     * `input`): it takes the focus as the editor opens, the caret at the end
+     * of the source. Enter closes the editor (Shift+Enter in a block
+     * equation is a newline), Escape too; the editor's own keys never see
+     * them. Focus leaving the panel for somewhere else closes it.
+     */
+    field: Attachment<HTMLTextAreaElement | HTMLInputElement>;
 }
 /** A view's equations: the first equation plugin listed in it owns them, as its kinds. */
 export type EquationView = {
     renderer: EquationRenderer;
     editor: EquationEditor;
+    /** The app's markup for an empty equation and an unreadable one, if any. */
+    placeholder?: Snippet<[EquationPlaceholderPayload]>;
+    error?: Snippet<[EquationErrorPayload]>;
 };
 /** By view. */
 export declare const equationViews: WeakMap<Edytor, EquationView>;

package/dist/plugins/equation/equation.svelte.js

@@ -1,6 +1,10 @@
+import { untrack } from 'svelte';
+import { blockSelection } from '../../session/selection.js';
 import { InlineBlock } from '../../block/inlineBlock.svelte.js';
 import { takeKeys } from '../../events/onFocus.js';
-import { englishLabels, viewLabels } from '../../labels.js';
+import { Anchored } from '../anchored.svelte.js';
+import { escapeHtml } from '../../clipboard/serializeClipboardFragment.js';
+import { all, listen } from '../../utils/listen.js';
 /** The MathML annotation that carries an equation's TeX source. */
 export const TEX = 'application/x-tex';
 /** An equation's TeX source: its `expression`, a string. */
@@ -8,7 +12,6 @@ export const expressionOf = (data) => {
     const value = data?.expression;
     return typeof value === 'string' ? value : '';
 };
-const escape = (value) => value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 /** The cap of the drawings each renderer keeps. */
 const CACHE = 256;
 /**
@@ -70,7 +73,7 @@ export class EquationRenderer {
                 // TeX KaTeX cannot read: the source as text, below.
             }
         }
-        const source = escape(tex);
+        const source = escapeHtml(tex);
         return (`<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"${display ? ' display="block"' : ''}>` +
             `<semantics><mrow><mtext>${source}</mtext></mrow><annotation encoding="${TEX}">${source}</annotation></semantics></math></span>`);
     };
@@ -117,8 +120,6 @@ export const parseEquation = (element, display) => {
         math.getAttribute('alttext');
     return tex?.trim() ? { expression: tex.trim() } : undefined;
 };
-/** Each view's equation labels: the first equation plugin listed claims them, as its kinds. */
-export const equationLabels = viewLabels('equation');
 /**
  * One view's equation editor (Notion's): a click on an equation of an
  * editable view (Enter on a selected one, or a new empty one) opens its
@@ -129,19 +130,43 @@ export const equationLabels = viewLabels('equation');
  * press or a focus outside close it; an inline equation closed empty is
  * removed. The editor then gives the keys back: a block equation stays
  * selected, the caret goes after an inline one.
+ *
+ * What a `panel` snippet receives: the equation being edited (`target`,
+ * `display` for a block one), its source (`expression`, written by
+ * `set`), KaTeX's error (`error`) and `close()`.
+ * Put `{@attach editor.field}` on the source's field: it takes the focus
+ * as the editor opens, Enter (Shift+Enter: a newline in a block equation)
+ * and Escape close the editor, and focus leaving the panel closes it.
  */
 export class EquationEditor {
     edytor;
     renderer;
-    labels;
     /** The equation being edited (reactive). */
     target = $state.raw(null);
-    /** Its box, measured in the overlay's frame. */
-    box = $state.raw(null);
-    constructor(edytor, renderer, labels = englishLabels.equation) {
+    /**
+     * The editor's panel under the edited equation: its place, and what closes it.
+     * @internal
+     */
+    panel;
+    /** @internal */
+    constructor(edytor, 
+    /** @internal */
+    renderer) {
         this.edytor = edytor;
         this.renderer = renderer;
-        this.labels = labels;
+        this.panel = new Anchored(edytor, 'edytor-equation-editor-host', () => (this.target ? this.#node(this.target) : undefined), () => this.close(false));
+    }
+    /** The view is readonly (reactive): the editor closes. */
+    get readonly() {
+        return this.edytor.readonly;
+    }
+    /**
+     * Where the panel stands: under the edited equation (a block one's
+     * middle, an inline one's start), layer-relative.
+     * @internal
+     */
+    get place() {
+        return this.target && this.panel.place(6, this.display);
     }
     /** A block equation is edited (a field of several lines). */
     get display() {
@@ -177,9 +202,9 @@ export class EquationEditor {
         const target = this.target;
         if (!target || expression === this.expression)
             return;
-        const data = target.atom ? this.#atom(target)?.data : this.#block(target)?.data;
-        if (data)
-            data.expression = expression;
+        const at = target.atom ? { block: target.block, atom: target.atom } : target.block;
+        if (target.atom ? this.#atom(target) : this.#block(target))
+            this.edytor.patchData(at, [{ path: ['expression'], value: expression }]);
     };
     /**
      * Close the editor. An inline equation left empty is removed; then, with
@@ -191,7 +216,7 @@ export class EquationEditor {
         if (!target)
             return;
         this.target = null;
-        this.box = null;
+        this.panel.box = null;
         this.edytor.overlay.invalidate();
         const block = this.#block(target);
         if (!block)
@@ -203,7 +228,7 @@ export class EquationEditor {
                 return;
             const offset = offsetOf(block, atom);
             if (!expressionOf(atom.data) && this.edytor.dispatcher.permits()) {
-                block.removeInlineBlock({ index: atom.index });
+                this.edytor.removeInline(block.id, atom.id);
                 if (keys)
                     selection.setCaret({ block, offset });
             }
@@ -211,54 +236,44 @@ export class EquationEditor {
                 selection.setCaret({ block, offset: offset + 1 });
         }
         else if (keys)
-            selection.selectBlocks(block);
+            selection.select(blockSelection([block.id]));
         if (keys)
             takeKeys(this.edytor);
     };
-    /** The view turned readonly: the editor closes, the equation as it is. */
-    lock = () => this.close(false);
-    /** A press anywhere (capture): one outside the editor and its equation closes it. */
-    pressed = (event) => {
-        const target = this.target;
-        if (!target)
-            return;
-        const at = event.target;
-        if (at?.closest?.('[data-edytor-equation-editor]'))
-            return;
-        if (at instanceof Node && this.#node(target)?.contains(at))
-            return;
-        this.close(false);
-    };
-    /** Focus left the field for somewhere outside the editor: it closes. */
-    blurred = (event) => {
-        const to = event.relatedTarget;
-        const panel = event.currentTarget?.closest('[data-edytor-equation-editor]');
-        // No new focus (the window went to the background): it stays.
-        if (!(to instanceof Node) || panel?.contains(to))
-            return;
-        this.close(false);
-    };
-    /** The overlay measure: the edited equation's box; gone, the editor closes. */
-    measure = (host, origin) => {
-        const target = this.target;
-        const node = target ? this.#node(target) : null;
-        const rect = node?.isConnected ? node.getBoundingClientRect() : null;
-        const box = rect
-            ? {
-                x: rect.left - origin.left,
-                y: rect.top - origin.top,
-                width: rect.width,
-                height: rect.height
-            }
-            : null;
-        return () => {
-            Object.assign(host.style, { position: 'absolute', left: '0px', top: '0px' });
-            if (target && !node)
-                return this.close(false);
-            if (!sameBox(box, this.box))
-                this.box = box;
+    /**
+     * The source's field (`{@attach editor.field}`, a `textarea` or an
+     * `input`): it takes the focus as the editor opens, the caret at the end
+     * of the source. Enter closes the editor (Shift+Enter in a block
+     * equation is a newline), Escape too; the editor's own keys never see
+     * them. Focus leaving the panel for somewhere else closes it.
+     */
+    field = (node) => untrack(() => {
+        const keydown = (event) => {
+            if (event.isComposing)
+                return;
+            const enter = event.key === 'Enter' && !(event.shiftKey && this.display);
+            if (!enter && event.key !== 'Escape')
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
         };
-    };
+        const element = node;
+        const off = listen(element, 'keydown', keydown);
+        const off2 = listen(element, 'focusout', this.panel.blurred);
+        // Each equation the editor opens on: the field takes the focus, the caret at the end.
+        $effect(() => {
+            if (!this.target)
+                return;
+            untrack(() => {
+                if (node.ownerDocument.activeElement === node)
+                    return;
+                node.focus({ preventScroll: true });
+                node.setSelectionRange(node.value.length, node.value.length);
+            });
+        });
+        return all(off, off2);
+    });
     #block = (target) => {
         const block = this.edytor.idToBlock.get(target.block);
         return block?.isInTree ? block : undefined;
@@ -286,10 +301,3 @@ const offsetOf = (block, atom) => {
 };
 /** By view. */
 export const equationViews = new WeakMap();
-const sameBox = (a, b) => a === b ||
-    (a !== null &&
-        b !== null &&
-        a.x === b.x &&
-        a.y === b.y &&
-        a.width === b.width &&
-        a.height === b.height);

package/dist/plugins/equation/importUrl.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A module fetched by URL at run time (KaTeX from a CDN), left to the
+ * browser: no bundler follows it (`@vite-ignore`, `webpackIgnore`). Its own
+ * module, so a test can stand in for the network.
+ */
+export declare const importUrl: (url: string) => Promise<unknown>;

package/dist/plugins/equation/importUrl.js

@@ -0,0 +1,6 @@
+/**
+ * A module fetched by URL at run time (KaTeX from a CDN), left to the
+ * browser: no bundler follows it (`@vite-ignore`, `webpackIgnore`). Its own
+ * module, so a test can stand in for the network.
+ */
+export const importUrl = (url) => import(/* @vite-ignore */ /* webpackIgnore: true */ url);

package/dist/plugins/equation/katex.d.ts

@@ -0,0 +1,8 @@
+/** The KaTeX version the default loader fetches: the one edytor is tested with. */
+export declare const KATEX_VERSION = "0.18.7";
+/**
+ * Where the default loader fetches KaTeX: jsDelivr's copy of the npm
+ * package's `dist`, at `KATEX_VERSION` exactly (`katex.mjs`,
+ * `katex.min.css`, and the fonts the stylesheet names).
+ */
+export declare const KATEX_CDN = "https://cdn.jsdelivr.net/npm/katex@0.18.7/dist/";

package/dist/plugins/equation/katex.js

@@ -0,0 +1,77 @@
+import { importUrl } from './importUrl.js';
+/** The KaTeX version the default loader fetches: the one edytor is tested with. */
+export const KATEX_VERSION = '0.18.7';
+/**
+ * Where the default loader fetches KaTeX: jsDelivr's copy of the npm
+ * package's `dist`, at `KATEX_VERSION` exactly (`katex.mjs`,
+ * `katex.min.css`, and the fonts the stylesheet names).
+ */
+export const KATEX_CDN = `https://cdn.jsdelivr.net/npm/katex@${KATEX_VERSION}/dist/`;
+/** Each base's KaTeX, loading or loaded; a failed load is forgotten, so a later view tries again. */
+const loads = new Map();
+/** The `katex` attribute of the stylesheets this module adds to a head. */
+const MARK = 'data-edytor-katex';
+/**
+ * KaTeX's stylesheet at `href`, added once to the document's head; settles
+ * when it loaded or failed (a failed stylesheet leaves KaTeX's markup
+ * unstyled, never the equation undrawn).
+ */
+const stylesheet = (href) => {
+    const head = document.head;
+    let link = [...head.querySelectorAll(`link[${MARK}]`)].find((known) => known.getAttribute('href') === href);
+    if (link?.sheet)
+        return Promise.resolve();
+    if (!link) {
+        link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.setAttribute(MARK, '');
+        head.append(link);
+    }
+    const known = link;
+    return new Promise((resolve) => {
+        for (const type of ['load', 'error'])
+            known.addEventListener(type, () => resolve(), { once: true });
+    });
+};
+/** The KaTeX a module exports: itself, or its default export. */
+const katexOf = (module) => {
+    const own = module;
+    const katex = typeof own?.renderToString === 'function' ? own : own?.default;
+    if (typeof katex?.renderToString !== 'function')
+        throw new Error('No KaTeX in the module');
+    return katex;
+};
+/** A base URL ending with one `/`. */
+const baseOf = (base) => (base.endsWith('/') ? base : `${base}/`);
+/**
+ * A loader of KaTeX from `base` (a URL holding KaTeX's `dist` files, by
+ * default `KATEX_CDN`): `katex.mjs` imported and `katex.min.css` added to
+ * the document's head, once per base; it resolves once both settled.
+ * Browser only: without a document it rejects and fetches nothing.
+ * @internal
+ */
+export const cdnKatex = (base = KATEX_CDN) => () => {
+    const root = baseOf(base);
+    if (typeof document === 'undefined')
+        return Promise.reject(new Error('KaTeX loads in a browser only'));
+    let pending = loads.get(root);
+    if (!pending) {
+        pending = Promise.all([
+            importUrl(`${root}katex.mjs`),
+            stylesheet(`${root}katex.min.css`)
+        ]).then(([module]) => katexOf(module));
+        loads.set(root, pending);
+        pending.catch(() => {
+            if (loads.get(root) === pending)
+                loads.delete(root);
+        });
+    }
+    return pending;
+};
+/**
+ * The loader the plugin's `katex` option names: its own loader, a base URL
+ * (`cdnKatex`), none for `false`, else jsDelivr (`KATEX_CDN`).
+ * @internal
+ */
+export const katexLoaderOf = (option) => option === false ? undefined : typeof option === 'function' ? option : cdnKatex(option);

package/dist/plugins/find/FindController.svelte.d.ts

@@ -1,11 +1,10 @@
-import type { Action } from 'svelte/action';
-import type { BlockOperations } from '../../block/block.utils.js';
+import type { Attachment } from 'svelte/attachments';
+import type { Commands } from '../../plugins.js';
 import type { Edytor } from '../../edytor.svelte.js';
 import type { CommandResult } from '../../session/commands.js';
 import { type FindMatch } from './search.js';
-import { type FindLabels } from '../../labels.js';
 /** What `replaceMatches` (one command, one undo step) writes: each match replaced by `replacement`. */
-export type ReplaceMatches = BlockOperations['replaceMatches'];
+export type ReplaceMatches = Commands['replaceMatches'];
 /**
  * The find bar's state and actions (`plugins/find`): the query, the matches
  * in reading order, the current one and the replacements. It reads the
@@ -15,14 +14,10 @@ export type ReplaceMatches = BlockOperations['replaceMatches'];
 export declare class FindController {
     #private;
     private edytor;
-    /** The words the bar shows (the plugin's `labels`): read them in a custom `bar`. */
-    readonly labels: FindLabels;
     isOpen: boolean;
     /** The replacement text. */
     replacement: string;
-    constructor(edytor: Edytor, 
-    /** The words the bar shows (the plugin's `labels`): read them in a custom `bar`. */
-    labels?: FindLabels);
+    constructor(edytor: Edytor);
     /** What the bar searches for; setting it shows the current match. */
     get query(): string;
     set query(value: string);
@@ -58,10 +53,10 @@ export declare class FindController {
     replace: () => CommandResult["status"];
     /** Replace every match: one command, one undo step. Answers its status. */
     replaceAll: () => CommandResult["status"];
-    /** The query field (`use:find.field`): focused on each Mod+F; Enter, Shift+Enter, Escape, Mod+F. */
-    field: Action<HTMLInputElement>;
-    /** The replacement field (`use:find.replaceField`): Enter replaces, Escape closes. */
-    replaceField: Action<HTMLInputElement>;
+    /** The query field (`{@attach find.field}`): focused on each Mod+F; Enter, Shift+Enter, Escape, Mod+F. */
+    field: Attachment<HTMLInputElement>;
+    /** The replacement field (`{@attach find.replaceField}`): Enter replaces, Escape closes. */
+    replaceField: Attachment<HTMLInputElement>;
     /** Stop following the document (the editor is going away). */
     destroy: () => void;
 }