@aionbuilders/nabu 0.1.0-alpha.0

package/dist/blocks/list/list.behavior.svelte.js

@@ -0,0 +1,61 @@
+import { MegaBlock } from "..";
+
+/**
+ * @import {Block, NabuNode} from "..";
+ * @import {LoroText} from "loro-crdt";
+ */
+
+/**
+ * @typedef {NabuNode<{type: "list", listType: "bullet" | "ordered"}>} ListNode
+ */
+
+export class ListBehavior {
+    /** @param {Block} block */
+    constructor(block) {
+        this.block = block;
+        this.node = /** @type {ListNode} */ (block.node);
+        this.listType = /** @type {"bullet" | "ordered"} */ (this.node.data.get("listType") || "bullet");
+        this.node.data.subscribe(() => {
+            this.listType = /** @type {"bullet" | "ordered"} */ (this.node.data.get("listType") || "bullet");
+        });
+    }
+
+    /** @type {"bullet" | "ordered"} */
+    listType = $state("bullet");
+
+    /** @param {Block} block */
+    absorbs(block) {
+        const behavior = block?.behaviors.get("list");
+        if (!(behavior && behavior instanceof ListBehavior)) {
+            console.warn("Cannot merge: target block is not a list.");
+            return;
+        }
+        if (!(block instanceof MegaBlock)) {
+            console.warn("Cannot merge: target block is not a mega block.");
+            return;
+        }
+
+        if (behavior.listType !== this.listType) {
+            console.warn("Cannot merge lists of different types.");
+            return;
+        }
+
+        // 1. On fusionne les enfants de l'autre liste dans la nôtre
+        const otherChildren = block.node.children() || [];
+        otherChildren.forEach(child => {
+            console.warn("Merging child with id", child.id.toString(), "from list", block.id, "into list", this.block.id);
+            const data = /** @type {LoroText} */ (child.data.get("text"));
+            const targetIndex = this.block.node.children()?.length; // On ajoute à la fin de notre liste
+            if (targetIndex === undefined || targetIndex === null) {
+                console.error("Cannot merge: current block's node has no children array.");
+                return;
+            }
+            child.move(this.block.node, targetIndex);
+        });
+
+        // block.destroy();
+
+
+        return true;
+    }
+}

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

@@ -0,0 +1,39 @@
+/**
+ * @import { Nabu, NabuNode } from "../nabu.svelte";
+ */
+/**
+ * @typedef {NabuNode<{type: "list", listType: "bullet" | "ordered"}>} ListNode
+ */
+export class List extends MegaBlock {
+    /** @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): List;
+    /** @param {Nabu} nabu @param {ListNode} node */
+    constructor(nabu: Nabu, node: ListNode);
+    behavior: ListBehavior;
+    listType: "bullet" | "ordered";
+    component: import("svelte").Component<any, any, string> | import("svelte").Component<{
+        block: import("./list.svelte").List;
+    }, {}, "">;
+    root: boolean;
+    /** @param {List} otherList */
+    absorbs(otherList: List): true | undefined;
+    /**
+     * @param {Event | null} event
+     * @param {{from: import('./list-item.svelte.js').ListItem, offset: number, delta: import('loro-crdt').Delta<string>}} data
+     */
+    onSplit(event: Event | null, data: {
+        from: import("./list-item.svelte.js").ListItem;
+        offset: number;
+        delta: import("loro-crdt").Delta<string>;
+    }): {
+        block: import("..").Block;
+    };
+}
+export type ListNode = NabuNode<{
+    type: "list";
+    listType: "bullet" | "ordered";
+}>;
+import { MegaBlock } from "../megablock.svelte";
+import { ListBehavior } from "./list.behavior.svelte";
+import type { Nabu } from "../nabu.svelte";
+import type { NabuNode } from "../nabu.svelte";

package/dist/blocks/list/list.svelte.js

