edytor 0.0.7 → 0.0.9

package/dist/block/block.utils.js

@@ -0,0 +1,499 @@
+import { Block } from './block.svelte.js';
+import { Text } from '../text/text.svelte.js';
+import { prevent } from '../utils.js';
+import { InlineBlock } from './inlineBlock.svelte.js';
+import * as Y from 'yjs';
+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,
+                block: this,
+                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,
+                block: this
+            });
+        }
+        return result;
+    };
+}
+export function addChildBlock({ block, index = this.yChildren.length }) {
+    const newBlock = new Block({ parent: this, edytor: this.edytor, block });
+    this.yChildren.insert(index, [newBlock.yBlock]);
+    return newBlock;
+}
+export function addChildBlocks({ blocks, index = this.yChildren.length }) {
+    const newBlocks = blocks.map((block) => new Block({ parent: this, edytor: this.edytor, block }));
+    this.yChildren.insert(index, newBlocks.map((block) => block.yBlock));
+    return newBlocks;
+}
+export function insertBlockAfter({ block }) {
+    if (!this.parent) {
+        return null;
+    }
+    this.yChildren.delete(0, this.children.length);
+    return this.parent.addChildBlock({
+        block: {
+            ...block,
+            children: this.value.children
+        },
+        index: this.index + 1
+    });
+}
+export function insertBlockBefore({ block }) {
+    if (!this.parent) {
+        return null;
+    }
+    return this.parent.addChildBlock({
+        block: {
+            ...block,
+            children: this.value.children
+        },
+        index: this.index
+    });
+}
+export function splitBlock({ index, text }) {
+    if (!text || !this.parent) {
+        return null;
+    }
+    const splittedContent = text.splitText({ index });
+    const indexOfContent = this.content.indexOf(text);
+    const remainingContent = this.content.slice(indexOfContent + 1).map((part) => part.value);
+    const content = [splittedContent, ...remainingContent].flat();
+    const hasChildren = this.children.length >= 1;
+    // Add the current children to the new block if any
+    this.yContent.delete(indexOfContent + 1, this.content.length - indexOfContent - 1);
+    const newBlock = this.parent.addChildBlock({
+        block: {
+            type: this.edytor.getDefaultBlock(this.parent),
+            content,
+            children: this.value.children
+        },
+        index: this.parent.children.indexOf(this) + 1
+    });
+    // If the block has children, we need to remove its children and insert them into the new block
+    if (hasChildren) {
+        this.yChildren.delete(0, this.children.length);
+    }
+    return newBlock;
+}
+export function removeBlock({ keepChildren = false } = { keepChildren: false }) {
+    if (!this.parent) {
+        return;
+    }
+    // Get the current index from yChildren array since this.index may be stale when removing multiple blocks at once
+    const index = this.parent.yChildren.toArray().indexOf(this.yBlock);
+    if (this.yBlock._item?.deleted) {
+        return;
+    }
+    this.parent.yChildren.delete(index, 1);
+    if (keepChildren && this.hasChildren) {
+        this.parent.yChildren.insert(this.index, this.value.children.map((child) => {
+            const newBlock = new Block({
+                parent: this.parent,
+                edytor: this.edytor,
+                block: child
+            });
+            return newBlock.yBlock;
+        }));
+    }
+}
+export function mergeBlockBackward() {
+    if (!this.parent) {
+        return null;
+    }
+    const { closestPreviousBlock, isEmpty } = this;
+    const { children = [] } = this.value;
+    if (!closestPreviousBlock) {
+        return this.isEmpty ? this.mergeBlockForward() : null;
+    }
+    // Add the current content to the previous block content
+    closestPreviousBlock.pushContentIntoBlock({ value: this.content });
+    if (!isEmpty) {
+        // If the current block has children, we need to unnest them and insert them into the current parent
+        if (children.length > 0) {
+            // Unnest children if any
+            this.parent.yChildren.insert(this.index, children.map((child) => {
+                const newBlock = new Block({
+                    parent: this.parent,
+                    edytor: this.edytor,
+                    block: child
+                });
+                return newBlock.yBlock;
+            }));
+        }
+    }
+    // Remove the current block from its position
+    this.parent.yChildren.delete(this.index + this.children.length, 1);
+    return closestPreviousBlock;
+}
+export function mergeBlockForward() {
+    if (!this.parent) {
+        return null;
+    }
+    const nextBlock = this.closestNextBlock;
+    if (!nextBlock) {
+        return null;
+    }
+    this.pushContentIntoBlock({ value: nextBlock.content });
+    if (nextBlock.children.length > 0 && nextBlock.parent) {
+        nextBlock.parent.yChildren.insert(nextBlock.index + 1, nextBlock.children.map((child) => {
+            const newBlock = new Block({
+                parent: nextBlock.parent,
+                edytor: this.edytor,
+                block: child.value
+            });
+            return newBlock.yBlock;
+        }));
+    }
+    nextBlock.parent?.yChildren.delete(nextBlock.index, 1);
+    return nextBlock;
+}
+export function moveBlock({ path }) {
+    if (!path.length || path.some((p) => isNaN(p) || p < 0) || !this.parent) {
+        return null;
+    }
+    const lastIndex = path.pop();
+    let currentBlock = this.edytor.root;
+    while (path.length > 0) {
+        const index = path.shift();
+        if (typeof index !== 'number' || isNaN(index))
+            break;
+        currentBlock = currentBlock.children[index];
+    }
+    if (!currentBlock) {
+        return null;
+    }
+    this.edytor.idToBlock.delete(this.id);
+    this.parent.yChildren.delete(this.index, 1);
+    const newBlock = new Block({
+        parent: currentBlock,
+        edytor: this.edytor,
+        block: this.value
+    });
+    currentBlock.yChildren.insert(lastIndex, [newBlock.yBlock]);
+    return newBlock;
+}
+export function unNestBlock() {
+    const { parent, index } = this;
+    if (!parent) {
+        return null;
+    }
+    const grandParent = parent.parent;
+    if (!grandParent) {
+        return null;
+    }
+    const newBlock = new Block({
+        parent: grandParent,
+        edytor: this.edytor,
+        block: this.value
+    });
+    grandParent.yChildren.insert(parent.index + 1, [newBlock.yBlock]);
+    parent.yChildren.delete(index, 1);
+    return newBlock;
+}
+export function nestBlock() {
+    const previousBlock = this.previousBlock;
+    if (!previousBlock ||
+        previousBlock?.definition?.void ||
+        previousBlock?.definition?.island ||
+        !this.parent) {
+        return null;
+    }
+    const newBlock = new Block({
+        parent: previousBlock,
+        edytor: this.edytor,
+        block: { ...this.value, children: [] }
+    });
+    previousBlock.yChildren.insert(previousBlock.children.length, [newBlock.yBlock]);
+    if (this.value.children && this.value.children.length) {
+        previousBlock.yChildren.insert(previousBlock.children.length + 1, this.value.children.map((child) => {
+            const newBlock = new Block({
+                parent: previousBlock,
+                edytor: this.edytor,
+                block: child
+            });
+            return newBlock.yBlock;
+        }));
+    }
+    this.parent.yChildren.delete(this.index, 1);
+    return newBlock;
+}
+export function setBlock({ value }) {
+    this.edytor.doc.transact(() => {
+        if (value.type) {
+            this.type = value.type;
+        }
+        if (value.data) {
+            this.yBlock.set('data', value.data);
+        }
+        if (value.content) {
+            let newContentCount = value.content.length;
+            let oldContentCount = this.content.length;
+            const contentToRemove = oldContentCount - newContentCount;
+            contentToRemove && this.yContent.delete(newContentCount, contentToRemove);
+            const groupedContent = groupContent(value.content);
+            this.yContent.insert(0, groupedContent.map((part) => {
+                if ('type' in part) {
+                    const newInlineBlock = new InlineBlock({
+                        parent: this,
+                        block: part
+                    });
+                    return newInlineBlock.yBlock;
+                }
+                else {
+                    const newText = new Text({
+                        parent: this,
+                        content: part
+                    });
+                    return newText.yText;
+                }
+            }));
+        }
+        else {
+            this.yContent.delete(0, this.content.length);
+        }
+        if (value.children) {
+            let newChildrenCount = value.children.length;
+            let oldChildrenCount = this.children.length;
+            const childrenToRemove = oldChildrenCount - newChildrenCount;
+            this.children = value.children.map((child, i) => {
+                const existingChild = this.children[i];
+                if (existingChild) {
+                    existingChild.setBlock({ value: child });
+                    return existingChild;
+                }
+                else {
+                    return this.addChildBlock({ block: child, index: i });
+                }
+            });
+            childrenToRemove && this.yChildren.delete(newChildrenCount, childrenToRemove);
+        }
+        else {
+            this.yChildren.delete(0, this.children.length);
+        }
+    });
+}
+export function pushContentIntoBlock({ value }) {
+    const content = this.content.filter((part) => part instanceof Text ? !part.yText._item?.deleted : !part.yBlock._item?.deleted);
+    let index = content.length;
+    for (const part of value) {
+        if (part instanceof InlineBlock) {
+            // is an inline block needed to be added
+            const newInlineBlock = new InlineBlock({
+                parent: this,
+                block: part
+            });
+            this.yContent.insert(index, [newInlineBlock.yBlock]);
+            index++;
+        }
+        else {
+            const lastPart = content[index - 1];
+            if (lastPart instanceof Text) {
+                const delta = part.yText.toDelta();
+                lastPart.yText.applyDelta([{ retain: lastPart.yText.length }, ...delta]);
+            }
+            else {
+                const newText = new Text({
+                    parent: this,
+                    content: part.value
+                });
+                this.yContent.insert(index, [newText.yText]);
+                index++;
+            }
+        }
+    }
+    console.log(this.yContent.toArray());
+}
+export function removeInlineBlock({ index }) {
+    const part = this.content.at(index);
+    if (part && part instanceof InlineBlock) {
+        this.yContent.delete(index, 1);
+        this.normalizeContent();
+    }
+}
+export const groupContent = (content) => {
+    const isInlineJSONBlock = (part) => {
+        return part ? 'type' in part : false;
+    };
+    // this function group JSONBlock.content texts together in order to avoid having successive inline Y.Text as it would be ineficient.
+    if (!content)
+        return [[{ text: '' }]];
+    const groupedContent = content.reduce((acc, part) => {
+        const isInlineBlock = 'type' in part;
+        if (isInlineBlock) {
+            if (isInlineJSONBlock(acc.at(-1))) {
+                // Make sure that two consecutive inline blocks are separated by a text block
+                acc.push([{ text: '' }]);
+            }
+            acc.push(part);
+        }
+        else {
+            const lastPart = acc.at(-1);
+            if (acc.length && lastPart && Array.isArray(lastPart)) {
+                lastPart.push(part);
+            }
+            else {
+                acc.push([part]);
+            }
+        }
+        return acc;
+    }, []);
+    if (isInlineJSONBlock(groupedContent.at(0))) {
+        // Make sure that the first part is an inline block
+        groupedContent.unshift([{ text: '' }]);
+    }
+    if (isInlineJSONBlock(groupedContent.at(-1))) {
+        // Make sure that the last part is a text block
+        groupedContent.push([{ text: '' }]);
+    }
+    return groupedContent;
+};
+export function addInlineBlock({ index, block, text }) {
+    // TODO
+    const newInlineBlock = new InlineBlock({
+        parent: this,
+        block
+    });
+    const newText = new Text({
+        parent: this,
+        content: text.splitText({ index })
+    });
+    this.yContent.insert(text.index + 1, [newInlineBlock.yBlock, newText.yText]);
+    this.normalizeContent();
+    return newText;
+}
+export function normalizeContent() {
+    const content = this.yContent.toArray().filter((part) => !part._item?.deleted);
+    // Ensure content starts with Text
+    if (content.length === 0 || !(content[0] instanceof Y.Text)) {
+        const emptyText = new Text({
+            parent: this,
+            content: [{ text: '' }]
+        });
+        this.yContent.insert(0, [emptyText.yText]);
+        return this.normalizeContent();
+    }
+    // Ensure content ends with Text
+    if (!(content[content.length - 1] instanceof Y.Text)) {
+        const emptyText = new Text({
+            parent: this,
+            content: [{ text: '' }]
+        });
+        this.yContent.insert(content.length, [emptyText.yText]);
+        return this.normalizeContent();
+    }
+    // First handle consecutive text blocks
+    const consecutiveTexts = content.reduce((acc, part, index) => {
+        const nextPart = content[index + 1];
+        if (part instanceof Y.Text && nextPart instanceof Y.Text) {
+            acc.push([part, nextPart]);
+        }
+        return acc;
+    }, []);
+    if (consecutiveTexts.length > 0) {
+        const [first, second] = consecutiveTexts[0];
+        const delta = second.toDelta();
+        first.applyDelta([{ retain: first.length }, ...delta]);
+        this.yContent.delete(content.indexOf(second), 1);
+        return this.normalizeContent();
+    }
+    // Then handle consecutive inline blocks
+    const consecutiveInlineBlocks = content.reduce((acc, part, index) => {
+        const nextPart = content[index + 1];
+        if (part instanceof Y.Map && nextPart instanceof Y.Map) {
+            acc.push([part, nextPart]);
+        }
+        return acc;
+    }, []);
+    if (consecutiveInlineBlocks.length > 0) {
+        const [first, second] = consecutiveInlineBlocks[0];
+        const emptyText = new Text({
+            parent: this,
+            content: [{ text: '' }]
+        });
+        const index = content.indexOf(second);
+        this.yContent.insert(index, [emptyText.yText]);
+        return this.normalizeContent();
+    }
+    const pluginNormalization = this.definition?.normalizeContent?.({ block: this });
+    if (pluginNormalization) {
+        pluginNormalization();
+        this.normalizeContent();
+    }
+}
+export function suggestText({ value }) {
+    if (typeof value === 'string') {
+        this.suggestions = [[{ text: value }]];
+    }
+    else if (value) {
+        this.suggestions = groupContent(value);
+    }
+    else {
+        this.suggestions = null;
+    }
+}
+export function acceptSuggestedText() {
+    if (!this.suggestions) {
+        return;
+    }
+    const editableSuggestions = this.suggestions.map((part) => {
+        if ('type' in part) {
+            return new InlineBlock({
+                parent: this,
+                block: part.value
+            });
+        }
+        else {
+            return new Text({
+                parent: this,
+                content: part.value
+            });
+        }
+    });
+    this.yContent.insert(this.content.length, editableSuggestions.map((suggestion) => 'yBlock' in suggestion ? suggestion.yBlock : suggestion.yText));
+    this.suggestions = null;
+    this.normalizeContent();
+}
+export function deleteContentAtRange({ start, end }) {
+    const [startIndex, startOffset] = start;
+    const [endIndex, endOffset] = end;
+    let numberToDelete = 0;
+    this.content.slice(startIndex, endIndex + 1).forEach((part, index) => {
+        const isFirstPart = index === 0;
+        const isLastPart = index === endIndex - startIndex;
+        if (part instanceof Text) {
+            if (isFirstPart) {
+                // Delete from offset to end
+                part.yText.delete(startOffset, part.yText.length - startOffset);
+            }
+            else if (isLastPart) {
+                // Delete from start to offset
+                part.yText.delete(0, endOffset);
+            }
+            else {
+                numberToDelete++;
+                // Delete entire text element
+            }
+        }
+        else {
+            // For inline blocks, always delete the entire element
+            numberToDelete++;
+        }
+    });
+    this.yContent.delete(startIndex + 1, numberToDelete);
+    this.normalizeContent();
+}

