@aionbuilders/nabu 0.1.0-alpha.0

package/dist/blocks/nabu.svelte.js

@@ -0,0 +1,395 @@
+import { LoroDoc, UndoManager } from 'loro-crdt';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { Block } from './block.svelte';
+import { NabuSelection } from './selection.svelte';
+import { handleContainerBeforeInput } from './container.utils.js';
+import { tick } from 'svelte';
+
+
+/**
+* @import {Component} from "svelte";
+* @import { LoroTreeNode, LoroTree } from "loro-crdt";
+* @import {Extension} from '../utils/extensions.js';
+*/
+
+/**
+* @template {Object<string, any>} [T={}]
+* @typedef {LoroTreeNode<{type: string} & T>} NabuNode
+*/
+
+/**
+* @typedef {Object} NabuInit
+* @property {Extension[]} [extensions]
+* @property {Uint8Array<ArrayBufferLike>} [snapshot]
+*/
+
+export class Nabu {
+    /** @param {NabuInit} init */
+    constructor(init = {}) {
+        this.doc = new LoroDoc();
+        if (init.snapshot) {
+            this.doc.import(init.snapshot);
+        }
+        
+        this.selection = new NabuSelection(this);
+        this.tree = /** @type {LoroTree<Record<string, NabuNode>>} */ (this.doc.getTree("blocks"));
+        this.content = this.doc.getMap("content");
+
+        // Initialize Undo/Redo Manager
+        this.undoManager = new UndoManager(this.doc, {
+            maxUndoSteps: 100,
+            mergeInterval: 1000,
+            onPush: () => {
+                // Save cursor position for restoration on undo/redo
+                const sel = this.selection;
+                if (!sel || !sel.anchorBlock) return { value: null, cursors: [] };
+
+                return {
+                    value: {
+                        blockId: sel.anchorBlock.id,
+                        offset: sel.startOffset
+                    },
+                    cursors: []
+                };
+            },
+            onPop: (_, storedValue) => {
+                // Restore cursor position after undo/redo
+                const value = /** @type {{blockId: string, offset: number} | null} */ (storedValue?.value);
+                if (value && typeof value === 'object' && 'blockId' in value) {
+                    tick().then(() => {
+                        const block = this.blocks.get(value.blockId);
+                        if (block && block.behaviors?.has('text')) {
+                            this.selection.setCursor(block, value.offset);
+                        }
+                    });
+                }
+            }
+        });
+
+        this.extensions = init.extensions || [];
+        
+        if (this.extensions?.length) {
+            for (const ext of this.extensions) {
+                if (ext.block) this.registry.set(ext.name, ext.block);
+                if (ext.component) this.components.set(ext.name, ext.component);
+                if (ext.hooks) {
+                    for (const [hookName, hookFn] of Object.entries(ext.hooks)) {
+                        if (!this.hooks.has(hookName)) {
+                            this.hooks.set(hookName, []);
+                        }
+                        this.hooks.get(hookName).push(hookFn);
+                    }
+                }
+
+                if (ext.serializers) {
+                    for (const [format, fn] of Object.entries(ext.serializers)) {
+                        this.serializers.set(format, fn);
+                    }
+                }
+
+            }
+        }
+        
+        const roots = /** @type {NabuNode[]} */ (this.tree.roots());
+        if (roots?.length) {
+            for (const root of roots) {
+                const block = Block.load(this, root);
+                this.children.push(block);
+            }
+        }
+        
+        this.tree.subscribe((event) => {
+            event.events.forEach(e => {
+                if (e.diff.type === "tree") {
+                    e.diff.diff.forEach(action => {
+                        if (action.action === 'create' || action.action === 'move' || action.action === 'delete') {
+                            if (action.parent) {
+                                const parentId = action.parent.toString();
+                                const parentBlock = this.blocks.get(parentId);
+                                if (parentBlock) parentBlock.updateChildren();
+                            } else {
+                                this.updateRoots();
+                            }
+
+                            if (action.oldParent) {
+                                const oldParentId = action.oldParent.toString();
+                                const oldParentBlock = this.blocks.get(oldParentId);
+                                if (oldParentBlock) oldParentBlock.updateChildren();
+                            }
+                        }
+                    })
+                }
+
+                if (e.diff.type === "map") {
+                    
+                    const newType = e.diff.updated["type"];
+                    if (newType !== undefined) {
+                        const nodeId = e.path[1].toString();
+                        const block = this.blocks.get(nodeId);
+                        if (block && block.type !== newType) {
+                            if (block.parent) block.parent.updateChildren();
+                            else this.updateRoots();
+                        }
+                    }
+                }
+            })
+        });
+        
+        this.init();
+    }
+    
+    static BREAK = Symbol("BREAK");
+    static CONTINUE = Symbol("CONTINUE");
+    BREAK = Nabu.BREAK;
+    CONTINUE = Nabu.CONTINUE;
+    
+    /** @type {LoroDoc} */
+    doc;
+    /** @type {SvelteMap<string, typeof Block>} */
+    registry = new SvelteMap();
+    /** @type {SvelteMap<string, Component>} */
+    components = new SvelteMap();
+    /** @type {SvelteMap<string, Block>} */
+    blocks = new SvelteMap();
+
+    /** @type {SvelteMap<string, SvelteSet<Block>>} */
+    blocksByType = new SvelteMap();
+
+    /** @type {SvelteMap<string, any>} */
+    systems = new SvelteMap();
+    
+    hooks = new Map();
+
+    /**
+     * Root-level serializers. Each function receives the Nabu instance and returns the serialized document.
+     * @type {Map<string, (nabu: Nabu) => any>}
+     */
+    serializers = new Map([
+        ['markdown', (nabu) =>
+            nabu.children
+                .map(b => b.serialize('markdown'))
+                .filter(Boolean)
+                .join('\n\n')
+        ],
+        ['json', (nabu) => ({
+            version: '1',
+            blocks: nabu.children.map(b => b.serialize('json')).filter(Boolean)
+        })]
+    ]);
+
+    /** @type {Block[]} */
+    children = $state([]);
+    
+    get isEmpty() {
+        return this.children.length === 0;
+    }
+
+    /** @param {string} format */
+    serialize(format) {
+        const fn = this.serializers.get(format);
+        if (!fn) {
+            console.warn(`No serializer registered for format "${format}" on Nabu`);
+            return null;
+        }
+        return fn(this);
+    }
+    
+    init() {
+        this.hooks.get("onInit")?.forEach(hook => hook(this));
+    }
+
+    /** Rafraîchit les blocs racines de l'éditeur */
+    updateRoots() {
+        const roots = /** @type {NabuNode[]} */ (this.tree.roots());
+        this.children = roots.map((root, i) => {
+            const id = root.id.toString();
+            let block = this.blocks.get(id);
+            const currentType = root.data.get("type");
+            
+            if (!block || block.type !== currentType) {
+                if (block) {
+                    this.blocks.delete(id);
+                    this.blocksByType.get(block.type)?.delete(block);
+                }
+
+                block = Block.load(this, root);
+            }
+            block.index = i;
+            block.parent = null;
+            return block;
+        });
+    }
+
+    trigger(hookName, ...args) {
+        const hooks = this.hooks.get(hookName) || [];
+        for (const hook of hooks) {
+            const result = hook(this, ...args);
+            if (result === this.BREAK) {
+                break;
+            }
+
+        }
+    }
+
+
+    commit() {
+        this.trigger("onBeforeTransaction", this);
+        this.doc.commit();
+    }
+
+    /**
+     * Undo the last operation
+     */
+    undo() {
+        if (this.undoManager.canUndo()) {
+            this.undoManager.undo();
+        }
+    }
+
+    /**
+     * Redo the last undone operation
+     */
+    redo() {
+        if (this.undoManager.canRedo()) {
+            this.undoManager.redo();
+        }
+    }
+
+
+
+    /** @param {{from: {offset: number, block: Block}, to: {offset: number, block: Block}}} [options={}]  */
+    focus(options) {
+        tick().then(() => {
+            const sel = this.selection;
+            const fromBlock = options?.from?.block || sel.anchorBlock;
+            const toBlock = options?.to?.block || sel.focusBlock;
+            const fromOffset = options?.from?.offset ?? sel.startOffset ?? 0;
+            const toOffset = options?.to?.offset ?? sel.endOffset ?? 0;
+
+            if (fromBlock && toBlock) {
+                const fromPoint = fromBlock.getDOMPoint(fromOffset);
+                const toPoint = toBlock.getDOMPoint(toOffset);
+                if (fromPoint && toPoint) this.selection.setBaseAndExtent(fromPoint.node, fromPoint.offset, toPoint.node, toPoint.offset);
+            }
+        })
+
+    }
+
+    /**
+    * Insère un nouveau bloc dans le document
+    * @param {string} type - Le type du bloc (ex: 'paragraph')
+    * @param {Object} [props={}] - Les propriétés initiales
+    * @param {string|null} [parentId=null] - ID du parent (null pour racine)
+    * @param {number|null} [index=null] - Position dans la liste des enfants
+    */
+    insert(type, props = {}, parentId = null, index = null) {
+        
+        const BlockClass = this.registry.get(type);
+        if (!BlockClass) {
+            throw new Error(`Block type "${type}" not registered.`);
+        }
+        
+        const block = BlockClass.create(this, type, props, parentId, index);
+        
+        
+        this.commit();
+        return block;
+    }
+    
+    
+    
+    /** @param {Block} block */
+    delete(block) {
+        this.deleteNode(block.node.id);
+    }
+    
+
+
+    
+    /**
+    * @param {string} nodeId 
+    * @returns 
+    */
+    deleteNode(nodeId) {
+        const block = this.blocks.get(nodeId);
+        if (!block) return;
+        this.tree.delete(block.node.id);
+    }
+    
+    // EVENT HANDLING
+
+    /** 
+     * Route un événement vers le bon bloc en fonction de la sélection courante.
+     * @param {string} handlerName - Le nom de la méthode à appeler sur le bloc (ex: 'beforeinput', 'keydown')
+     * @param {Event} e - L'événement natif
+     * @param {string} [hookName] - Optionnel : Le nom du hook d'extension à vérifier en premier
+     */
+    dispatchEventToSelection(handlerName, e, hookName) {
+        const sel = this.selection;
+        if (!sel.anchorBlock || !sel.focusBlock) return;
+        
+        // 1. Essayer les hooks globaux d'extension d'abord
+        if (hookName) {
+            const hooks = this.hooks.get(hookName) || [];
+            for (const hook of hooks) {
+                const handled = hook(this, e, sel.anchorBlock);
+                if (handled === this.BREAK) {
+                    e.preventDefault();
+                    return;
+                }
+            }
+        }
+        
+        // 2. Trouver la cible et lui déléguer
+        let targetBlock = null;
+        if (sel.anchorBlock === sel.focusBlock) {
+            targetBlock = sel.anchorBlock;
+        } else {
+            const anchorParents = sel.anchorBlock.parents || [];
+            const focusParents = sel.focusBlock.parents || [];
+            targetBlock = anchorParents.find(ancestor => focusParents.includes(ancestor)) || this;
+        }
+
+        // 3. Appeler la méthode sur le bloc cible s'il la possède
+        if (targetBlock && typeof targetBlock[handlerName] === 'function') {
+            const handled = targetBlock[handlerName](e);
+            if (handled) {
+                e.preventDefault();
+            }
+        }
+    }
+    
+    /** @param {InputEvent} e */
+    handleBeforeinput(e) {
+        e.preventDefault(); // Toujours bloquer les mutations natives
+        this.dispatchEventToSelection('beforeinput', e, 'onBeforeInput');
+    }
+
+    /** @param {KeyboardEvent} e */
+    handleKeydown(e) {
+        // Undo: Ctrl+Z or Cmd+Z (without Shift)
+        if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+            e.preventDefault();
+            this.undo();
+            return;
+        }
+
+        // Redo: Ctrl+Y, Cmd+Y, or Ctrl+Shift+Z, Cmd+Shift+Z
+        if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
+            e.preventDefault();
+            this.redo();
+            return;
+        }
+
+        this.dispatchEventToSelection('keydown', e, 'onKeyDown');
+    }
+    
+    /** @param {InputEvent} e */
+    beforeinput(e) {
+        return handleContainerBeforeInput(this, this, e);
+    }
+    
+    
+}
+
+

