edytor 1.0.0-rc.3 → 1.0.0

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

@@ -1,7 +1,6 @@
 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;
@@ -30,17 +29,42 @@ export type EquationPluginOptions = {
     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[]>>;
     /**
-     * Replace the editor's panel (the source's field, KaTeX's error, Done):
-     * it renders under the edited equation while `editor.target` is set
-     * (centered under a block equation). Put `{@attach editor.field}` on the
-     * source's field.
+     * 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 = {
@@ -87,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
@@ -117,7 +129,7 @@ export type EquationBox = {
  *
  * 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`), `close()` and the plugin's `labels`.
+ * `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.
@@ -125,8 +137,6 @@ export type EquationBox = {
 export declare class EquationEditor {
     #private;
     private edytor;
-    /** The plugin's words (`editor`, `placeholder`, `done`, …). */
-    readonly labels: EquationLabels;
     /** The equation being edited (reactive). */
     target: EquationTarget | null;
     /** The view is readonly (reactive): the editor closes. */
@@ -162,6 +172,9 @@ export declare class EquationEditor {
 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,7 +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. */
@@ -9,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;
 /**
@@ -71,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>`);
     };
@@ -118,10 +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');
-/** The overlay host the editor renders in (the overlay's mount names it). */
-const HOST = '[data-edytor-equation-editor-host]';
 /**
  * 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
@@ -135,7 +133,7 @@ const HOST = '[data-edytor-equation-editor-host]';
  *
  * 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`), `close()` and the plugin's `labels`.
+ * `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.
@@ -143,23 +141,20 @@ const HOST = '[data-edytor-equation-editor-host]';
 export class EquationEditor {
     edytor;
     renderer;
-    labels;
     /** The equation being edited (reactive). */
     target = $state.raw(null);
     /**
-     * Its box, measured in the overlay's frame.
+     * The editor's panel under the edited equation: its place, and what closes it.
      * @internal
      */
-    box = $state.raw(null);
+    panel;
     /** @internal */
     constructor(edytor, 
     /** @internal */
-    renderer, 
-    /** The plugin's words (`editor`, `placeholder`, `done`, …). */
-    labels = englishLabels.equation) {
+    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() {
@@ -171,13 +166,7 @@ export class EquationEditor {
      * @internal
      */
     get place() {
-        const box = this.box;
-        if (!this.target || !box)
-            return null;
-        return {
-            left: this.display ? box.x + box.width / 2 : box.x,
-            top: box.y + box.height + 6
-        };
+        return this.target && this.panel.place(6, this.display);
     }
     /** A block equation is edited (a field of several lines). */
     get display() {
@@ -213,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
@@ -227,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)
@@ -239,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 });
             }
@@ -247,7 +236,7 @@ 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);
     };
@@ -270,8 +259,8 @@ export class EquationEditor {
             this.close();
         };
         const element = node;
-        element.addEventListener('keydown', keydown);
-        element.addEventListener('focusout', this.#blurred);
+        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)
@@ -283,64 +272,8 @@ export class EquationEditor {
                 node.setSelectionRange(node.value.length, node.value.length);
             });
         });
-        return () => {
-            element.removeEventListener('keydown', keydown);
-            element.removeEventListener('focusout', this.#blurred);
-        };
+        return all(off, off2);
     });
-    /**
-     * The view turned readonly: the editor closes, the equation as it is.
-     * @internal
-     */
-    lock = () => this.close(false);
-    /**
-     * A press anywhere (capture): one outside the editor and its equation closes it.
-     * @internal
-     */
-    pressed = (event) => {
-        const target = this.target;
-        if (!target)
-            return;
-        const at = event.target;
-        if (at?.closest?.(HOST))
-            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(HOST);
-        // 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.
-     * @internal
-     */
-    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;
-        };
-    };
     #block = (target) => {
         const block = this.edytor.idToBlock.get(target.block);
         return block?.isInTree ? block : undefined;
@@ -368,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/katex.js