package/dist/block/content.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { YBlock } from '../utils/json.js';
+import type { Block } from './block.svelte.js';
+import { InlineBlock } from './inlineBlock.svelte.js';
+import { Text } from '../text/text.svelte.js';
+import * as Y from 'yjs';
+export declare class Content {
+    parent: Block;
+    content: (Text | InlineBlock)[];
+    constructor({ parent, content }: {
+        parent: Block;
+        content: (Text | InlineBlock)[];
+    });
+}
+export declare function observeContent(this: Content, event: Y.YArrayEvent<YBlock | Y.Text>): void;

package/dist/block/content.svelte.js

@@ -0,0 +1,40 @@
+import { InlineBlock } from './inlineBlock.svelte.js';
+import { Text } from '../text/text.svelte.js';
+import * as Y from 'yjs';
+import { batch, normalizeContent } from './block.utils.js';
+export class Content {
+    parent;
+    content;
+    constructor({ parent, content }) {
+        this.parent = parent;
+        this.content = content;
+    }
+}
+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.parent, yText: yElement });
+                    this.content.splice(start, 0, text);
+                }
+                else {
+                    const inlineBlock = new InlineBlock({ parent: this.parent, yBlock: yElement });
+                    this.content.splice(start, 0, inlineBlock);
+                }
+                start += 1;
+            }
+        }
+    });
+    this.content.forEach((part, index) => {
+        part.index = index;
+    });
+}

