edytor 1.0.0-rc.3 → 2.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/fileDrop.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Files dragged from outside over a view (Notion): the drop indicator a
+ * block drag shows, where the files land, and that placement for the drop
+ * (the core's `onDrop.ts` asks the view's uploads, `ViewUploads.drop`, and passes it to the occurrence; the view's uploads place one
+ * block per file there, one command). The placement is the block drag's
+ * own resolution (`DropResolver`) for a drag that moves no block, whose
+ * places are the ones the document takes new blocks of the files' kinds
+ * at (`canPlaceNew`). Shown only in an editable view whose uploads take
+ * one of the files (`viewUploads`); with or without the block handles.
+ * Plugin-owned: the view's `FileUploads` (the first media plugin listed with
+ * an `upload`) installs it, so a view without one ships none of it.
+ */
+import type { Edytor } from '../edytor.svelte.js';
+import type { DropAt } from '../session/attempt.js';
+import type { DropPlacement } from '../dnd/geometry.js';
+/**
+ * A `dragover` of files from outside: where they land, shown (Notion's
+ * indicator), `null` where none (a read-only view, no uploads taking them,
+ * no place the document takes them at).
+ */
+export declare const fileDragOver: (edytor: Edytor, event: DragEvent) => DropPlacement | null;
+/**
+ * A drop of files from outside: the placement shown (re-resolved at the
+ * drop point), in block terms, and nothing shows any more.
+ */
+export declare const fileDropAt: (edytor: Edytor, event: DragEvent) => DropAt | null;
+/** The files' drag left the view (or ended): the indicator goes. */
+export declare const fileDragEnd: (edytor: Edytor) => void | undefined;

package/dist/plugins/fileDrop.js

@@ -0,0 +1,116 @@
+import { canPlaceNew } from '../session/moves.js';
+import { viewUploads } from '../session/uploads.js';
+import { DropIndicator } from '../dnd/dropIndicator.js';
+import { DropResolver, isDropTarget } from '../dnd/placement.js';
+/** The kinds the files of a drag would be, by their types (a `dragover` sees no file, only its type). */
+const kindsOf = (edytor, dataTransfer) => {
+    const uploads = viewUploads(edytor);
+    if (!uploads || !dataTransfer)
+        return [];
+    const kinds = new Set();
+    for (const item of Array.from(dataTransfer.items ?? []))
+        if (item.kind === 'file') {
+            const file = item.getAsFile() ?? new File([], 'file', { type: item.type });
+            const kind = uploads.kindOf(file);
+            if (kind)
+                kinds.add(kind);
+        }
+    // An engine that lists no item for a file (WebKit before the drop): its files themselves.
+    if (!kinds.size)
+        for (const file of Array.from(dataTransfer.files ?? [])) {
+            const kind = uploads.kindOf(file);
+            if (kind)
+                kinds.add(kind);
+        }
+    return [...kinds];
+};
+class FileDrag {
+    edytor;
+    indicator;
+    resolver;
+    #begun = false;
+    constructor(edytor) {
+        this.edytor = edytor;
+        this.indicator = new DropIndicator(edytor, {
+            group: () => [],
+            besideOf: (block) => this.resolver.besideOf(block),
+            layoutOf: (outer) => this.resolver.layoutOf(outer)
+        });
+        this.resolver = new DropResolver(edytor, {
+            targetOf: (node) => {
+                const block = edytor.idToBlock.get(node.dataset.edytorId ?? '');
+                return block?.node === node && isDropTarget(edytor, block) ? block : undefined;
+            },
+            handle: () => null,
+            indicator: this.indicator
+        });
+    }
+    /** The drag of files of `kinds`: no block moves; a place takes them all. */
+    #drag(kinds) {
+        return {
+            group: [],
+            fits: ({ target, position }) => canPlaceNew(this.edytor, kinds, target, position)
+        };
+    }
+    /**
+     * The placement at the pointer, shown (`null`: none, and nothing shows):
+     * over a drop target, its row's; elsewhere in the host, its margins'.
+     */
+    over(kinds, input) {
+        const document = this.edytor.node?.ownerDocument;
+        if (!document)
+            return null;
+        if (!this.#begun) {
+            this.#begun = true;
+            this.indicator.begin(document);
+        }
+        const drag = this.#drag(kinds);
+        const node = this.resolver.hitAt(input);
+        const placement = node
+            ? this.resolver.over(drag, node, input)
+            : this.resolver.margin(drag, input);
+        if (!placement) {
+            this.indicator.clear();
+            return null;
+        }
+        // A margin's placement shows as the block drag's page target does (its reorder holds).
+        this.indicator.show(node ?? document.body, placement);
+        return placement;
+    }
+    /** The drag left the view, or dropped: nothing shows. */
+    end() {
+        this.#begun = false;
+        this.indicator.end();
+    }
+}
+const drags = new WeakMap();
+const dragOf = (edytor) => {
+    let drag = drags.get(edytor);
+    if (!drag)
+        drags.set(edytor, (drag = new FileDrag(edytor)));
+    return drag;
+};
+/**
+ * A `dragover` of files from outside: where they land, shown (Notion's
+ * indicator), `null` where none (a read-only view, no uploads taking them,
+ * no place the document takes them at).
+ */
+export const fileDragOver = (edytor, event) => {
+    const kinds = edytor.readonly ? [] : kindsOf(edytor, event.dataTransfer);
+    if (!kinds.length) {
+        drags.get(edytor)?.end();
+        return null;
+    }
+    return dragOf(edytor).over(kinds, event);
+};
+/**
+ * A drop of files from outside: the placement shown (re-resolved at the
+ * drop point), in block terms, and nothing shows any more.
+ */
+export const fileDropAt = (edytor, event) => {
+    const placement = fileDragOver(edytor, event);
+    fileDragEnd(edytor);
+    return placement && { block: placement.target.id, position: placement.position };
+};
+/** The files' drag left the view (or ended): the indicator goes. */
+export const fileDragEnd = (edytor) => drags.get(edytor)?.end();

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