package/dist/blocks/paragraph/Paragraph.svelte

@@ -0,0 +1,38 @@
+<script>
+    import RichText from '../../behaviors/text/RichText.svelte';
+    /** @type {{block: import('./paragraph.svelte').Paragraph}}*/
+    let {block} = $props();
+</script>
+
+<div
+    bind:this={block.element}
+    data-block-id={block.id}
+    data-block-type="paragraph"
+    class="nabu-paragraph"
+    class:selected={block.selected}
+    class:first={block.isSelectionStart}
+    class:last={block.isSelectionEnd}
+><RichText delta={block.delta} /></div>
+
+<style>
+    .nabu-paragraph {
+        white-space: pre-wrap;
+        margin-bottom: 0.5em;
+        &.selected {
+            background-color: rgba(59, 130, 246, 0.25);
+        }
+        &.first {
+            border-top: 1px solid rgba(59, 130, 246, 0.5);
+        }
+        &.last {
+            border-bottom: 1px solid rgba(59, 130, 246, 0.5);
+        }
+        
+
+        /* &::before {
+            content: " ";
+            display: inline-block;
+            width: 0;
+        } */
+    }
+</style>

package/dist/blocks/paragraph/Paragraph.svelte.d.ts

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

package/dist/blocks/paragraph/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @import { Nabu } from "../nabu.svelte";
+ */
+export const ParagraphExtension: import("../..").Extension;
+import ParagraphComponent from "./Paragraph.svelte";
+import { Paragraph } from "./paragraph.svelte";
+export { ParagraphComponent, Paragraph };

