edytor 0.0.11 → 0.1.0-next.16

package/dist/block/block.svelte.js

@@ -1,102 +1,146 @@
 import { Text } from '../text/text.svelte.js';
 import { Edytor } from '../edytor.svelte.js';
-import {} from '../utils/json.js';
-import * as Y from 'yjs';
-import { batch, removeInlineBlock, addChildBlock, insertBlockAfter, insertBlockBefore, pushContentIntoBlock, mergeBlockBackward, mergeBlockForward, nestBlock, removeBlock, setBlock, splitBlock, addChildBlocks, unNestBlock, moveBlock, normalizeContent, groupContent, addInlineBlock, acceptSuggestedText, suggestText, deleteContentAtRange } from './block.utils.js';
-import { id } from '../utils.js';
-import { climb } from '../selection/selection.utils.js';
+import { batch, removeInlineBlock, addChildBlock, insertBlockAfter, insertBlockBefore, mergeBlockBackward, mergeBlockForward, nestBlock, removeBlock, setBlock, splitBlock, prepareSplit, duplicateBlock, prepareDuplicate, prepareSet, prepareMove, prepareMoves, prepareInsertAfter, prepareInsertBefore, prepareRemove, prepareMergeBackward, prepareMergeForward, prepareUnNest, prepareNest, prepareRemoveInline, preparePatch, patchData, prepareDeleteRange, addChildBlocks, pushContentIntoBlock, unNestBlock, moveBlock, moveBlocks, normalizeContent, addInlineBlock, textAfterAtom, blockOf, acceptSuggestedText, suggestText, deleteContentAtRange, normalizeChildren } from './block.utils.js';
+import { jsonBlockToSpec, jsonContentToItems } from '../utils/json.js';
 import { InlineBlock } from './inlineBlock.svelte.js';
