@aionbuilders/nabu 0.1.0-alpha.0

package/dist/blocks/block.svelte.js

@@ -0,0 +1,364 @@
+/**
+ * @import { Nabu, NabuNode } from "./nabu.svelte";
+ * @import { MegaBlock } from "./megablock.svelte";
+ */
+
+import { tick } from "svelte";
+import { SvelteMap, SvelteSet } from "svelte/reactivity";
+
+
+export class Block {
+    /** @param {Nabu} nabu @param {NabuNode} node */
+    constructor(nabu, node) {
+        this.nabu = nabu;
+        this.node = node;
+        const metadata = node.data;
+        this.id = node.id.toString()
+        this.type = metadata.get("type") || "block";
+        this.nabu.blocks.set(this.id, this);
+        const blocksOfType = this.nabu.blocksByType.get(this.type) || new SvelteSet();
+        blocksOfType.add(this);
+        this.nabu.blocksByType.set(this.type, blocksOfType);
+        
+
+
+        const parent = node.parent();
+        if (parent) {
+            this.parent = this.nabu.blocks.get(parent.id.toString()) || null;
+        }
+    }
+
+    serializers = new SvelteMap();
+    behaviors = new SvelteMap();
+    selected = $state(false);
+    isSelectionStart = $state(false);
+    isSelectionEnd = $state(false);
+    isIntermediate = $derived(this.selected && !this.isSelectionStart && !this.isSelectionEnd);
+    
+    clearSelection() {
+        this.selected = false;
+        this.isSelectionStart = false;
+        this.isSelectionEnd = false;
+    }
+
+    /** @type {{from: number, to: number, direction: "forward" | "backward" | "none"} | null} */
+    selection = $derived(null);
+
+    /** @type {MegaBlock | null} */
+    parent = $state(null);
+    index = $state(0);
+    /** @type {Block?} */
+    previous = $derived(this.index > 0 && this.parent ? this.parent.children[this.index - 1] : null);
+    /** @type {Block?} */
+    next = $derived(this.parent && this.index < this.parent.children.length - 1 ? this.parent.children[this.index + 1] : null);
+
+    parents = $derived.by(() => {
+        const parents = [];
+        let current = this.parent;
+        while (current) {
+            parents.push(current);
+            current = current.parent;
+        }
+        return parents;
+    });
+
+    component = $derived(this.nabu.components.get(this.type) || null);
+
+    /** @type {HTMLElement | null} */
+    element = $state(null);
+
+    /** @param {(block: Block) => boolean} predicate @returns {Block | null} */
+    findForward(predicate) {
+        // 1. Chercher dans les enfants (descendre)
+        // @ts-ignore
+        if (this.children?.length) {
+            // @ts-ignore
+            for (const child of this.children) {
+                if (predicate(child)) return child;
+                const found = child.findForward(predicate);
+                if (found) return found;
+            }
+        }
+
+        // 2. Chercher dans les frères suivants et remonter
+        let current = this;
+        while (current) {
+            const parent = current.parent || current.nabu;
+            const i = parent.children.indexOf(current);
+            if (i !== -1) {
+                for (let j = i + 1; j < parent.children.length; j++) {
+                    const sibling = parent.children[j];
+                    if (predicate(sibling)) return sibling;
+                    const found = sibling.findForward(predicate);
+                    if (found) return found;
+                }
+            }
+            current = current.parent;
+        }
+        return null;
+    }
+
+    /** @param {(block: Block) => boolean} predicate @returns {Block | null} */
+    findBackward(predicate) {
+        let current = this;
+        while (current) {
+            const parent = current.parent || current.nabu;
+            const i = parent.children.indexOf(current);
+            
+            if (i !== -1) {
+                // On parcourt les frères précédents de bas en haut
+                for (let j = i - 1; j >= 0; j--) {
+                    const sibling = parent.children[j];
+                    
+                    // Si le frère a des enfants, le "précédent" est le DERNIER de ses descendants
+                    // @ts-ignore
+                    if (sibling.children?.length) {
+                        // @ts-ignore
+                        const lastDescendant = sibling.findLastDescendant(predicate);
+                        if (lastDescendant) return lastDescendant;
+                    }
+                    
+                    if (predicate(sibling)) return sibling;
+                }
+            }
+            
+            // Si aucun frère précédent ne match, on teste le parent lui-même
+            if (current.parent) {
+                if (predicate(current.parent)) return current.parent;
+                current = current.parent;
+            } else {
+                break;
+            }
+        }
+        return null;
+    }
+
+    /**
+     * Returns real, uncommitted siblings, which is useful for extensions that want to check the document structure before the transaction is committed.
+     */
+    getAdjacentSiblings() {
+        const parent = this.node.parent();
+        const siblings = parent ? parent.children() : this.nabu.tree.roots();
+        if (!siblings) return { previous: null, next: null };
+        
+        const index = this.node.index();
+        if (index === null || index === undefined) return { previous: null, next: null };
+        
+        const previousNode = index > 0 ? siblings[index - 1] : null;
+        const nextNode = index < siblings.length - 1 ? siblings[index + 1] : null;
+        const previous = previousNode ? this.nabu.blocks.get(previousNode.id.toString()) : null;
+        const next = nextNode ? this.nabu.blocks.get(nextNode.id.toString()) : null;
+
+        return {
+            previous,
+            next,
+            previousNode,
+            nextNode
+        };
+    }
+
+    /** 
+     * Helper pour trouver le dernier descendant profond qui matche
+     * @param {(block: Block) => boolean} predicate 
+     * @returns {Block | null} 
+     */
+    findLastDescendant(predicate) {
+        // @ts-ignore
+        const children = this.children || [];
+        for (let i = children.length - 1; i >= 0; i--) {
+            const child = children[i];
+            const found = child.findLastDescendant(predicate);
+            if (found) return found;
+            if (predicate(child)) return child;
+        }
+        return null;
+    }
+
+    destroy() {
+        this.nabu.delete(this);
+    }
+
+    /**
+     * Transforme ce bloc en un autre type de bloc.
+     * @param {string} newType 
+     * @param {Object} [props={}] 
+     */
+    transformTo(newType, props = {}) {
+        const data = this.node.data;
+        data.set("type", newType);
+        for (const [key, value] of Object.entries(props)) {
+            data.set(key, value);
+        }
+        this.commit();
+    }
+
+    /** @param {number} index @param {string} text */
+    insert(index, text) {
+        console.warn("Not implemented: insert text", text, "at index", index, "in block", this.id);
+    }
+
+    /** @param {{from?: number, to?: number, index?: number, length?: number}} [deletion] */
+    delete(deletion) {
+        console.warn("Not implemented: delete block", this.id, "with deletion range", deletion);
+    }
+
+    /** @param {Block} block @returns {any} */
+    absorbs(block) {
+        console.warn("Not implemented: check if block", this.id, "absorbs block", block.id);
+        return false;
+    }
+
+
+    /** @param {Block} block @returns {any} */
+    mergeWith(block) {
+        const success = this.absorbs(block);
+        if (success) {
+            block.destroy();
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * 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, direction = 'from') {
+        const [survivor, victim] = direction === 'into'
+            ? [otherBlock, this]
+            : [this, otherBlock];
+
+        const absorbed = survivor.absorbs(victim);
+
+        // Handle children relocation if victim has any
+        // @ts-ignore - MegaBlock has children
+        if (victim.children?.length) {
+            if (absorbed && survivor.adoptChildren) {
+                // MegaBlock survivor adopts children
+                // @ts-ignore
+                survivor.adoptChildren(victim.children);
+            } else {
+                // Non-MegaBlock survivor: promote children as siblings
+                // @ts-ignore
+                victim.children.forEach(child => {
+                    child.node.moveAfter(survivor.node);
+                });
+            }
+        }
+
+        // Handle the victim block itself if not absorbed
+        if (!absorbed) {
+            victim.node.moveAfter(survivor.node);
+        }
+
+        return survivor;
+    }
+
+    /** @param {Block[]} children @param {number | null} [index] */
+    adoptChildren(children, index = null) {
+        console.warn("Not implemented: adopt children", children.map(c => c.id), "into block", this.id, "at index", index);
+    }
+
+    /** @param {{from?: number, to?: number, index?: number, length?: number, offset?: number}} options @returns {{block: Block} | null} */
+    split(options) {
+        console.warn("Not implemented: split block", this.id, "with options", options);
+        return null;
+    }
+
+    /** @param {{start?: number, end?: number, offset?: number} | null } options @param {boolean} [passive=false] */
+    focus(options = {}, passive = false) {
+        let start = options?.start ?? options?.offset ?? this.selection?.from ?? 0;
+        let end = options?.end ?? options?.offset ?? this.selection?.to ?? 0;
+        const startPoint = this.getDOMPoint(start);
+        const endPoint = this.getDOMPoint(end);
+        if (!passive && startPoint && endPoint) {
+            tick().then(() => {
+                this.nabu.selection.setBaseAndExtent(startPoint.node, startPoint.offset || 0, endPoint.node || null, endPoint.offset || 0)
+            })
+        }
+
+        return {start: startPoint, end: endPoint, options: {startOffset: start, endOffset: end}};
+    } 
+
+    /** 
+     * @param {number} offset
+     * @returns {{node: Node, offset: number} | null}
+     */
+    getDOMPoint(offset) {
+        console.warn("getDOMPoint not implemented for block", this.type, this.id);
+        return null;
+    }
+
+    // -- Event Handling --
+
+    /** @param {string} eventName @param {Event} event @param {Object} [data={}] */
+    ascend(eventName, event, data = {}) {
+        //@ts-ignore
+        if (this.parent && typeof this.parent[eventName] === "function") {
+            //@ts-ignore
+            return this.parent[eventName](event, { ...data, from: this });
+        }
+
+        // 2. On essaye les hooks d'extensions enregistrés dans Nabu
+        const hooks = this.nabu.hooks.get(eventName);
+        if (hooks) {
+            for (const hook of hooks) {
+
+                // Si un hook retourne 'true', on considère l'événement géré
+                const result = hook(this.nabu, this, event, data);
+                if (result) return result;
+            }
+        }
+
+        return false;
+    }
+
+    /** @param {InputEvent} event @returns {any} */
+    beforeinput(event) {
+        // On peut intercepter les événements d'input ici pour faire des choses comme :
+    }
+
+    /** @param {KeyboardEvent} event @returns {any} */
+    keydown(event) {
+        // Intercepter les touches spéciales (Tab, Enter, flèches)
+    }
+
+    // -- UTILS --
+
+    commit() {
+        this.nabu.commit();
+    }
+
+
+    /** @param {string} format */
+    serialize(format) {
+        const serializer = this.serializers.get(format);
+        if (serializer) {
+            return serializer(this);
+        } else {
+            console.warn(`No serializer found for format "${format}" on block type "${this.type}"`);
+            return null;
+        }
+    }
+
+
+    /** @param {Nabu} nabu @param {NabuNode} node */
+    static load(nabu, node) {
+        const metadata = node.data;
+        const type = metadata.get("type") || "block";
+        const BlockClass = nabu.registry.get(type) || Block;
+        const block = new BlockClass(nabu, node);
+        return block;
+    }
+
+    /** @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", type);
+        const block = Block.load(nabu, node);
+        return block;
+    }
+
+}

package/dist/blocks/container.utils.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @import { Block } from './block.svelte';
+ * @import { Nabu } from './nabu.svelte';
+ */
+/**
+ * Shared beforeinput logic for block containers (Nabu root and MegaBlock).
+ *
+ * Uses a "spine" approach: for each selection boundary, we walk up the parent
+ * chain until we hit the container, collecting intermediate blocks to clean up
+ * along the way. This correctly handles arbitrarily nested structures.
+ *
+ * Spine termination differs between the two callers:
+ *   - MegaBlock: the container IS pushed into the spine (loop exits on === container),
+ *     so the direct child of container is at spine.at(-2).
+ *   - Nabu: root blocks have parent = null, so the loop breaks before Nabu is ever
+ *     pushed, and the direct child of container is at spine.at(-1).
+ * Both cases are unified by the directChild() helper below.
+ *
+ * @param {{ children: Block[], commit: () => void }} container
+ * @param {Nabu} nabu
+ * @param {InputEvent} event
+ */
+export function handleContainerBeforeInput(container: {
+    children: Block[];
+    commit: () => void;
+}, nabu: Nabu, event: InputEvent): any;
+import type { Block } from './block.svelte';
+import type { Nabu } from './nabu.svelte';

package/dist/blocks/container.utils.js

@@ -0,0 +1,114 @@
+/**
+ * @import { Block } from './block.svelte';
+ * @import { Nabu } from './nabu.svelte';
+ */
+
+/**
+ * Shared beforeinput logic for block containers (Nabu root and MegaBlock).
+ *
+ * Uses a "spine" approach: for each selection boundary, we walk up the parent
+ * chain until we hit the container, collecting intermediate blocks to clean up
+ * along the way. This correctly handles arbitrarily nested structures.
+ *
+ * Spine termination differs between the two callers:
+ *   - MegaBlock: the container IS pushed into the spine (loop exits on === container),
+ *     so the direct child of container is at spine.at(-2).
+ *   - Nabu: root blocks have parent = null, so the loop breaks before Nabu is ever
+ *     pushed, and the direct child of container is at spine.at(-1).
+ * Both cases are unified by the directChild() helper below.
+ *
+ * @param {{ children: Block[], commit: () => void }} container
+ * @param {Nabu} nabu
+ * @param {InputEvent} event
+ */
+export function handleContainerBeforeInput(container, nabu, event) {
+    const startBlock = /** @type {Block} */ (nabu.selection.startBlock);
+    const endBlock = /** @type {Block} */ (nabu.selection.endBlock);
+    if (!startBlock || !endBlock) return false;
+
+    const focusData = startBlock.focus(undefined, true);
+    const inputType = event.inputType;
+
+    // Build start spine: walk from startBlock up to (but not past) container,
+    // pruning next-siblings of each intermediate node along the way.
+    const startSpine = [startBlock];
+    while (startSpine.at(-1) && startSpine.at(-1) !== container) {
+        const current = startSpine.at(-1);
+        const parent = current?.parent;
+        if (!current || !parent) break;
+        startSpine.push(parent);
+        if (parent !== container) {
+            const nextSiblings = parent.children.slice(current.index + 1);
+            if (nextSiblings.length) nextSiblings.forEach(block => block.destroy());
+        }
+    }
+
+    // Build end spine: walk from endBlock up to (but not past) container,
+    // pruning prev-siblings of each intermediate node along the way.
+    const endSpine = [endBlock];
+    while (endSpine.at(-1) && endSpine.at(-1) !== container) {
+        const current = endSpine.at(-1);
+        const parent = current?.parent;
+        if (!current || !parent) break;
+        endSpine.push(parent);
+        if (parent !== container) {
+            const previousSiblings = parent.children.slice(0, current.index);
+            if (previousSiblings.length) previousSiblings.forEach(block => block.destroy());
+        }
+    }
+
+    // Resolve the direct children of container from each spine.
+    const directChild = (spine) => spine.at(-1) === container ? spine.at(-2) : spine.at(-1);
+    const startOfStartSpine = directChild(startSpine);
+    const startOfEndSpine = directChild(endSpine);
+    if (!startOfStartSpine || !startOfEndSpine) return false;
+
+    // Delete intermediate direct children of container between the two spines.
+    const intermediates = container.children.slice(startOfStartSpine.index + 1, startOfEndSpine.index);
+    intermediates.forEach(block => block.destroy());
+
+    // Single-block selection: delegate directly to that block.
+    if (startBlock === endBlock) {
+        return startBlock.beforeinput(event);
+    }
+
+    // Delete the selected portions of both boundary blocks.
+    startBlock.delete();
+    endBlock.delete();
+
+    let focusBlock = startBlock;
+
+    if (inputType === 'deleteContentBackward' || inputType === 'deleteContentForward') {
+        // Text deletion already handled above.
+    } else if (inputType === 'insertParagraph') {
+        const { block: newBlock } = startBlock.split({ offset: focusData.options.startOffset }) || {};
+        if (newBlock) focusBlock = newBlock;
+    } else if (inputType === 'insertText' || inputType === 'insertLineBreak') {
+        const text = event.data || (inputType === 'insertLineBreak' ? '\n' : '');
+        startBlock.insert(focusData.options.startOffset, text);
+    } else {
+        console.warn('Unhandled input type in container:', inputType);
+        return false;
+    }
+
+    // Merge the end block into focusBlock and relocate orphaned siblings.
+    focusBlock.consume(endBlock);
+
+    endSpine.forEach(block => {
+        if (block === container) return;
+        const brotherhood = block.parent?.children || [];
+        const index = brotherhood.indexOf(block);
+        if (index !== -1) {
+            const nextSiblings = brotherhood.slice(index + 1);
+            if (nextSiblings.length) nextSiblings.forEach(sibling => sibling.node.moveAfter(focusBlock.node));
+        }
+    });
+
+    startOfEndSpine?.destroy();
+
+    container.commit();
+    startBlock.focus({
+        offset: focusData.options.startOffset + (inputType === 'insertText' ? (event.data?.length || 0) : 0)
+    });
+    return true;
+}

package/dist/blocks/heading/Heading.svelte

@@ -0,0 +1,42 @@
+<script>
+    import RichText from '../../behaviors/text/RichText.svelte';
+    /** @type {{block: import('./heading.svelte.js').Heading}}*/
+    let {block} = $props();
+</script>
+
+<svelte:element
+    this={"h" + block.level}
+    bind:this={block.element}
+    data-block-id={block.id}
+    data-block-type="heading"
+    class="nabu-heading"
+    class:selected={block.selected}
+    class:first={block.isSelectionStart}
+    class:last={block.isSelectionEnd}
+><RichText delta={block.delta} /></svelte:element>
+
+<style>
+    .nabu-heading {
+        margin-top: 1.5rem;
+        margin-bottom: 0.5rem;
+        white-space: pre-wrap;
+        outline: none;
+        
+        &.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);
+        }
+    }
+
+    h1 { font-size: 2.25rem; font-weight: 800; }
+    h2 { font-size: 1.875rem; font-weight: 700; }
+    h3 { font-size: 1.5rem; font-weight: 700; }
+    h4 { font-size: 1.25rem; font-weight: 600; }
+    h5 { font-size: 1.125rem; font-weight: 600; }
+    h6 { font-size: 1rem; font-weight: 600; }
+</style>

package/dist/blocks/heading/Heading.svelte.d.ts

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

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

@@ -0,0 +1,45 @@
+/**
+ * @import { Nabu, NabuNode } from "../nabu.svelte";
+ * @import { TextNode } from "../../behaviors/text";
+ */
+/**
+ * @typedef {NabuNode<{type: "heading", text: LoroText, level: number}>} HeadingNode
+ */
+export class Heading 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): Heading;
+    /** @param {Nabu} nabu @param {HeadingNode} node */
+    constructor(nabu: Nabu, node: HeadingNode);
+    container: LoroText;
+    /** @type {TextBehavior} */
+    behavior: TextBehavior;
+    /** @type {number} */
+    level: number;
+    component: import("svelte").Component<any, any, string> | import("svelte").Component<{
+        block: import("./heading.svelte").Heading;
+    }, {}, "">;
+    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 HeadingNode = NabuNode<{
+    type: "heading";
+    text: LoroText;
+    level: number;
+}>;
+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";