@aionbuilders/nabu 0.1.0-alpha.0

package/README.md

@@ -0,0 +1,131 @@
+# Nabu — Block Editor Engine
+
+> **Alpha** — API in active development. Breaking changes expected.
+
+Nabu is a modular, local-first block editor engine for **Svelte 5**. It combines the intuitive cross-block selection of document editors (Google Docs, ProseMirror) with the structural flexibility of block editors (Notion), built on a **Single ContentEditable** architecture and a **CRDT core** (Loro).
+
+## Installation
+
+```bash
+npm install @aionbuilders/nabu
+# or
+bun add @aionbuilders/nabu
+```
+
+## Required: Vite Setup
+
+Nabu depends on `loro-crdt`, which ships as a WebAssembly module. You must configure your Vite bundler to handle it.
+
+**1. Install the required Vite plugins:**
+
+```bash
+npm install -D vite-plugin-wasm vite-plugin-top-level-await
+```
+
+**2. Add them to your `vite.config.js`:**
+
+```js
+import { defineConfig } from 'vite';
+import { sveltekit } from '@sveltejs/kit/vite'; // or svelte()
+import wasm from 'vite-plugin-wasm';
+import topLevelAwait from 'vite-plugin-top-level-await';
+
+export default defineConfig({
+  plugins: [
+    sveltekit(),
+    wasm(),
+    topLevelAwait()
+  ]
+});
+```
+
+Without this setup, Nabu will fail to load.
+
+## Basic Usage
+
+```svelte
+<script>
+  import {
+    Nabu,
+    NabuEditor,
+    ParagraphExtension,
+    HeadingExtension,
+    ListExtension,
+    ListItemExtension,
+    RichTextExtension
+  } from '@aionbuilders/nabu';
+
+  const engine = new Nabu({
+    extensions: [
+      ParagraphExtension,
+      HeadingExtension,
+      ListExtension,
+      ListItemExtension,
+      RichTextExtension
+    ]
+  });
+</script>
+
+<NabuEditor {engine} />
+```
+
+That's it. The editor is now functional with paragraphs, headings, lists, and rich text formatting.
+
+## Extensions
+
+All block types and behaviors are provided as extensions. Pass them to the `Nabu` constructor:
+
+| Extension | Provides | Keyboard shortcuts |
+|---|---|---|
+| `ParagraphExtension` | `paragraph` block | — |
+| `HeadingExtension` | `heading` block (h1–h6) | `# ` → h1, `## ` → h2, ... |
+| `ListExtension` | `list` container (bullet/ordered) | — |
+| `ListItemExtension` | `list-item` block | `Tab` indent, `Shift+Tab` unindent |
+| `RichTextExtension` | Inline marks (bold, italic...) | `Ctrl+B/I/U/E`, `Ctrl+Shift+X` |
+
+## Programmatic API
+
+```js
+// Insert blocks
+engine.insert('paragraph', { text: 'Hello' });
+engine.insert('heading', { level: 1, text: 'Title' });
+engine.insert('list', { listType: 'bullet' });
+
+// Undo / Redo
+engine.undo();
+engine.redo();
+
+// Serialize
+const markdown = engine.serialize('markdown');
+const json = engine.serialize('json');
+```
+
+## Architecture
+
+### Single ContentEditable
+The entire editor lives in a single `contenteditable` root. This enables seamless cross-block selection, native copy-paste, and consistent browser performance.
+
+### CRDT Core (Loro)
+All state is stored in a [Loro](https://loro.dev) document — a WASM-based CRDT. This provides:
+- **Local-first**: offline editing out of the box
+- **Collaboration-ready**: conflict-free concurrent edits
+- **Rich text**: native delta/mark support via `LoroText`
+
+### Extension System
+Every block type is an extension. You can build custom block types by extending the `Block` or `MegaBlock` base classes and registering them via the `extension()` helper.
+
+### Svelte 5 Runes
+Nabu uses `$state` and `$derived` throughout for fine-grained reactivity — only modified blocks re-render.
+
+---
+
+## Status
+
+This is an **alpha release**. The core editing experience is functional, but some features are still in development:
+
+- [ ] Persistence (IndexedDB)
+- [ ] Floating toolbar UI
+- [ ] Slash command menu
+- [ ] Link support
+
+Contributions and feedback welcome.

package/dist/behaviors/index.d.ts

@@ -0,0 +1 @@
+export * from "./text";

package/dist/behaviors/index.js

@@ -0,0 +1 @@
+export * from './text';

package/dist/behaviors/text/RichText.svelte

@@ -0,0 +1,33 @@
+<script>
+    /** @type {{ delta: import('loro-crdt').Delta<string>[] }} */
+    let { delta } = $props();
+
+    /** @param {Record<string, any>} attrs */
+    function getClasses(attrs) {
+        return [
+            attrs.bold && 'nabu-bold',
+            attrs.italic && 'nabu-italic',
+            attrs.underline && 'nabu-underline',
+            attrs.code && 'nabu-code',
+            attrs.strikethrough && 'nabu-strikethrough',
+        ].filter(Boolean).join(' ');
+    }
+
+    const segments = $derived(delta.length ? delta : [{ insert: '\n' }]);
+</script>
+
+{#each segments as op}
+    {#if op.attributes && Object.values(op.attributes).some(Boolean)}
+        <span class={getClasses(op.attributes)}>{op.insert}</span>
+    {:else}
+        {op.insert}
+    {/if}
+{/each}
+
+<style>
+    :global(.nabu-bold)          { font-weight: bold; }
+    :global(.nabu-italic)        { font-style: italic; }
+    :global(.nabu-underline)     { text-decoration: underline; }
+    :global(.nabu-strikethrough) { text-decoration: line-through; }
+    :global(.nabu-code)          { font-family: monospace; background: rgba(135, 131, 120, 0.15); border-radius: 3px; padding: 0.1em 0.3em; }
+</style>

package/dist/behaviors/text/RichText.svelte.d.ts

@@ -0,0 +1,11 @@
+export default RichText;
+type RichText = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const RichText: import("svelte").Component<{
+    delta: import("loro-crdt").Delta<string>[];
+}, {}, "">;
+type $$ComponentProps = {
+    delta: import("loro-crdt").Delta<string>[];
+};

package/dist/behaviors/text/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./text.behavior.svelte";
+export { RichTextExtension } from "./rich-text.extension.js";
+export { default as RichText } from "./RichText.svelte";

package/dist/behaviors/text/index.js

@@ -0,0 +1,3 @@
+export * from './text.behavior.svelte';
+export { RichTextExtension } from './rich-text.extension.js';
+export { default as RichText } from './RichText.svelte';

package/dist/behaviors/text/rich-text.extension.d.ts

@@ -0,0 +1,2 @@
+export const RichTextExtension: Extension;
+import { Extension } from '../../utils/extensions.js';

package/dist/behaviors/text/rich-text.extension.js

@@ -0,0 +1,75 @@
+/**
+ * @import { Nabu } from '../../blocks/nabu.svelte.js'
+ */
+
+import { tick } from 'svelte';
+import { Extension } from '../../utils/extensions.js';
+import { TextBehavior } from './text.behavior.svelte.js';
+
+/** @type {Record<string, string>} */
+const MARK_SHORTCUTS = {
+    b: 'bold',
+    i: 'italic',
+    u: 'underline',
+    e: 'code',
+};
+
+/**
+ * @param {Nabu} nabu
+ * @param {KeyboardEvent} event
+ */
+function onKeyDown(nabu, event) {
+    const ctrl = event.ctrlKey || event.metaKey;
+    if (!ctrl) return;
+
+    const endBlock = nabu.selection.endBlock;
+    const startBlock = nabu.selection.startBlock;
+    const startFocusData = startBlock?.focus(null, true);
+    const endFocusData = endBlock?.focus(null, true);
+
+    let markName = null;
+    if (!event.shiftKey) {
+        markName = MARK_SHORTCUTS[event.key.toLowerCase()] ?? null;
+    } else if (event.key.toLowerCase() === 'x') {
+        markName = 'strikethrough';
+    }
+
+    if (!markName) return;
+
+    // Collect all targeted block/selection pairs
+    const targets = [];
+    for (const [, block] of nabu.blocks) {
+        if (!block.selected) continue;
+        const behavior = block.behaviors?.get('text');
+        if (!(behavior instanceof TextBehavior)) continue;
+        const sel = behavior.selection;
+        if (!sel || sel.isCollapsed) continue;
+        targets.push({ behavior, sel });
+    }
+
+    if (!targets.length) return;
+
+    // Classic editor behavior: remove if mark is fully active across all targets, apply otherwise
+    const isFullyActive = targets.every(({ behavior, sel }) => behavior.isMarkActive(markName, sel));
+    for (const { behavior, sel } of targets) {
+        if (isFullyActive) {
+            behavior.removeMark(markName, sel);
+        } else {
+            behavior.applyMark(markName, true, sel);
+        }
+    }
+    const applied = true;
+
+    if (applied) {
+        nabu.commit();
+        if (!startBlock || !endBlock) return;
+        nabu.focus({ from: { block: startBlock, offset: startFocusData?.start?.offset }, to: { block: endBlock, offset: endFocusData?.end?.offset } });
+        
+
+        return nabu.BREAK;
+    }
+}
+
+export const RichTextExtension = new Extension('rich-text', {
+    hooks: { onKeyDown }
+});

package/dist/behaviors/text/text.behavior.svelte.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Converts a Loro text delta to inline Markdown.
+ * @param {import('loro-crdt').Delta<string>[]} delta
+ * @returns {string}
+ */
+export function deltaToMarkdown(delta: import("loro-crdt").Delta<string>[]): string;
+/**
+* @typedef {NabuNode<{type: "paragraph", text: LoroText}>} TextNode
+*/
+export class TextBehavior {
+    /** @param {Block} block @param {LoroText} [container] */
+    constructor(block: Block, container?: LoroText);
+    block: Block;
+    nabu: import("../..").Nabu;
+    /** @type {LoroText} */
+    container: LoroText;
+    text: string;
+    delta: import("loro-crdt").Delta<string>[];
+    selection: {
+        from: number;
+        to: number;
+        isCollapsed: boolean;
+        direction: "forward" | "backward" | "none";
+    } | null;
+    /**
+    * @param {HTMLElement} element
+    * @param {NabuSelection} globalSelection
+    */
+    getSelection(element: HTMLElement, globalSelection: NabuSelection): {
+        from: number;
+        to: number;
+        isCollapsed: boolean;
+        direction: "forward" | "backward" | "none";
+    } | null;
+    /**
+    * 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: Node, offset: number, element?: HTMLElement | null): number;
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [selection] */
+    handleBeforeInput(event: InputEvent, selection?: ReturnType<TextBehavior["getSelection"]>): any;
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [selection] */
+    handleInsertText(event: InputEvent, selection?: ReturnType<TextBehavior["getSelection"]>): void;
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [sel] */
+    handleInsertLineBreak(event: InputEvent, sel?: ReturnType<TextBehavior["getSelection"]>): void;
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [sel] */
+    handleDeleteContentBackward(event: InputEvent, sel?: ReturnType<TextBehavior["getSelection"]>): void;
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [sel] */
+    handleDeleteContentForward(event: InputEvent, sel?: ReturnType<TextBehavior["getSelection"]>): void;
+    /** @param {InputEvent} event @param {ReturnType<TextBehavior["getSelection"]>} [sel] */
+    handleInsertParagraph(event: InputEvent, sel?: ReturnType<TextBehavior["getSelection"]>): any;
+    /**
+    * Retrouve le nœud texte et l'offset DOM pour un offset Modèle donné
+    * @param {number} targetOffset
+    * @param {HTMLElement?} [element]
+    */
+    getDOMPoint(targetOffset: number, element?: HTMLElement | null): {
+        node: Node;
+        offset: number;
+    } | null;
+    /** @param {number} index @param {string} text */
+    insert(index: number, text: string): void;
+    /** @param {Parameters<Block["delete"]>[0]} [deletion] @param {ReturnType<TextBehavior["getSelection"]>} [selection] */
+    delete(deletion?: Parameters<Block["delete"]>[0], selection?: ReturnType<TextBehavior["getSelection"]>): void;
+    /** @param {import('loro-crdt').Delta<string>[]} data */
+    applyDelta(data?: import("loro-crdt").Delta<string>[]): void;
+    /**
+    * @param {Parameters<Block["split"]>[0]} [options]
+    * @param {ReturnType<TextBehavior["getSelection"]>} [selection]
+    * @returns {ReturnType<Block["split"]>}
+    */
+    split(options?: Parameters<Block["split"]>[0], selection?: ReturnType<TextBehavior["getSelection"]>): ReturnType<Block["split"]>;
+    /** @param {string} markName @param {any} value @param {ReturnType<TextBehavior["getSelection"]>} sel */
+    applyMark(markName: string, value: any, sel: ReturnType<TextBehavior["getSelection"]>): void;
+    /** @param {string} markName @param {ReturnType<TextBehavior["getSelection"]>} sel */
+    removeMark(markName: string, sel: ReturnType<TextBehavior["getSelection"]>): void;
+    /** @param {string} markName @param {ReturnType<TextBehavior["getSelection"]>} sel */
+    isMarkActive(markName: string, sel: ReturnType<TextBehavior["getSelection"]>): boolean;
+    /** @param {string} markName @param {any} value @param {ReturnType<TextBehavior["getSelection"]>} sel */
+    toggleMark(markName: string, value: any, sel: ReturnType<TextBehavior["getSelection"]>): void;
+    /** @returns {string} */
+    toMarkdown(): string;
+    /**
+     * Converts the text delta to a Slate-like JSON format.
+     * @returns {{text: string, [mark: string]: any}[]}
+     */
+    toJSON(): {
+        text: string;
+        [mark: string]: any;
+    }[];
+    /** @param {Block} other */
+    absorbs(other: Block): boolean;
+}
+export type TextNode = NabuNode<{
+    type: "paragraph";
+    text: LoroText;
+}>;
+import type { Block } from "../../blocks";
+import { LoroText } from "loro-crdt";
+import type { NabuSelection } from "../../blocks";
+import type { NabuNode } from "../../blocks";