autumnnote 2.0.0 → 2.2.0

package/src/js/Context.js

@@ -1,854 +0,0 @@
-/**
- * Context.js - Central hub for the editor instance
- * Holds references to all sub-modules and manages inter-module communication.
- * Inspired by Summernote's Context.js
- */
-
-import { mergeDeep } from './core/func.js';
-import { registerButton } from './module/Buttons.js';
-import { defaultOptions } from './settings.js';
-import { resolveLocale } from './i18n/index.js';
-import { renderLayout } from './renderer.js';
-import { on } from './core/dom.js';
-
-// Modules
-import { Editor } from './module/Editor.js';
-import { Toolbar } from './module/Toolbar.js';
-import { Statusbar } from './module/Statusbar.js';
-import { Clipboard } from './module/Clipboard.js';
-import { Placeholder } from './module/Placeholder.js';
-import { Codeview } from './module/Codeview.js';
-import { Fullscreen } from './module/Fullscreen.js';
-import { LinkDialog } from './module/LinkDialog.js';
-import { ImageDialog } from './module/ImageDialog.js';
-import { VideoDialog } from './module/VideoDialog.js';
-import { ImageResizer } from './module/ImageResizer.js';
-import { VideoResizer } from './module/VideoResizer.js';
-import { LinkTooltip } from './module/LinkTooltip.js';
-import { ImageTooltip } from './module/ImageTooltip.js';
-import { VideoTooltip } from './module/VideoTooltip.js';
-import { TableTooltip } from './module/TableTooltip.js';
-import { CodeTooltip } from './module/CodeTooltip.js';
-import { EmojiDialog } from './module/EmojiDialog.js';
-import { IconDialog } from './module/IconDialog.js';
-import { ContextMenu } from './module/ContextMenu.js';
-import { ShortcutsDialog } from './module/ShortcutsDialog.js';
-import { FindReplace } from './module/FindReplace.js';
-import { ImageCropOverlay } from './module/ImageCropOverlay.js';
-import { AutoSaveRestore } from './module/AutoSaveRestore.js';
-import { MarkdownShortcuts } from './module/MarkdownShortcuts.js';
-import { BubbleToolbar } from './module/BubbleToolbar.js';
-import { Mention } from './module/Mention.js';
-import { SlashMenu } from './module/SlashMenu.js';
-
-/** Module registry shared across all Context instances (populated via AutumnNote.registerModule). */
-export const _customModules = new Map();
-
-/**
- * Modules whose registration depends on an option value. Declared once so the
- * initial mount (`_registerModules`) and runtime toggles (`updateOptions`) can
- * never drift apart — previously `updateOptions({ bubbleToolbar: true })`
- * changed the option but silently left the module unregistered.
- * @type {Array<{ name: string, Class: new (ctx: Context) => { initialize: () => any, destroy?: () => void }, enabled: (options: any) => boolean }>}
- */
-const OPTIONAL_MODULES = [
-  { name: 'autoSaveRestore',   Class: AutoSaveRestore,   enabled: (o) => !!o.autoSaveRestore },
-  { name: 'markdownShortcuts', Class: MarkdownShortcuts, enabled: (o) => o.markdownShortcuts !== false },
-  { name: 'bubbleToolbar',     Class: BubbleToolbar,     enabled: (o) => !!o.bubbleToolbar },
-  { name: 'mention',           Class: Mention,           enabled: (o) => !!o.mention },
-  { name: 'slashMenu',         Class: SlashMenu,         enabled: (o) => o.slashMenu !== false },
-];
-
-/** Global plugin registry (populated via AutumnNote.use()). Applied to every new Context. */
-export const _globalPlugins = new Map();
-
-export class Context {
-  /**
-   * @param {HTMLElement} targetEl - The element to replace with the editor
-   * @param {import('./settings.js').AsnOptions} [userOptions]
-   */
-  constructor(targetEl, userOptions = {}) {
-    this.targetEl = targetEl;
-    this.options = mergeDeep(defaultOptions, userOptions);
-
-    /** @type {import('./i18n/index.js').AsnLocale} */
-    this.locale = resolveLocale(this.options.lang);
-
-    /** @type {{ container: HTMLElement, editable: HTMLElement, toolbar?: HTMLElement, statusbar?: HTMLElement }} */
-    this.layoutInfo = /** @type {any} */ ({});
-
-    /** @type {Map<string, Function[]>} */
-    this._listeners = new Map();
-
-    /** @type {Map<string, object>} */
-    this._modules = new Map();
-
-    /** @type {Map<string, { plugin: object, publicApi: * }>} */
-    this._plugins = new Map();
-
-    this._disposers = [];
-    this._alive = false;
-    this._autoSaveTimer = null;
-    this._pendingAutoSave = null;
-    this._suppressedRemoteHTML = null;
-    /** @type {Promise<void>|null} Settles when destroy()'s closing auto-save finishes */
-    this._destroyPromise = null;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Initialisation
-  // ---------------------------------------------------------------------------
-
-  initialize() {
-    // 1. Render the DOM skeleton
-    const { container, editable } = renderLayout(this.targetEl, this.options);
-    this.layoutInfo.container = container;
-    this.layoutInfo.editable = editable;
-
-    // 2. Register core modules
-    this._registerModules();
-
-    // 3. Attach toolbar/statusbar to container
-    const toolbar = this._modules.get('toolbar');
-    if (toolbar?.el) {
-      container.insertBefore(toolbar.el, editable);
-      this.layoutInfo.toolbar = toolbar.el;
-    }
-
-    const statusbar = this._modules.get('statusbar');
-    if (statusbar?.el) {
-      container.appendChild(statusbar.el);
-      this.layoutInfo.statusbar = statusbar.el;
-    }
-
-    // 4. Bind editor-level events
-    this._bindEditorEvents(editable);
-
-    // 5. Auto-focus if requested
-    if (this.options.focus) {
-      editable.focus();
-    }
-
-    this._alive = true;
-
-    // Initial toolbar sync so dropdowns show the correct font on load
-    this.invoke('toolbar.refresh');
-
-    // Apply plugins registered globally via AutumnNote.use()
-    this._applyGlobalPlugins();
-
-    if (typeof this.options.onInit === 'function') {
-      this.options.onInit(this);
-    }
-
-    return this;
-  }
-
-  _registerModules() {
-    const register = (name, ModuleClass) => {
-      const instance = new ModuleClass(this);
-      this._modules.set(name, instance);
-      instance.initialize();
-    };
-
-    register('editor', Editor);
-    register('toolbar', Toolbar);
-    register('statusbar', Statusbar);
-    register('clipboard', Clipboard);
-    register('contextMenu', ContextMenu);
-    register('placeholder', Placeholder);
-    register('codeview', Codeview);
-    register('fullscreen', Fullscreen);
-    register('linkDialog', LinkDialog);
-    register('imageDialog', ImageDialog);
-    register('videoDialog', VideoDialog);
-    register('imageResizer', ImageResizer);
-    register('videoResizer', VideoResizer);
-    register('linkTooltip', LinkTooltip);
-    register('imageTooltip', ImageTooltip);
-    register('videoTooltip', VideoTooltip);
-    register('tableTooltip', TableTooltip);
-    register('codeTooltip', CodeTooltip);
-    register('emojiDialog', EmojiDialog);
-    register('iconDialog', IconDialog);
-    register('shortcutsDialog', ShortcutsDialog);
-    register('findReplace', FindReplace);
-    register('imageCropOverlay', ImageCropOverlay);
-    for (const { name, Class, enabled } of OPTIONAL_MODULES) {
-      if (enabled(this.options)) register(name, Class);
-    }
-
-    // Custom modules registered via AutumnNote.registerModule()
-    if (_customModules.size > 0) {
-      for (const [name, ModuleClass] of _customModules) {
-        register(name, ModuleClass);
-      }
-    }
-  }
-
-  /**
-   * Registers or tears down option-gated modules so they match the current
-   * option values. Called after `updateOptions()` so toggling e.g.
-   * `bubbleToolbar` at runtime actually takes effect.
-   */
-  _syncOptionalModules() {
-    for (const { name, Class, enabled } of OPTIONAL_MODULES) {
-      const shouldRun = enabled(this.options);
-      const isRunning = this._modules.has(name);
-      if (shouldRun === isRunning) continue;
-
-      if (shouldRun) {
-        const instance = new Class(this);
-        this._modules.set(name, instance);
-        instance.initialize();
-      } else {
-        const instance = this._modules.get(name);
-        if (typeof instance?.destroy === 'function') instance.destroy();
-        this._modules.delete(name);
-      }
-    }
-  }
-
-  /**
-   * Registers and initialises a custom module on this instance.
-   * @param {string} name
-   * @param {new (ctx: this) => any} ModuleClass
-   * @returns {this}
-   */
-  registerModule(name, ModuleClass) {
-    if (this._modules.has(name)) return this;
-    const instance = new ModuleClass(this);
-    instance.initialize();
-    this._modules.set(name, instance);
-    return this;
-  }
-
-  registerSlashCommand(command) {
-    if (!command?.id || typeof command.run !== 'function') {
-      throw new TypeError('[AutumnNote] Slash command requires an id and run(context) function.');
-    }
-    const commands = this.options.slashCommands || (this.options.slashCommands = []);
-    const index = commands.findIndex((item) => item.id === command.id);
-    if (index >= 0) commands[index] = command;
-    else commands.push(command);
-    this.invoke('slashMenu.refresh');
-    return this;
-  }
-
-  /**
-   * Installs a plugin on this editor instance.
-   * If called after create(), buttons are registered immediately but the toolbar
-   * must be rebuilt via ctx.invoke('toolbar.rebuild') to render new buttons.
-   * @param {object} plugin - { name, version?, buttons?, install?, uninstall? }
-   * @param {object} [options] - Forwarded to plugin.install(context, options)
-   * @returns {this}
-   */
-  use(plugin, options = {}) {
-    if (Array.isArray(plugin.buttons)) {
-      plugin.buttons.forEach((b) => registerButton(b));
-    }
-    this._installPlugin(plugin, options);
-    return this;
-  }
-
-  /**
-   * Returns the public API returned by plugin.install(), or null.
-   * @param {string} name
-   * @returns {*}
-   */
-  getPlugin(name) {
-    return this._plugins.get(name)?.publicApi ?? null;
-  }
-
-  _installPlugin(plugin, pluginOptions = {}) {
-    const { name } = plugin;
-    if (!name || typeof name !== 'string') {
-      console.warn('[AutumnNote] Plugin must have a string `name` property.');
-      return;
-    }
-    if (this._plugins.has(name)) {
-      console.warn(`[AutumnNote] Plugin "${name}" already installed on this instance. Skipping.`);
-      return;
-    }
-    const publicApi = (typeof plugin.install === 'function')
-      ? plugin.install(this, pluginOptions) ?? null
-      : null;
-    this._plugins.set(name, { plugin, publicApi });
-  }
-
-  _applyGlobalPlugins() {
-    if (_globalPlugins.size === 0) return;
-    for (const { plugin, options } of _globalPlugins.values()) {
-      this._installPlugin(plugin, options);
-    }
-  }
-
-  _bindEditorEvents(editable) {
-    // Keep the original textarea/input value in sync immediately on every input.
-    // This guarantees form.submit() sees fresh data even before debounced change.
-    const d0 = on(editable, 'input', () => this._syncToTarget());
-    const d1 = on(editable, 'focus', () => {
-      this.layoutInfo.container.classList.add('an-focused');
-      if (typeof this.options.onFocus === 'function') {
-        this.options.onFocus(this);
-      }
-    });
-    const d2 = on(editable, 'blur', () => {
-      this.layoutInfo.container.classList.remove('an-focused');
-      this._syncToTarget();
-      if (typeof this.options.onBlur === 'function') {
-        this.options.onBlur(this);
-      }
-    });
-    // Sync textarea/input value on every change so form.submit() always gets fresh content
-    const d3 = this.on('change', (html) => this._syncToTarget(html));
-    const dRemote = this.on('change', (html) => {
-      if (this.options.blockIds) { this.ensureBlockIds(); html = this.getHTML(); }
-      if (html === this._suppressedRemoteHTML) { this._suppressedRemoteHTML = null; return; }
-      this.options.collaborationAdapter?.onLocalChange?.(html, this);
-    });
-    this._disposers.push(d0, d1, d2, d3, dRemote);
-
-    // Auto-save to localStorage on every change (also writes :asrmeta for restore banner)
-    if (this.options.autoSave && this.options.autoSaveKey) {
-      const d4 = this.on('change', (html) => this._scheduleAutoSave(html));
-      this._disposers.push(d4);
-    }
-  }
-
-  _scheduleAutoSave(html) {
-    this._pendingAutoSave = html;
-    clearTimeout(this._autoSaveTimer);
-    this._autoSaveTimer = setTimeout(() => this.flushAutoSave(), this.options.autoSaveDelay ?? 400);
-  }
-
-  async flushAutoSave() {
-    clearTimeout(this._autoSaveTimer);
-    this._autoSaveTimer = null;
-    if (this._pendingAutoSave == null) return;
-    const html = this._pendingAutoSave;
-    this._pendingAutoSave = null;
-    const key = this.options.autoSaveKey;
-    const savedAt = Date.now();
-    try {
-      const adapter = this.options.autoSaveAdapter;
-      if (typeof adapter?.save === 'function') {
-        await adapter.save({ key, html, savedAt, context: this });
-      } else {
-        localStorage.setItem(key, html);
-        localStorage.setItem(key + ':asrmeta', JSON.stringify({ savedAt }));
-      }
-      this.triggerEvent('autoSave', { key, html, savedAt });
-    } catch (error) {
-      this.triggerEvent('autoSaveError', { key, error });
-    }
-  }
-
-  async loadAutoSave() {
-    const adapter = this.options.autoSaveAdapter;
-    if (typeof adapter?.load === 'function') {
-      return adapter.load({ key: this.options.autoSaveKey, context: this });
-    }
-    try { return localStorage.getItem(this.options.autoSaveKey); } catch (_) { return null; }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Module invocation
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Invokes a method on a registered module.
-   * Format: 'moduleName.methodName'
-   * @param {string} path - e.g. 'editor.bold'
-   * @param {...*} args
-   * @returns {*}
-   */
-  invoke(path, ...args) {
-    const [moduleName, methodName] = path.split('.');
-    const module = this._modules.get(moduleName);
-    if (!module) {
-      console.warn(`[AutumnNote] invoke: module "${moduleName}" not found (path: "${path}")`);
-      return undefined;
-    }
-    if (typeof module[methodName] !== 'function') {
-      console.warn(`[AutumnNote] invoke: method "${methodName}" not found on module "${moduleName}" (path: "${path}")`);
-      return undefined;
-    }
-    return module[methodName](...args);
-  }
-
-  // ---------------------------------------------------------------------------
-  // Event system
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Subscribes to an editor event.
-   * @param {string} eventName
-   * @param {Function} handler
-   * @returns {() => void} unsubscribe
-   */
-  on(eventName, handler) {
-    if (!this._listeners.has(eventName)) {
-      this._listeners.set(eventName, []);
-    }
-    this._listeners.get(eventName).push(handler);
-    return () => this.off(eventName, handler);
-  }
-
-  /**
-   * Unsubscribes from an editor event.
-   * @param {string} eventName
-   * @param {Function} handler
-   */
-  off(eventName, handler) {
-    const handlers = this._listeners.get(eventName);
-    if (!handlers) return;
-    const idx = handlers.indexOf(handler);
-    if (idx !== -1) handlers.splice(idx, 1);
-  }
-
-  /**
-   * Triggers an editor event.
-   * @param {string} eventName
-   * @param {...*} args
-   */
-  triggerEvent(eventName, ...args) {
-    const handlers = this._listeners.get(eventName) || [];
-    handlers.forEach((h) => h(...args));
-
-    // Also call options callback if present (e.g. onChange)
-    const cbName = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
-    if (typeof this.options[cbName] === 'function') {
-      this.options[cbName](...args);
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Public editor API
-  // ---------------------------------------------------------------------------
-
-  /** Updates runtime-safe options without recreating the editor. */
-  updateOptions(overrides = {}) {
-    const next = mergeDeep(this.options, overrides);
-    Object.keys(this.options).forEach((key) => delete this.options[key]);
-    Object.assign(this.options, next);
-
-    const { container, editable } = this.layoutInfo;
-    if (Object.hasOwn(overrides, 'readOnly')) this.setDisabled(Boolean(this.options.readOnly));
-    if (Object.hasOwn(overrides, 'spellcheck')) editable.spellcheck = this.options.spellcheck !== false;
-    if (Object.hasOwn(overrides, 'placeholder')) editable.dataset.placeholder = this.options.placeholder || '';
-    if (Object.hasOwn(overrides, 'direction')) {
-      const rtl = this.options.direction === 'rtl';
-      editable.setAttribute('dir', rtl ? 'rtl' : 'ltr');
-      container.classList.toggle('an-dir-rtl', rtl);
-    }
-    if (Object.hasOwn(overrides, 'height') || Object.hasOwn(overrides, 'minHeight')) {
-      const height = this.options.height || this.options.minHeight || 0;
-      editable.style.minHeight = height ? `${height}px` : '';
-    }
-    if (Object.hasOwn(overrides, 'maxHeight')) {
-      editable.style.maxHeight = this.options.maxHeight ? `${this.options.maxHeight}px` : '';
-    }
-    if (Object.hasOwn(overrides, 'toolbar')) this.invoke('toolbar.rebuild');
-    // Start/stop option-gated modules (bubbleToolbar, mention, slashMenu, ...)
-    // so toggling them here behaves the same as passing them to create().
-    this._syncOptionalModules();
-    this.invoke('statusbar.update');
-    this.triggerEvent('optionsChange', { ...overrides });
-    return this;
-  }
-
-  /**
-   * Returns the current HTML content of the editor.
-   * Zero-width spaces (U+200B) inserted by inline editing helpers are stripped
-   * from the output so they don't leak into the consumer's HTML.
-   * @returns {string}
-   */
-  getHTML() {
-    const html = this.invoke('editor.getHTML');
-    return typeof html === 'string' ? html.replace(/​/g, '') : html;
-  }
-
-  /**
-   * Sets the HTML content of the editor.
-   * @param {string} html
-   */
-  setHTML(html) {
-    this.invoke('editor.setHTML', html);
-  }
-
-  /**
-   * Returns the plain text content of the editor.
-   * @returns {string}
-   */
-  getText() {
-    return this.invoke('editor.getText');
-  }
-
-  /**
-   * Sets the editor content as plain text (HTML-escaped).
-   * @param {string} text
-   */
-  setText(text) {
-    this.invoke('editor.setText', text);
-  }
-
-  /**
-   * Clears the editor content.
-   */
-  clear() {
-    this.invoke('editor.clear');
-  }
-
-  /**
-   * Resets the undo/redo history stack.
-   * Useful after programmatically loading a new document via setHTML() / setMarkdown()
-   * so that Ctrl+Z cannot undo back to the previous document.
-   */
-  clearHistory() {
-    this.invoke('editor.clearHistory');
-  }
-
-  /**
-   * Returns the number of available undo steps.
-   * @returns {number}
-   */
-  getUndoCount() {
-    return this.invoke('editor.getUndoCount') ?? 0;
-  }
-
-  /**
-   * Returns the number of available redo steps.
-   * @returns {number}
-   */
-  getRedoCount() {
-    return this.invoke('editor.getRedoCount') ?? 0;
-  }
-
-  /**
-   * Returns true when the editor has no meaningful content.
-   * @returns {boolean}
-   */
-  isEmpty() {
-    return this.invoke('editor.isEmpty');
-  }
-
-  /**
-   * Inserts HTML at the current cursor position.
-   * @param {string} html
-   */
-  insertHTML(html) {
-    this.invoke('editor.insertHTML', html);
-  }
-
-  /**
-   * Inserts plain text at the current cursor position.
-   * @param {string} text
-   */
-  insertText(text) {
-    this.invoke('editor.insertText', text);
-  }
-
-  /**
-   * Sets editor content from a Markdown string.
-   * @param {string} md
-   */
-  setMarkdown(md) {
-    this.invoke('editor.setMarkdown', md);
-  }
-
-  /**
-   * Returns the editor content as Markdown.
-   * @returns {string}
-   */
-  getMarkdown() {
-    return this.invoke('editor.getMarkdown');
-  }
-
-  getSelectionBookmark() {
-    return this.invoke('editor.getSelectionBookmark') ?? null;
-  }
-
-  restoreSelectionBookmark(bookmark) {
-    return this.invoke('editor.restoreSelectionBookmark', bookmark);
-  }
-
-  async importDocument(format, data) {
-    const adapter = this.options.documentAdapters?.[format];
-    let html;
-    if (typeof adapter?.import === 'function') html = await adapter.import(data, this);
-    else if (format === 'html') html = String(data ?? '');
-    else if (format === 'markdown') { this.setMarkdown(String(data ?? '')); return this; }
-    else if (format === 'text') { this.setText(String(data ?? '')); return this; }
-    else throw new Error(`[AutumnNote] No importer registered for "${format}".`);
-    this.setHTML(html);
-    return this;
-  }
-
-  async exportDocument(format) {
-    const adapter = this.options.documentAdapters?.[format];
-    if (typeof adapter?.export === 'function') return adapter.export(this, this.getHTML());
-    if (format === 'html') return this.getHTML();
-    if (format === 'markdown') return this.getMarkdown();
-    if (format === 'text') return this.getText();
-    throw new Error(`[AutumnNote] No exporter registered for "${format}".`);
-  }
-
-  ensureBlockIds() {
-    const blocks = this.layoutInfo.editable.children;
-    for (const block of blocks) {
-      if (!block.hasAttribute('data-an-block-id')) {
-        const id = globalThis.crypto?.randomUUID?.() || `an-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-        block.setAttribute('data-an-block-id', id);
-      }
-    }
-    return this;
-  }
-
-  getDocument() {
-    if (this.options.blockIds) this.ensureBlockIds();
-    return { version: 1, html: this.getHTML(), markdown: this.getMarkdown() };
-  }
-
-  loadDocument(documentData) {
-    this.setHTML(documentData?.html || '');
-    this.clearHistory();
-    return this;
-  }
-
-  applyRemoteHTML(html) {
-    this.setHTML(html);
-    this._suppressedRemoteHTML = this.getHTML();
-    this.clearHistory();
-    return this;
-  }
-
-  /**
-   * Returns the current word count of the editor content.
-   * @returns {number}
-   */
-  getWordCount() {
-    return this.invoke('statusbar.getWordCount') ?? 0;
-  }
-
-  /**
-   * Returns the current character count of the editor content.
-   * @returns {number}
-   */
-  getCharCount() {
-    return this.invoke('statusbar.getCharCount') ?? 0;
-  }
-
-  /**
-   * Downloads the editor content as an HTML file.
-   * @param {string} [filename='document.html']
-   */
-  downloadHTML(filename = 'document.html') {
-    this._download(this.getHTML(), filename, 'text/html');
-  }
-
-  /**
-   * Downloads the editor content as a plain-text file.
-   * @param {string} [filename='document.txt']
-   */
-  downloadText(filename = 'document.txt') {
-    this._download(this.getText(), filename, 'text/plain');
-  }
-
-  /**
-   * Downloads the editor content as a Markdown file.
-   * @param {string} [filename='document.md']
-   */
-  downloadMarkdown(filename = 'document.md') {
-    this._download(this.getMarkdown(), filename, 'text/markdown');
-  }
-
-  /**
-   * Creates a temporary Blob URL and triggers a browser file download.
-   * @param {string} content
-   * @param {string} filename
-   * @param {string} mimeType
-   */
-  _download(content, filename, mimeType) {
-    const blob = new Blob([content], { type: mimeType });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    a.style.display = 'none';
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    URL.revokeObjectURL(url);
-  }
-
-  /**
-   * Opens the editor content in a new globalThis and triggers the browser print dialog.
-   * @param {string} [title='']
-   */
-  print(title = '') {
-    const content = this.getHTML();
-    const safeTitle = (title || '').replace(/[<>&"']/g, (c) => `&#${c.charCodeAt(0)};`);
-    const markup = '<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">' +
-      `<title>${safeTitle}</title>` +
-      '<style>' +
-      'body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;line-height:1.6;padding:20mm;color:#111827;}' +
-      'ul.an-checklist{list-style:none;padding-left:0;}' +
-      'ul.an-checklist li{padding-left:24px;position:relative;margin:2px 0;}' +
-      'ul.an-checklist li input[type="checkbox"]{position:absolute;left:0;top:3px;}' +
-      'code{background:#f3f4f6;border-radius:3px;padding:.1em .35em;font-family:monospace;}' +
-      'pre{background:#f3f4f6;padding:.75em 1em;border-radius:4px;overflow-x:auto;}' +
-      'table{border-collapse:collapse;}td,th{border:1px solid #d1d5db;padding:4px 8px;}' +
-      '</style>' +
-      `</head><body>${content}</body></html>`;
-    const blob = new Blob([markup], { type: 'text/html' });
-    const url = URL.createObjectURL(blob);
-    const w = globalThis.open(url, '_blank');
-    if (!w) { URL.revokeObjectURL(url); return; } // popup blocked by browser
-    w.addEventListener('load', () => {
-      w.print();
-      URL.revokeObjectURL(url);
-    });
-  }
-
-  /**
-   * Returns an array of heading objects representing the table of contents.
-   * Each entry has: level (1-6), text (heading text), element (DOM element).
-   * @returns {{ level: number, text: string, element: HTMLElement }[]}
-   */
-  getTableOfContents() {
-    const headings = Array.from(
-      this.layoutInfo.editable.querySelectorAll('h1,h2,h3,h4,h5,h6')
-    );
-    return headings.map((el) => ({
-      level: parseInt(el.tagName[1], 10),
-      text: el.textContent?.trim() ?? '',
-      element: /** @type {HTMLElement} */ (el),
-    }));
-  }
-
-  /**
-   * Moves focus into the editable area.
-   */
-  focus() {
-    this.layoutInfo.editable.focus();
-  }
-
-  /**
-   * Removes focus from the editable area.
-   */
-  blur() {
-    this.layoutInfo.editable.blur();
-  }
-
-  /**
-   * Returns true when the editor is currently in fullscreen mode.
-   * @returns {boolean}
-   */
-  isFullscreen() {
-    return this.invoke('fullscreen.isActive') === true;
-  }
-
-  /**
-   * Sets whether the editor is disabled (readonly).
-   * @param {boolean} disabled
-   */
-  setDisabled(disabled) {
-    const editable = this.layoutInfo.editable;
-    if (disabled) {
-      editable.setAttribute('contenteditable', 'false');
-      this.layoutInfo.container.classList.add('an-disabled');
-      editable.querySelectorAll('ul.an-checklist input[type="checkbox"]').forEach((cb) => {
-        cb.setAttribute('disabled', '');
-      });
-    } else {
-      editable.setAttribute('contenteditable', 'true');
-      this.layoutInfo.container.classList.remove('an-disabled');
-      editable.querySelectorAll('ul.an-checklist input[type="checkbox"]').forEach((cb) => {
-        cb.removeAttribute('disabled');
-      });
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Destroy
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Completely removes the editor and restores the original element.
-   *
-   * Teardown itself is synchronous; the returned promise only settles once the
-   * closing auto-save has finished, so `await editor.destroy()` is worth doing
-   * when using an async `autoSaveAdapter`. Ignoring the return value is safe.
-   * @returns {Promise<void>}
-   */
-  destroy() {
-    if (!this._alive) return this._destroyPromise ?? Promise.resolve();
-
-    // Start the final auto-save before tearing anything down. `_listeners` is
-    // deliberately kept alive until this settles, otherwise the closing
-    // autoSave/autoSaveError event fires into an already-cleared listener map
-    // and an async adapter's last write completes silently.
-    const pendingFlush = this._pendingAutoSave != null
-      ? this.flushAutoSave().catch(() => {})
-      : null;
-
-    this._modules.forEach((module) => {
-      if (typeof module.destroy === 'function') module.destroy();
-    });
-    this._modules.clear();
-
-    for (const { plugin } of this._plugins.values()) {
-      if (typeof plugin.uninstall === 'function') {
-        try { plugin.uninstall(this); } catch (_) { void _; }
-      }
-    }
-    this._plugins.clear();
-
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-
-    const container = this.layoutInfo.container;
-    const wasDark = container?.classList.contains('an-theme-dark');
-    const wasAuto = container?.classList.contains('an-theme-auto');
-    if (container?.parentNode) {
-      // Restore original element
-      this.targetEl.style.display = '';
-      container.remove();
-    }
-    // Clean up body theme classes if no other editors of that type remain
-    if (wasDark && !document.querySelector('.an-container.an-theme-dark')) {
-      document.body.classList.remove('an-theme-dark');
-    }
-    if (wasAuto && !document.querySelector('.an-container.an-theme-auto')) {
-      document.body.classList.remove('an-theme-auto');
-    }
-
-    if (typeof this.options.onDestroy === 'function') {
-      this.options.onDestroy(this);
-    }
-
-    this._alive = false;
-
-    // Resolves once the closing auto-save (if any) has finished. Callers using
-    // an async autoSaveAdapter can `await editor.destroy()` to be sure the last
-    // write landed before unloading.
-    this._destroyPromise = Promise.resolve(pendingFlush).then(() => {
-      this._listeners.clear();
-    });
-    return this._destroyPromise;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Helpers
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Syncs editor HTML back into the original textarea/input for form submission.
-   */
-  _syncToTarget(html) {
-    if (this.targetEl.tagName === 'TEXTAREA' || this.targetEl.tagName === 'INPUT') {
-      /** @type {HTMLInputElement} */ (this.targetEl).value = typeof html === 'string' ? html : this.getHTML();
-    }
-  }
-}