feat: Add typed event system with on/off/emit

New events with structured payloads:

  change({ markdown, html })
    Fires on every content edit.

  save({ markdown, html })
    Fires when editor.save() is called. Consumer handles persistence.

  modeChange({ current, previous })
    Fires on VIEW/EDIT/WYSIWYG transitions.

  themeChange({ current, previous })
    Fires when themes.set() switches the active theme.

  ready({ markdown, html, mode, theme })
    Fires after editor.run() completes first render.

Events can be registered in the constructor via the 'on' setting
or at any time via editor.on(event, callback) / editor.off().

202/202 tests passing.

src/ts/ribbit.ts

@@ -5,6 +5,7 @@
 import { HopDown } from './hopdown';
 import { defaultTheme } from './default-theme';
 import { ThemeManager } from './theme-manager';
+import { RibbitEmitter, type RibbitEventMap } from './events';
 import type { RibbitTheme } from './types';
 
 export interface RibbitSettings {
@@ -14,6 +15,7 @@ export interface RibbitSettings {
     currentTheme?: string;
     themes?: RibbitTheme[];
     themesPath?: string;
+    on?: Partial<RibbitEventMap>;
 }
 
 /**
@@ -47,7 +49,12 @@ export class RibbitPlugin {
  * Read-only markdown viewer. Renders markdown content into an HTML element.
  *
  * Usage:
- *   const viewer = new Ribbit({ editorId: 'my-element' });
+ *   const viewer = new Ribbit({
+ *       editorId: 'my-element',
+ *       on: {
+ *           ready: ({ mode, theme }) => console.log(`Ready in ${mode}`),
+ *       },
+ *   });
  *   viewer.run();
  */
 export class Ribbit {
@@ -63,11 +70,13 @@ export class Ribbit {
     themes: ThemeManager;
     converter: HopDown;
     themesPath: string;
+    private emitter: RibbitEmitter;
 
     constructor(settings: RibbitSettings) {
         this.api = settings.api || null;
         this.element = document.getElementById(settings.editorId || 'ribbit')!;
         this.themesPath = settings.themesPath || './themes';
+        this.emitter = new RibbitEmitter();
         this.states = {
             VIEW: 'view',
         };
@@ -77,12 +86,16 @@ export class Ribbit {
         this.changed = false;
         this.enabledPlugins = {};
 
-        this.themes = new ThemeManager(defaultTheme, this.themesPath, (theme) => {
+        this.themes = new ThemeManager(defaultTheme, this.themesPath, (theme, previous) => {
             this.theme = theme;
             this.converter = theme.tags
                 ? new HopDown({ tags: theme.tags })
                 : new HopDown();
             this.cachedHTML = null;
+            this.emitter.emit('themeChange', {
+                current: theme,
+                previous,
+            });
             if (this.getState() === this.states.VIEW) {
                 this.state = null;
                 this.view();
@@ -106,11 +119,45 @@ export class Ribbit {
                 wiki: this,
             });
         });
+
+        if (settings.on) {
+            for (const [event, handler] of Object.entries(settings.on)) {
+                if (handler) {
+                    this.on(event as keyof RibbitEventMap, handler as any);
+                }
+            }
+        }
+    }
+
+    /**
+     * Register a callback for an event.
+     *
+     *   editor.on('save', ({ markdown }) => {
+     *       fetch('/api/save', { method: 'POST', body: markdown });
+     *   });
+     */
+    on<K extends keyof RibbitEventMap>(event: K, callback: RibbitEventMap[K]): void {
+        this.emitter.on(event, callback);
+    }
+
+    /**
+     * Remove a previously registered callback.
+     *
+     *   editor.off('change', myHandler);
+     */
+    off<K extends keyof RibbitEventMap>(event: K, callback: RibbitEventMap[K]): void {
+        this.emitter.off(event, callback);
     }
 
     run(): void {
         this.element.classList.add('loaded');
         this.view();
+        this.emitter.emit('ready', {
+            markdown: this.getMarkdown(),
+            html: this.getHTML(),
+            mode: this.state || 'view',
+            theme: this.theme,
+        });
     }
 
     plugins(): RibbitPlugin[] {
@@ -122,6 +169,7 @@ export class Ribbit {
     }
 
     setState(newState: string): void {
+        const previous = this.state;
         this.state = newState;
         Object.values(this.states).forEach(state => {
             if (state === newState) {
@@ -130,6 +178,10 @@ export class Ribbit {
                 this.element.classList.remove(state);
             }
         });
+        this.emitter.emit('modeChange', {
+            current: newState,
+            previous,
+        });
     }
 
     markdownToHTML(md: string): string {
@@ -150,12 +202,37 @@ export class Ribbit {
         return this.cachedMarkdown;
     }
 
+    /**
+     * Request a save. Fires the 'save' event with the current content.
+     * The consumer's callback handles persistence.
+     *
+     *   editor.save();  // triggers on.save({ markdown, html })
+     */
+    save(): void {
+        this.emitter.emit('save', {
+            markdown: this.getMarkdown(),
+            html: this.getHTML(),
+        });
+    }
+
     view(): void {
         if (this.getState() === this.states.VIEW) return;
         this.element.innerHTML = this.getHTML();
         this.setState(this.states.VIEW);
         this.element.contentEditable = 'false';
     }
+
+    /**
+     * Notify that content has changed. Called internally by the editor
+     * on input events. Fires the 'change' event with current content.
+     */
+    notifyChange(): void {
+        this.changed = true;
+        this.emitter.emit('change', {
+            markdown: this.getMarkdown(),
+            html: this.getHTML(),
+        });
+    }
 }
 
 /**