@aionbuilders/nabu 0.1.0-alpha.0

package/dist/behaviors/text/text.behavior.svelte.js

@@ -0,0 +1,346 @@
+/**
+* @import {NabuNode, Block, NabuSelection} from "../../blocks";
+*/
+
+import { LoroText } from "loro-crdt";
+import { tick } from "svelte";
+
+/**
+ * Converts a Loro text delta to inline Markdown.
+ * @param {import('loro-crdt').Delta<string>[]} delta
+ * @returns {string}
+ */
+export function deltaToMarkdown(delta) {
+    return delta.map(op => {
+        if (typeof op.insert !== 'string') return '';
+        const text = op.insert;
+        const attrs = op.attributes || {};
+        if (attrs.code) return `\`${text}\``;
+        if (attrs.bold && attrs.italic) return `***${text}***`;
+        if (attrs.bold) return `**${text}**`;
+        if (attrs.italic) return `*${text}*`;
+        if (attrs.strikethrough) return `~~${text}~~`;
+        if (attrs.underline) return `<u>${text}</u>`;
+        return text;
+    }).join('');
+}
+
+/**
+* @typedef {NabuNode<{type: "paragraph", text: LoroText}>} TextNode
+*/
+
+export class TextBehavior {
+    /** @param {Block} block @param {LoroText} [container] */
+    constructor(block, container) {
+        this.block = block;
+        this.nabu = block.nabu;
+        const node = /** @type {TextNode} */ (block.node);
+        /** @type {LoroText} */
+        this.container = container ?? node.data.get("text") ?? node.data.setContainer("text", new LoroText());
+        this.text = $state(this.container.toString());
+        this.delta = $state(this.container.toDelta());
+        this.container.subscribe(() => {
+            this.text = this.container.toString();
+            this.delta = this.container.toDelta();
+        });
+    }
+    
+    selection = $derived(this.block.element && this.block.nabu.selection && this.getSelection(this.block.element, this.block.nabu.selection));
+    
+    /**
+    * @param {HTMLElement} element 
+    * @param {NabuSelection} globalSelection 
+    */
+    getSelection(element, globalSelection) {
+        if (!this.block.selected || !element || !globalSelection) return null;
+        
+        const globalRange = globalSelection.firstRange;
+        if (!globalRange) return null;
+        
+        const containsStart = element.contains(globalRange.startContainer);
+        const containsEnd = element.contains(globalRange.endContainer);
+        
+        let from = 0;
+        let to = this.text.length;
+        
+        if (containsStart) {
+            from = this.calculateOffset(globalRange.startContainer, globalRange.startOffset);
+        }
+        
+        if (containsEnd) {
+            to = this.calculateOffset(globalRange.endContainer, globalRange.endOffset);
+        }
+        
+        return {
+            from,
+            to,
+            isCollapsed: from === to,
+            direction: globalSelection.direction,
+        };
+    }
+    
+    /**
+    * Calcule l'offset textuel d'un point DOM par rapport au début de ce bloc
+    * @param {Node} node 
+    * @param {number} offset 
+    * @param {HTMLElement?} [element]
+    */
+    calculateOffset(node, offset, element = this.block.element) {
+        if (!element) return 0;
+        const range = document.createRange();
+        range.setStart(element, 0);
+        range.setEnd(node, offset);
+        return range.toString().length;
+    }
+
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [selection] */
+    handleBeforeInput(event, selection = this.selection) {
+        // Hook system (Markdown shortcuts, de-transformation, etc.)
+        const hooks = this.nabu.hooks.get("onBeforeInput");
+        if (hooks) {
+            for (const hook of hooks) {
+                const result = hook(this.nabu, event, this.block);
+                if (result === this.nabu.BREAK) {
+                    event.preventDefault();
+                    return true; 
+                }
+            }
+        }
+
+        switch (event.inputType) {
+            case "insertText":
+                return this.handleInsertText(event, selection);
+            case "insertLineBreak":
+            case "insertSoftLineBreak":
+                return this.handleInsertLineBreak(event, selection);
+            case "deleteContentBackward":
+                return this.handleDeleteContentBackward(event, selection);
+            case "deleteContentForward":
+                return this.handleDeleteContentForward(event, selection);
+            case "insertParagraph":
+                return this.handleInsertParagraph(event, selection);
+            default:
+                console.warn("Unhandled input type:", event.inputType);
+                return;
+        }
+    }
+    
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [selection] */
+    handleInsertText(event, selection = this.selection) {
+        if (!selection) return;
+
+        const textToInsert = event.data || "";
+        if (!selection.isCollapsed) this.delete({index: selection.from, length: selection.to - selection.from}, selection);
+        this.insert(selection.from, textToInsert);
+        this.block.commit();
+        tick().then(() => this.nabu.selection.setCursor(this.block, selection.from + textToInsert.length));
+    }
+    
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [sel] */
+    handleInsertLineBreak(event, sel = this.selection) {
+        if (!sel) return;
+        if (!sel.isCollapsed) {
+            this.delete({index: sel.from, length: sel.to - sel.from}, sel);
+        }
+        this.insert(sel.from, "\n");
+        this.block.commit();
+        
+        tick().then(() => this.nabu.selection.setCursor(this.block, sel.from + 1));
+    }
+    
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [sel] */
+    handleDeleteContentBackward(event, sel = this.selection) {
+        if (!sel) return;
+        if (sel.isCollapsed && sel.from === 0) {
+            const previousBlock = this.block.findBackward(b => b.behaviors.has("text") && b.behaviors.get("text") instanceof TextBehavior);
+            if (!previousBlock) return;
+            const previousBehavior = previousBlock?.behaviors.get("text");
+            if (previousBehavior && previousBehavior instanceof TextBehavior) {
+                event.preventDefault();
+                const previousLength = previousBehavior.text.length;
+                // previousBehavior.delta([
+                //     { retain: previousLength },
+                //     ...this.container.toDelta()
+                // ])
+                previousBlock.consume(this.block);
+                this.block.destroy();
+                this.block.commit();
+                
+                tick().then(() => this.nabu.selection.setCursor(previousBehavior.block, previousLength));
+            }
+        } else {
+            event.preventDefault();
+            const length = sel.isCollapsed ? 1 : sel.to - sel.from;
+            const index = sel.isCollapsed ? sel.from - 1 : sel.from;
+            this.delete({index, length});
+            this.block.commit();
+            
+            tick().then(() => this.nabu.selection.setCursor(this.block, index));
+        }
+    }
+
+
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [sel] */
+    handleDeleteContentForward(event, sel = this.selection) {
+        if (!sel) return;
+        if (sel.isCollapsed && sel.from === this.text.length) {
+            const nextBlock = this.block.findForward(b => b.behaviors.has("text") && b.behaviors.get("text") instanceof TextBehavior);
+            if (!nextBlock) return;
+            const nextBehavior = nextBlock?.behaviors.get("text");
+            if (nextBehavior && nextBehavior instanceof TextBehavior) {
+                event.preventDefault();
+                // this.delta([
+                //     { retain: this.container.length },
+                //     ...nextBehavior.container.toDelta()
+                // ]);
+                this.block.consume(nextBlock);
+
+
+                nextBehavior.block.destroy();
+                this.block.commit();
+                
+                tick().then(() => this.nabu.selection.setCursor(this.block, sel.from));
+            }
+        }
+    }
+
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [sel] */
+    handleInsertParagraph(event, sel = this.selection) {
+        if (!sel) return;
+        const from = sel.from;
+        const to = sel.isCollapsed ? this.text.length : sel.to ;
+        const newBlock = this.block.ascend("onSplit", event, { offset: from, delta: this.container.sliceDelta(from, to)});    
+        return newBlock;
+    }
+    
+    /**
+    * Retrouve le nœud texte et l'offset DOM pour un offset Modèle donné
+    * @param {number} targetOffset 
+    * @param {HTMLElement?} [element]
+    */
+    getDOMPoint(targetOffset, element = this.block.element) {
+        if (!element) return null;
+        
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+        let currentOffset = 0;
+        let node = walker.nextNode();
+        
+        while (node) {
+            const length = node.textContent?.length || 0;
+            if (currentOffset + length >= targetOffset) {
+                return { node, offset: targetOffset - currentOffset };
+            }
+            currentOffset += length;
+            node = walker.nextNode();
+        }
+        
+        // Fallback : fin du bloc ou élément lui-même si vide
+        return { node: element, offset: element.childNodes.length };
+    }
+    
+    /** @param {number} index @param {string} text */
+    insert(index, text) {
+        this.container.insert(index, text);
+    }
+    
+    /** @param {Parameters<Block["delete"]>[0]} [deletion] @param {ReturnType<TextBehavior["getSelection"]>} [selection] */
+    delete(deletion, selection = this.selection) {
+        const l = this.container.length;
+        let from = deletion?.from ?? selection?.from ?? 0;
+        if (from < 0) from = l + from + 1;
+        let to = deletion?.to ?? selection?.to ?? l;
+        if (to < 0) to = l + (to + 1) ;
+        const index = deletion?.index ?? from;
+        const length = deletion?.length ?? (to - from);
+        this.container.delete(index, length);
+    }
+    
+    /** @param {import('loro-crdt').Delta<string>[]} data */
+    applyDelta(data = []) {
+        this.container.applyDelta(data);
+    }
+    
+    /** 
+    * @param {Parameters<Block["split"]>[0]} [options] 
+    * @param {ReturnType<TextBehavior["getSelection"]>} [selection] 
+    * @returns {ReturnType<Block["split"]>} 
+    */
+    split(options, selection = this.selection) {
+        const sel = selection;
+        if (!sel) return null;
+        const offset = options?.index ?? options?.offset ?? options?.from;
+        const from = options?.from ?? offset ?? sel.from;
+        const to = options?.to ?? (options?.length ? from + options.length : (offset ?? sel.to));
+        return this.block.ascend("onSplit", null, { offset: from, delta: this.container.sliceDelta(from, to)});
+    }
+    
+    /** @param {string} markName @param {any} value @param {ReturnType<TextBehavior["getSelection"]>} sel */
+    applyMark(markName, value, sel) {
+        if (!sel || sel.isCollapsed) return;
+        this.container.mark({ start: sel.from, end: sel.to }, markName, value);
+    }
+
+    /** @param {string} markName @param {ReturnType<TextBehavior["getSelection"]>} sel */
+    removeMark(markName, sel) {
+        if (!sel || sel.isCollapsed) return;
+        this.container.unmark({ start: sel.from, end: sel.to }, markName);
+    }
+
+    /** @param {string} markName @param {ReturnType<TextBehavior["getSelection"]>} sel */
+    isMarkActive(markName, sel) {
+        if (!sel || sel.isCollapsed) return false;
+        const delta = this.container.toDelta();
+        let offset = 0;
+        for (const op of delta) {
+            if (typeof op.insert !== 'string') continue;
+            const opEnd = offset + op.insert.length;
+            if (opEnd <= sel.from) { offset = opEnd; continue; }
+            if (offset >= sel.to) break;
+            if (!op.attributes?.[markName]) return false;
+            offset = opEnd;
+        }
+        return true;
+    }
+
+    /** @param {string} markName @param {any} value @param {ReturnType<TextBehavior["getSelection"]>} sel */
+    toggleMark(markName, value, sel) {
+        if (!sel || sel.isCollapsed) return;
+        if (this.isMarkActive(markName, sel)) {
+            this.removeMark(markName, sel);
+        } else {
+            this.applyMark(markName, value, sel);
+        }
+    }
+
+    /** @returns {string} */
+    toMarkdown() {
+        return deltaToMarkdown(this.delta);
+    }
+
+    /**
+     * Converts the text delta to a Slate-like JSON format.
+     * @returns {{text: string, [mark: string]: any}[]}
+     */
+    toJSON() {
+        return this.delta
+            .filter(op => typeof op.insert === 'string')
+            .map(op => {
+                const run = { text: /** @type {string} */ (op.insert) };
+                if (op.attributes) Object.assign(run, op.attributes);
+                return run;
+            });
+    }
+
+    /** @param {Block} other */
+    absorbs(other) {
+        const otherBehavior = other.behaviors.get("text");
+        if (!otherBehavior || !(otherBehavior instanceof TextBehavior)) return false;
+        this.applyDelta([
+            { retain: this.container.length },
+            ...otherBehavior.container.toDelta()
+        ]);
+        // other.destroy();
+        return true;
+    }
+    
+}