package/dist/blocks/paragraph/index.js

@@ -0,0 +1,44 @@
+import { extension } from "../../utils/extensions";
+import { Paragraph } from "./paragraph.svelte";
+import ParagraphComponent from "./Paragraph.svelte";
+
+/**
+ * @import { Nabu } from "../nabu.svelte";
+ */
+
+const ParagraphExtension = extension("paragraph", {
+    block: Paragraph,
+    component: ParagraphComponent,
+    hooks: {
+        onInit: (nabu) => {
+            if (nabu.children.length === 0) {
+                nabu.insert("paragraph", {
+                    text: ""
+                });
+                
+            }
+        },
+        /** @param {Nabu} nabu @param {Paragraph} block @param {Event} event @param {{offset: number, delta: import('loro-crdt').Delta<string>}} data */
+        onSplit: (nabu, block, event, data) => {
+            const { offset, delta } = data;
+            
+            block.delete({from: offset, to: -1});
+            
+            const currentIndex = block.node.index();
+            const parent = block.node.parent();
+            const parentId = parent?.id.toString() || null;
+            
+            const newBlock = nabu.insert("paragraph", { delta }, parentId, currentIndex + 1);
+
+            block.commit();
+            
+            setTimeout(() => {
+                nabu.selection.setCursor(newBlock, 0);
+            }, 0);
+
+            return { block: newBlock };
+        }
+    }
+})
+
+export {ParagraphExtension, ParagraphComponent, Paragraph };

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