@@ -0,0 +1,139 @@
+import { MegaBlock } from "../megablock.svelte";
+import { ListBehavior } from "./list.behavior.svelte";
+import ListComponent from "./List.svelte";
+
+/**
+ * @import { Nabu, NabuNode } from "../nabu.svelte";
+ */
+
+/**
+ * @typedef {NabuNode<{type: "list", listType: "bullet" | "ordered"}>} ListNode
+ */
+
+
+
+export class List extends MegaBlock {
+    /** @param {Nabu} nabu @param {ListNode} node */
+    constructor(nabu, node) {
+        super(nabu, node);
+
+        this.behavior = new ListBehavior(this);
+        this.behaviors.set("list", this.behavior);
+
+        this.serializers.set('markdown', () =>
+            this.children
+                .map(child => child.serialize('markdown'))
+                .filter(Boolean)
+                .join('\n')
+        );
+        this.serializers.set('json', () => ({
+            id: this.id,
+            type: 'list',
+            props: { listType: this.listType },
+            children: this.children.map(child => child.serialize('json')).filter(Boolean)
+        }));
+    }
+
+    listType = $derived(this.behavior.listType);
+
+    component = $derived(this.nabu.components.get("list") || ListComponent);
+
+    root = $derived(!this.parent);
+
+
+    /** @param {List} otherList */
+    absorbs(otherList) {
+        return this.behavior.absorbs(otherList);
+    }
+
+    /** 
+     * @param {Event | null} event
+     * @param {{from: import('./list-item.svelte.js').ListItem, offset: number, delta: import('loro-crdt').Delta<string>}} data 
+     */
+    onSplit(event, data) {
+        const { from: sourceItem, offset, delta } = data;
+        
+        // --- CAS 1 : L'item est vide (Demande de sortie de liste) ---
+        if (sourceItem.text.length === 0) {
+            const currentIndex = sourceItem.node.index();
+            const siblings = this.node.children();
+            const followers = siblings.slice(currentIndex + 1);
+            
+            // 1. On identifie le point d'insertion (juste après la liste actuelle)
+            const parentNode = this.node.parent();
+            const grandParentId = parentNode?.id.toString() || null;
+            const myIndexInGrandParent = this.node.index();
+            
+            // 2. On insère le paragraphe de sortie juste après cette liste
+            const newParagraph = this.nabu.insert("paragraph", {}, grandParentId, myIndexInGrandParent + 1);
+            
+            // 3. Si on était au milieu de la liste, on crée une nouvelle liste après le paragraphe pour les "followers"
+            if (followers.length > 0) {
+                const newList = this.nabu.insert("list", { listType: this.listType }, grandParentId, myIndexInGrandParent + 2);
+                for (const follower of followers) {
+                    this.nabu.tree.move(follower.id.toString(), newList.node.id.toString());
+                }
+            }
+            
+            // 4. On détruit l'item vide actuel
+            sourceItem.destroy();
+            
+            // 5. Si la liste d'origine est devenue vide, on la supprime aussi
+            if (currentIndex === 0 && followers.length === 0) {
+                this.destroy();
+            }
+
+            this.nabu.commit();
+            
+            setTimeout(() => {
+                this.nabu.selection.setCursor(newParagraph, 0);
+            }, 0);
+            
+            return { block: newParagraph };
+        }
+        
+        // --- CAS 2 : Comportement normal (Créer un nouvel item en dessous) ---
+        
+        // 1. On efface la fin du texte dans l'item source
+        sourceItem.delete({from: offset, to: -1});
+        
+        // 2. On trouve l'index de l'item source dans la liste
+        const currentIndex = sourceItem.node.index();
+
+        
+        // 3. On demande à Nabu d'insérer un nouveau list-item au même niveau
+        const newItem = this.nabu.insert(
+            "list-item",
+            { delta },
+            this.node.id.toString(), // Le parent est la liste actuelle
+            currentIndex + 1
+        );
+
+        // 3.1. On transfère TOUS les enfants du sourceItem vers le newItem
+        const sourceChildren = sourceItem.node.children();
+        if (sourceChildren && sourceChildren.length > 0) {
+            for (const childNode of sourceChildren) {
+                // @ts-ignore - Le type string fonctionne avec move()
+                this.nabu.tree.move(childNode.id.toString(), newItem.node.id.toString());
+            }
+        }
+
+        this.nabu.commit();
+        
+        // 4. On replace le curseur au début du nouvel item
+        setTimeout(() => {
+            this.nabu.selection.setCursor(newItem, 0);
+        }, 0);
+        
+        return { block: newItem };
+    }
+
+    /** @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", "list");
+        node.data.set("listType", props.listType || "bullet");
+        const block = new List(nabu, node);
+        return block;
+    }
+}

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

@@ -0,0 +1,13 @@
+/**
+ * @import { Nabu, NabuNode } from "./nabu.svelte";
+ */
+export class MegaBlock extends Block {
+    /** @type {Block[]} */
+    children: Block[];
+    updateChildren(): void;
+    /** @param {Block[]} children @param {number | null} [index] */
+    adoptChildren(children: Block[], index?: number | null): {
+        skipped: boolean | Block[];
+    };
+}
+import { Block } from "./block.svelte";

package/dist/blocks/megablock.svelte.js

@@ -0,0 +1,64 @@
+import { Block } from "./block.svelte";
+import { handleContainerBeforeInput } from "./container.utils.js";
+
+/**
+ * @import { Nabu, NabuNode } from "./nabu.svelte";
+ */
+
+export class MegaBlock extends Block {
+
+    /** @param {Nabu} nabu @param {NabuNode} node */
+	constructor(nabu, node) {
+		super(nabu, node);
+        this.updateChildren();
+	}
+
+    /** @type {Block[]} */
+    children = $state([]);
+
+    updateChildren() {
+        const childrenNodes = this.node.children();
+        if (!childrenNodes) return;
+        this.children = childrenNodes.map((childNode, i) => {
+            const id = childNode.id.toString();
+            let block = this.nabu.blocks.get(id);
+            const currentType = childNode.data.get("type");
+
+            if (!block || block.type !== currentType) {
+                if (block) {
+                    this.nabu.blocks.delete(id);
+                    this.nabu.blocksByType.get(block.type)?.delete(block);
+                }
+                block = Block.load(this.nabu, childNode);
+            }
+            block.parent = this;
+            block.index = i;
+            return block;
+        });
+    }
+
+
+    /** @param {Block[]} children @param {number | null} [index] */
+    adoptChildren(children, index = null) {
+        /** @type {Block[]} */
+        let skipped = [];
+        children.reverse().forEach(child => {
+            const childNode = child.node;
+            if (!childNode) return;
+            if (false) {
+                //TODO: conditions de skip, ex: si le block est déjà dans la mega block, ou si c'est un block parent de la mega block, etc.
+                console.warn("Skipping child with id", child.id, "because ...");
+                return skipped.push(child);
+            }
+            this.nabu.tree.move(childNode.id, this.node.id, index);
+        })
+
+        return {skipped: skipped.length ? skipped.reverse() : false};
+    }
+
+
+    /** @param {InputEvent} event */
+    beforeinput(event) {
+        return handleContainerBeforeInput(this, this.nabu, event);
+    }
+}

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

@@ -0,0 +1,121 @@
+/**
+* @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 {
+    static BREAK: symbol;
+    static CONTINUE: symbol;
+    /** @param {NabuInit} init */
+    constructor(init?: NabuInit);
+    /** @type {LoroDoc} */
+    doc: LoroDoc;
+    selection: NabuSelection;
+    tree: LoroTree<Record<string, NabuNode<{}>>>;
+    content: import("loro-crdt").LoroMap<Record<string, unknown>>;
+    undoManager: UndoManager;
+    extensions: Extension[];
+    BREAK: symbol;
+    CONTINUE: symbol;
+    /** @type {SvelteMap<string, typeof Block>} */
+    registry: SvelteMap<string, typeof Block>;
+    /** @type {SvelteMap<string, Component>} */
+    components: SvelteMap<string, Component>;
+    /** @type {SvelteMap<string, Block>} */
+    blocks: SvelteMap<string, Block>;
+    /** @type {SvelteMap<string, SvelteSet<Block>>} */
+    blocksByType: SvelteMap<string, SvelteSet<Block>>;
+    /** @type {SvelteMap<string, any>} */
+    systems: SvelteMap<string, any>;
+    hooks: Map<any, any>;
+    /**
+     * Root-level serializers. Each function receives the Nabu instance and returns the serialized document.
+     * @type {Map<string, (nabu: Nabu) => any>}
+     */
+    serializers: Map<string, (nabu: Nabu) => any>;
+    /** @type {Block[]} */
+    children: Block[];
+    get isEmpty(): boolean;
+    /** @param {string} format */
+    serialize(format: string): any;
+    init(): void;
+    /** Rafraîchit les blocs racines de l'éditeur */
+    updateRoots(): void;
+    trigger(hookName: any, ...args: any[]): void;
+    commit(): void;
+    /**
+     * Undo the last operation
+     */
+    undo(): void;
+    /**
+     * Redo the last undone operation
+     */
+    redo(): void;
+    /** @param {{from: {offset: number, block: Block}, to: {offset: number, block: Block}}} [options={}]  */
+    focus(options?: {
+        from: {
+            offset: number;
+            block: Block;
+        };
+        to: {
+            offset: number;
+            block: Block;
+        };
+    }): void;
+    /**
+    * 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: string, props?: Object, parentId?: string | null, index?: number | null): Block;
+    /** @param {Block} block */
+    delete(block: Block): void;
+    /**
+    * @param {string} nodeId
+    * @returns
+    */
+    deleteNode(nodeId: string): void;
+    /**
+     * 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: string, e: Event, hookName?: string): void;
+    /** @param {InputEvent} e */
+    handleBeforeinput(e: InputEvent): void;
+    /** @param {KeyboardEvent} e */
+    handleKeydown(e: KeyboardEvent): void;
+    /** @param {InputEvent} e */
+    beforeinput(e: InputEvent): any;
+}
+export type NabuNode<T extends {
+    [x: string]: any;
+} = {}> = LoroTreeNode<{
+    type: string;
+} & T>;
+export type NabuInit = {
+    extensions?: Extension[] | undefined;
+    snapshot?: Uint8Array<ArrayBufferLike> | undefined;
+};
+import { LoroDoc } from 'loro-crdt';
+import { NabuSelection } from './selection.svelte';
+import type { LoroTree } from "loro-crdt";
+import { UndoManager } from 'loro-crdt';
+import type { Extension } from '../utils/extensions.js';
+import { SvelteMap } from 'svelte/reactivity';
+import { Block } from './block.svelte';
+import type { Component } from "svelte";
+import { SvelteSet } from 'svelte/reactivity';
+import type { LoroTreeNode } from "loro-crdt";