edytor 3.0.0 → 5.0.0

package/dist/surface/projector.svelte.js

@@ -34,10 +34,12 @@
  * the render epoch and the gesture serial: echo, render drift (displayed
  * again), composition, foreign write or intent (adopted). Two named, counted,
  * time-bounded browser rules are the only signatures:
- * the Android post-delete snap-back and the IME post-commit jump.
+ * the Android post-delete snap-back and the IME post-commit jump. A render
+ * that moved the DOM selection with no event to say so is drift too, read
+ * from the observer's records (`rendered`, `sel.drift.unreported`).
  */
 import { untrack } from 'svelte';
-import { clearDomSelection, createDomRange, getActiveElement, getDomSelection, getDomSelectionSnapshot, scrollCaretIntoView } from '../selection/domSelection.js';
+import { clearDomSelection, createDomRange, focusIn, getActiveElement, getDomSelection, getDomSelectionSnapshot, scrollCaretIntoView } from '../selection/domSelection.js';
 import { getMarkEdgeSide, getYIndex, isTextBoundSelectionPoint } from '../selection/selection.utils.js';
 import { project, sameEnds } from '../session/selection.js';
 import { isAndroidChromeBrowser } from '../events/events.utils.js';
@@ -88,6 +90,8 @@ export class Projector {
     #opening = false;
     /** The gesture serial at the last observation (a display or an adopted `selectionchange`). */
     #serial = -1;
+    /** Where the DOM selection was at that observation (`#note`; null: no range). */
+    #at = null;
     /** The named rules' evidence: the last model-owned delete and the last IME commit. */
     #deleted = null;
     #committed = null;
@@ -112,9 +116,7 @@ export class Projector {
     pre = () => {
         void this.#deps();
         untrack(() => {
-            const node = this.edytor.node;
-            const active = node && getActiveElement(node);
-            this.#noted = active && node.contains(active) ? active : null;
+            this.#noted = focusIn(this.edytor.node);
         });
     };
     /** Root post-flush `$effect`: every DOM write of the flush has landed. */
@@ -183,14 +185,51 @@ export class Projector {
      * 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. The observer
-     * calls it too once it processed DOM records: a display that waits gets a
-     * pass.
+     * adopted as the gesture's when its `selectionchange` lands.
      */
     inputHandled = () => {
         if (this.#pending)
             this.edytor.surface.update();
     };
+    /**
+     * The observer compared the records of a DOM change (a render, a browser
+     * edit): a display that waits on them gets a pass (`inputHandled`), and a
+     * DOM selection they moved off the last observation with no gesture since
+     * is render drift no event reports (`sel.drift.unreported`). A render no
+     * commit asked for (a kind's decoration reading state of its own: a code
+     * grammar that lands re-tokenizes its lines) replaced the text node the
+     * caret was in; the browser left the caret where that node stood (the
+     * line's start) and Chromium and WebKit send no `selectionchange` for it,
+     * while one that comes would read as foreign (no flush ran the projector
+     * since). The value is displayed again now, in the render's own task:
+     * before a key, or its `beforeinput` declaring that caret, can read it.
+     */
+    rendered = () => {
+        if (this.#unreported())
+            this.edytor.selection.display();
+        else
+            this.inputHandled();
+    };
+    /**
+     * `rendered`'s drift: a text value, no display waiting, no gesture, drag
+     * or composition since the last observation, and the DOM selection in the
+     * host no longer where that observation found it.
+     */
+    #unreported = () => {
+        const { edytor } = this;
+        const { selection } = edytor;
+        const at = this.#at;
+        const node = edytor.node;
+        if (!at || !node || selection.value.kind !== 'text' || edytor.intentSerial !== this.#serial)
+            return false;
+        if (selection.request !== this.#request || selection.dragging || edytor.composition.live)
+            return false;
+        const dom = getDomSelection(node);
+        if (!dom || !isOwnPoint(node, dom.anchorNode))
+            return false;
+        return !(samePoint(at.anchor, dom.anchorNode, dom.anchorOffset) &&
+            samePoint(at.focus, dom.focusNode, dom.focusOffset));
+    };
     /**
      * Classify a `selectionchange` by comparing the DOM selection with the
      * last display, the render epoch and the gesture serial:
@@ -283,9 +322,19 @@ export class Projector {
     /** The DOM selection is observed now (adopted, or ignored by the adopter's own rules). */
     #observed = (observation) => {
         this.#seen = this.#flushes;
-        this.#serial = this.edytor.intentSerial;
+        this.#note();
         return observation;
     };
+    /** An observation: its gesture serial, and where the DOM selection is (`#at`). */
+    #note = () => {
+        const { edytor } = this;
+        this.#serial = edytor.intentSerial;
+        const dom = edytor.node && getDomSelection(edytor.node);
+        this.#at =
+            dom?.anchorNode && dom.focusNode
+                ? { anchor: [dom.anchorNode, dom.anchorOffset], focus: [dom.focusNode, dom.focusOffset] }
+                : null;
+    };
     /** The DOM selection is our last display unchanged, or a text-bound range that shows the value. */
     #echoes = (dom) => {
         const displayed = this.#displayed;
@@ -344,7 +393,7 @@ export class Projector {
     observe = () => {
         this.#parking = false;
         this.#seen = this.#flushes;
-        this.#serial = this.edytor.intentSerial;
+        this.#note();
         this.#displayed = null;
     };
     /** Answers whether the pass completed (false: wait for a later flush). */
@@ -379,8 +428,7 @@ export class Projector {
             // 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 (requested && value.kind !== 'blocks' && active && node.contains(active))
+            if (requested && value.kind !== 'blocks' && focusIn(node))
                 this.#parking = true;
             const inside = !!dom?.anchorNode && node.contains(dom.anchorNode);
             const clears = value.kind === 'none' ? requested && inside : inside || dom?.rangeCount === 0;
@@ -388,7 +436,7 @@ export class Projector {
                 if (inside)
                     clearDomSelection(node);
                 this.#displayed = null;
-                this.#serial = edytor.intentSerial;
+                this.#note();
             }
             return true;
         }
@@ -408,15 +456,11 @@ export class Projector {
         if (!this.#shows(dom, range, isReversed)) {
             if (!this.#ours(requested))
                 return true;
-            const active = getActiveElement(node);
-            if (!(active && node.contains(active))) {
+            if (!focusIn(node)) {
                 // Focus first (focusing a host can move the selection): the editing
                 // host, never a focusable element inside the text such as a link.
-                edytor.expectInternalFocus();
                 const element = start[0] instanceof HTMLElement ? start[0] : start[0].parentElement;
-                (element?.closest('[contenteditable="true"]') ?? node).focus({
-                    preventScroll: true
-                });
+                edytor.expectInternalFocus(element?.closest('[contenteditable="true"]') ?? node);
             }
             this.#write(getDomSelection(node) ?? dom, points, isCollapsed);
             if (selection.scrollOnDisplay)
@@ -425,7 +469,7 @@ export class Projector {
         selection.scrollOnDisplay = false;
         this.#displayed = { ...points, epoch: selection.epoch };
         this.#seen = this.#flushes;
-        this.#serial = edytor.intentSerial;
+        this.#note();
         selection.observed({
             edge: isCollapsed ? getMarkEdgeSide(startText, start[0], yStart) : undefined
         });
@@ -500,10 +544,11 @@ export class Projector {
     #ours = (requested) => {
         const node = this.edytor.node;
         const active = getActiveElement(node);
+        const inside = focusIn(node);
         // A form control or a foreign editable in a kind's chrome (a field bound to
         // `block.data`) owns its focus and its selection: never written over.
-        if (active && node.contains(active))
-            return !isKindControl(node, active);
+        if (inside)
+            return !isKindControl(node, inside);
         const document = node.ownerDocument;
         if (active && active !== document.body && active !== document.documentElement)
             return false;

package/dist/text/text.svelte.js

@@ -27,28 +27,26 @@ export class Text {
     get parent() {
         return this.edytor.idToBlock.block(this.blockId);
     }
-    /** This segment in its block's parts, and its position among them. */
-    get #at() {
+    /** This segment in its block's parts. */
+    get #parts() {
         if ($effect.tracking())
             this.edytor.cells?.get(this.blockId);
-        const parts = this.edytor.idToBlock.parts(this.blockId);
-        for (let index = 0, k = 0; index < parts.length; index++) {
-            const part = parts[index];
-            if (part.kind === 'text' && k++ === this.ordinal)
-                return { part, index };
-        }
-        return { index: -1 };
+        return this.edytor.idToBlock.parts(this.blockId);
+    }
+    get #part() {
+        return this.#parts.find((part) => part.kind === 'text' && part.segOrd === this.ordinal);
     }
     /** Position among the block's content parts. */
     get index() {
-        return this.#at.index;
+        const parts = this.#parts;
+        return parts.indexOf(this.#part);
     }
     get value() {
-        return segmentJSON(this.#at.part?.items ?? []);
+        return segmentJSON(this.#part?.runs ?? []);
     }
     /** The segment's text. */
     get stringContent() {
-        return this.#at.part?.items.map((item) => item.text).join('') ?? '';
+        return this.#part?.text ?? '';
     }
     get isEmpty() {
         return this.length === 0;
@@ -57,15 +55,15 @@ export class Text {
         return this.stringContent.endsWith('\n');
     }
     get length() {
-        return this.#at.part?.length ?? 0;
+        return this.stringContent.length;
     }
     /** Display offset of this segment inside its block's content (atoms count 1). */
     get segStart() {
-        return this.#at.part?.start ?? 0;
+        return this.#part?.start ?? 0;
     }
     /** The segment is shown by a live block. */
     get isInDocument() {
-        return this.parent.isInTree && this.#at.part !== undefined;
+        return this.parent.isInTree && this.#part !== undefined;
     }
     /**
      * Re-create this block's text elements from its cell — the repair of a
@@ -101,9 +99,8 @@ export class Text {
     /** @internal */
     attach = (node) => {
         this.node = node;
-        this.edytor.nodeToText.set(node, this);
         // Registered, it takes the attribute table's attributes (`surface/attributes.ts`).
-        const release = this.edytor.surface.register(node, 'text', this.parent.id);
+        const release = this.edytor.surface.register(node, 'text', this.parent.id, undefined, undefined, this);
         const pluginDestroy = cleanups(this.edytor.plugins, (plugin) => plugin.onTextAttached?.({ node, text: this }));
         // A display that waited for a mounted destination runs in the next pass.
         this.edytor.projector?.mounted(this);
@@ -111,8 +108,6 @@ export class Text {
             destroy: () => {
                 if (this.node === node)
                     this.node = undefined;
-                if (this.edytor.nodeToText.get(node) === this)
-                    this.edytor.nodeToText.delete(node);
                 release();
                 pluginDestroy.forEach((destroy) => destroy());
             }

package/dist/themes/notion.css

@@ -807,6 +807,35 @@
 	color: var(--notion-placeholder);
 }
 
+/*
+ * Shared suggestions: a block a suggestion made or proposes to delete
+ * (`data-edytor-suggested`), and its runs in the overlay, in its author's
+ * colour (`--edytor-range-color`).
+ */
+.edytor-notion [data-edytor-suggested='inserted'],
+.edytor-notion [data-edytor-suggested='split'] {
+	box-shadow: inset 2px 0 0 var(--edytor-suggestion-inserted, rgb(68 131 97));
+	background: var(--edytor-suggestion-inserted-background, rgba(68, 131, 97, 0.07));
+}
+.edytor-notion [data-edytor-suggested='removed'] {
+	background: var(--edytor-suggestion-removed);
+}
+.edytor-notion [data-edytor-suggested='removed'] [data-edytor-text] {
+	text-decoration: line-through;
+	text-decoration-color: var(--edytor-suggestion-removed-line, rgba(235, 87, 87, 0.6));
+}
+:is(.edytor-notion, .edytor-notion + [data-edytor-overlay]) [data-edytor-suggestion-inserted] {
+	border-bottom: 2px solid var(--edytor-range-color, rgb(68 131 97));
+	background: color-mix(in srgb, var(--edytor-range-color, rgb(68 131 97)) 10%, transparent);
+}
+:is(.edytor-notion, .edytor-notion + [data-edytor-overlay]) [data-edytor-suggestion-deleted] {
+	background: linear-gradient(
+		transparent calc(50% - 1px),
+		var(--edytor-range-color, rgb(235 87 87)) calc(50% - 1px) calc(50% + 1px),
+		transparent calc(50% + 1px)
+	);
+}
+
 /* ── Page (a subpage link) and table of contents ────────────────────── */
 .edytor-notion [data-edytor-type='page'] {
 	margin: 1px 0;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "edytor",
 	"license": "MIT",
-	"version": "3.0.0",
+	"version": "5.0.0",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/beynar/edytor.git"
@@ -23,6 +23,7 @@
 		"check:deps": "node scripts/deps.mjs",
 		"check:docs": "node scripts/check-docs.mjs",
 		"check:api": "node scripts/api-report.mjs --check",
+		"check:size": "node scripts/bundle-size.mjs --budget bundle-budget.json --top 0",
 		"api:report": "node scripts/api-report.mjs",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
@@ -50,6 +51,7 @@
 		"bench:browser": "node bench/browser.js",
 		"bench:runs": "BENCH_RUNS=1 vitest --config ./vitest.crdt.config.ts --run src/tests/crdt/runs/runs.bench.test.ts",
 		"size": "node scripts/bundle-size.mjs --by dir",
+		"bundle:attribution": "node scripts/bundle-attribution.mjs",
 		"registry:build": "shadcn-svelte registry build ./registry.json --output site/public/r",
 		"check:registry": "node scripts/check-registry.mjs",
 		"test:registry-install": "sh tests/registry-install/run.sh",
@@ -163,7 +165,7 @@
 		}
 	},
 	"dependencies": {
-		"@tanstack/highlight": "^0.1.0",
+		"@tanstack/highlight": "^1.1.0",
 		"@tanstack/markdown": "1.0.0",
 		"esm-env": "^1.2.2",
 		"lib0-v14": "npm:lib0@1.0.0-rc.32"

package/dist/crdt/placement/rank.d.ts

@@ -1,87 +0,0 @@
-/**
- * Rank keys for the placement model — a Logoot-style dense ordering.
- *
- * A rank is a non-empty sequence of *segments* `(v, t)`:
- *
- * - `v` — a signed digit in `[VMIN, VMAX]` (±2^40). There is always room
- *   between two distinct digits (`rv - lv > 1`); when there is not, the
- *   generator descends one level instead of renumbering.
- * - `t` — the allocator's `doc.clientID` (uint53), the *tiebreak* that makes
- *   concurrent allocations of the same digit path distinct, or none
- *   (`Infinity`: sorts above every client) on a segment that only leads to
- *   deeper ones. The last segment always carries one (schema
- *   generation 5): a rank's own client sits on its last segment, and a
- *   copied segment keeps its tie only where the order needs it (between two
- *   keys that differ only by their ties).
- *
- * Encoding is variable-length and order-preserving, so the persisted rank
- * is a plain string and the comparator is `a < b` (CRDT study 2026-10;
- * up to generation 4 every segment was 16 characters, 9 of them a tie):
- *
- * - `v` → a length character (`'H'` for zero, `'H' + k` for a positive
- *   digit of `k` base-64 places, `'H' - k` for a negative one, its places
- *   complemented) and its places — small digits are short;
- * - a tie → `'!'`, then `t` as a digit (`'!'` sorts below every length
- *   character, so a tied segment sorts before the same digit leading on);
- * - rank = segments concatenated; a prefix sorts before its extension, as
- *   string `<` does.
- *
- * Allocation (`rankBetween(left, right, clientId)`):
- *
- * - gap at level `i` (`rv - lv > 1`): emit `lv + 1 + floor(rand·(rv-lv-1))`,
- *   own tie — random-in-gap keeps sequential inserts shallow and concurrent
- *   same-gap inserts deterministic-distinct.
- * - adjacent or equal digits (`rv - lv ≤ 1`): the left digit or the right
- *   one with the allocator's own tie when that tie sorts between theirs;
- *   else copy the left segment and descend — untied when that already sorts
- *   below the right bound (the result is then above left and below right,
- *   and the next level is free), tied otherwise.
- * - left exhausted/open: emit `rSeg.v - 1` (boundary-minus). Sequential
- *   prepends stay at depth 1; the bound can only underflow after ~2^40
- *   consecutive boundary pushes — documented unreachable, guarded by a
- *   descriptive throw.
- *
- * No floating point, no global renumbering, no wall clocks.
- */
-/** Digit range. VMIN = -2^40, VMAX = 2^40 - 1. */
-export declare const RANK_VMIN: number;
-export declare const RANK_VMAX: number;
-export type RankSeg = {
-    v: number;
-    t: number;
-};
-/** Thrown when rank generation would need a digit below VMIN (unreachable). */
-export declare class RankSpaceExhausted extends Error {
-    constructor();
-}
-/** Decode a rank string into its segment array (`t: Infinity` where a segment has no tie). */
-export declare const decodeRank: (rank: string) => RankSeg[];
-/** Encode segments back to the persisted string form. */
-export declare const encodeRank: (segs: readonly RankSeg[]) => string;
-/**
- * Allocate a rank strictly between `left` and `right` (either may be
- * `undefined` for the open end of a sibling list). `clientId` is the
- * allocating doc's clientID; `rand` supplies the in-gap pick (defaults to
- * `Math.random`, tests inject a seeded stream).
- *
- * Guaranteed: `left < result < right` for any `left < right`, including
- * equal-prefix/concurrent-collision inputs — the tiebreak dimension makes a
- * strictly-between key always exist (modulo the documented VMIN bound).
- */
-export declare const rankBetween: (left: string | undefined, right: string | undefined, clientId: number, rand?: () => number, compact?: boolean) => string;
-/** The base of the run band: a run member's digit lies just above it. */
-export declare const RANK_RUN: number;
-/**
- * A rank in `(left, right)` for an insert right after `left` — one rule for
- * array items (`crdt/data.ts`) and inserted blocks (`order.insert.run`).
- * When `client` made `left`, the rank is in the client's run after it: `left`
- * itself as the prefix, then one segment of the run band — or, when `left`
- * is already a member of the client's run, that run's prefix and a member
- * between `left` and the next one. So what one client inserts after its own
- * items stays together whatever a peer inserts in that gap meanwhile: a
- * peer's rank there is either no extension of the run's prefix (it sorts
- * after the whole run) or one whose next digit is above the band (YATA's
- * origin rule, as `Y.Array` keeps an insert after its origin). Elsewhere, or
- * when the run rank would not sort below `right`, a plain {@link rankBetween}.
- */
-export declare const rankAfter: (left: string | undefined, right: string | undefined, client: number, rand?: () => number) => string;