@@ -0,0 +1,41 @@
+/**
+ * @import { Nabu, NabuNode } from "../nabu.svelte";
+ */
+/**
+ * @typedef {NabuNode<{type: "paragraph", text: LoroText}>} ParagraphNode
+ */
+export class Paragraph extends 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): Paragraph;
+    /** @param {Nabu} nabu @param {ParagraphNode} node */
+    constructor(nabu: Nabu, node: ParagraphNode);
+    container: LoroText;
+    /** @type {TextBehavior} */
+    behavior: TextBehavior;
+    component: import("svelte").Component<any, any, string> | import("svelte").Component<{
+        block: import("./paragraph.svelte").Paragraph;
+    }, {}, "">;
+    get text(): string;
+    get delta(): import("loro-crdt").Delta<string>[];
+    selection: {
+        from: number;
+        to: number;
+        isCollapsed: boolean;
+        direction: "forward" | "backward" | "none";
+    } | null;
+    /** @param {Block} block */
+    absorbs(block: Block): boolean;
+    /** @param {import('loro-crdt').Delta<string>[]} data */
+    applyDelta(data?: import("loro-crdt").Delta<string>[]): void;
+    /** @param {Parameters<Block["split"]>[0]} [options] @returns {ReturnType<Block["split"]>} */
+    split(options?: Parameters<Block["split"]>[0]): ReturnType<Block["split"]>;
+}
+export type ParagraphNode = NabuNode<{
+    type: "paragraph";
+    text: LoroText;
+}>;
+import { Block } from "../block.svelte";
+import { LoroText } from "loro-crdt";
+import { TextBehavior } from "../../behaviors/text";
+import type { Nabu } from "../nabu.svelte";
+import type { NabuNode } from "../nabu.svelte";

package/dist/blocks/paragraph/paragraph.svelte.js