package/dist/block/inlineBlock.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Edytor } from '../edytor.svelte.js';
+import type { InlineBlockDefinition } from '../plugins.js';
+import type { JSONInlineBlock, YBlock } from '../utils/json.js';
+import type { Block } from './block.svelte.js';
+export declare class InlineBlock {
+    #private;
+    _def: "inline";
+    readonly: boolean;
+    parent: Block;
+    data: any;
+    id: string;
+    yBlock: YBlock;
+    index: number;
+    definition: InlineBlockDefinition;
+    edytor: Edytor;
+    node: HTMLElement | undefined;
+    get type(): string;
+    set type(value: string);
+    get value(): JSONInlineBlock;
+    constructor({ parent, block, yBlock }: {
+        parent: Block;
+    } & ({
+        yBlock?: undefined;
+        block: JSONInlineBlock;
+    } | {
+        yBlock: YBlock;
+        block?: undefined;
+    }));
+    attach: (node: HTMLElement) => void;
+}

package/dist/block/inlineBlock.svelte.js

@@ -0,0 +1,53 @@
+import * as Y from 'yjs';
+import { id } from '../utils.js';
+export class InlineBlock {
+    _def = 'inline';
+    readonly = false;
+    parent;
+    data = $state({});
+    id;
+    yBlock;
+    #type = $state('inline');
+    index = $state(0);
+    definition = $state({});
+    edytor;
+    node;
+    get type() {
+        return this.#type;
+    }
+    set type(value) {
+        this.#type = value;
+        this.yBlock.set('type', value);
+    }
+    get value() {
+        return {
+            id: this.id,
+            type: this.#type,
+            data: this.data
+        };
+    }
+    constructor({ parent, block, yBlock }) {
+        this.parent = parent;
+        this.edytor = parent.edytor;
+        this.id = (yBlock?.doc && yBlock?.get('id')) || id('i');
+        if (block !== undefined) {
+            this.#type = block.type;
+            this.data = block.data || {};
+            this.yBlock = new Y.Map(Object.entries({
+                type: this.#type
+            }));
+        }
+        else {
+            this.yBlock = yBlock;
+            this.#type = yBlock.get('type');
+            this.data = {};
+        }
+        this.definition = this.edytor.getBlockDefinition('inline', this.#type);
+    }
+    attach = (node) => {
+        node.contentEditable = 'false';
+        node.dataset.edytorInlineBlock = this.#type;
+        this.edytor.idToInlineBlock.set(this.id, this);
+        this.node = node;
+    };
+}

package/dist/components/Block.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Block } from '../block/block.svelte.js';
+	import Child from './Block.svelte';
+	import Content from './Content.svelte';
+
+	let {
+		block
+	}: {
+		block: Block;
+	} = $props();
+
+	const snippet = $derived(block.definition.snippet);
+</script>
+
+{#snippet content()}
+	<Content {block} />
+{/snippet}
+
+{#snippet children()}
+	{#each block.children as child (child.id)}
+		<Child block={child} />
+	{/each}
+{/snippet}
+
+{#if snippet}
+	{@render snippet({ block, content, children: block.children.length ? children : null })}
+{/if}

package/dist/components/Block.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Block } from '../block/block.svelte.js';
+type $$ComponentProps = {
+    block: Block;
+};
+declare const Block: import("svelte").Component<$$ComponentProps, {}, "">;
+type Block = ReturnType<typeof Block>;
+export default Block;