Extensions

import { createEditor, TextPreset, CalloutExtension, DividerExtension } from '@aionbuilders/nabu';

const engine = createEditor({ preset: TextPreset, extensions: [CalloutExtension, DividerExtension] });

engine.insert('callout', { text: 'Careful' });
engine.insert('divider');
await engine.commit();

expect(engine.children.map((block) => block.type)).toEqual(['paragraph', 'callout', 'divider']);

import { createEditor, ParagraphExtension } from '@aionbuilders/nabu';
import { extension } from '@aionbuilders/nabu/extend';

const Shout = extension('shout', {
  actions: {
    'shout:all': (nabu, data) => {
      const loud = nabu.children.filter((block) => block.type === 'paragraph');
      for (const block of loud) block.insert(block.text.length, data?.suffix ?? '!');
      return nabu.commit();
    }
  }
});

const engine = createEditor({ preset: [ParagraphExtension], extensions: [Shout] });
engine.insert('paragraph', { text: 'Hello' });
await engine.commit();

await engine.exec('shout:all', { suffix: '!!' });
expect(engine.serialize('markdown')).toContain('Hello!!');

import { createEditor, TextPreset } from '@aionbuilders/nabu';
import { extension, TextBlock } from '@aionbuilders/nabu/extend';

class AsideBlock extends TextBlock {
  constructor(nabu, node) {
    super(nabu, node);
    // One serializer per format. 'json' is the document export; the last one is the clipboard.
    this.serializers.set('markdown', () => `<aside>${this.behavior.toMarkdown()}</aside>`);
    this.serializers.set('json', () => ({ id: this.id, type: 'aside', content: this.behavior.toJSON() }));
    this.serializers.set('application/x-nabu+json', (context = {}) => this.behavior.toClipboardBlock(context));
  }

  // The hint shown in an empty block.
  static placeholder = 'An aside...';

  // How the engine creates one: nabu.insert('aside', props) calls this.
  static create(nabu, type, props = {}, parentId = null, index = null) {
    const node = nabu.tree.createNode(parentId || undefined, index ?? undefined);
    node.data.set('type', 'aside');
    const block = new AsideBlock(nabu, node);
    if (props.text) block.insert(0, props.text);
    if (props.delta) block.applyDelta(props.delta);
    return block;
  }
}

const AsideExtension = extension('aside', { block: AsideBlock /* , component: Aside */ });

const engine = createEditor({ preset: TextPreset, extensions: [AsideExtension] });
engine.insert('aside', { text: 'By the way' });
await engine.commit();

expect(engine.serialize('markdown')).toContain('<aside>By the way</aside>');
expect(engine.serialize('json').blocks.at(-1)).toMatchObject({ type: 'aside', content: [{ text: 'By the way' }] });

// A JSON export round-trips through the class.
const copy = createEditor({ preset: TextPreset, extensions: [AsideExtension] });
await copy.importJSON(engine.serialize('json'));
expect(copy.children.at(-1).type).toBe('aside');

<!-- Aside.svelte -->
<script>
  import { RichText } from '@aionbuilders/nabu/extend';

  let { block } = $props();
</script>

<aside
  bind:this={block.element}
  data-block-id={block.id}
  data-block-type="aside"
  data-placeholder={block.placeholder}
  class="my-aside"
  class:selected={block.selected}
><RichText delta={block.delta} /></aside>

<style>
  .my-aside {
    white-space: pre-wrap;
    margin: 0 0 0.5em;
    padding: 0.5em 0.75em;
    border-left: 3px solid var(--nb-border, currentColor);
    background: var(--nb-surface, transparent);
  }
</style>

import Aside from './Aside.svelte';

export const AsideExtension = extension('aside', { block: AsideBlock, component: Aside });

import { createEditor, TextPreset } from '@aionbuilders/nabu';
import { extension, TextBlock } from '@aionbuilders/nabu/extend';

const Aside = extension('aside', {
  block: class AsideBlock extends TextBlock {
    static create(nabu, type, props = {}, parentId = null, index = null) {
      const node = nabu.tree.createNode(parentId || undefined, index ?? undefined);
      node.data.set('type', 'aside');
      const block = new this(nabu, node);
      if (props.text) block.insert(0, props.text);
      return block;
    }
  },
  inputRules: [
    {
      pattern: /^!!$/,
      handler(nabu, block, match, sel) {
        if (sel.data !== ' ') return; // only when the space is typed
        block.behaviors.get('text').delete({ index: 0, length: 2 }); // remove the "!!"
        block.retype('aside'); // change the type in place (no commit here)
        return true;
      }
    }
  ]
});

const engine = createEditor({ preset: TextPreset, extensions: [Aside] });
engine.insert('paragraph', { text: '!!' });
await engine.commit();
const block = engine.children.at(-1);

// The editor calls the handler while the user types; here we do it by hand.
const [rule] = Aside.inputRules;
const typed = { from: 2, to: 2, isCollapsed: true, data: ' ' };
expect(rule.handler(engine, block, '!!'.match(rule.pattern), typed)).toBe(true);
await engine.commit();

expect(engine.children.at(-1).type).toBe('aside');

import { createEditor, ParagraphExtension } from '@aionbuilders/nabu';
import { extension } from '@aionbuilders/nabu/extend';

const log = [];

const Audit = extension('audit', {
  hooks: {
    onInit: () => log.push('init'),
    onBeforeTransaction: () => log.push('commit'),
    // A custom hook: no meaning for the engine, run by nabu.trigger('audit:note', ...).
    'audit:note': (nabu, text) => log.push(`note: ${text}`)
  }
});

const engine = createEditor({ preset: [ParagraphExtension], extensions: [Audit] });
expect(log).toContain('init');

engine.insert('paragraph', { text: 'x' });
await engine.commit();
expect(log).toContain('commit');

engine.trigger('audit:note', 'hello');
expect(log.at(-1)).toBe('note: hello');

extension('aside', {
  block: AsideBlock,
  commands: {
    'aside:toggle': {
      label: 'Toggle aside',
      keys: ['Mod-Alt-a'],
      run: (nabu) => nabu.exec('block:transform', { type: 'aside' })
    }
  }
});

import { createEditor, ParagraphExtension } from '@aionbuilders/nabu';
import { extension } from '@aionbuilders/nabu/extend';

const Aside = extension('aside', {
  actions: { aside: (nabu) => nabu.exec('block:transform', { type: 'aside' }) },
  slashCommands: [
    {
      title: 'Aside',
      icon: '!',
      aliases: ['note', 'tip'],
      group: 'blocks',
      order: 50,
      run: (nabu) => nabu.exec('aside')
    }
  ]
});

const engine = createEditor({ preset: [ParagraphExtension], extensions: [Aside] });
expect(engine.slashCommands.map((entry) => entry.title)).toContain('Aside');

import { createEditor, TextPreset } from '@aionbuilders/nabu';

const engine = createEditor({ preset: TextPreset });

// The door is a getter: the same frozen object every time, made of the references the engine uses.
const { pulse, commandConfirm, hooks } = engine.internals;
expect(engine.internals).toBe(engine.internals);
expect(typeof commandConfirm.choose).toBe('function');
expect(hooks.has('onBeforeInput')).toBe(true);

// The action bus: observe a topic the engine runs (unstable, hence behind the door).
const seen = [];
pulse.on('undo', () => seen.push('undo'));
await engine.exec('undo');
expect(seen).toEqual(['undo']);