@@ -0,0 +1,86 @@
+import { Block } from "../block.svelte";
+import { LoroText } from "loro-crdt";
+import ParagraphComponent from "./Paragraph.svelte";
+import { TextBehavior } from "../../behaviors/text";
+
+/**
+ * @import { Nabu, NabuNode } from "../nabu.svelte";
+ */
+
+/**
+ * @typedef {NabuNode<{type: "paragraph", text: LoroText}>} ParagraphNode
+ */
+
+export class Paragraph extends Block {
+    /** @param {Nabu} nabu @param {ParagraphNode} node */
+    constructor(nabu, node) {
+        super(nabu, node);
+        
+        const data = node.data;
+        this.container = data.get("text") ?? data.setContainer("text", new LoroText());
+
+        /** @type {TextBehavior} */
+        this.behavior = new TextBehavior(this, this.container);
+        this.behaviors.set("text", this.behavior);
+
+        this.serializers.set('markdown', () => this.behavior.toMarkdown());
+        this.serializers.set('json', () => ({
+            id: this.id,
+            type: 'paragraph',
+            content: this.behavior.toJSON()
+        }));
+    }
+
+    component = $derived(this.nabu.components.get("paragraph") || ParagraphComponent);
+    
+    get text() {
+        return this.behavior.text;
+    }
+
+    get delta() {
+        return this.behavior.delta;
+    }
+
+    selection = $derived(this.behavior.selection);
+
+    /** @param {InputEvent} event */
+    beforeinput(event) {
+        return this.behavior.handleBeforeInput(event);
+    }
+
+    /**
+     * Retrouve le nœud texte et l'offset DOM pour un offset Modèle donné
+     * @param {number} targetOffset 
+     * @returns {{node: Node, offset: number} | null}
+     */
+    getDOMPoint(targetOffset) {
+        if (!this.element) return null;
+        return this.behavior.getDOMPoint(targetOffset);
+    }
+
+    /** @param {Block} block */
+    absorbs(block) { return this.behavior.absorbs(block); }
+
+    /** @param {number} index @param {string} text */
+    insert(index, text) { return this.behavior.insert(index, text); }
+    
+    /** @param {Parameters<Block["delete"]>[0]} [deletion] */
+    delete(deletion) { return this.behavior.delete(deletion); }
+
+    /** @param {import('loro-crdt').Delta<string>[]} data */
+    applyDelta(data = []) { return this.behavior.applyDelta(data); }
+
+    /** @param {Parameters<Block["split"]>[0]} [options] @returns {ReturnType<Block["split"]>} */
+    split(options) { return this.behavior.split(options); }
+
+    /** @param {Nabu} nabu @param {string} type @param {Object} [props={}] @param {string|null} [parentId=null] @param {number|null} [index=null] */
+    static create(nabu, type, props = {}, parentId = null, index = null) {
+        const node = nabu.tree.createNode(parentId || undefined, index || undefined);
+        node.data.set("type", "paragraph");
+        const container = node.data.setContainer("text", new LoroText());
+        if (props.text) container.insert(0, props.text || "Start writing...");
+        if (props.delta) container.applyDelta([...props.delta]);
+        const block = new Paragraph(nabu, node);
+        return block;
+    }
+}

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

@@ -0,0 +1,38 @@
+/**
+* @import { Nabu } from "./nabu.svelte";
+* @import { Block } from "./block.svelte";
+* @import { LoroTree, LoroTreeNode } from "loro-crdt";
+*/
+export class NabuSelection extends SvelteSelection {
+    /** @param {Nabu} nabu */
+    constructor(nabu: Nabu);
+    nabu: Nabu;
+    /** @type {Set<Block>} */
+    previous: Set<Block>;
+    anchorBlock: Block | null | undefined;
+    focusBlock: Block | null | undefined;
+    startBlock: Block | null | undefined;
+    endBlock: Block | null | undefined;
+    start: {
+        from: number;
+        to: number;
+        direction: "forward" | "backward" | "none";
+        block: Block;
+    } | null | undefined;
+    end: {
+        from: number;
+        to: number;
+        direction: "forward" | "backward" | "none";
+        block: Block;
+    } | null | undefined;
+    /**
+     * Définit le curseur à un endroit précis du document (Modèle -> DOM)
+     * @param {Block} block
+     * @param {number} offset
+     */
+    setCursor(block: Block, offset: number): void;
+    blocks: Set<Block>;
+}
+import { SvelteSelection } from "../utils/selection.svelte";
+import type { Nabu } from "./nabu.svelte";
+import type { Block } from "./block.svelte";