edytor 1.0.0-rc.3 → 2.0.0

package/dist/surface/attributes.js

@@ -1,5 +1,3 @@
-import { replacedMark } from '../session/suggestions.svelte.js';
-import { colorAttributes } from '../block/colors.js';
 /** Chromium expands these shorthands into longhands: a longhand of an owned shorthand is owned. */
 const LONGHANDS = {
     outline: ['outline-width', 'outline-style', 'outline-color'],
@@ -41,6 +39,9 @@ export const ownedOf = (edytor, element, entry) => {
         };
     if (!entry || entry.kind === 'preview')
         return null;
+    // A block's: what its render owns (`Block.svelte`), one reading.
+    if (entry.owned)
+        return entry.owned();
     const { block } = entry;
     if (entry.kind === 'mark') {
         const name = entry.name ?? null;
@@ -73,30 +74,6 @@ export const ownedOf = (edytor, element, entry) => {
             style: {}
         };
     }
-    const cell = edytor.cells?.get(block);
-    const isVoid = Boolean(cell && edytor.definitionOf(cell.type).void);
-    if (entry.kind === 'block') {
-        const handle = edytor.idToBlock.block(block);
-        const { selectedBlocks, focusedBlocks } = edytor.selection;
-        const colors = colorAttributes(cell?.data);
-        return {
-            strict: false,
-            owned: {
-                'data-edytor-block': 'true',
-                'data-edytor-color': colors['data-edytor-color'] ?? null,
-                'data-edytor-background': colors['data-edytor-background'] ?? null,
-                'data-edytor-id': block,
-                'data-edytor-type': cell?.type ?? null,
-                'data-edytor-void': isVoid ? 'true' : null,
-                'data-edytor-selected': selectedBlocks.has(handle) ? 'true' : null,
-                'data-edytor-focused': focusedBlocks.has(handle) ? 'true' : null,
-                'data-edytor-suggestion-replaced': replacedMark(edytor.suggestions.at(block)),
-                dir: blockDir(ownText(cell?.runs ?? [])),
-                contenteditable: isVoid ? 'false' : null
-            },
-            style: isVoid ? { 'user-select': 'none' } : {}
-        };
-    }
     const text = edytor.nodeToText.get(element);
     const voided = insideVoid(edytor, block);
     return {

package/dist/surface/cells.d.ts

@@ -70,6 +70,11 @@ export type Part = Segment | AtomPart;
  * with a segment (an empty content is one empty `start` segment).
  */
 export declare const partsOf: (runs: readonly ContentRun[]) => readonly Part[];
+/** Whether a view renders mark `name` (its record has a tag or a snippet): an unknown mark renders its text only. */
+export declare const rendersMark: (marks: ReadonlyMap<string, {
+    tag?: unknown;
+    snippet?: unknown;
+}>, name: string) => boolean;
 export type RenderDelta = {
     readonly text: string;
     /** Mark entries in nesting order (the first run's order when runs merge). */

package/dist/surface/cells.js

@@ -171,6 +171,11 @@ export const partsOf = (runs) => {
     partsMemo.set(runs, Object.freeze(parts));
     return parts;
 };
+/** Whether a view renders mark `name` (its record has a tag or a snippet): an unknown mark renders its text only. */
+export const rendersMark = (marks, name) => {
+    const mark = marks.get(name);
+    return Boolean(mark?.tag || mark?.snippet);
+};
 /** Mark payloads compare by canonical value: key-sorted, `undefined` values dropped. */
 const marksKey = (marks) => marks
     ? JSON.stringify(Object.entries(marks)

package/dist/surface/lines.d.ts

@@ -26,7 +26,7 @@ export declare const sameLine: (a: DOMRect, b: DOMRect) => boolean;
 export declare const onOneLine: (a: {
     text: Text;
     offset: number;
-}, b: {
+} | null, b: {
     text: Text;
     offset: number;
-}) => boolean | null;
+} | null) => boolean | null;

package/dist/surface/lines.js

@@ -38,6 +38,6 @@ export const sameLine = (a, b) => Math.abs(a.top + a.height / 2 - (b.top + b.hei
  * text).
  */
 export const onOneLine = (a, b) => {
-    const [x, y] = [caretBox(a.text, a.offset, false), caretBox(b.text, b.offset, false)];
+    const [x, y] = [a && caretBox(a.text, a.offset, false), b && caretBox(b.text, b.offset, false)];
     return x && y ? sameLine(x, y) : null;
 };

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

@@ -1,22 +1,7 @@
-import type { YTransaction } from '../crdt/index.js';
 import type { Edytor } from '../edytor.svelte.js';
 import type { Text } from '../text/text.svelte.js';
-import { type Kind } from './attributes.js';
-import type { Patched, Replaced } from './cells.js';
-export type Verdict = 'adopt' | 'invert' | 'defer';
-/** Where an adopted edit lands: the block and offset its anchor resolves to now. */
-export type Place = {
-    block: string;
-    at: number;
-    remove: number;
-    insert: string;
-};
-export type Finding = {
-    block: string | null;
-    verdict: Verdict;
-    why: string;
-    place?: Place;
-};
+import { type Kind, type Owned } from './attributes.js';
+import { type Patched, type Replaced } from './cells.js';
 export declare class SurfaceObserver {
     #private;
     private edytor;
@@ -28,7 +13,7 @@ export declare class SurfaceObserver {
     /** Observe `root` (the host): records name what to compare. */
     attach: (root: HTMLElement) => () => void;
     /** Register an element the core rendered (an attachment); returns its release. */
-    register: (node: Element, kind: Kind, block: string, name?: string) => () => void;
+    register: (node: Element, kind: Kind, block: string, name?: string, owned?: () => Owned) => () => void;
     /** The render anchor (`Edytor.svelte`): a registered child of the strict root. */
     anchor: (node: HTMLElement) => {
         destroy: () => void;
@@ -45,8 +30,6 @@ export declare class SurfaceObserver {
     signal: () => undefined;
     /** Records the observer has not compared yet: the DOM may differ from what the cells rendered. */
     pending: () => boolean;
-    /** Before a transaction: pending records name their contents while the model equals the render. */
-    before: (transaction: YTransaction) => void;
     /**
      * Compare and act now (an `input` event, a composition's end, a context
      * menu): the contents the last flush rendered, not those waiting for one.

package/dist/surface/observer.svelte.js

@@ -36,10 +36,12 @@
 import { tick, untrack } from 'svelte';
 import { diffText } from '../utils/diffText.js';
 import { jsonEquals } from '../utils/json.js';
-import { activeMarks } from '../session/editing/text.js';
+import { activeMarks, marksForInsertion } from '../session/editing/text.js';
 import { INTENTS } from '../session/attempt.js';
 import { getCollapsedDomTextSelection, handleNativeLineBreakTextValue, readDomText } from '../events/onInput.js';
 import { diverges, heal, ownedOf } from './attributes.js';
+import { getTextContentOffsetAtPoint } from '../events/domTextOffset.js';
+import { rendersMark } from './cells.js';
 const ZWSP = /\u200B/g;
 const ATOM = '\uFFFC';
 /** Attributes that claim a core element's identity: never on an unregistered element. */
@@ -90,12 +92,8 @@ const caretIn = (nodes) => {
         return undefined;
     let offset = 0;
     for (const node of nodes) {
-        if (node === anchor || node.contains(anchor)) {
-            const range = node.ownerDocument.createRange();
-            range.selectNodeContents(node);
-            range.setEnd(anchor, selection.anchorOffset);
-            return offset + range.toString().length;
-        }
+        if (node.contains(anchor))
+            return offset + getTextContentOffsetAtPoint(node, anchor, selection.anchorOffset);
         offset += node.textContent?.length ?? 0;
     }
     return undefined;
@@ -131,6 +129,7 @@ export class SurfaceObserver {
     /** Of those, the ones a commit re-rendered (a remount discards its DOM: never snapshotted). */
     #rerendered = new Set();
     #bases = new Map();
+    /** A snapshotted edit: where it lands, or the verdict an expectation gave it. */
     #snapshots = new Map();
     /** Divergence a model-owned attempt's drift window may still repair: compared once it closed. */
     #waiting = new Set();
@@ -148,8 +147,6 @@ export class SurfaceObserver {
     }
     /** Observe `root` (the host): records name what to compare. */
     attach = (root) => {
-        if (typeof MutationObserver === 'undefined')
-            return () => { };
         const mo = (this.#mo = new MutationObserver((records) => {
             records.forEach(this.#intake);
             this.signal();
@@ -171,8 +168,8 @@ export class SurfaceObserver {
         };
     };
     /** Register an element the core rendered (an attachment); returns its release. */
-    register = (node, kind, block, name) => {
-        this.#registry.set(node, { kind, block, name });
+    register = (node, kind, block, name, owned) => {
+        this.#registry.set(node, { kind, block, name, owned });
         if (kind === 'block')
             this.#blocks.set(block, node);
         else if (kind !== 'anchor' && kind !== 'preview') {
@@ -222,12 +219,6 @@ export class SurfaceObserver {
             this.signal();
         return this.#dirty.size > 0 || this.#removed.length > 0;
     };
-    /** Before a transaction: pending records name their contents while the model equals the render. */
-    before = (transaction) => {
-        void transaction;
-        if (this.#take())
-            this.signal();
-    };
     /**
      * Compare and act now (an `input` event, a composition's end, a context
      * menu): the contents the last flush rendered, not those waiting for one.
@@ -411,21 +402,15 @@ export class SurfaceObserver {
             if (!dom || !cell || dom.text === base.text || dom.text === textOf(cell))
                 continue;
             // An expectation claims the edit, or it is placed through the anchor minted at it.
-            const claimed = this.#divergence(id);
+            const verdict = this.#divergence(id);
             // An edit the window defers is drift: the flush's render restores the cell.
-            if (claimed.verdict === 'defer')
-                claimed.verdict = 'invert';
-            if (claimed.verdict !== 'adopt' || claimed.why === 'attempt') {
-                this.#snapshots.set(id, claimed);
+            if (verdict !== 'adopt') {
+                this.#snapshots.set(id, verdict === 'defer' ? 'invert' : verdict);
                 continue;
             }
             const change = diffText(base.text, dom.text);
-            this.#snapshots.set(id, {
-                block: id,
-                verdict: 'adopt',
-                why: 'snapshot',
-                place: { ...change, ...this.#place(id, base, dom.text, change.at, textOf(cell)) }
-            });
+            const place = this.#place(id, base, dom.text, change.at, textOf(cell));
+            this.#snapshots.set(id, { ...change, ...place });
         }
     };
     /** The live composition host's block. */
@@ -494,14 +479,14 @@ export class SurfaceObserver {
         }
         if (this.#fresh) {
             this.#fresh = false;
-            void settle(work).then(edytor.projector.recordsChanged);
+            void settle(work).then(edytor.projector.inputHandled);
         }
         return work;
     };
     /** A content differs from its cell (text, structure or a missing element). */
     #diverges = (id) => {
         if (id === null)
-            return this.#root() !== null;
+            return this.#rootDiverges();
         const cell = this.edytor.cells?.get(id);
         const dom = cell && id !== this.#host && this.#read(id);
         return Boolean(dom && (dom.broken || dom.text !== textOf(cell) || this.#shape(id)));
@@ -524,9 +509,9 @@ export class SurfaceObserver {
         if (snapshot) {
             // Compared again at the next pass, once the edit is resolved.
             this.#dirty.add(id);
-            if (snapshot.verdict === 'adopt' && snapshot.place)
-                return [this.#adoptAt(snapshot.place)];
-            if (snapshot.verdict === 'invert')
+            if (typeof snapshot === 'object')
+                return [this.#adoptAt(snapshot)];
+            if (snapshot === 'invert')
                 this.#invert(id);
             return [];
         }
@@ -542,12 +527,12 @@ export class SurfaceObserver {
                 this.#invert(id);
             return [];
         }
-        const { verdict } = this.#divergence(id);
+        const verdict = this.#divergence(id);
         if (verdict === 'defer')
             this.#waiting.add(id);
         if (verdict === 'invert')
             this.#invert(id);
-        if (verdict !== 'adopt')
+        if (verdict === 'defer' || verdict === 'invert')
             return [];
         return this.#adoptContent(id);
     };
@@ -558,24 +543,19 @@ export class SurfaceObserver {
      */
     #divergence = (id) => {
         const { attempts, composition } = this.edytor;
-        if (composition.tail()?.parent.id === id)
-            return { block: id, verdict: 'invert', why: 'tail' };
-        // A composition with no target writes nothing: what its IME wrote is drift.
-        if (composition.targetless)
-            return { block: id, verdict: 'invert', why: 'tail' };
-        // A structural key waiting for its `beforeinput` or deadline owns the drift it causes.
-        if (attempts.key)
-            return { block: id, verdict: 'invert', why: 'key' };
+        // The composition's tail; a composition with no target writes nothing: what its
+        // IME wrote is drift; a structural key waiting for its `beforeinput` or
+        // deadline owns the drift it causes.
+        if (composition.tail()?.parent.id === id || composition.targetless || attempts.key)
+            return 'invert';
         for (const text of this.#texts(id)) {
             if (attempts.on(text))
-                return { block: id, verdict: 'adopt', why: 'attempt' };
+                return 'attempt';
             if (attempts.drifting(text))
-                return { block: id, verdict: 'invert', why: 'drift' };
+                return 'invert';
         }
         // A model-owned attempt's window is open: its drift may land around its host (a merge target).
-        if (attempts.busy)
-            return { block: id, verdict: 'defer', why: 'window' };
-        return { block: id, verdict: 'adopt', why: 'location' };
+        return attempts.busy ? 'defer' : 'adopt';
     };
     /**
      * Restore the current cell (never the IME's host): the exact text when the
@@ -704,10 +684,7 @@ export class SurfaceObserver {
                 const node = nodes[i];
                 const chain = delta.marks
                     .map(([name]) => name)
-                    .filter((name) => {
-                    const mark = this.edytor.marks.get(name);
-                    return mark?.snippet || mark?.tag;
-                });
+                    .filter((name) => rendersMark(this.edytor.marks, name));
                 if (!chain.length) {
                     if (node.nodeType !== Node.TEXT_NODE)
                         return 'foreign-child';
@@ -727,11 +704,11 @@ export class SurfaceObserver {
         }
         return null;
     };
-    /** The root's children: registered block elements in cell order, the anchor, Svelte's anchors. */
-    #root = () => {
+    /** The root's children differ from its registered block elements in cell order, the anchor, Svelte's anchors. */
+    #rootDiverges = () => {
         const { node, cells } = this.edytor;
         if (!node || !cells)
-            return null;
+            return false;
         const shown = [];
         for (const child of node.childNodes) {
             if (isAnchor(child))
@@ -740,14 +717,10 @@ export class SurfaceObserver {
             if (entry?.kind === 'block')
                 shown.push(entry.block);
             else if (entry?.kind !== 'anchor' && entry?.kind !== 'preview')
-                return { block: null, verdict: 'invert', why: 'root-child' };
+                return true;
         }
-        const missing = cells.rootIds.some((id) => this.#blocks.get(id)?.parentNode !== node);
-        if (missing)
-            return { block: null, verdict: 'invert', why: 'missing' };
-        return shown.join() === cells.rootIds.join()
-            ? null
-            : { block: null, verdict: 'invert', why: 'root-order' };
+        return (cells.rootIds.some((id) => this.#blocks.get(id)?.parentNode !== node) ||
+            shown.join() !== cells.rootIds.join());
     };
     /**
      * The root is a strict container: a child it does not render is removed.
@@ -911,7 +884,7 @@ const shownMarks = (text, at) => {
 };
 /** The rendered marks the model gives the character at `at` of `text`. */
 const modelMarks = (edytor, text, at) => Object.keys(activeMarks(text.getMarksAtRange(at, at + 1)[0]?.marks))
-    .filter((name) => edytor.marks.get(name)?.tag || edytor.marks.get(name)?.snippet)
+    .filter((name) => rendersMark(edytor.marks, name))
     .sort()
     .join();
 /**
@@ -937,7 +910,7 @@ export const adopt = async (edytor, text, dom, domCaret, prefer) => {
     const caret = drifted ? undefined : domCaret;
     if (attempt)
         edytor.selection.select(attempt.target);
-    const { startText, yStart } = edytor.selection.state;
+    const { startText, yStart } = edytor.selection.textRange();
     const grow = value.length - text.length;
     const back = attempt?.isCollapsed && INTENTS[attempt.inputType]?.dir === 'back';
     const change = diffText(text.stringContent, value, attempt && startText === text ? yStart + (back ? grow : Math.max(0, grow)) : (prefer ?? caret));
@@ -953,12 +926,16 @@ export const adopt = async (edytor, text, dom, domCaret, prefer) => {
     const same = removed.every((part) => jsonEquals(activeMarks(part.marks), marks));
     const shown = insert && shownMarks(text, at);
     const kind = attempt ? attempt.inputType || (insert ? 'insertText' : 'deleteContent') : null;
-    edytor.dispatcher.run(kind ?? 'foreignChange', () => insert
-        ? text.insertText({ value: insert, start: at, end: at + remove })
-        : text.parent.deleteContentAtRange({
-            start: [text.index, at],
-            end: [text.index, at + remove]
-        }));
+    edytor.dispatcher.run(kind ?? 'foreignChange', () => {
+        const [id, from] = [text.parent.id, text.segStart + at];
+        // A replaced range's common marks; else the view's insertion rule.
+        const replaced = remove ? text.getMarksAtRange(at, at + remove) : undefined;
+        const marks = replaced && marksForInsertion(text, at, { replaced });
+        if (remove)
+            edytor.deleteText(id, from, remove);
+        if (insert)
+            edytor.insertText(id, from, insert, marks);
+    });
     const adopted = text.isInDocument && text.stringContent === value;
     if (attempt)
         attempt.phase = adopted ? 'applied' : 'failed';
@@ -979,9 +956,12 @@ export const adopt = async (edytor, text, dom, domCaret, prefer) => {
         return true;
     const end = caret ?? (attempt ? at + insert.length : undefined);
     if (adopted && end !== undefined)
-        edytor.selection.setAtTextOffset(text, Math.min(end, text.length));
+        edytor.selection.selectText(text, Math.min(end, text.length));
     // A deletion of uniformly marked text keeps its marks pending at the caret.
-    if (adopted && same && Object.keys(marks).length > 0 && edytor.selection.state.startText === text)
+    if (adopted &&
+        same &&
+        Object.keys(marks).length > 0 &&
+        edytor.selection.textRange().startText === text)
         edytor.selection.stage(marks);
     return true;
 };

package/dist/surface/overlay.d.ts

@@ -18,14 +18,52 @@ import { type Component } 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 declare const renderSkipped: (node: Element) => boolean;
 /** `node`, or its nearest ancestor whose rendering the browser does not skip. */
 export declare const rendered: (node: Element) => Element;
 /** Reads layout with the layer's origin; returns the writes to apply after every read. */
 export type Measure = (origin: DOMRect) => (() => void) | void;
+/**
+ * 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 declare const bandRun: (count: number, boxAt: (index: number) => DOMRect | undefined, top: number, bottom: number, strict?: boolean) => [number, number];
+/** A box relative to the layer. */
+export type LayerBox = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** `element`'s box relative to the layer (`origin`), `null` when it is not in the page. */
+export declare const layerBox: (element: Element | null | undefined, origin: DOMRect) => LayerBox | null;
+/** Whether two measures hold the same values (`a`'s): a state is written only when one moved. */
+export declare const sameValues: <T extends object>(a: T | null, b: T | null) => boolean;
+/** A mounted host whose chrome places itself layer-relative: pinned at the layer's origin. */
+export declare const pin: (host: HTMLElement) => CSSStyleDeclaration & {
+    position: string;
+    left: string;
+    top: string;
+};
+/**
+ * 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 declare const placeNear: (host: HTMLElement, rect: DOMRect, fallback: readonly [width: number, height: number], { gap, above, center, box }?: {
+    gap?: number;
+    above?: boolean;
+    center?: boolean;
+    box?: Element | null;
+}) => (() => void) | void;
 export declare class Overlay {
     #private;
     /** The layer: absolutely positioned at its static place right after the host. */
@@ -36,7 +74,7 @@ export declare 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.
      */