edytor 0.0.11 → 0.1.0-next.16

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

@@ -1,36 +1,48 @@
 import { Edytor } from '../edytor.svelte.js';
-import * as Y from 'yjs';
-import { type JSONText, type SerializableContent } from '../utils/json.js';
+import { type JSONText } from '../utils/json.js';
 import { Block } from '../block/block.svelte.js';
-import { type JSONDelta } from './deltas.js';
+/**
+ * An id-only text handle (§2.4 "Handles", R4): the `ordinal`-th text segment
+ * of block `blockId` — no identity across commits beyond that position (K5).
+ * Getters read the document index; mutators write through the block's model.
+ * `node` is the element that renders the segment (a Surface fact).
+ */
 export declare class Text {
     #private;
     readonly: boolean;
-    parent: Block;
-    yText: Y.Text;
-    edytor: Edytor;
-    stringContent: string;
-    index: number;
+    readonly edytor: Edytor;
+    readonly blockId: string;
+    /** The segment's position among its block's text segments. */
+    readonly ordinal: number;
+    readonly id: string;
     node: HTMLElement | undefined;
-    isEmpty: boolean;
-    endsWithNewline: boolean;
-    markOnNextInsert: undefined | Record<string, SerializableContent | null>;
-    id: string;
+    constructor(edytor: Edytor, blockId: string, ordinal: number);
+    get parent(): Block;
+    /** Position among the block's content parts. */
+    get index(): number;
     get value(): JSONText[];
+    /** The segment's text. */
+    get stringContent(): string;
+    get isEmpty(): boolean;
+    get endsWithNewline(): boolean;
     get length(): number;
-    get children(): JSONDelta[];
-    set children(value: JSONDelta[]);
-    private setChildren;
-    private observeText;
-    constructor({ parent, content, yText }: {
-        parent: Block;
-    } & ({
-        yText?: undefined;
-        content: string | JSONText[];
-    } | {
-        yText: Y.Text;
-        content?: undefined;
-    }));
+    /** Display offset of this segment inside its block's content (atoms count 1). */
+    get segStart(): number;
+    /** The segment is shown by a live block. */
+    get isInDocument(): boolean;
+    /**
+     * Re-create this block's text elements from its cell — the repair of a
+     * DOM the browser or a foreign script changed (typing and model commits
+     * never remount). Never while the IME owns the element. A remount under
+     * the caret is a render the projector displays after (`mounted`).
+     */
+    refreshFromModel: () => void;
+    /** Insert `text` (optionally marked) at segment-local `offset`. */
+    insertAt: (offset: number, text: string, marks?: Record<string, unknown> | null) => boolean;
+    /** Delete `length` atoms at segment-local `offset`. */
+    deleteAt: (offset: number, length: number) => boolean;
+    /** Multi-mark format over `[offset, offset+length)` — `null` values remove the mark. */
+    formatAt: (offset: number, length: number, attributes: Record<string, unknown>) => boolean;
     private batch;
     getMarksAtRange: (yStart: number, yEnd: number) => JSONText[];
     insertText: (args_0: {
@@ -38,12 +50,15 @@ export declare class Text {
         isAutoDot?: boolean;
         start?: number;
         end?: number;
-        marks?: Record<string, SerializableContent | null>;
+        marks?: Record<string, import("../utils/json.js").SerializableContent | null>;
     }) => void;
     deleteText: (args_0: {
         direction: "BACKWARD" | "FORWARD";
         length: number;
-    }) => void;
+    }) => {
+        start: number;
+        end: number;
+    } | undefined;
     splitText: (args_0: {
         index?: number;
     }) => JSONText[];
