@aionbuilders/nabu 0.1.0-alpha.0

package/dist/blocks/selection.svelte.js

@@ -0,0 +1,143 @@
+
+import { SvelteSelection } from "../utils/selection.svelte";
+
+/**
+* @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) {
+        super();
+        this.nabu = nabu;
+
+        $effect(() => {
+            if (this.blocks) {
+                this.previous.forEach(block => block.clearSelection());
+                let i = 0;
+                const lastIndex = this.blocks.size - 1;
+                this.blocks.forEach((block) => {
+                    block.selected = true;
+                    block.isSelectionStart = (i === 0);
+                    block.isSelectionEnd = i === lastIndex;
+                    i++;
+                });
+                this.previous = new Set(this.blocks);
+            }
+        })
+    }
+    
+    anchorBlock = $derived.by(() => {
+        this.anchorNode;
+        const id = this.anchorNode?.parentElement?.closest("[data-block-id]")?.getAttribute("data-block-id");
+        return id ? this.nabu.blocks.get(id) : null;
+    });
+    
+    focusBlock = $derived.by(() => {
+        this.focusNode;
+        const id = this.focusNode?.parentElement?.closest("[data-block-id]")?.getAttribute("data-block-id");
+        return id ? this.nabu.blocks.get(id) : null;
+    });
+    
+    startBlock = $derived.by(() => {
+        this.range;
+        const id = this.range?.startContainer?.parentElement?.closest("[data-block-id]")?.getAttribute("data-block-id");
+        return id ? this.nabu.blocks.get(id) : null;
+    });
+    
+    endBlock = $derived.by(() => {
+        this.range;
+        const id = this.range?.endContainer?.parentElement?.closest("[data-block-id]")?.getAttribute("data-block-id");
+        return id ? this.nabu.blocks.get(id) : null;
+    });
+
+    start = $derived(this.startBlock?.selection && {
+        block: this.startBlock,
+        ...this.startBlock.selection
+    });
+
+    end = $derived(this.endBlock?.selection && {
+        block: this.endBlock,
+        ...this.endBlock.selection
+    });
+
+    /**
+     * Définit le curseur à un endroit précis du document (Modèle -> DOM)
+     * @param {Block} block 
+     * @param {number} offset 
+     */
+    setCursor(block, offset) {
+        if (!block.element) return;
+        
+        // On délègue au bloc le soin de trouver le bon point DOM
+        // (Chaque type de bloc sait comment il affiche son texte)
+        //@ts-ignore
+        const point = block.getDOMPoint?.(offset);
+        if (!point) return;
+
+        this.setBaseAndExtent(point.node, point.offset, point.node, point.offset);
+    }
+
+    /** @type {Set<Block>} */
+    previous = new Set();
+    blocks = $derived(new Set(getNodesBetween(this.nabu.tree, this.startBlock?.node.id.toString() || "", this.endBlock?.node.id.toString() || "").map(node => {
+        return this.nabu.blocks.get(node.id.toString());
+    }).filter(b => !!b)));
+    
+}
+
+
+
+/**
+* Récupère tous les nœuds situés entre deux nœuds dans un arbre Loro (version aplatie).
+* L'ordre dans lequel on passe A et B n'a pas d'importance.
+* @param {LoroTree} tree - L'arbre Loro à parcourir
+* @param {string} nodeIdA - ID du premier nœud de la sélection
+* @param {string} nodeIdB - ID du second nœud de la sélection
+*/
+function getNodesBetween(tree, nodeIdA, nodeIdB) {
+    const roots = tree.roots();
+    
+    let isRecording = false;
+    /** @type {LoroTreeNode[]} */
+    const nodesInRange = [];
+    
+    
+    // if (nodeIdA && nodeIdA === nodeIdB) {
+    //     
+    // }
+    
+    /** @param {LoroTreeNode[]} nodes */
+    function traverse(nodes) {
+        for (const node of nodes) {
+            const currentId = node.id.toString();
+
+            if (currentId === nodeIdA) {
+                isRecording = true;
+                nodesInRange.push(node);
+                
+                if (currentId === nodeIdB) {
+                    return true;
+                }
+            } else if (isRecording) {
+                nodesInRange.push(node);
+                if (currentId === nodeIdB) {
+                    return true; 
+                }
+            }
+            
+            const children = node.children();
+            if (children && children.length > 0) {
+                if (traverse(children)) {
+                    return true; 
+                }
+            }
+        }
+        return false; // La fin n'a pas été trouvée dans cette branche
+    }
+    
+    traverse(roots);
+    return nodesInRange;
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./blocks";
+export * from "./utils";
+export * from "./behaviors";
+export { RichTextExtension, RichText } from "./behaviors/text";

package/dist/index.js

@@ -0,0 +1,5 @@
+// Reexport your entry components here
+export { RichTextExtension, RichText } from './behaviors/text';
+export * from './blocks';
+export * from "./utils";
+export * from './behaviors';

package/dist/utils/extensions.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @import { Nabu, Block } from '../blocks'
+ */
+/**
+ * @typedef {{
+ * onInit: function(Nabu): void,
+ * onBlockCreate: function(Nabu, Block): void,
+ * onBlockDelete: function(Nabu, Block): void,
+ * onBlockUpdate: function(Nabu, Block): void,
+ * onBeforeTransaction: function(Nabu, Array<{type: string, block: Block}>): void,
+ * onAfterTransaction: function(Nabu, Array<{type: string, block: Block}>): void,
+ * onSplit: function(Nabu, Block, Event, {offset: number, delta: import('loro-crdt').Delta<string>}): {block: Block},
+ * onBeforeInput: function(Nabu, InputEvent, Block): void,
+ * onInput: function(Nabu, InputEvent, Block): void,
+ * } & Object<string, function>} ExtensionHooks
+ */
+/**
+ * @typedef {Object} ExtensionInit
+ * @property {string} [name]
+ * @property {import('svelte').Component} [component]
+ * @property {typeof Block} [block]
+ * @property {Partial<ExtensionHooks>} [hooks]
+ * @property {Record<string, (nabu: Nabu) => any>} [serializers]
+ */
+export class Extension {
+    /** @param {string} name @param {ExtensionInit} init */
+    constructor(name: string, init?: ExtensionInit);
+    name: string;
+    component: import("svelte").Component<any, any, string> | undefined;
+    block: typeof Block | undefined;
+    /** @type {Partial<ExtensionHooks>} */
+    hooks: Partial<ExtensionHooks>;
+    /** @type {Record<string, (nabu: Nabu) => any>} */
+    serializers: Record<string, (nabu: Nabu) => any>;
+}
+export function extension(name: string, init: ExtensionInit): Extension;
+export type ExtensionHooks = {
+    onInit: (arg0: Nabu) => void;
+    onBlockCreate: (arg0: Nabu, arg1: Block) => void;
+    onBlockDelete: (arg0: Nabu, arg1: Block) => void;
+    onBlockUpdate: (arg0: Nabu, arg1: Block) => void;
+    onBeforeTransaction: (arg0: Nabu, arg1: Array<{
+        type: string;
+        block: Block;
+    }>) => void;
+    onAfterTransaction: (arg0: Nabu, arg1: Array<{
+        type: string;
+        block: Block;
+    }>) => void;
+    onSplit: (arg0: Nabu, arg1: Block, arg2: Event, arg3: {
+        offset: number;
+        delta: import("loro-crdt").Delta<string>;
+    }) => {
+        block: Block;
+    };
+    onBeforeInput: (arg0: Nabu, arg1: InputEvent, arg2: Block) => void;
+    onInput: (arg0: Nabu, arg1: InputEvent, arg2: Block) => void;
+} & {
+    [x: string]: Function;
+};
+export type ExtensionInit = {
+    name?: string | undefined;
+    component?: import("svelte").Component<any, any, string> | undefined;
+    block?: typeof Block | undefined;
+    hooks?: Partial<ExtensionHooks> | undefined;
+    serializers?: Record<string, (nabu: Nabu) => any> | undefined;
+};
+import type { Block } from '../blocks';
+import type { Nabu } from '../blocks';

package/dist/utils/extensions.js

@@ -0,0 +1,43 @@
+/**
+ * @import { Nabu, Block } from '../blocks'
+ */
+
+/**
+ * @typedef {{
+ * onInit: function(Nabu): void,
+ * onBlockCreate: function(Nabu, Block): void,
+ * onBlockDelete: function(Nabu, Block): void,
+ * onBlockUpdate: function(Nabu, Block): void,
+ * onBeforeTransaction: function(Nabu, Array<{type: string, block: Block}>): void,
+ * onAfterTransaction: function(Nabu, Array<{type: string, block: Block}>): void,
+ * onSplit: function(Nabu, Block, Event, {offset: number, delta: import('loro-crdt').Delta<string>}): {block: Block},
+ * onBeforeInput: function(Nabu, InputEvent, Block): void,
+ * onInput: function(Nabu, InputEvent, Block): void,
+ * } & Object<string, function>} ExtensionHooks
+ */
+
+/**
+ * @typedef {Object} ExtensionInit
+ * @property {string} [name]
+ * @property {import('svelte').Component} [component]
+ * @property {typeof Block} [block]
+ * @property {Partial<ExtensionHooks>} [hooks]
+ * @property {Record<string, (nabu: Nabu) => any>} [serializers]
+ */
+
+export class Extension {
+    /** @param {string} name @param {ExtensionInit} init */
+    constructor(name, init = {}) {
+        this.name = name;
+        this.component = init.component;
+        this.block = init.block;
+        /** @type {Partial<ExtensionHooks>} */
+        this.hooks = init.hooks || {};
+        /** @type {Record<string, (nabu: Nabu) => any>} */
+        this.serializers = init.serializers || {};
+    }
+}
+
+
+/** @param {string} name @param {ExtensionInit} init */
+export const extension = (name, init) => new Extension(name, init);

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./extensions.js";
+export * from "./selection.svelte.js";

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export * from "./extensions.js";
+export * from "./selection.svelte.js";

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

@@ -0,0 +1,219 @@
+/**
+* @typedef {{
+*   anchorNode: Node | null,
+*   anchorOffset: number,
+*   focusNode: Node | null,
+*   focusOffset: number,
+*   startNode: Node | null,
+*   startOffset: number,
+*   endNode: Node | null,
+*   endOffset: number,
+*   isCollapsed: boolean,
+*   rangeCount: number,
+*   type: string,
+*   direction: "forward" | "backward" | "none",
+*   text: string,
+*   html: string
+* }} SelectionObject
+*/
+/**
+* Utilitaire réactif pour gérer la sélection de texte avec Svelte 5 runes
+* @example
+* const selection = new SvelteSelection();
+* // Utiliser selection.text, selection.isCollapsed, etc. dans vos composants
+*/
+export class SvelteSelection {
+    /** @type {Selection?} */
+    raw: Selection | null;
+    is: boolean;
+    anchorNode: Node | null;
+    anchorOffset: number;
+    focusNode: Node | null;
+    focusOffset: number;
+    isCollapsed: boolean;
+    rangeCount: number;
+    type: string;
+    direction: "forward" | "backward" | "none";
+    startNode: Node | null;
+    endNode: Node | null;
+    startOffset: number;
+    endOffset: number;
+    ranges: Range[];
+    firstRange: Range;
+    get range(): Range;
+    lastRange: Range;
+    text: string;
+    html: string;
+    hasSelection: boolean;
+    isEmpty: boolean;
+    hasMultipleRanges: boolean;
+    commonAncestor: Node | null;
+    allText: string;
+    allHtml: string;
+    boundingRects: DOMRect[];
+    refresh: () => void;
+    /**
+    * Ajoute une range à la sélection.
+    * @param {Range} range - La range à ajouter.
+    * @returns {boolean} True si l'opération a réussi
+    */
+    addRange: (range: Range) => boolean;
+    /**
+    * Supprime toutes les ranges de la sélection.
+    * @returns {boolean} True si l'opération a réussi
+    */
+    removeAllRanges: () => boolean;
+    /**
+    * Supprime une range spécifique de la sélection.
+    * @param {Range} range - La range à supprimer.
+    * @returns {boolean} True si l'opération a réussi
+    */
+    removeRange: (range: Range) => boolean;
+    /**
+    * Récupère la range à l'index spécifié.
+    * @param {number} index - L'index de la range à récupérer.
+    * @returns {Range|null} La range à l'index spécifié, ou null si elle n'existe pas.
+    */
+    getRangeAt: (index: number) => Range | null;
+    /**
+    * Réduit la sélection à un nœud et offset spécifiques.
+    * @param {Node} node - Le nœud vers lequel réduire la sélection.
+    * @param {number} offset - L'offset dans le nœud.
+    * @returns {boolean} True si l'opération a réussi
+    */
+    collapse: (node: Node, offset?: number) => boolean;
+    /**
+    * Réduit la sélection au début de la range courante.
+    * @returns {boolean} True si l'opération a réussi
+    */
+    collapseToStart: () => boolean;
+    /**
+    * Réduit la sélection à la fin de la range courante.
+    * @returns {boolean} True si l'opération a réussi
+    */
+    collapseToEnd: () => boolean;
+    /**
+    * Sélectionne le contenu d'un nœud.
+    * @param {Node} node - Le nœud dont le contenu doit être sélectionné.
+    * @returns {boolean} True si l'opération a réussi
+    */
+    selectAllChildren: (node: Node) => boolean;
+    /**
+    * Étend la sélection vers un nœud et offset spécifiques.
+    * @param {Node} node - Le nœud vers lequel étendre.
+    * @param {number} offset - L'offset dans le nœud.
+    * @returns {boolean} True si l'opération a réussi
+    */
+    extend: (node: Node, offset?: number) => boolean;
+    /**
+    * Définit la base et l'extension de la sélection.
+    * @param {Node} anchorNode - Le nœud d'ancrage.
+    * @param {number} anchorOffset - L'offset d'ancrage.
+    * @param {Node} focusNode - Le nœud de focus.
+    * @param {number} focusOffset - L'offset de focus.
+    * @returns {boolean} True si l'opération a réussi
+    
+    */
+    setBaseAndExtent: (anchorNode: Node, anchorOffset: number, focusNode: Node, focusOffset: number) => boolean;
+    /**
+    * Vérifie si la sélection contient un nœud donné.
+    * @param {Node} node - Le nœud à vérifier.
+    * @param {boolean} allowPartialContainment - Permet la contenance partielle.
+    * @returns {boolean} True si le nœud est contenu dans la sélection.
+    */
+    containsNode: (node: Node, allowPartialContainment?: boolean) => boolean;
+    /**
+    * Crée une nouvelle range basée sur la sélection courante.
+    * @returns {Range|null} Une nouvelle range ou null.
+    */
+    createRange: () => Range | null;
+    /**
+    * Crée des copies de toutes les ranges courantes.
+    * @returns {Range[]} Un array de toutes les ranges clonées.
+    */
+    createAllRanges: () => Range[];
+    /**
+    * Récupère les coordonnées de toutes les ranges.
+    * @returns {DOMRect[]} Un array des rectangles de toutes les ranges.
+    */
+    getAllBoundingRects: () => DOMRect[];
+    /**
+    * Vérifie si toutes les ranges sont dans un élément donné.
+    * @param {Element} element - L'élément à vérifier.
+    * @returns {boolean} True si toutes les ranges sont contenues.
+    */
+    allRangesInElement: (element: Element) => boolean;
+    /**
+    * Filtre les ranges selon un prédicat.
+    * @param {function(Range): boolean} predicate - Fonction de filtre.
+    * @returns {Range[]} Les ranges qui passent le filtre.
+    */
+    filterRanges: (predicate: (arg0: Range) => boolean) => Range[];
+    /**
+    * Sélectionne tout le contenu du document.
+    * @returns {boolean} True si l'opération a réussi
+    */
+    selectAll: () => boolean;
+    /**
+    * Efface la sélection courante.
+    * @returns {boolean} True si l'opération a réussi
+    */
+    clear: () => boolean;
+    /**
+    * Observe un élément contenteditable pour les mutations DOM qui peuvent
+    * affecter la position du caret sans déclencher selectionchange
+    *
+    * @param {Element} element - L'élément contenteditable à observer
+    * @param {Object} options - Options d'observation
+    * @param {number} options.debounceMs - Délai de debounce en ms (défaut: 16ms = ~1 frame)
+    * @param {boolean} options.observeAttributes - Observer les changements d'attributs (défaut: false)
+    * @returns {boolean} True si l'observation a été configurée avec succès
+    */
+    observe: (element: Element, options?: {
+        debounceMs: number;
+        observeAttributes: boolean;
+    }) => boolean;
+    /**
+    * Arrête l'observation d'un élément spécifique
+    * @param {Element} element - L'élément à ne plus observer
+    * @returns {boolean} True si l'élément était observé et a été retiré
+    */
+    unobserve: (element: Element) => boolean;
+    /**
+    * Arrête l'observation de tous les éléments
+    */
+    unobserveAll: () => void;
+    /**
+    * Getter pour savoir quels éléments sont observés
+    * @returns {Element[]} Liste des éléments actuellement observés
+    */
+    get observedElements(): Element[];
+    /**
+    * Vérifie si un élément est actuellement observé
+    * @param {Element} element - L'élément à vérifier
+    * @returns {boolean} True si l'élément est observé
+    */
+    isObserving: (element: Element) => boolean;
+    /**
+    * Nettoie les ressources utilisées par l'instance.
+    * À appeler lors de la destruction du composant.
+    */
+    destroy: () => void;
+    #private;
+}
+export type SelectionObject = {
+    anchorNode: Node | null;
+    anchorOffset: number;
+    focusNode: Node | null;
+    focusOffset: number;
+    startNode: Node | null;
+    startOffset: number;
+    endNode: Node | null;
+    endOffset: number;
+    isCollapsed: boolean;
+    rangeCount: number;
+    type: string;
+    direction: "forward" | "backward" | "none";
+    text: string;
+    html: string;
+};