@@ -21,21 +21,18 @@ const stylesheet = (href) => {
     let link = [...head.querySelectorAll(`link[${MARK}]`)].find((known) => known.getAttribute('href') === href);
     if (link?.sheet)
         return Promise.resolve();
-    const settled = new Promise((resolve) => {
-        const done = () => resolve();
-        link?.addEventListener('load', done, { once: true });
-        link?.addEventListener('error', done, { once: true });
-        if (link)
-            return;
+    if (!link) {
         link = document.createElement('link');
         link.rel = 'stylesheet';
         link.href = href;
         link.setAttribute(MARK, '');
-        link.addEventListener('load', done, { once: true });
-        link.addEventListener('error', done, { once: true });
         head.append(link);
+    }
+    const known = link;
+    return new Promise((resolve) => {
+        for (const type of ['load', 'error'])
+            known.addEventListener(type, () => resolve(), { once: true });
     });
-    return settled;
 };
 /** The KaTeX a module exports: itself, or its default export. */
 const katexOf = (module) => {

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;
 }

package/dist/plugins/find/FindController.svelte.js

@@ -1,7 +1,9 @@
+import { untrack } from 'svelte';
 import { marksForInsertion } from '../../session/editing/text.js';
-import { reveal } from '../../selection/replaceSelection.js';
+import { showText } from '../planned.js';
 import { findMatches } from './search.js';
-import { englishLabels } from '../../labels.js';
+import { listen } from '../../utils/listen.js';
+import { takeKeys } from '../../events/onFocus.js';
 /**
  * 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
@@ -10,7 +12,6 @@ import { englishLabels } from '../../labels.js';
  */
 export class FindController {
     edytor;
-    labels;
     isOpen = $state(false);
     /** The replacement text. */
     replacement = $state('');
@@ -25,11 +26,8 @@ export class FindController {
     #at = $state.raw(null);
     #off = null;
     #field = null;
-    constructor(edytor, 
-    /** The words the bar shows (the plugin's `labels`): read them in a custom `bar`. */
-    labels = englishLabels.find) {
+    constructor(edytor) {
         this.edytor = edytor;
-        this.labels = labels;
     }
     /** What the bar searches for; setting it shows the current match. */
     get query() {
@@ -78,7 +76,7 @@ export class FindController {
      */
     open = (query) => {
         if (!this.isOpen || query !== undefined) {
-            const { startText, yStart } = this.edytor.selection.state;
+            const { startText, yStart } = this.edytor.selection.textRange();
             this.#at = startText?.isInDocument
                 ? this.edytor.facade.anchorAt(startText.blockId, startText.segStart + yStart, 'right')
                 : null;
@@ -109,9 +107,8 @@ export class FindController {
         const start = block?.textAtOffset(match.offset);
         const end = block?.textAtOffset(match.offset + match.length);
         if (start && end)
-            this.edytor.selection.setAtRange(start.text, start.offset, end.text, end.offset);
-        this.edytor.expectInternalFocus();
-        this.edytor.node?.focus({ preventScroll: true });
+            this.edytor.selection.selectText(start.text, start.offset, end.text, end.offset);
+        takeKeys(this.edytor);
     };
     /** The next match becomes the current one (after the last, the first). */
     next = () => this.#step(1);
@@ -135,48 +132,40 @@ export class FindController {
     };
     /** Replace every match: one command, one undo step. Answers its status. */
     replaceAll = () => this.#replace(this.matches);
-    /** The query field (`use:find.field`): focused on each Mod+F; Enter, Shift+Enter, Escape, Mod+F. */
-    field = (node) => {
+    /** The query field (`{@attach find.field}`): focused on each Mod+F; Enter, Shift+Enter, Escape, Mod+F. */
+    field = (node) => untrack(() => {
         this.#field = node;
         this.#focus();
+        const off = this.#keys(node, true);
+        return () => {
+            off();
+            if (this.#field === node)
+                this.#field = null;
+        };
+    });
+    /** The replacement field (`{@attach find.replaceField}`): Enter replaces, Escape closes. */
+    replaceField = (node) => this.#keys(node, false);
+    /**
+     * A field's keys: Enter goes to the next match (Shift+Enter the previous
+     * one) in the query field and replaces in the replacement field, Escape
+     * closes, Mod+F selects the query.
+     */
+    #keys = (node, query) => {
         const keydown = (event) => {
             if (event.isComposing)
                 return;
             const mod = this.edytor.keymap.isMac ? event.metaKey : event.ctrlKey;
             if (event.key === 'Enter')
-                (event.shiftKey ? this.previous : this.next)();
+                (query ? (event.shiftKey ? this.previous : this.next) : this.replace)();
             else if (event.key === 'Escape')
                 this.close();
-            else if (mod && event.key.toLowerCase() === 'f')
+            else if (query && mod && event.key.toLowerCase() === 'f')
                 node.select();
             else
                 return;
             event.preventDefault();
         };
-        node.addEventListener('keydown', keydown);
-        return {
-            destroy: () => {
-                node.removeEventListener('keydown', keydown);
-                if (this.#field === node)
-                    this.#field = null;
-            }
-        };
-    };
-    /** The replacement field (`use:find.replaceField`): Enter replaces, Escape closes. */
-    replaceField = (node) => {
-        const keydown = (event) => {
-            if (event.isComposing)
-                return;
-            if (event.key === 'Enter')
-                this.replace();
-            else if (event.key === 'Escape')
-                this.close();
-            else
-                return;
-            event.preventDefault();
-        };
-        node.addEventListener('keydown', keydown);
-        return { destroy: () => node.removeEventListener('keydown', keydown) };
+        return listen(node, 'keydown', keydown);
     };
     /** Stop following the document (the editor is going away). */
     destroy = () => this.close({ select: false });
@@ -195,14 +184,8 @@ export class FindController {
      */
     #show = () => {
         const match = this.matches[this.current];
-        const block = match && this.edytor.idToBlock.get(match.block);
-        if (block) {
-            reveal(block);
-            block.textAtOffset(match.offset)?.text.node?.scrollIntoView?.({
-                block: 'nearest',
-                inline: 'nearest'
-            });
-        }
+        if (match)
+            showText(this.edytor, match.block, match.offset);
         this.edytor.overlay.invalidate();
     };
     #focus = () => {
@@ -213,13 +196,13 @@ export class FindController {
     };
     /**
      * The one write (`replaceMatches`): admission, hooks (the command, then
-     * each `deleteContentAtRange` and `insertText` step), one transaction,
+     * each `deleteText` and `insertText` step), one transaction,
      * one undo step. Each replacement takes the marks its match had in
      * common, as typing over a selection does (`marksForInsertion`).
      */
     #replace = (matches) => {
         const { edytor } = this;
-        const { facade, dispatcher, idToBlock } = edytor;
+        const { facade, idToBlock } = edytor;
         if (!matches.length)
             return 'noop';
         const prepare = ({ matches, replacement }) => 
@@ -237,11 +220,7 @@ export class FindController {
             ];
         }));
         const payload = { matches, replacement: this.replacement };
-        const block = idToBlock.get(matches[0].block) ?? edytor.root;
-        dispatcher.dispatch('replaceMatches', payload, { block }, (payload, plan = prepare(payload)) => {
-            if ('writes' in plan)
-                facade.apply(plan);
-        }, prepare);
-        return dispatcher.last?.operation === 'replaceMatches' ? dispatcher.last.status : 'refused';
+        const block = edytor.idToBlock.get(matches[0].block);
+        return edytor.dispatcher.plan('replaceMatches', payload, prepare, block).status;
     };
 }

package/dist/plugins/find/findPlugin.d.ts

@@ -2,17 +2,15 @@ import { type Snippet } from 'svelte';
 import type { Edytor } from '../../edytor.svelte.js';
 import type { Plugin } from '../../plugins.js';
 import { FindController } from './FindController.svelte.js';
-import { type PartialLabels } from '../../labels.js';
 export type FindPluginOptions = {
     /**
-     * Replace the bar's markup; it renders while `find.isOpen`, placed at the
-     * editor's top right. Put `use:find.field` on your query input (focused
-     * on each Mod+F; Enter, Shift+Enter, Escape) and `use:find.replaceField`
+     * The bar's markup and its words; it renders while `find.isOpen`, placed at the
+     * editor's top right (without it, Mod+F searches and highlights, and
+     * nothing else shows). Put `{@attach find.field}` on your query input (focused
+     * on each Mod+F; Enter, Shift+Enter, Escape) and `{@attach find.replaceField}`
      * on your replacement input.
      */
     bar?: Snippet<[FindController]>;
-    /** The words the bar shows, over the English ones. */
-    labels?: PartialLabels<'find'>;
 };
 /** The find plugin's controller of `edytor`; `undefined` when the plugin is not listed. */
 export declare const findController: (edytor: Edytor) => FindController | undefined;
@@ -24,5 +22,3 @@ export declare const findController: (edytor: Edytor) => FindController | undefi
  * replaces one or all as one command (`replaceMatches`) and one undo step.
  */
 export declare const createFindPlugin: (options?: FindPluginOptions) => Plugin;
-/** Find and replace with the built-in bar. */
-export declare const findPlugin: Plugin;

package/dist/plugins/find/findPlugin.js

@@ -1,9 +1,11 @@
 import { mount, unmount } from 'svelte';
-import FindBar from './FindBar.svelte';
-import FindHighlights from './FindHighlights.svelte';
+import Ranges, { runOf } from '../../components/Ranges.svelte';
+import { hidden } from '../../selection/visibility.js';
 import { FindController } from './FindController.svelte.js';
-import { labelsWith } from '../../labels.js';
+import { mountChrome } from '../chrome.js';
 const controllers = new WeakMap();
+/** Matches highlighted at most: past it, the count still tells. */
+const MAX_HIGHLIGHTS = 1000;
 /** The find plugin's controller of `edytor`; `undefined` when the plugin is not listed. */
 export const findController = (edytor) => controllers.get(edytor);
 /** At the editor's top right, inside the viewport; measured in the overlay's frame. */
@@ -27,13 +29,14 @@ const place = (edytor, find) => (host) => {
  * replaces one or all as one command (`replaceMatches`) and one undo step.
  */
 export const createFindPlugin = (options = {}) => (edytor) => {
-    const find = new FindController(edytor, labelsWith('find', options.labels));
+    const find = new FindController(edytor);
     controllers.set(edytor, find);
     return {
         hotkeys: {
             // Over a text range in one line, search for it.
             'mod+f': ({ prevent }) => {
-                const { startText, endText, yStart, yEnd, isCollapsed } = edytor.selection.state;
+                const { startText, endText, yStart, yEnd } = edytor.selection.textRange();
+                const { isCollapsed } = edytor.selection.projection;
                 const selected = !isCollapsed && startText && startText === endText
                     ? startText.stringContent.slice(yStart, yEnd)
                     : undefined;
@@ -42,8 +45,27 @@ export const createFindPlugin = (options = {}) => (edytor) => {
         },
         onEdytorAttached: () => {
             const layer = edytor.overlay.layer;
-            const highlights = mount(FindHighlights, { target: layer, props: { edytor, find } });
-            const unmountBar = edytor.overlay.mount(FindBar, { find, bar: options.bar }, 'edytor-find-host', 55, place(edytor, find));
+            // Each shown match (at most `MAX_HIGHLIGHTS`: past it, the count still tells); one
+            // in a closed toggle's body shows none until it is current, which opens the toggle.
+            const highlights = mount(Ranges, {
+                target: layer,
+                props: {
+                    edytor,
+                    name: 'find-match',
+                    z: 18,
+                    ranges: () => find.matches.slice(0, MAX_HIGHLIGHTS).flatMap(({ block, offset, length }, index) => {
+                        const shown = edytor.idToBlock.get(block);
+                        return shown && !hidden(shown)
+                            ? runOf(edytor, block, offset, length, index === find.current)
+                            : [];
+                    })
+                }
+            });
+            const unmountBar = mountChrome(edytor, options.bar, find, () => find.isOpen, {
+                name: 'edytor-find-host',
+                zIndex: 55,
+                measure: place(edytor, find)
+            });
             return () => {
                 find.destroy();
                 unmountBar();
@@ -52,5 +74,3 @@ export const createFindPlugin = (options = {}) => (edytor) => {
         }
     };
 };
-/** Find and replace with the built-in bar. */
-export const findPlugin = createFindPlugin();