package/dist/blocks/Block.svelte

@@ -0,0 +1,18 @@
+<script>
+    /** @type {{ block: import('./block.svelte.js').Block }} */
+    let { block } = $props();
+
+    // Récupération dynamique du composant via le Registry de Nabu
+    // block.nabu.components est la Map<string, Component>
+    let Component = $derived(block.component || block.nabu.components.get(block.type));
+</script>
+
+{#if Component}
+    <!-- On passe l'instance du bloc au composant spécifique -->
+    <Component {block} />
+{:else}
+    <!-- Fallback pour les types inconnus (utile en dev) -->
+    <div style="color: red; border: 1px dashed red; padding: 0.5rem; margin: 0.5rem 0;" contenteditable="false">
+        ⚠️ Unknown block type: <strong>{block.type}</strong>
+    </div>
+{/if}

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

@@ -0,0 +1,11 @@
+export default Block;
+type Block = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Block: import("svelte").Component<{
+    block: import("./block.svelte.js").Block;
+}, {}, "">;
+type $$ComponentProps = {
+    block: import("./block.svelte.js").Block;
+};

package/dist/blocks/Nabu.svelte

@@ -0,0 +1,31 @@
+<script>
+    import { Nabu } from "./nabu.svelte.js";
+    import Block from "./Block.svelte";
+
+    /** @type {{ engine: Nabu }} */
+    let { engine = new Nabu() } = $props();
+</script>
+
+<div
+    contenteditable="true"
+    class="nabu-editor"
+    spellcheck="false"
+    translate="no"
+    data-nabu-root="true"
+    onbeforeinput={(e) => engine.handleBeforeinput(e)}
+    onkeydown={(e) => engine.handleKeydown(e)}
+>
+    {#each engine.children as block (block.id)}
+        <Block {block} />
+    {/each}
+</div>
+
+<style>
+    .nabu-editor {
+        outline: none;
+        min-height: 100px;
+        padding: 1rem;
+        white-space: pre-wrap; /* Important pour le comportement éditeur */
+        word-break: break-word;
+    }
+</style>

package/dist/blocks/Nabu.svelte.d.ts

@@ -0,0 +1,12 @@
+export default Nabu;
+type Nabu = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Nabu: import("svelte").Component<{
+    engine: Nabu;
+}, {}, "">;
+import { Nabu } from "./nabu.svelte.js";
+type $$ComponentProps = {
+    engine: Nabu;
+};

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

@@ -0,0 +1,143 @@
+export class Block {
+    /** @param {Nabu} nabu @param {NabuNode} node */
+    static load(nabu: Nabu, node: NabuNode): Block;
+    /** @param {Nabu} nabu @param {string} type @param {Object} [props={}] @param {string|null} [parentId=null] @param {number|null} [index=null] */
+    static create(nabu: Nabu, type: string, props?: Object, parentId?: string | null, index?: number | null): Block;
+    /** @param {Nabu} nabu @param {NabuNode} node */
+    constructor(nabu: Nabu, node: NabuNode);
+    nabu: Nabu;
+    node: NabuNode;
+    id: string;
+    type: string;
+    /** @type {MegaBlock | null} */
+    parent: MegaBlock | null;
+    serializers: SvelteMap<any, any>;
+    behaviors: SvelteMap<any, any>;
+    selected: boolean;
+    isSelectionStart: boolean;
+    isSelectionEnd: boolean;
+    isIntermediate: boolean;
+    clearSelection(): void;
+    /** @type {{from: number, to: number, direction: "forward" | "backward" | "none"} | null} */
+    selection: {
+        from: number;
+        to: number;
+        direction: "forward" | "backward" | "none";
+    } | null;
+    index: number;
+    /** @type {Block?} */
+    previous: Block | null;
+    /** @type {Block?} */
+    next: Block | null;
+    parents: MegaBlock[];
+    component: import("svelte").Component<any, any, string> | null;
+    /** @type {HTMLElement | null} */
+    element: HTMLElement | null;
+    /** @param {(block: Block) => boolean} predicate @returns {Block | null} */
+    findForward(predicate: (block: Block) => boolean): Block | null;
+    /** @param {(block: Block) => boolean} predicate @returns {Block | null} */
+    findBackward(predicate: (block: Block) => boolean): Block | null;
+    /**
+     * Returns real, uncommitted siblings, which is useful for extensions that want to check the document structure before the transaction is committed.
+     */
+    getAdjacentSiblings(): {
+        previous: null;
+        next: null;
+        previousNode?: undefined;
+        nextNode?: undefined;
+    } | {
+        previous: Block | null | undefined;
+        next: Block | null | undefined;
+        previousNode: import("loro-crdt").LoroTreeNode<Record<string, unknown>> | import("loro-crdt").LoroTreeNode<{
+            type: string;
+        }> | null;
+        nextNode: import("loro-crdt").LoroTreeNode<Record<string, unknown>> | import("loro-crdt").LoroTreeNode<{
+            type: string;
+        }> | null;
+    };
+    /**
+     * Helper pour trouver le dernier descendant profond qui matche
+     * @param {(block: Block) => boolean} predicate
+     * @returns {Block | null}
+     */
+    findLastDescendant(predicate: (block: Block) => boolean): Block | null;
+    destroy(): void;
+    /**
+     * Transforme ce bloc en un autre type de bloc.
+     * @param {string} newType
+     * @param {Object} [props={}]
+     */
+    transformTo(newType: string, props?: Object): void;
+    /** @param {number} index @param {string} text */
+    insert(index: number, text: string): void;
+    /** @param {{from?: number, to?: number, index?: number, length?: number}} [deletion] */
+    delete(deletion?: {
+        from?: number;
+        to?: number;
+        index?: number;
+        length?: number;
+    }): void;
+    /** @param {Block} block @returns {any} */
+    absorbs(block: Block): any;
+    /** @param {Block} block @returns {any} */
+    mergeWith(block: Block): any;
+    /**
+     * Consumes another block, handling children relocation intelligently.
+     * @param {Block} otherBlock - The block to consume or be consumed by
+     * @param {'into' | 'from'} direction - 'into' = this merges into other, 'from' = other merges into this
+     * @returns {Block} The surviving block
+     */
+    consume(otherBlock: Block, direction?: "into" | "from"): Block;
+    /** @param {Block[]} children @param {number | null} [index] */
+    adoptChildren(children: Block[], index?: number | null): void;
+    /** @param {{from?: number, to?: number, index?: number, length?: number, offset?: number}} options @returns {{block: Block} | null} */
+    split(options: {
+        from?: number;
+        to?: number;
+        index?: number;
+        length?: number;
+        offset?: number;
+    }): {
+        block: Block;
+    } | null;
+    /** @param {{start?: number, end?: number, offset?: number} | null } options @param {boolean} [passive=false] */
+    focus(options?: {
+        start?: number;
+        end?: number;
+        offset?: number;
+    } | null, passive?: boolean): {
+        start: {
+            node: Node;
+            offset: number;
+        } | null;
+        end: {
+            node: Node;
+            offset: number;
+        } | null;
+        options: {
+            startOffset: number;
+            endOffset: number;
+        };
+    };
+    /**
+     * @param {number} offset
+     * @returns {{node: Node, offset: number} | null}
+     */
+    getDOMPoint(offset: number): {
+        node: Node;
+        offset: number;
+    } | null;
+    /** @param {string} eventName @param {Event} event @param {Object} [data={}] */
+    ascend(eventName: string, event: Event, data?: Object): any;
+    /** @param {InputEvent} event @returns {any} */
+    beforeinput(event: InputEvent): any;
+    /** @param {KeyboardEvent} event @returns {any} */
+    keydown(event: KeyboardEvent): any;
+    commit(): void;
+    /** @param {string} format */
+    serialize(format: string): any;
+}
+import type { Nabu } from "./nabu.svelte";
+import type { NabuNode } from "./nabu.svelte";
+import type { MegaBlock } from "./megablock.svelte";
+import { SvelteMap } from "svelte/reactivity";