-import { createReadonlyText } from '../components/readonlyElements.svelte.js';
-import { createReadonlyInlineBlock } from '../components/readonlyElements.svelte.js';
-export const getSetArray = (yBlock, key = 'children') => {
-    let yChildren = yBlock.get(key);
-    if (!yChildren) {
-        yChildren = new Y.Array();
-        yBlock.set(key, yChildren);
-    }
-    return yChildren;
-};
-export const getSetText = (yBlock) => {
-    let yText = yBlock.get('content');
-    if (!yText) {
-        yText = new Y.Text();
-        yBlock.set('content', yText);
-    }
-    return yText;
+import { revealed } from '../selection/replaceSelection.js';
+import { propsProxy } from '../session/props.js';
+/**
+ * An id-only block handle (§2.4 "Handles", R4): every getter reads the
+ * document index (transaction-aware), every mutator issues a command. The
+ * view keeps one per id (`edytor.idToBlock`); `node` is the element the core
+ * renders for it (O45).
+ */
+/** Mark an element inside a block's markup as non-editable chrome (`block.void`, a preview's too). */
+export const voidChrome = (node) => {
+    node.setAttribute('data-edytor-void', `true`);
+    node.style.userSelect = 'none';
+    node.setAttribute('contenteditable', 'false');
 };
 export class Block {
     readonly = false;
     edytor;
-    yBlock;
-    parent;
-    yChildren;
-    yContent;
-    children = $state([]);
-    content = $state([]);
-    id = $state(id('b'));
-    data = $state({});
+    id;
     node;
-    definition = $state({});
+    constructor(edytor, id) {
+        this.edytor = edytor;
+        this.id = id;
+    }
+    get isRoot() {
+        return this.id === 'root';
+    }
+    /** The typed document node — `null` for the root. */
+    get model() {
+        return this.isRoot ? null : this.edytor.facade.block(this.id);
+    }
+    /** The display parent (the root for a top-level block); none for the root or a dead block. */
+    get parent() {
+        const at = this.isRoot ? null : this.edytor.facade.positionOf(this.id);
+        return at ? this.edytor.idToBlock.block(at.parent ?? 'root') : undefined;
+    }
+    get children() {
+        const { facade, idToBlock } = this.edytor;
+        return facade.childrenIds(this.isRoot ? null : this.id).map(idToBlock.block);
+    }
+    /** Text segments and inline atoms, alternating, starting and ending with a text. */
+    get content() {
+        const handles = this.edytor.idToBlock;
+        let ordinal = 0;
+        return handles
+            .parts(this.id)
+            .map((part) => part.kind === 'text'
+            ? handles.text(this.id, ordinal++)
+            : handles.atom(this.id, part.item.id));
+    }
+    get type() {
+        return this.isRoot ? 'root' : (this.edytor.facade.blockTypeOf(this.id) ?? '');
+    }
+    /** Retype the block — the `setBlock` command (readonly, hooks, `dispatcher.last`). */
+    set type(value) {
+        this.setBlock({ value: { type: value } });
+    }
+    #data;
+    #props;
+    /**
+     * The block's `data` as a live proxy (`session/props.ts`): reads follow the
+     * document (reactive through the block's cell), writes are `patchData`
+     * commands. The root's is the document's data (`edytor.data`).
+     */
+    get data() {
+        return (this.#props ??= propsProxy(() => (this.isRoot ? this.edytor.docData() : this.#current()), (ops) => this.patchData({ ops }), (path) => this.edytor.facade.dataItemIds(this.isRoot ? null : this.id, path)));
+    }
+    #current() {
+        const { facade, cells } = this.edytor;
+        cells?.get(this.id);
+        const version = facade.version;
+        if (this.#data?.version !== version)
+            this.#data = { version, value: facade.blockDataOf(this.id) ?? {} };
+        return this.#data.value;
+    }
+    get definition() {
+        return this.edytor.definitionOf(this.type);
+    }
+    /**
+     * Replace the block's `data` — a `patchData` command of its root (readonly,
+     * hooks, `dispatcher.last`); `block.model.setData` is the raw document write.
+     */
+    setData = (data) => {
+        // Non-JSON values are coerced at the document boundary (`sanitizeWireJson`).
+        this.patchData({ ops: [{ path: [], value: data }] });
+    };
     get selected() {
-        this.yBlock._item?.id;
-        return this.edytor.selection.selectedBlocks.has(this) || this.edytor.selection.hasSelectedAll;
+        return this.edytor.selection.selectedBlocks.has(this);
     }
     get focused() {
         return this.edytor.selection.focusedBlocks.has(this) && !this.selected;
     }
-    get insideIsland() {
-        let insideIslands = false;
-        climb(this.parent, (block) => {
-            if (block.definition?.island) {
-                insideIslands = true;
-                return true;
-            }
-        });
-        return insideIslands;
+    /** May this block move at all — R5 `canPlace` without a destination (drag handles). */
+    get movable() {
+        return this.edytor.facade.canPlace([this.id]);
+    }
+    /**
+     * May text-level structural commands (convert, markdown shortcut, slash
+     * menu) apply: the block is movable — or the virtual paragraph of an
+     * emptied document, which a conversion creates with its kind
+     * (SW10-lists-3) — has no role of its own and renders its own content —
+     * a container (a list) is never converted, its items are (ZW-02).
+     */
+    get convertible() {
+        const { facade } = this.edytor;
+        const placeable = this.movable || facade.virtual() === this.id;
+        return placeable && this.rendersContent && !facade.isVoid(this.id) && !facade.isIsland(this.id);
     }
     get firstEditableText() {
-        if (this.content.length && this.content.some((part) => part instanceof Text && part.node)) {
-            return this.content.find((part) => part instanceof Text);
+        // Only a RENDERED text part is editable — a container's phantom
+        // content slot holds a Text with no `node`. Scan ALL children: the
+        // first child can be noneditable (a void divider) while a later
+        // child owns the text the caret must land in.
+        const own = this.content.find((part) => part instanceof Text && part.node != null);
+        if (own)
+            return own;
+        for (const child of this.children) {
+            const text = child.firstEditableText;
+            if (text)
+                return text;
         }
-        return this.children.at(0)?.firstEditableText;
+        return undefined;
     }
     get lastEditableText() {
-        if (this.content.length && this.content.some((part) => part instanceof Text && part.node)) {
-            return this.content.findLast((part) => part instanceof Text);
+        const own = this.content.findLast((part) => part instanceof Text && part.node != null);
+        if (own)
+            return own;
+        for (let i = this.children.length - 1; i >= 0; i--) {
+            const text = this.children[i].lastEditableText;
+            if (text)
+                return text;
         }
-        return this.children.at(-1)?.lastEditableText;
+        return undefined;
     }
-    #index = $state(null);
     get index() {
-        if (!this.parent) {
-            return 0;
-        }
-        if (this.#index === null) {
-            return this.parent.children.indexOf(this);
-        }
-        return this.#index;
-    }
-    set index(value) {
-        this.#index = value;
-    }
-    #type = $state('paragraph');
-    get type() {
-        return this.#type;
-    }
-    set type(value) {
-        this.yBlock.set('type', value);
-        this.#type = value;
-        this.definition = this.edytor.getBlockDefinition('block', value);
+        return (!this.isRoot && this.edytor.facade.positionOf(this.id)?.index) || 0;
     }
-    #depth = $state(null);
     get depth() {
-        if (!this.parent) {
-            return 0;
-        }
-        if (this.#depth === null) {
-            return this.parent.depth + 1;
-        }
-        return this.#depth;
+        return this.parent ? this.parent.depth + 1 : 0;
     }
     get path() {
         const start = [this.index];
@@ -107,324 +151,249 @@ export class Block {
         }
         return start.toReversed();
     }
-    get isRoot() {
-        return this === this.edytor.root;
+    /** The block is visible in the document (a dead handle answers false). */
+    get isInTree() {
+        return this.isRoot || this.edytor.facade.isVisibleBlock(this.id);
     }
-    #suggestions = $state(null);
+    /**
+     * @deprecated `edytor.suggestions` with `{ end: block.id }`. The content of
+     * this block's latest `end` suggestion, as parts (a text's runs, or an
+     * atom); setting it replaces this block's `end` suggestions, `null` drops them.
+     */
     get suggestions() {
-        if (!this.#suggestions) {
+        const content = this.edytor.suggestions?.at(this.id).end.at(-1)?.content[0]?.content;
+        if (!content?.length)
             return null;
-        }
-        return this.#suggestions.map((suggestion) => {
-            if ('type' in suggestion) {
-                return createReadonlyInlineBlock({
-                    block: suggestion,
-                    edytor: this.edytor,
-                    parent: this
-                });
-            }
-            else {
-                return createReadonlyText({
-                    value: suggestion,
-                    parent: this,
-                    edytor: this.edytor
-                });
-            }
-        });
+        const parts = [];
+        for (const part of content)
+            if ('type' in part)
+                parts.push(part);
+            else if (Array.isArray(parts.at(-1)))
+                parts.at(-1).push(part);
+            else
+                parts.push([part]);
+        return parts;
     }
     set suggestions(value) {
-        this.#suggestions = value;
+        const { suggestions } = this.edytor;
+        for (const suggestion of suggestions.at(this.id).end)
+            suggestion.discard();
+        if (value)
+            suggestions.add({ end: this.id }, [{ type: this.type, content: value.flat() }]);
     }
     get nextBlock() {
-        if (!this.parent) {
-            return null;
-        }
-        return this.parent.children[this.index + 1];
+        return this.parent ? this.parent.children[this.index + 1] : null;
     }
     get previousBlock() {
-        if (!this.parent) {
-            return null;
-        }
-        return this.parent.children[this.index - 1];
+        return this.parent ? this.parent.children[this.index - 1] : null;
     }
     get closestPreviousBlock() {
-        const previousBlock = this.previousBlock;
-        if (this.index === 0) {
-            return this.parent instanceof Block ? this.parent : null;
-        }
-        else if (previousBlock) {
-            if (previousBlock?.children.length > 0) {
-                let closestPreviousBlock = previousBlock.children.at(-1) || null;
-                while (closestPreviousBlock && closestPreviousBlock?.children.length > 0) {
-                    closestPreviousBlock = closestPreviousBlock.children.at(-1) || null;
-                }
-                return closestPreviousBlock || null;
-            }
-            else {
-                return this.previousBlock;
-            }
-        }
-        return null;
+        return this.edytor.blockBefore(this);
     }
     get closestNextBlock() {
-        if (this.hasChildren) {
-            return this.children.at(0) || null;
-        }
-        if (this.nextBlock || this.definition.island || this.definition.void) {
-            return this.nextBlock;
-        }
-        else {
-            if (this.parent instanceof Block) {
-                let parent = this.parent;
-                let nextBlock = parent.nextBlock;
-                while (!nextBlock && parent instanceof Block) {
-                    if (parent.parent instanceof Block) {
-                        parent = parent.parent;
-                        nextBlock = parent.nextBlock;
-                    }
-                    else {
-                        return null;
-                    }
-                }
-                return nextBlock;
-            }
-            else {
-                return null;
-            }
-        }
-    }
-    get deepestChild() {
-        if (this.children.length) {
-            return this.children.at(-1).deepestChild;
-        }
-        return this;
+        return this.edytor.blockAfter(this);
     }
     get hasChildren() {
         return this.children.length > 0;
     }
+    /** It shows content: text or an inline atom (a block holding only a mention is not empty). */
     get hasContent() {
-        return (this.content.length > 0 && this.content.some((part) => part instanceof Text && !part.isEmpty));
+        return this.content.some((part) => !(part instanceof Text) || !part.isEmpty);
     }
+    /** It holds nothing: no content and no children (the emptiness Turn into reads, `holdsNothing`). */
     get isEmpty() {
         return !this.hasContent && !this.hasChildren;
     }
+    get isNested() {
+        return (this.parent && this.parent.type !== 'root') || false;
+    }
+    /** This block's JSON — the document's one serializer (`facade.blockJSON`, L14). */
     get value() {
-        const children = this.children.map((child) => child.value);
-        const content = this.content.map((part) => part.value).flat();
-        const value = {
-            type: this.type,
-            id: this.id,
-            children,
-            content
-        };
-        if (Object.keys(this.data).length > 0) {
-            value.data = this.data;
-        }
-        if (!children.length) {
-            delete value.children;
-        }
-        if (!content.length) {
-            delete value.content;
-        }
-        return value;
+        if (!this.isRoot)
+            return this.edytor.facade.blockJSON(this.id);
+        const { data = {}, children } = this.edytor.facade.toJSON();
+        return { type: 'root', id: 'root', data, ...(children.length > 0 && { children }) };
+    }
+    isChildOf(block) {
+        for (let parent = this.parent; parent; parent = parent.parent)
+            if (parent === block)
+                return true;
+        return false;
+    }
+    /** Whether this kind renders its own content slot — the adopted capability (R5, O22). */
+    get rendersContent() {
+        return this.edytor.document.rendersContent(this.type);
+    }
+    /**
+     * A container: it shows only its children (a list), neither void nor an
+     * island — the document's container rule (YW-02). Its items hold what it
+     * shows; it is never converted (`convertible`).
+     */
+    get isContainer() {
+        const { facade } = this.edytor;
+        return !this.rendersContent && !facade.isVoid(this.id) && !facade.isIsland(this.id);
     }
+    /**
+     * An item of a list: its parent is a container whose items are a kind of
+     * their own (a `list-item` in an `unordered-list`), not the document's
+     * default — a column of paragraphs is no list. Turned into another kind,
+     * an item leaves its list; <kbd>Enter</kbd> in an empty one ends it.
+     */
+    get isListItem() {
+        const { parent, edytor } = this;
+        if (!parent?.isContainer)
+            return false;
+        const item = edytor.defaultChild(parent);
+        return this.type === item && item !== edytor.document.defaultChild(null);
+    }
+    /**
+     * The list this block shows in: its container when it is an item
+     * (`isListItem`), or — an item outdented out of a nested list into the
+     * item holding it (SW8-roles-4) — the list of the items of its kind it
+     * sits under. <kbd>Enter</kbd> in an empty one outdents it; the menus
+     * name it by the list's `itemKind`.
+     */
+    get list() {
+        if (this.isListItem)
+            return this.parent ?? undefined;
+        return this.parent?.type === this.type ? this.parent.list : undefined;
+    }
+    /**
+     * The first text of this block's own content — none for a kind that
+     * does not render its content (a list container, a divider): its slot
+     * is never displayed, so no caret or endpoint may land there. A block
+     * without a content slot (the root) answers with its first child's.
+     */
     get firstText() {
-        if (this.content.length) {
-            return this.content.find((part) => part instanceof Text);
-        }
-        return this.children.at(0)?.firstText;
+        if (!this.content.length)
+            return this.children.at(0)?.firstText;
+        return this.rendersContent ? this.content.find((p) => p instanceof Text) : undefined;
     }
+    /** The last text of this block's own content (see {@link firstText}). */
     get lastText() {
-        if (this.content.length) {
-            return this.content.findLast((part) => part instanceof Text);
-        }
-        return this.children.at(0).lastText;
-    }
-    observeContent = observeContent.bind(this);
-    observeChildren = observeChildren.bind(this);
-    batch = batch.bind(this);
-    addChildBlock = this.batch('addChildBlock', addChildBlock.bind(this));
-    addChildBlocks = this.batch('addChildBlocks', addChildBlocks.bind(this));
-    insertBlockAfter = this.batch('insertBlockAfter', insertBlockAfter.bind(this));
-    insertBlockBefore = this.batch('insertBlockBefore', insertBlockBefore.bind(this));
-    splitBlock = this.batch('splitBlock', splitBlock.bind(this));
-    removeBlock = this.batch('removeBlock', removeBlock.bind(this));
-    unNestBlock = this.batch('unNestBlock', unNestBlock.bind(this));
-    mergeBlockBackward = this.batch('mergeBlockBackward', mergeBlockBackward.bind(this));
-    mergeBlockForward = this.batch('mergeBlockForward', mergeBlockForward.bind(this));
-    nestBlock = this.batch('nestBlock', nestBlock.bind(this));
-    setBlock = this.batch('setBlock', setBlock.bind(this));
-    moveBlock = this.batch('moveBlock', moveBlock.bind(this));
-    pushContentIntoBlock = this.batch('pushContentIntoBlock', pushContentIntoBlock.bind(this));
-    removeInlineBlock = this.batch('removeInlineBlock', removeInlineBlock.bind(this));
-    addInlineBlock = this.batch('addInlineBlock', addInlineBlock.bind(this));
-    normalizeContent = this.batch('normalizeContent', normalizeContent.bind(this));
-    suggestText = this.batch('suggestText', suggestText.bind(this));
-    acceptSuggestedText = this.batch('acceptSuggestedText', acceptSuggestedText.bind(this));
-    deleteContentAtRange = this.batch('deleteContentAtRange', deleteContentAtRange.bind(this));
-    void = (node) => {
-        node.setAttribute('data-edytor-void', `true`);
-        node.style.userSelect = 'none';
-        node.contentEditable = 'false';
-    };
-    constructor({ parent, block, yBlock, edytor }) {
-        this.parent = parent;
-        this.edytor = edytor;
-        this.id = (yBlock?.doc && yBlock?.get('id')) || id('b');
-        if (block !== undefined) {
-            this.#type = block.type;
-            this.data = block.data || {};
-            // Initialize children
-            this.children = (block.children || []).map((child, index) => {
-                const block = new Block({ parent: this, edytor, block: child });
-                block.index = index;
-                return block;
-            });
-            const groupedContent = groupContent(block.content);
-            if (!groupedContent.length) {
-                groupedContent.push([{ text: '' }]);
+        if (!this.content.length)
+            return this.children.at(-1)?.lastText;
+        return this.rendersContent ? this.content.findLast((p) => p instanceof Text) : undefined;
+    }
+    addChildBlock = batch('addChildBlock', addChildBlock);
+    addChildBlocks = batch('addChildBlocks', addChildBlocks);
+    insertBlockAfter = batch('insertBlockAfter', insertBlockAfter, prepareInsertAfter, blockOf);
+    insertBlockBefore = batch('insertBlockBefore', insertBlockBefore, prepareInsertBefore, blockOf);
+    splitBlock = batch('splitBlock', splitBlock, prepareSplit, blockOf);
+    duplicateBlock = batch('duplicateBlock', duplicateBlock, prepareDuplicate, blockOf);
+    removeBlock = batch('removeBlock', removeBlock, prepareRemove);
+    unNestBlock = revealed(batch('unNestBlock', unNestBlock, prepareUnNest));
+    mergeBlockBackward = batch('mergeBlockBackward', mergeBlockBackward, prepareMergeBackward, blockOf);
+    mergeBlockForward = batch('mergeBlockForward', mergeBlockForward, prepareMergeForward, blockOf);
+    nestBlock = revealed(batch('nestBlock', nestBlock, prepareNest));
+    setBlock = batch('setBlock', setBlock, prepareSet);
+    moveBlock = revealed(batch('moveBlock', moveBlock, prepareMove));
+    moveBlocks = revealed(batch('moveBlocks', moveBlocks, prepareMoves));
+    pushContentIntoBlock = batch('pushContentIntoBlock', pushContentIntoBlock);
+    removeInlineBlock = batch('removeInlineBlock', removeInlineBlock, prepareRemoveInline);
+    patchData = batch('patchData', patchData, preparePatch);
+    addInlineBlock = batch('addInlineBlock', addInlineBlock, undefined, textAfterAtom);
+    normalizeContent = batch('normalizeContent', normalizeContent);
+    normalizeChildren = batch('normalizeChildren', normalizeChildren);
+    /** @deprecated `edytor.suggestions.add({ end: block.id }, …)`. */
+    suggestText = (payload) => suggestText.call(this, payload);
+    /** @deprecated `suggestion.accept()`. */
+    acceptSuggestedText = () => acceptSuggestedText.call(this);
+    deleteContentAtRange = batch('deleteContentAtRange', deleteContentAtRange, prepareDeleteRange);
+    /** Mark an element inside the block's markup as non-editable chrome (a header, a caption bar). */
+    void = voidChrome;
+    /**
+     * The text segment that displays block offset `offset`, and the offset in
+     * it — the one offset → segment mapper over the committed parts (a
+     * boundary before an atom reads the text before it; past the end, the
+     * last text's end).
+     */
+    textAtOffset = (offset) => {
+        let at = 0;
+        let hit = null;
+        for (const part of this.content) {
+            if (!(part instanceof Text)) {
+                if (offset <= at)
+                    return hit;
+                at += 1;
             }
-            this.content = groupedContent.map((part, index) => {
-                const isInlineBlock = 'type' in part;
-                if (isInlineBlock) {
-                    const block = new InlineBlock({ parent: this, block: part });
-                    block.index = index;
-                    return block;
-                }
-                else {
-                    const text = new Text({ parent: this, content: part });
-                    text.index = index;
-                    return text;
-                }
-            });
-            this.yChildren = Y.Array.from(this.children.map((child) => child.yBlock));
-            this.yContent = Y.Array.from(this.content.map((part) => (part instanceof Text ? part.yText : part.yBlock)));
-            // If the block is a root block we need to set the yBlock to the yRootBlock
-            if (block.type === 'root') {
-                this.yBlock = yBlock;
-                this.yBlock.set('id', this.id);
-                this.yBlock.set('type', block.type);
-                this.yBlock.set('data', this.data);
-                this.yBlock.set('children', this.yChildren);
-                this.yBlock.set('content', this.yContent);
+            else if (offset <= at + part.length) {
+                return { text: part, offset: Math.max(0, offset - at) };
             }
             else {
-                this.yBlock = new Y.Map(Object.entries({
-                    type: block.type,
-                    id: this.id,
-                    data: this.data,
-                    children: this.yChildren,
-                    content: this.yContent
-                }));
+                hit = { text: part, offset: part.length };
+                at += part.length;
             }
         }
-        else {
-            this.yBlock = yBlock;
-            this.#type = this.yBlock.get('type') || this.edytor.getDefaultBlock(parent);
-            this.data = this.yBlock.get('data') || {};
-            this.yChildren = getSetArray(this.yBlock);
-            this.yContent = getSetArray(this.yBlock, 'content');
-            this.children = this.yChildren.map((child, index) => {
-                const block = new Block({ parent: this, edytor, yBlock: child });
-                block.index = index;
-                return block;
-            });
-            this.normalizeContent();
-            this.content = this.yContent.map((part, index) => {
-                if (part instanceof Y.Map) {
-                    const block = new InlineBlock({ parent: this, yBlock: part });
-                    block.index = index;
-                    return block;
-                }
-                else {
-                    const text = new Text({ parent: this, yText: part });
-                    text.index = index;
-                    return text;
-                }
-            });
-        }
-        this.definition = this.edytor.getBlockDefinition('block', this.#type);
-        this.edytor.idToBlock.set(this.id, this);
-        if (!this.edytor.readonly) {
-            this.yChildren.observe(this.observeChildren);
-            this.yContent.observe(this.observeContent);
+        return hit;
+    };
+    // ── JSON insertion (K5: specs are data; `new Block({block})` is gone) ──
+    /**
+     * Insert children at `index`: a JSON spec is created (its id kept, minted
+     * when missing); a block handle moves there with its identity.
+     */
+    insertChildren = (index, blocks) => {
+        const { facade } = this.edytor;
+        const parent = this.isRoot ? null : this.id;
+        blocks.forEach((block, k) => {
+            if (block instanceof Block)
+                block.model?.moveTo({ parent: this.model, index: index + k });
+            else
+                facade.insertBlock({ parent, index: index + k }, jsonBlockToSpec(block));
+        });
+    };
+    /** Delete `length` visible children from `index`, each with its subtree (a document delete). */
+    deleteChildren = (index, length = 1) => {
+        const ids = this.edytor.facade.childrenIds(this.isRoot ? null : this.id);
+        for (const id of ids.slice(index, index + length).reverse())
+            this.edytor.facade.block(id).delete({ keepChildren: false });
+    };
+    /**
+     * Insert content before part `index` (a text segment or an inline atom):
+     * each entry is a text's runs or an atom, as JSON.
+     */
+    insertParts = (index, parts) => {
+        const model = this.model;
+        if (!model)
+            return;
+        const all = this.edytor.idToBlock.parts(this.id);
+        let at = all[index]?.start ?? model.length;
+        for (const item of jsonContentToItems(parts.flat())) {
+            if (item.kind === 'inline')
+                model.insertInline(at++, item);
+            else if (item.text) {
+                model.insertText(at, item.text, item.marks);
+                at += item.text.length;
+            }
         }
-    }
+    };
+    /** The declared view state (`open` on a `details`) the block's last element held. */
+    #viewState = [];
+    /**
+     * Register the element the core rendered for this block (O45) and run the
+     * attach hooks. A re-rendered block (moved, re-parented) keeps its declared
+     * view state (R11): an open toggle stays open.
+     */
     attach = (node) => {
+        const names = this.definition.viewState ?? [];
+        const read = (from) => names.flatMap((name) => (from.hasAttribute(name) ? [[name, from.getAttribute(name)]] : []));
+        for (const [name, value] of this.node ? read(this.node) : this.#viewState)
+            if (names.includes(name))
+                node.setAttribute(name, value);
         this.node = node;
-        node.setAttribute('data-edytor-id', `${this.id}`);
-        node.setAttribute('data-edytor-block', `true`);
-        node.setAttribute('data-edytor-type', `${this.#type}`);
-        const pluginDestroy = this.edytor.plugins.reduce((acc, plugin) => {
+        const release = this.edytor.surface.register(node, 'block', this.id);
+        const onDestroy = this.edytor.plugins.flatMap((plugin) => {
             const action = plugin.onBlockAttached?.({ node, block: this });
-            action && acc.push(action);
-            return acc;
-        }, []);
-        if (this.definition.void) {
-            this.void(node);
-        }
+            return typeof action === 'function' ? [action] : [];
+        });
         return {
             destroy: () => {
-                this.yChildren.unobserve(this.observeChildren);
-                this.yContent.unobserve(this.observeContent);
-                this.edytor.idToBlock.delete(this.id);
-                pluginDestroy.forEach((destroy) => destroy());
+                this.#viewState = read(node);
+                if (this.node === node)
+                    this.node = undefined;
+                release();
+                onDestroy.forEach((destroy) => destroy());
             }
         };
     };
 }
-export function observeChildren(event) {
-    let start = 0;
-    event.delta.forEach(({ retain, delete: _delete, insert }) => {
-        if (retain) {
-            start += retain;
-        }
-        if (_delete) {
-            this.children.splice(start, _delete);
-        }
-        if (Array.isArray(insert)) {
-            for (let i = 0; i < insert.length; i++) {
-                const yBlock = insert[i];
-                const block = this.edytor.idToBlock.get(yBlock.get('id')) ||
-                    new Block({
-                        parent: this,
-                        edytor: this.edytor,
-                        yBlock
-                    });
-                this.children.splice(start, 0, block);
-                start += 1;
-            }
-        }
-    });
-    this.children.forEach((child, index) => {
-        child.index = index;
-    });
-}
-export function observeContent(event) {
-    let start = 0;
-    event.delta.forEach(({ retain, delete: _delete, insert }) => {
-        if (retain) {
-            start += retain;
-        }
-        if (_delete) {
-            this.content.splice(start, _delete);
-        }
-        if (Array.isArray(insert)) {
-            for (let i = 0; i < insert.length; i++) {
-                const yElement = insert[i];
-                if (yElement instanceof Y.Text) {
-                    const text = new Text({ parent: this, yText: yElement });
-                    this.content.splice(start, 0, text);
-                }
-                else {
-                    const inlineBlock = new InlineBlock({ parent: this, yBlock: yElement });
-                    this.content.splice(start, 0, inlineBlock);
-                }
-                start += 1;
-            }
-        }
-    });
-    this.content.forEach((part, index) => {
-        part.index = index;
-    });
-}