@@ -54,15 +69,12 @@ export declare class Text {
         mark: string;
         start?: number;
         end?: number;
-        value?: SerializableContent | null;
+        value?: import("../utils/json.js").SerializableContent | null;
         toggle?: boolean;
     }) => void;
     removeMarksFromText: (args_0: {
-        mark: string;
         start?: number;
         end?: number;
-        value?: SerializableContent | null;
-        toggle?: boolean;
     }) => void;
     attach: (node: HTMLElement) => {
         destroy: () => void;

package/dist/text/text.svelte.js

@@ -1,84 +1,96 @@
 import { Edytor } from '../edytor.svelte.js';
-import * as Y from 'yjs';
 import {} from '../utils/json.js';
 import { Block } from '../block/block.svelte.js';
 import { batch, deleteText, removeMarksFromText, getMarksAtRange, insertText, markText, setText, splitText } from './text.utils.js';
-import { deltaToJson, jsonToDelta, toDeltas } from './deltas.js';
-import { id } from '../utils.js';
+import { deltaToJson, runsToDeltas } from './deltas.js';
 import { climb } from '../selection/selection.utils.js';
+/** A write through the block's model that the document did not refuse. */
+const accepted = (r) => r !== undefined && r.status !== 'refused';
+/**
+ * An id-only text handle (§2.4 "Handles", R4): the `ordinal`-th text segment
+ * of block `blockId` — no identity across commits beyond that position (K5).
+ * Getters read the document index; mutators write through the block's model.
+ * `node` is the element that renders the segment (a Surface fact).
+ */
 export class Text {
     readonly = false;
-    parent;
-    yText;
     edytor;
-    stringContent = $state('');
-    index = $state(0);
-    node;
-    // Used to add en empty string in the DOM if the text is empty in order to be abble to focus on it.
-    isEmpty = $state(false);
-    // Used to add en empty string at the end of the text if it ends with a newline in order to visually render the newline.
-    endsWithNewline = $state(false);
-    // Used when user toggles mark without selection range.
-    markOnNextInsert = undefined;
+    blockId;
+    /** The segment's position among its block's text segments. */
+    ordinal;
     id;
-    #children = $state([]);
+    node;
+    constructor(edytor, blockId, ordinal) {
+        this.edytor = edytor;
+        this.blockId = blockId;
+        this.ordinal = ordinal;
+        this.id = `t:${blockId}:${ordinal}`;
+    }
+    get parent() {
+        return this.edytor.idToBlock.block(this.blockId);
+    }
+    /** This segment in its block's parts, and its position among them. */
+    get #at() {
+        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 };
+    }
+    /** Position among the block's content parts. */
+    get index() {
+        return this.#at.index;
+    }
     get value() {
-        return deltaToJson(this.#children);
+        return deltaToJson(runsToDeltas(this.#at.part?.items ?? [])[0]);
+    }
+    /** The segment's text. */
+    get stringContent() {
+        return this.#at.part?.items.map((item) => item.text).join('') ?? '';
+    }
+    get isEmpty() {
+        return this.length === 0;
+    }
+    get endsWithNewline() {
+        return this.stringContent.endsWith('\n');
     }
     get length() {
-        return this.yText.length;
+        return this.#at.part?.length ?? 0;
     }
-    get children() {
-        const transformer = this.parent.definition.transformText;
-        return transformer
-            ? jsonToDelta(transformer({ text: this, block: this.parent, content: this.value }))
-            : this.#children;
+    /** Display offset of this segment inside its block's content (atoms count 1). */
+    get segStart() {
+        return this.#at.part?.start ?? 0;
     }
-    set children(value) {
-        this.#children = value;
+    /** The segment is shown by a live block. */
+    get isInDocument() {
+        return this.parent.isInTree && this.#at.part !== undefined;
     }
-    setChildren = (text) => {
-        this.stringContent = this.yText.toJSON();
-        [this.children, this.isEmpty] = toDeltas(text || this.yText);
-        this.endsWithNewline = this.stringContent.endsWith('\n');
-    };
-    observeText = (event, transaction) => {
-        if (transaction.origin !== this.edytor.transaction) {
-            // If the transaction is not from the edytor, we need to restore the selection
-            // If the current text is not focused, this action will be ignored
-            this.edytor.selection.restoreRelativePosition(this);
-        }
-        this.setChildren(event.target);
+    /**
+     * Re-create this block's text elements from its cell — the repair of a
+     * DOM the browser or a foreign script changed (typing and model commits
+     * never remount). Never while the IME owns the element. A remount under
+     * the caret is a render the projector displays after (`mounted`).
+     */
+    refreshFromModel = () => {
+        if (this.edytor.pin.owns(this.node))
+            return;
+        this.edytor.cells?.remount(this.parent.id);
     };
-    constructor({ parent, content, yText }) {
-        this.parent = parent;
-        this.edytor = parent.edytor;
-        this.yText = yText || new Y.Text();
-        this.id = this.yText.doc ? this.yText.getAttribute('id') : id('t');
-        if (content !== undefined) {
-            // If content is provided we need to initialize the text with the content
-            this.yText._pending?.push(() => {
-                this.yText.setAttribute('id', this.id);
-                if (typeof content === 'string') {
-                    this.yText.insert(0, content);
-                }
-                else {
-                    this.yText.applyDelta(content.map((part) => ({
-                        insert: part.text,
-                        attributes: part.marks
-                    })));
-                }
-                this.setChildren();
-            });
-        }
-        else {
-            this.setChildren();
-        }
-        this.edytor.idToText.set(this.id, this);
-        if (!this.edytor.readonly) {
-            this.yText.observe(this.observeText);
-        }
-    }
+    // ── segment writes ───────────────────────────────────────────────────
+    //
+    // `insertAt`/`deleteAt`/`formatAt` are the offset-based primitives the
+    // operation layer (`text.utils`), event handlers and plugins call. Offsets
+    // are SEGMENT-LOCAL display atoms (UTF-16 units); `segStart` maps them into
+    // the block's display space (read from the index, so a write after another
+    // in the same transaction lands right).
+    /** Insert `text` (optionally marked) at segment-local `offset`. */
+    insertAt = (offset, text, marks) => accepted(this.parent.model?.insertText(this.segStart + offset, text, marks ?? undefined));
+    /** Delete `length` atoms at segment-local `offset`. */
+    deleteAt = (offset, length) => accepted(this.parent.model?.deleteText(this.segStart + offset, length));
+    /** Multi-mark format over `[offset, offset+length)` — `null` values remove the mark. */
+    formatAt = (offset, length, attributes) => accepted(this.parent.model?.format(this.segStart + offset, length, attributes));
     batch = batch.bind(this);
     getMarksAtRange = getMarksAtRange.bind(this);
     insertText = this.batch('insertText', insertText.bind(this));
@@ -90,11 +102,13 @@ export class Text {
     attach = (node) => {
         this.node = node;
         this.edytor.nodeToText.set(node, this);
+        const release = this.edytor.surface.register(node, 'text', this.parent.id);
         node.setAttribute('data-edytor-id', `${this.id}`);
         node.setAttribute('data-edytor-text', `true`);
         let pluginDestroy = this.edytor.plugins.reduce((acc, plugin) => {
             const action = plugin.onTextAttached?.({ node, text: this });
-            action && acc.push(action);
+            if (typeof action === 'function')
+                acc.push(action);
             return acc;
         }, []);
         let insideVoid = this.parent.definition.void;
@@ -105,13 +119,18 @@ export class Text {
             }
         });
         if (insideVoid) {
-            node.contentEditable = 'true';
+            node.setAttribute('contenteditable', 'true');
             node.style.outline = 'none';
         }
+        // A display that waited for a mounted destination runs in the next pass.
+        this.edytor.projector?.mounted(this);
         return {
             destroy: () => {
-                this.yText?.unobserve(this.observeText);
-                this.edytor.idToText.delete(this.id);
+                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/text/text.utils.d.ts

@@ -33,8 +33,13 @@ export type TextOperations = {
 export declare function batch<T extends (...args: any[]) => any, O extends keyof TextOperations>(operation: O, func: T): T;
 export declare function insertText(this: Text, { value, isAutoDot, start, end, marks }: TextOperations['insertText']): void;
 export declare function getMarksAtRange(this: Text, yStart: number, yEnd: number): JSONText[];
-export declare function deleteText(this: Text, { direction, length }: TextOperations['deleteText']): void;
-export declare function removeMarksFromText(this: Text, { start, end }: TextOperations['markText']): void;
+export declare const getPreviousGraphemeStart: (value: string, offset: number) => number;
+export declare const getNextGraphemeEnd: (value: string, offset: number) => number;
+export declare function deleteText(this: Text, { direction, length }: TextOperations['deleteText']): {
+    start: number;
+    end: number;
+} | undefined;
+export declare function removeMarksFromText(this: Text, { start, end }: TextOperations['removeMarksFromText']): void;
 export declare function markText(this: Text, { mark, value, toggle, start, end }: TextOperations['markText']): void;
 export declare function splitText(this: Text, { index }: TextOperations['splitText']): JSONText[];
 export declare function setText(this: Text, { value }: TextOperations['setText']): void;

package/dist/text/text.utils.js

@@ -1,62 +1,50 @@
-import { prevent } from '../utils.js';
+import { marksForInsertion } from '../session/editing/text.js';
 export function batch(operation, func) {
     return function (payload) {
-        let finalPayload = payload;
-        for (const plugin of this.edytor.plugins) {
-            // @ts-expect-error
-            const normalizedPayload = plugin.onBeforeOperation?.({
-                operation,
-                payload,
-                text: this,
-                block: this.parent,
-                prevent
-            });
-            if (normalizedPayload) {
-                finalPayload = normalizedPayload;
-                break;
-            }
-        }
-        const result = this.edytor.transact(() => func.bind(this)(finalPayload));
-        for (const plugin of this.edytor.plugins) {
-            plugin.onAfterOperation?.({
-                operation,
-                payload,
-                text: this,
-                block: this.parent
-            });
-        }
-        return result;
+        // Dispatched like block operations (`session/commands.ts`): plugins see
+        // `block: this.parent` + `text: this`, the text arm of `ChangePayload`.
+        return this.edytor.dispatcher.dispatch(operation, payload, { block: this.parent, text: this }, func);
     };
 }
-export function insertText({ value, isAutoDot, start = this.edytor.selection.state.yStart, end = this.edytor.selection.state.yEnd, marks = this.markOnNextInsert }) {
+export function insertText({ value, isAutoDot, start = this.edytor.selection.state.yStart, end = this.edytor.selection.state.yEnd, marks }) {
     const isCollapsed = start === end || !end;
-    // const attributes = this.getAttributesAtPosition(yStart);
-    const deltas = [{ retain: start }, { insert: value, attributes: marks }];
-    if (isAutoDot) {
-        deltas[0].retain = start - 1;
-        deltas.splice(1, 0, { delete: 1 });
-    }
-    if (!isCollapsed) {
-        deltas.splice(1, 0, { delete: end - start });
-    }
-    this.edytor.doc.transact(() => {
-        if (isAutoDot || !isCollapsed) {
-            this.yText.applyDelta(deltas);
+    // The caret's pending marks (L4) apply to an insertion at the caret, which consumes them.
+    const { selection } = this.edytor;
+    const { startText, yStart } = selection.state;
+    const pending = startText === this && yStart === start ? selection.pending : undefined;
+    marks ??= marksForInsertion(this, start, {
+        replaced: isCollapsed ? undefined : this.getMarksAtRange(start, end),
+        pending
+    });
+    this.edytor.transact(() => {
+        if (isAutoDot) {
+            // Replace the previous char with the inserted value (autocorrect).
+            this.deleteAt(start - 1, 1);
+            this.insertAt(start - 1, value, marks);
+        }
+        else if (!isCollapsed) {
+            this.deleteAt(start, end - start);
+            this.insertAt(start, value, marks);
         }
         else {
-            this.yText.insert(start, value, marks);
+            this.insertAt(start, value, marks);
         }
     });
-    if (this.markOnNextInsert) {
-        this.markOnNextInsert = undefined;
-    }
+    if (pending)
+        selection.stage(undefined);
 }
 export function getMarksAtRange(yStart, yEnd) {
     const result = [];
     let offset = 0;
     let entered = false;
-    for (let i = 0; i < this.children.length; i++) {
-        const { text, marks } = this.children[i];
+    // Iterate the MODEL runs (`this.value`), never `this.children` — the
+    // children getter applies the block's `transformText` (e.g. code
+    // tokens), whose marks are local decorations. Reading them here leaked
+    // `codeToken` into persisted marks: typed/composed text inside a code
+    // line inherited the decoration, splitting the serialized content.
+    const parts = this.value;
+    for (let i = 0; i < parts.length; i++) {
+        const { text, marks } = parts[i];
         const length = text.length;
         const end = offset + length;
         if (yStart >= offset && yStart < end) {
@@ -66,14 +54,14 @@ export function getMarksAtRange(yStart, yEnd) {
             const endOffset = Math.min(length, yEnd - offset);
             result.push({
                 text: text.slice(startOffset, endOffset),
-                marks: Object.fromEntries(marks)
+                marks: { ...(marks ?? {}) }
             });
         }
         else if (entered && end <= yEnd) {
             // Middle of range
             result.push({
                 text,
-                marks: Object.fromEntries(marks)
+                marks: { ...(marks ?? {}) }
             });
         }
         else if (entered && offset < yEnd && yEnd <= end) {
@@ -81,7 +69,7 @@ export function getMarksAtRange(yStart, yEnd) {
             const endOffset = yEnd - offset;
             result.push({
                 text: text.slice(0, endOffset),
-                marks: Object.fromEntries(marks)
+                marks: { ...(marks ?? {}) }
             });
             break;
         }
@@ -89,57 +77,89 @@ export function getMarksAtRange(yStart, yEnd) {
     }
     return result;
 }
+const getGraphemeBoundaries = (value) => {
+    const Segmenter = Intl.Segmenter;
+    if (Segmenter) {
+        return Array.from(new Segmenter(undefined, { granularity: 'grapheme' }).segment(value)).map(({ index, segment }) => ({
+            start: index,
+            end: index + segment.length
+        }));
+    }
+    let index = 0;
+    return Array.from(value).map((segment) => {
+        const start = index;
+        index += segment.length;
+        return {
+            start,
+            end: index
+        };
+    });
+};
+export const getPreviousGraphemeStart = (value, offset) => {
+    const clampedOffset = Math.min(Math.max(offset, 0), value.length);
+    let previousStart = 0;
+    for (const boundary of getGraphemeBoundaries(value)) {
+        if (boundary.end >= clampedOffset) {
+            return boundary.start < clampedOffset ? boundary.start : previousStart;
+        }
+        previousStart = boundary.start;
+    }
+    return previousStart;
+};
+export const getNextGraphemeEnd = (value, offset) => {
+    const clampedOffset = Math.min(Math.max(offset, 0), value.length);
+    for (const boundary of getGraphemeBoundaries(value)) {
+        if (boundary.end > clampedOffset) {
+            return boundary.end;
+        }
+    }
+    return clampedOffset;
+};
 export function deleteText({ direction, length = 1 }) {
     const { yStart, isCollapsed } = this.edytor.selection.state;
-    const deltas = direction === 'BACKWARD'
-        ? [{ retain: isCollapsed ? yStart - 1 : yStart }, { delete: isCollapsed ? 1 : length }]
-        : [{ retain: isCollapsed ? yStart : yStart }, { delete: isCollapsed ? 1 : length }];
-    this.yText.applyDelta(deltas);
+    const requestedLength = Math.max(0, length);
+    const textLength = this.length;
+    if (requestedLength === 0 || textLength === 0) {
+        return;
+    }
+    const shouldDeleteSingleGrapheme = isCollapsed && requestedLength === 1;
+    const start = shouldDeleteSingleGrapheme && direction === 'BACKWARD'
+        ? getPreviousGraphemeStart(this.stringContent, yStart)
+        : direction === 'BACKWARD' && isCollapsed
+            ? Math.max(0, yStart - requestedLength)
+            : Math.max(0, yStart);
+    const end = shouldDeleteSingleGrapheme && direction === 'FORWARD'
+        ? getNextGraphemeEnd(this.stringContent, yStart)
+        : direction === 'BACKWARD' && isCollapsed
+            ? Math.min(textLength, yStart)
+            : Math.min(textLength, start + requestedLength);
+    const deleteLength = end - start;
+    if (deleteLength <= 0) {
+        return;
+    }
+    this.deleteAt(start, deleteLength);
+    return { start, end };
 }
-export function removeMarksFromText({ start = this.edytor.selection.state.yStart || 0, end = this.edytor.selection.state.yEnd || this.yText.length }) {
-    const marksAtRange = this.getMarksAtRange(start, end);
-    const attributes = marksAtRange.reduce((acc, { marks }) => {
-        Object.entries(marks || {}).forEach(([key, value]) => {
-            if (value === null) {
-                Object.assign({ key: null });
-            }
-        });
-        return acc;
-    }, {});
-    this.yText.format(start, end, attributes);
+export function removeMarksFromText({ start = this.edytor.selection.state.yStart || 0, end = this.edytor.selection.state.yEnd || this.length }) {
+    // Persisted mark changes delegate to the document: `clearMarks` discovers
+    // every mark name present in the range and unsets them; `segStart` maps
+    // the segment-local range into the block's display offsets.
+    this.parent.model?.clearMarks(this.segStart + start, end - start);
 }
 export function markText({ mark, value = true, toggle = false, start = this.edytor.selection.state.yStart, end = this.edytor.selection.state.yEnd }) {
-    const length = end - start;
-    const isCollasped = end - start === 0;
-    const marksAtRange = this.getMarksAtRange(isCollasped ? start - 1 : start, end);
-    const isNextActiveMark = isCollasped && this.markOnNextInsert && mark in this.markOnNextInsert;
-    const spreadOnAllRange = marksAtRange.every(({ marks }) => marks && mark in marks);
-    const markValue = (spreadOnAllRange || isNextActiveMark) && toggle ? null : value;
-    if (isCollasped) {
-        const activeMarks = marksAtRange.reduce((acc, { marks }) => {
-            Object.entries(marks || {}).forEach(([key, value]) => {
-                if (value === true) {
-                    Object.assign(acc, { [key]: true });
-                }
-            });
-            return acc;
-        }, {});
-        if (isNextActiveMark && markValue === null) {
-            delete this.markOnNextInsert[mark];
-        }
-        else {
-            this.markOnNextInsert = {
-                ...(this.markOnNextInsert || {}),
-                ...activeMarks,
-                [mark]: markValue
-            };
-        }
-    }
-    else {
-        this.yText.format(start, length, {
-            [mark]: markValue
+    if (start === end) {
+        // A caret stages the full set the next insertion carries (values kept).
+        const { selection } = this.edytor;
+        const { [mark]: current = null, ...rest } = marksForInsertion(this, start, {
+            pending: selection.pending
         });
+        const next = current !== null && toggle ? null : value;
+        selection.stage(next === null ? rest : { ...rest, [mark]: next });
+        return;
     }
+    const marksAtRange = this.getMarksAtRange(start, end);
+    const spreadOnAllRange = marksAtRange.length > 0 && marksAtRange.every(({ marks }) => marks && mark in marks);
+    this.formatAt(start, end - start, { [mark]: spreadOnAllRange && toggle ? null : value });
 }
 // This function split a Y.Text at an index, delete what is after the index and returns the deleted content as a JSONText[]
 export function splitText({ index = this.edytor.selection.state.yStart }) {
@@ -163,12 +183,16 @@ export function splitText({ index = this.edytor.selection.state.yStart }) {
         }
         offset = nextOffset;
     }
-    this.yText.delete(index, this.yText.length - index);
+    this.deleteAt(index, this.length - index);
     return content;
 }
 export function setText({ value }) {
-    this.yText.applyDelta([
-        { delete: this.yText.length },
-        ...value.map((part) => ({ insert: part.text, attributes: part.marks }))
-    ]);
+    this.deleteAt(0, this.length);
+    let offset = 0;
+    for (const part of value) {
+        if (part.text.length) {
+            this.insertAt(offset, part.text, part.marks);
+            offset += part.text.length;
+        }
+    }
 }