edytor 1.0.0-rc.3 → 2.0.0

package/dist/surface/overlay.js

@@ -18,10 +18,9 @@ import { mount, unmount } from 'svelte';
  * `content-visibility: auto` skips it off screen, or it is not
  * displayed. Its geometry is not computed — reading it would force a layout
  * of that subtree, every frame a measure asks — so measures read its nearest
- * rendered ancestor instead (`checkVisibility`; where it is missing, every
- * node counts as rendered).
+ * rendered ancestor instead (`checkVisibility`).
  */
-export const renderSkipped = (node) => node.checkVisibility?.({ contentVisibilityAuto: true }) === false;
+export const renderSkipped = (node) => !node.checkVisibility({ contentVisibilityAuto: true });
 /** `node`, or its nearest ancestor whose rendering the browser does not skip. */
 export const rendered = (node) => {
     let at = node;
@@ -29,8 +28,73 @@ export const rendered = (node) => {
         at = at.parentElement;
     return at;
 };
-/** The band around the viewport whose blocks' resizes are watched, in screens above and below. */
-const WATCHED_SCREENS = 1;
+/**
+ * The run of `count` items in vertical order (a parent's children, the
+ * top-level blocks) whose boxes (`boxAt`, client px) meet the band from
+ * `top` to `bottom`, edges included unless `strict`: two binary searches,
+ * O(log n) boxes read, an item without a box counted as above the band.
+ * Answers its first index and the index after its last.
+ */
+export const bandRun = (count, boxAt, top, bottom, strict = false) => {
+    const search = (past, lo = 0) => {
+        let hi = count;
+        while (lo < hi) {
+            const mid = (lo + hi) >> 1;
+            const box = boxAt(mid);
+            if (!box || past(box))
+                lo = mid + 1;
+            else
+                hi = mid;
+        }
+        return lo;
+    };
+    const first = search((box) => (strict ? box.bottom <= top : box.bottom < top));
+    return [first, search((box) => (strict ? box.top < bottom : box.top <= bottom), first)];
+};
+/** `element`'s box relative to the layer (`origin`), `null` when it is not in the page. */
+export const layerBox = (element, origin) => {
+    const rect = element?.isConnected ? element.getBoundingClientRect() : null;
+    return (rect && {
+        x: rect.left - origin.left,
+        y: rect.top - origin.top,
+        width: rect.width,
+        height: rect.height
+    });
+};
+/** Whether two measures hold the same values (`a`'s): a state is written only when one moved. */
+export const sameValues = (a, b) => a === b ||
+    (a !== null &&
+        b !== null &&
+        Object.keys(a).every((key) => a[key] === b[key]));
+/** A mounted host whose chrome places itself layer-relative: pinned at the layer's origin. */
+export const pin = (host) => Object.assign(host.style, { position: 'absolute', left: '0px', top: '0px' });
+/**
+ * A popup's place near `rect` (client px), 8px inside the viewport: `gap`
+ * below it, above it when there is no room below (`above`: above first,
+ * below when there is no room above), its left edge at `rect`'s or
+ * centered on it (`center`). Measured now from `box` (the host's first
+ * element by default; `fallback` before it has a size), written by the
+ * answer (the overlay's read-then-write pass).
+ */
+export const placeNear = (host, rect, fallback, { gap = 8, above = false, center = false, box = host.firstElementChild } = {}) => {
+    const view = host.ownerDocument.defaultView;
+    if (!view)
+        return;
+    const size = box?.getBoundingClientRect();
+    const width = size?.width || fallback[0];
+    const height = size?.height || fallback[1];
+    const x = center ? rect.left + rect.width / 2 - width / 2 : rect.left;
+    const [below, up] = [rect.bottom + gap, rect.top - gap - height];
+    const y = above
+        ? up >= 8
+            ? up
+            : below
+        : Math.max(8, below + height < view.innerHeight ? below : up);
+    const left = `${Math.max(8, Math.min(x, view.innerWidth - width - 8))}px`;
+    return () => Object.assign(host.style, { left, top: `${y}px` });
+};
+/** The band around the viewport (`near`) whose blocks' resizes are watched, in screens above and below. */
+const NEAR_SCREENS = 1;
 export class Overlay {
     /** The layer: absolutely positioned at its static place right after the host. */
     layer = null;
@@ -48,7 +112,7 @@ export class Overlay {
      * font or a stylesheet that loads, a kind's markup drawn later (KaTeX, an
      * image), a host whose height its page fixes — moves the blocks under the
      * chrome. Watched while it is a top-level block near the viewport
-     * (`#watch`): a nested block's resize resizes its top-level block, and a
+     * (`near`): a nested block's resize resizes its top-level block, and a
      * block farther away moves no chrome in view (one above it scrolls the
      * page, by scroll anchoring, or resizes the host). Answers the release.
      */
@@ -62,8 +126,15 @@ export class Overlay {
         };
     };
     /**
-     * Watch the observed top-level blocks within `WATCHED_SCREENS` of the
-     * viewport: a binary search over the host's children (vertical order),
+     * The host's children within `NEAR_SCREENS` of the viewport, above or
+     * below, as this frame measured them (before any measure runs): the
+     * chrome that lives only near the viewport reads it (the block handles).
+     * @internal
+     */
+    near = [];
+    /**
+     * Measure the near band (`near`) and watch the observed top-level blocks
+     * in it: a binary search over the host's children (vertical order),
      * O(log n) boxes a frame where watching every block made each frame's
      * resize check cost the whole page.
      */
@@ -71,27 +142,15 @@ export class Overlay {
         const host = this.#host;
         const resize = this.#resize;
         const view = host?.ownerDocument.defaultView;
-        if (!host || !resize || !view)
+        if (!host || !view)
             return;
         const kids = host.children;
         const screen = view.innerHeight;
-        const search = (past) => {
-            let [lo, hi] = [0, kids.length];
-            while (lo < hi) {
-                const mid = (lo + hi) >> 1;
-                if (past(kids[mid].getBoundingClientRect()))
-                    lo = mid + 1;
-                else
-                    hi = mid;
-            }
-            return lo;
-        };
-        const first = search((rect) => rect.bottom < -WATCHED_SCREENS * screen);
-        const last = search((rect) => rect.top <= (1 + WATCHED_SCREENS) * screen);
-        const next = new Set();
-        for (let i = first; i < last; i++)
-            if (this.#observed.has(kids[i]))
-                next.add(kids[i]);
+        const [first, last] = bandRun(kids.length, (index) => kids[index].getBoundingClientRect(), -NEAR_SCREENS * screen, (1 + NEAR_SCREENS) * screen);
+        this.near = Array.from({ length: last - first }, (_, index) => kids[first + index]);
+        if (!resize)
+            return;
+        const next = new Set(this.near.filter((node) => this.#observed.has(node)));
         for (const node of this.#watched)
             if (!next.has(node)) {
                 this.#watched.delete(node);
@@ -114,12 +173,7 @@ export class Overlay {
         const view = this.layer?.ownerDocument.defaultView;
         if (this.#frame !== null || !view)
             return;
-        if (view.requestAnimationFrame)
-            this.#frame = view.requestAnimationFrame(this.#run);
-        else {
-            this.#frame = 0;
-            queueMicrotask(this.#run);
-        }
+        this.#frame = view.requestAnimationFrame(this.#run);
     };
     #run = () => {
         this.#frame = null;
@@ -162,24 +216,25 @@ export class Overlay {
         layer.style.cssText = 'position: absolute; width: 0; height: 0';
         host.after(layer);
         this.layer = layer;
-        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(this.invalidate);
+        const resize = new ResizeObserver(this.invalidate);
         this.#resize = resize;
         this.#host = host;
-        resize?.observe(host);
+        resize.observe(host);
         document.addEventListener('scroll', this.invalidate, { capture: true, passive: true });
         view?.addEventListener('resize', this.invalidate);
         this.invalidate();
         return () => {
-            resize?.disconnect();
+            resize.disconnect();
             this.#watched.clear();
+            this.near = [];
             if (this.#resize === resize)
                 this.#resize = null;
             if (this.#host === host)
                 this.#host = null;
             document.removeEventListener('scroll', this.invalidate, { capture: true });
             view?.removeEventListener('resize', this.invalidate);
-            if (this.#frame)
-                view?.cancelAnimationFrame?.(this.#frame);
+            if (this.#frame !== null)
+                view?.cancelAnimationFrame(this.#frame);
             this.#frame = null;
             layer.remove();
             if (this.layer === layer)

package/dist/surface/pin.svelte.d.ts

@@ -43,6 +43,11 @@ export declare class Pin {
         deltas: RenderDelta[];
         empty: boolean;
     } | null;
+    /** The render of `segment` of `cell`: pinned while it hosts the IME, else its kind's (`segmentDeltas`). */
+    shown: (cell: Cell, segment: Segment, transform: TextTransform | undefined) => {
+        deltas: RenderDelta[];
+        empty: boolean;
+    };
     /** What follows the pinned segment `key` of `block` in its own element (`merge`, `beside`). */
     rest: (block: BlockId, key: string) => RenderDelta[];
     /**

package/dist/surface/pin.svelte.js

@@ -78,6 +78,11 @@ export class Pin {
         const items = [...head, preview, ...tail, ...merged];
         return { deltas: renderDeltas(items), empty: !textOf(items) };
     };
+    /** The render of `segment` of `cell`: pinned while it hosts the IME, else its kind's (`segmentDeltas`). */
+    shown = (cell, segment, transform) => this.render(cell.id, segment.key) ?? {
+        deltas: segmentDeltas(cell, segment, transform),
+        empty: segment.text === ''
+    };
     /** What follows the pinned segment `key` of `block` in its own element (`merge`, `beside`). */
     rest = (block, key) => {
         const held = this.#held;

package/dist/surface/projector.svelte.d.ts

@@ -11,8 +11,6 @@ export declare const domPointOf: (element: HTMLElement, offset: number) => Point
 export declare class Projector {
     #private;
     private edytor;
-    /** The observer holds DOM records it has not reconciled yet (set at attach). */
-    recordsPending: () => boolean;
     constructor(edytor: Edytor);
     /** Root `$effect.pre`: note the focused element before the flush writes the DOM. */
     pre: () => void;
@@ -25,16 +23,16 @@ export declare class Projector {
      */
     mounted: (text: Text) => void;
     /**
-     * The user-input window closed (`withUserInput`): a pass it held back (a
+     * The user-input window closed (`#withUserInput`): a pass it held back (a
      * render under the handler that asked for no display, such as a mark
      * removal re-rendering the text under a range) runs now. The flag is no
      * reactive source, so no later flush is owed: without this, the range the
      * render moved (Firefox keeps it where the removed element stood) would be
-     * adopted as the gesture's when its `selectionchange` lands.
+     * adopted as the gesture's when its `selectionchange` lands. The observer
+     * calls it too once it processed DOM records: a display that waits gets a
+     * pass.
      */
     inputHandled: () => void;
-    /** The observer processed DOM records: a display that waits gets a pass. */
-    recordsChanged: () => void;
     /**
      * Classify a `selectionchange` by comparing the DOM selection with the
      * last display, the render epoch and the gesture serial:

package/dist/surface/projector.svelte.js

@@ -39,9 +39,9 @@
 import { untrack } from 'svelte';
 import { clearDomSelection, createDomRange, getActiveElement, getDomSelection, getDomSelectionSnapshot, scrollCaretIntoView } from '../selection/domSelection.js';
 import { getMarkEdgeSide, getYIndex, isTextBoundSelectionPoint } from '../selection/selection.utils.js';
-import { project } from '../session/selection.js';
+import { project, sameEnds } from '../session/selection.js';
 import { isAndroidChromeBrowser } from '../events/events.utils.js';
-import { isKindControl, isNestedForeignEditableTarget } from '../events/nativeInteractiveControl.js';
+import { isKindControl, isOwnPoint } from '../events/nativeInteractiveControl.js';
 /**
  * Named rule: Android Chrome mutates the DOM after a
  * canceled `deleteContentBackward` and reports the caret one position right
@@ -74,8 +74,6 @@ export class Projector {
     edytor;
     /** What the last display left in the DOM, and the selection epoch it showed. */
     #displayed = null;
-    /** The observer holds DOM records it has not reconciled yet (set at attach). */
-    recordsPending = () => false;
     /** The (request, render, remount) key the last completed pass answered. */
     #done = '';
     #request = -1;
@@ -137,12 +135,8 @@ export class Projector {
         // have mounted in this flush); otherwise an answered key displays nothing.
         if (key === this.#done && (selection.value.kind === 'none' || selection.projection.start)) {
             // Nothing to display; a DOM that still shows the value is observed.
-            const { startText, yStart, endText, yEnd, isReversed } = selection.state;
             const dom = edytor.node && getDomSelection(edytor.node);
-            if (dom &&
-                startText &&
-                endText &&
-                this.#shows(dom, startText, yStart, endText, yEnd, isReversed))
+            if (dom && this.#shows(dom, selection.textRange(), selection.projection.isReversed))
                 this.#seen = this.#flushes;
             return;
         }
@@ -161,7 +155,7 @@ export class Projector {
      */
     mounted = (text) => {
         const { selection } = this.edytor;
-        const { startText, endText } = selection.state;
+        const { startText, endText } = selection.textRange();
         const dead = selection.value.kind !== 'none' && !selection.projection.start;
         if (this.#pending || dead || text === startText || text === endText)
             this.edytor.surface.update();
@@ -184,22 +178,19 @@ export class Projector {
         return true;
     };
     /**
-     * The user-input window closed (`withUserInput`): a pass it held back (a
+     * The user-input window closed (`#withUserInput`): a pass it held back (a
      * render under the handler that asked for no display, such as a mark
      * removal re-rendering the text under a range) runs now. The flag is no
      * reactive source, so no later flush is owed: without this, the range the
      * render moved (Firefox keeps it where the removed element stood) would be
-     * adopted as the gesture's when its `selectionchange` lands.
+     * adopted as the gesture's when its `selectionchange` lands. The observer
+     * calls it too once it processed DOM records: a display that waits gets a
+     * pass.
      */
     inputHandled = () => {
         if (this.#pending)
             this.edytor.surface.update();
     };
-    /** The observer processed DOM records: a display that waits gets a pass. */
-    recordsChanged = () => {
-        if (this.#pending)
-            this.edytor.surface.update();
-    };
     /**
      * Classify a `selectionchange` by comparing the DOM selection with the
      * last display, the render epoch and the gesture serial:
@@ -219,8 +210,8 @@ export class Projector {
         const { selection } = edytor;
         const node = edytor.node;
         const anchor = dom?.anchorNode;
-        // Not ours to classify: outside the editor, or in a nested editable island.
-        if (!dom || !anchor || !node?.contains(anchor) || isNestedForeignEditableTarget(node, anchor))
+        // Not ours to classify: outside the editor, or in a kind's own control.
+        if (!dom || !isOwnPoint(node, anchor))
             return 'foreign';
         if (this.#echoes(dom))
             return 'echo';
@@ -242,7 +233,7 @@ export class Projector {
             return 'drift';
         if (edytor.intentSerial !== this.#serial || selection.dragging)
             return this.#observed('intent');
-        return this.#seen !== this.#flushes || this.recordsPending()
+        return this.#seen !== this.#flushes || this.edytor.surface.pending()
             ? 'drift'
             : this.#observed('foreign');
     };
@@ -303,13 +294,11 @@ export class Projector {
             samePoint(displayed.anchor, dom.anchorNode, dom.anchorOffset) &&
             samePoint(displayed.focus, dom.focusNode, dom.focusOffset))
             return true;
-        const { startText, yStart, endText, yEnd, isReversed, isCollapsed } = selection.state;
-        return Boolean(!isCollapsed &&
-            startText &&
-            endText &&
+        const { isReversed, isCollapsed } = selection.projection;
+        return (!isCollapsed &&
             isTextBoundSelectionPoint(dom.anchorNode) &&
             isTextBoundSelectionPoint(dom.focusNode) &&
-            this.#shows(dom, startText, yStart, endText, yEnd, isReversed));
+            this.#shows(dom, selection.textRange(), isReversed));
     };
     /** Evidence for the Android snap-back: a model-owned delete ran (`events/beforeInputDeleteCommands`). */
     deleted = (attempt) => {
@@ -335,10 +324,10 @@ export class Projector {
             !dom.isCollapsed)
             return false;
         const { attempt } = deleted;
-        const { startText, yStart, isCollapsed } = edytor.selection.state;
+        const { startText, yStart } = edytor.selection.textRange();
         return Boolean(attempt.isCollapsed &&
             attempt.yStart === 0 &&
-            isCollapsed &&
+            edytor.selection.projection.isCollapsed &&
             startText &&
             startText !== attempt.startText &&
             edytor.selection.getTextOfNode(dom.anchorNode) === startText &&
@@ -370,47 +359,32 @@ export class Projector {
         if (!requested && (selection.dragging || edytor.isHandlingUserInput))
             return false;
         const value = selection.value;
-        if (value.kind === 'none') {
-            // No selection shows no DOM range: asked for (a history step giving none
-            // back, a closing menu, a drift over it), a range inside the editor is
-            // cleared, and under the host's focus a caret the browser parks later
-            // is its own (`placed`), whatever key comes before it.
-            const active = getActiveElement(node);
-            if (requested && active && node.contains(active))
-                this.#parking = true;
-            const dom = getDomSelection(node);
-            if (requested && dom?.anchorNode && node.contains(dom.anchorNode) && this.#ours(requested)) {
-                clearDomSelection(node);
-                this.#displayed = null;
-                this.#serial = edytor.intentSerial;
-            }
-            return true;
-        }
-        if (!selection.projection.start) {
+        if (value.kind !== 'none' && !selection.projection.start) {
             // A value that no longer resolves: the repair lands it (a live
             // destination may exist only once this flush mounted it).
             selection.restoreDeadSelectionEndpoints();
             return false;
         }
         const dom = getDomSelection(node);
-        if (!dom)
-            return true;
         if (value.kind !== 'text') {
-            // A block set or an atom shows as selected elements, not a range.
-            // Displayed even when the DOM already holds no range (the atom's
-            // own pointerdown cleared it): a caret the browser parks later
-            // without a gesture (focusing the host) is then drift, not intent;
-            // the one it parks for the atom's press is drift through its release
-            // (`parked`). An atom asked for under the host's focus (a Shift+arrow
-            // onto it) is the press's case without the press: Chromium parks a
-            // caret at the host's start at the next key, whose `selectionchange`
-            // can land after that key counted as a gesture, so it stays the
-            // browser's (`#parking`), whatever key comes before it, as under none.
+            // None, a block set or an atom shows no DOM range. No selection asked
+            // for (a history step giving none back, a closing menu, a drift over
+            // it) clears a range inside the editor; a block set or an atom is
+            // displayed even when the DOM already holds no range (the atom's own
+            // pointerdown cleared it): a caret the browser parks later without a
+            // gesture (focusing the host) is then drift, not intent; the one it
+            // parks for the atom's press is drift through its release (`parked`).
+            // Under the host's focus, none or an atom asked for (a Shift+arrow
+            // onto it: Chromium parks a caret at the host's start at the next key,
+            // whose `selectionchange` can land after that key counted as a
+            // gesture) leaves any caret the browser parks later its own
+            // (`#parking`, `placed`), whatever key comes before it.
             const active = getActiveElement(node);
-            if (value.kind === 'atom' && requested && active && node.contains(active))
+            if (requested && value.kind !== 'blocks' && active && node.contains(active))
                 this.#parking = true;
-            const inside = Boolean(dom.anchorNode && node.contains(dom.anchorNode));
-            if ((inside || dom.rangeCount === 0) && this.#ours(requested)) {
+            const inside = !!dom?.anchorNode && node.contains(dom.anchorNode);
+            const clears = value.kind === 'none' ? requested && inside : inside || dom?.rangeCount === 0;
+            if (clears && this.#ours(requested)) {
                 if (inside)
                     clearDomSelection(node);
                 this.#displayed = null;
@@ -418,7 +392,11 @@ export class Projector {
             }
             return true;
         }
-        const { startText, yStart, endText, yEnd, isCollapsed, isReversed } = selection.state;
+        if (!dom)
+            return true;
+        const range = selection.textRange();
+        const { startText, yStart, endText, yEnd } = range;
+        const { isCollapsed, isReversed } = selection.projection;
         if (!startText?.node?.isConnected || !endText?.node?.isConnected)
             return false;
         const start = domPointOf(startText.node, yStart);
@@ -427,7 +405,7 @@ export class Projector {
             ? { anchor: end, focus: start }
             : { anchor: start, focus: end };
         // Already shown: an observation, whoever holds focus.
-        if (!this.#shows(dom, startText, yStart, endText, yEnd, isReversed)) {
+        if (!this.#shows(dom, range, isReversed)) {
             if (!this.#ours(requested))
                 return true;
             const active = getActiveElement(node);
@@ -470,8 +448,8 @@ export class Projector {
         this.#observed('composition');
     };
     /** The live DOM selection already shows these endpoints (model coordinates, direction). */
-    #shows = (dom, startText, yStart, endText, yEnd, isReversed) => {
-        if (!dom.anchorNode || !dom.focusNode || dom.rangeCount > 1)
+    #shows = (dom, { startText, yStart, endText, yEnd }, isReversed) => {
+        if (!startText || !endText || !dom.anchorNode || !dom.focusNode || dom.rangeCount > 1)
             return false;
         const collapsed = startText === endText && yStart === yEnd;
         const [first, last] = isReversed
@@ -571,12 +549,7 @@ export class Projector {
         const value = edytor.selection.mint(snapshot);
         if (!value)
             return;
-        const minted = project(value, edytor.facade);
-        const current = edytor.selection.projection;
-        if (minted.start?.block === current.start?.block &&
-            minted.start?.offset === current.start?.offset &&
-            minted.end?.block === current.end?.block &&
-            minted.end?.offset === current.end?.offset)
+        if (sameEnds(project(value, edytor.facade), edytor.selection.projection))
             return;
         this.#minted = { value, transaction };
     };

package/dist/text/text.svelte.d.ts

@@ -1,13 +1,14 @@
 import type { Edytor } from '../edytor.svelte.js';
 import { type JSONText } from '../utils/json.js';
-import { Block } from '../block/block.svelte.js';
+import type { Block } from '../block/block.svelte.js';
 /**
- * An id-only text handle: the `ordinal`-th text segment
- * of block `blockId` — no identity across commits beyond that position.
- * Getters read the document index; mutators write through the block's model.
- * `node` is the element that renders the segment (a Surface fact). A
- * reactive reader of a getter depends on the block's cell, so it re-runs
- * when a commit changes the block's content.
+ * An id-only, read-only text handle: the `ordinal`-th text segment of block
+ * `blockId` — no identity across commits beyond that position. Getters read
+ * the document index; writes are the view's operations in block offsets
+ * (`edytor.insertText(text.parent.id, text.segStart + offset, …)`). `node`
+ * is the element that renders the segment (a Surface fact). A reactive
+ * reader of a getter depends on the block's cell, so it re-runs when a
+ * commit changes the block's content.
  */
 export declare class Text {
     #private;
@@ -39,37 +40,10 @@ export declare class Text {
      * the caret is a render the projector displays after (`mounted`).
      */
     refreshFromModel: () => void;
-    private batch;
-    getMarksAtRange: (yStart: number, yEnd: number) => JSONText[];
-    insertText: (args_0: {
-        value: string;
-        isAutoDot?: boolean;
-        start?: number;
-        end?: number;
-        marks?: Record<string, import("../utils/json.js").SerializableContent | null>;
-    }) => void;
-    deleteText: (args_0: {
-        direction: "BACKWARD" | "FORWARD";
-        length: number;
-    }) => {
-        start: number;
-        end: number;
-    } | undefined;
-    splitText: (args_0: {
-        index?: number;
-    }) => JSONText[];
-    setText: (args_0: {
-        value: JSONText[];
-    }) => void;
-    markText: (args_0: {
-        mark: string;
-        start?: number;
-        end?: number;
-        value?: import("../utils/json.js").SerializableContent | null;
-        toggle?: boolean;
-    }) => void;
-    removeMarksFromText: (args_0: {
-        start?: number;
-        end?: number;
-    }) => void;
+    /**
+     * The runs of `[start, end)` (segment offsets), each with a copy of its
+     * marks: the MODEL runs (`value`), never the rendered ones — a kind's
+     * `transformText` decorations (code tokens) are no marks of the text.
+     */
+    getMarksAtRange: (start: number, end: number) => JSONText[];
 }