autumnnote 1.15.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "WYSIWYG rich-text editor built with vanilla JavaScript — zero dependencies, no jQuery. Dark mode, @mention, markdown shortcuts, bubble toolbar. React and Vue 3 wrappers included.",
   "type": "module",
   "main": "dist/autumnnote.cjs",
@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vite build --config vite.umd.config.js && node scripts/create-cjs-alias.mjs",
+    "build": "vite build && vite build --config vite.umd.config.js && vite build --config vite.cdn.config.js && node scripts/create-cjs-alias.mjs",
     "build:demo": "vite build --config vite.demo.config.js",
     "preview": "vite preview",
     "prepublishOnly": "npm run build",
@@ -100,13 +100,13 @@
     "@vitest/browser-playwright": "^4.1.10",
     "@vitest/coverage-v8": "^4.1.8",
     "cross-env": "^10.1.0",
-    "eslint": "10.3.0",
+    "eslint": "10.7.0",
     "jsdom": "^25.0.1",
     "playwright": "^1.61.1",
     "rollup-plugin-visualizer": "^7.0.1",
-    "sass": "^1.99.0",
+    "sass": "^1.101.0",
     "typescript": "^6.0.2",
-    "vite": "^8.0.16",
+    "vite": "^8.1.5",
     "vitest": "^4.1.8"
   },
   "packageManager": "pnpm@11.1.3",

package/src/js/Context.js

@@ -39,6 +39,7 @@ 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();
@@ -72,6 +73,9 @@ export class Context {
 
     this._disposers = [];
     this._alive = false;
+    this._autoSaveTimer = null;
+    this._pendingAutoSave = null;
+    this._suppressedRemoteHTML = null;
   }
 
   // ---------------------------------------------------------------------------
@@ -153,10 +157,11 @@ export class Context {
     register('shortcutsDialog', ShortcutsDialog);
     register('findReplace', FindReplace);
     register('imageCropOverlay', ImageCropOverlay);
-    register('autoSaveRestore', AutoSaveRestore);
-    register('markdownShortcuts', MarkdownShortcuts);
-    register('bubbleToolbar', BubbleToolbar);
-    register('mention', Mention);
+    if (this.options.autoSaveRestore) register('autoSaveRestore', AutoSaveRestore);
+    if (this.options.markdownShortcuts !== false) register('markdownShortcuts', MarkdownShortcuts);
+    if (this.options.bubbleToolbar) register('bubbleToolbar', BubbleToolbar);
+    if (this.options.mention) register('mention', Mention);
+    if (this.options.slashMenu !== false) register('slashMenu', SlashMenu);
 
     // Custom modules registered via AutumnNote.registerModule()
     if (_customModules.size > 0) {
@@ -180,6 +185,18 @@ export class Context {
     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
@@ -246,22 +263,57 @@ export class Context {
       }
     });
     // Sync textarea/input value on every change so form.submit() always gets fresh content
-    const d3 = this.on('change', () => this._syncToTarget());
-    this._disposers.push(d0, d1, d2, d3);
+    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', () => {
-        try {
-          const key = this.options.autoSaveKey;
-          localStorage.setItem(key, this.getHTML());
-          localStorage.setItem(key + ':asrmeta', JSON.stringify({ savedAt: Date.now() }));
-        } catch (_) { void _; }
-      });
+      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
   // ---------------------------------------------------------------------------
@@ -337,6 +389,34 @@ export class Context {
   // 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');
+    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
@@ -444,6 +524,64 @@ export class Context {
     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}
@@ -601,6 +739,7 @@ export class Context {
   destroy() {
     if (!this._alive) return;
 
+    if (this._pendingAutoSave != null) void this.flushAutoSave();
     this._modules.forEach((module) => {
       if (typeof module.destroy === 'function') module.destroy();
     });
@@ -647,9 +786,9 @@ export class Context {
   /**
    * Syncs editor HTML back into the original textarea/input for form submission.
    */
-  _syncToTarget() {
+  _syncToTarget(html) {
     if (this.targetEl.tagName === 'TEXTAREA' || this.targetEl.tagName === 'INPUT') {
-      /** @type {HTMLInputElement} */ (this.targetEl).value = this.getHTML();
+      /** @type {HTMLInputElement} */ (this.targetEl).value = typeof html === 'string' ? html : this.getHTML();
     }
   }
 }

package/src/js/editing/History.js

@@ -7,16 +7,37 @@ export class History {
   /**
    * @param {HTMLElement} editable - the contenteditable element
    * @param {number} [limit=100] - maximum number of undo/redo states
+   * @param {number} [maxBytes=10485760] - maximum combined size (chars) of all
+   *   stacked snapshots (html + tokenized image data). Oldest states are
+   *   evicted first when exceeded, even if `limit` hasn't been reached —
+   *   documents with many large embedded images can otherwise hold dozens of
+   *   full-size copies in memory despite the step-count limit.
    */
-  constructor(editable, limit = 100) {
+  constructor(editable, limit = 100, maxBytes = 10 * 1024 * 1024) {
     this.editable = editable;
     this._limit = limit;
+    this._maxBytes = maxBytes;
+    this._bytes = 0;
     /** @type {Array<{html: string, images?: Record<string,string>, sel: {start: number, end: number}|null}>} */
     this.stack = [];
     this.stackOffset = -1;
     this._savePoint();
   }
 
+  /**
+   * Approximate in-memory size (chars) of one stacked snapshot: the tokenized
+   * HTML string plus every image data URL it references.
+   * @param {{html: string, images?: Record<string,string>}} entry
+   * @returns {number}
+   */
+  _entrySize(entry) {
+    let size = entry.html.length;
+    if (entry.images) {
+      for (const key in entry.images) size += entry.images[key].length;
+    }
+    return size;
+  }
+
   // ---------------------------------------------------------------------------
   // Private helpers
   // ---------------------------------------------------------------------------
@@ -115,16 +136,26 @@ export class History {
   _savePoint() {
     // Trim future history if we're mid-stack
     if (this.stackOffset < this.stack.length - 1) {
+      for (const entry of this.stack.slice(this.stackOffset + 1)) {
+        this._bytes -= this._entrySize(entry);
+      }
       this.stack = this.stack.slice(0, this.stackOffset + 1);
     }
     const raw = this._serialize();
     const { html, images } = this._tokenizeImages(raw);
-    this.stack.push({ html, images, sel: this._serializeSelection() });
-    if (this.stack.length > this._limit) {
-      this.stack.shift();
-    } else {
-      this.stackOffset++;
+    const entry = { html, images, sel: this._serializeSelection() };
+    this.stack.push(entry);
+    this._bytes += this._entrySize(entry);
+
+    // Evict oldest states first, whichever budget (step count or byte size)
+    // is exceeded — always keep at least the just-pushed current state.
+    while (this.stack.length > 1 && (this.stack.length > this._limit || this._bytes > this._maxBytes)) {
+      this._bytes -= this._entrySize(this.stack.shift());
     }
+    // The newly-pushed current state is always the final entry. Recompute the
+    // offset from the resulting stack instead of incrementing conditionally:
+    // a single oversized snapshot may evict several older entries at once.
+    this.stackOffset = this.stack.length - 1;
   }
 
   _restore(point) {
@@ -209,6 +240,7 @@ export class History {
   reset() {
     this.stack = [];
     this.stackOffset = -1;
+    this._bytes = 0;
     this._savePoint();
   }
 

package/src/js/i18n/de.js

@@ -342,4 +342,19 @@ export const de = {
     restore: 'Wiederherstellen',
     discard: 'Verwerfen',
   },
+
+  slashMenu: {
+    noResults:      'Keine passenden Befehle',
+    heading1:       'Überschrift 1',
+    heading2:       'Überschrift 2',
+    heading3:       'Überschrift 3',
+    bulletList:     'Aufzählungsliste',
+    numberedList:   'Nummerierte Liste',
+    checklist:      'Checkliste',
+    blockquote:     'Zitat',
+    codeBlock:      'Codeblock',
+    horizontalRule: 'Horizontale Linie',
+    table:          'Tabelle',
+    image:          'Bild',
+  },
 };

package/src/js/i18n/en.js

@@ -350,4 +350,19 @@ export const en = {
     imageSize: (maxSize) =>
       `Image file is too large. Maximum allowed size is ${maxSize} MB.`,
   },
+
+  slashMenu: {
+    noResults:      'No matching commands',
+    heading1:       'Heading 1',
+    heading2:       'Heading 2',
+    heading3:       'Heading 3',
+    bulletList:     'Bullet List',
+    numberedList:   'Numbered List',
+    checklist:      'Checklist',
+    blockquote:     'Blockquote',
+    codeBlock:      'Code Block',
+    horizontalRule: 'Horizontal Rule',
+    table:          'Table',
+    image:          'Image',
+  },
 };

package/src/js/i18n/es.js

@@ -342,4 +342,19 @@ export const es = {
     restore: 'Restaurar',
     discard: 'Descartar',
   },
+
+  slashMenu: {
+    noResults:      'No hay comandos coincidentes',
+    heading1:       'Encabezado 1',
+    heading2:       'Encabezado 2',
+    heading3:       'Encabezado 3',
+    bulletList:     'Lista con viñetas',
+    numberedList:   'Lista numerada',
+    checklist:      'Lista de verificación',
+    blockquote:     'Cita',
+    codeBlock:      'Bloque de código',
+    horizontalRule: 'Línea horizontal',
+    table:          'Tabla',
+    image:          'Imagen',
+  },
 };

package/src/js/i18n/fr.js

@@ -343,4 +343,19 @@ export const fr = {
     restore: 'Restaurer',
     discard: 'Ignorer',
   },
+
+  slashMenu: {
+    noResults:      'Aucune commande correspondante',
+    heading1:       'Titre 1',
+    heading2:       'Titre 2',
+    heading3:       'Titre 3',
+    bulletList:     'Liste à puces',
+    numberedList:   'Liste numérotée',
+    checklist:      'Liste de contrôle',
+    blockquote:     'Citation',
+    codeBlock:      'Bloc de code',
+    horizontalRule: 'Ligne horizontale',
+    table:          'Tableau',
+    image:          'Image',
+  },
 };

package/src/js/i18n/ja.js

@@ -343,4 +343,19 @@ export const ja = {
     restore: '復元',
     discard: '破棄',
   },
+
+  slashMenu: {
+    noResults:      '一致するコマンドがありません',
+    heading1:       '見出し1',
+    heading2:       '見出し2',
+    heading3:       '見出し3',
+    bulletList:     '箇条書きリスト',
+    numberedList:   '番号付きリスト',
+    checklist:      'チェックリスト',
+    blockquote:     '引用',
+    codeBlock:      'コードブロック',
+    horizontalRule: '水平線',
+    table:          '表',
+    image:          '画像',
+  },
 };

package/src/js/i18n/ko.js

@@ -342,4 +342,19 @@ export const ko = {
     restore: '복원',
     discard: '삭제',
   },
+
+  slashMenu: {
+    noResults:      '일치하는 명령이 없습니다',
+    heading1:       '제목 1',
+    heading2:       '제목 2',
+    heading3:       '제목 3',
+    bulletList:     '글머리 기호 목록',
+    numberedList:   '번호 매기기 목록',
+    checklist:      '체크리스트',
+    blockquote:     '인용문',
+    codeBlock:      '코드 블록',
+    horizontalRule: '가로선',
+    table:          '표',
+    image:          '이미지',
+  },
 };

package/src/js/i18n/vi.js

@@ -343,4 +343,19 @@ export const vi = {
     restore: 'Khôi phục',
     discard: 'Bỏ qua',
   },
+
+  slashMenu: {
+    noResults:      'Không có lệnh phù hợp',
+    heading1:       'Tiêu đề 1',
+    heading2:       'Tiêu đề 2',
+    heading3:       'Tiêu đề 3',
+    bulletList:     'Danh sách không thứ tự',
+    numberedList:   'Danh sách có thứ tự',
+    checklist:      'Danh sách công việc',
+    blockquote:     'Trích dẫn',
+    codeBlock:      'Khối mã',
+    horizontalRule: 'Đường kẻ ngang',
+    table:          'Bảng',
+    image:          'Hình ảnh',
+  },
 };

package/src/js/i18n/zh.js

@@ -343,4 +343,19 @@ export const zh = {
     restore: '恢复',
     discard: '放弃',
   },
+
+  slashMenu: {
+    noResults:      '没有匹配的命令',
+    heading1:       '标题 1',
+    heading2:       '标题 2',
+    heading3:       '标题 3',
+    bulletList:     '项目符号列表',
+    numberedList:   '编号列表',
+    checklist:      '检查清单',
+    blockquote:     '引用',
+    codeBlock:      '代码块',
+    horizontalRule: '水平线',
+    table:          '表格',
+    image:          '图片',
+  },
 };

package/src/js/index.js

@@ -140,11 +140,23 @@ const AutumnNote = {
    */
   registerButton(btnDef) { registerButton(btnDef); return this; },
 
+  /** Registers a slash-menu command for future editor instances. */
+  registerSlashCommand(command) {
+    if (!command?.id || typeof command.run !== 'function') {
+      throw new TypeError('[AutumnNote] Slash command requires an id and run(context) function.');
+    }
+    const commands = defaultOptions.slashCommands;
+    const index = commands.findIndex((item) => item.id === command.id);
+    if (index >= 0) commands[index] = command;
+    else commands.push(command);
+    return this;
+  },
+
   /** All pre-built button definitions — accessible in every module format including UMD/CJS. */
   buttons,
 
   /** Library version */
-  version: '1.15.0',
+  version: '1.16.0',
 };
 
 // ---------------------------------------------------------------------------

package/src/js/module/Clipboard.js

@@ -416,12 +416,7 @@ export class Clipboard {
       }
 
       const alt = file.name.replace(/\.[^.]+$/, '');
-      this._compressImage(file).then((dataUrl) => {
-        // Keep the large data URL in a JS Map; insert a lightweight blob: URL
-        // into the DOM so editable.innerHTML never contains the big base64 string.
-        const blob = this._dataUrlToBlob(dataUrl);
-        const blobUrl = URL.createObjectURL(blob);
-        this._blobRegistry.set(blobUrl, dataUrl);
+      this.compressAndRegister(file).then((blobUrl) => {
         this.context.invoke('editor.insertImage', blobUrl, alt);
       }).catch((err) => {
         const message = `Image "${file.name}" could not be processed.`;
@@ -431,6 +426,25 @@ export class Clipboard {
     });
   }
 
+  /**
+   * Compresses an image File via canvas and registers the result behind a
+   * lightweight blob: URL (see `resolveImages`), so callers never have to hold
+   * the full base64 string in the DOM. Shared by paste/drop and ImageDialog's
+   * file picker so every image-insertion path gets the same compression.
+   * @param {File} file
+   * @returns {Promise<string>} blob: URL usable as an <img src>
+   */
+  async compressAndRegister(file) {
+    const processor = this.options.imageProcessor;
+    const dataUrl = typeof processor === 'function'
+      ? await processor(file, { context: this.context })
+      : await this._compressImage(file);
+    const blob = this._dataUrlToBlob(dataUrl);
+    const blobUrl = URL.createObjectURL(blob);
+    this._blobRegistry.set(blobUrl, dataUrl);
+    return blobUrl;
+  }
+
   /**
    * Replaces any blob: URLs created by this module with their original data URLs.
    * Called by Editor.getHTML() so the returned HTML is fully self-contained.

package/src/js/module/Editor.js

@@ -34,7 +34,11 @@ export class Editor {
 
   initialize() {
     const editable = this.context.layoutInfo.editable;
-    this._history = new History(editable, this.options.historyLimit || 100);
+    this._history = new History(
+      editable,
+      this.options.historyLimit || 100,
+      this.options.historyMaxBytes || 10 * 1024 * 1024,
+    );
     this._bindEvents(editable);
     return this;
   }
@@ -539,6 +543,16 @@ export class Editor {
     return this._history ? this._history.getRedoCount() : 0;
   }
 
+  getSelectionBookmark() {
+    return this._history?._serializeSelection() ?? null;
+  }
+
+  restoreSelectionBookmark(bookmark) {
+    if (!bookmark || !this._history) return false;
+    this._history._restoreSelection(bookmark);
+    return true;
+  }
+
   // ---------------------------------------------------------------------------
   // Style commands (delegated to Style module)
   // ---------------------------------------------------------------------------

package/src/js/module/ImageDialog.js

@@ -13,7 +13,11 @@ export class ImageDialog extends BaseDialog {
   // Public API
   // ---------------------------------------------------------------------------
 
-  show() {
+  /**
+   * @param {{ beforeInsert?: () => void }} [hooks]
+   */
+  show({ beforeInsert } = {}) {
+    this._beforeInsert = typeof beforeInsert === 'function' ? beforeInsert : null;
     this._saveRange();
     this._urlInput.value = '';
     this._altInput.value = '';
@@ -137,11 +141,23 @@ export class ImageDialog extends BaseDialog {
       return;
     }
 
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      this._urlInput.value = /** @type {string} */ (e.target.result);
-    };
-    reader.readAsDataURL(file);
+    // Resize/compress via Clipboard's shared canvas pipeline so a file chosen
+    // through this dialog gets the same treatment as a pasted/dropped image
+    // instead of embedding the original (potentially multi-MB) file untouched.
+    this.context.invoke('clipboard.compressAndRegister', file).then((blobUrl) => {
+      if (this.context._alive === false) return;
+      this._urlInput.value = blobUrl;
+    }).catch((err) => {
+      if (this.context._alive === false) return;
+      // Compression failed (e.g. canvas unavailable) — fall back to embedding
+      // the original file directly.
+      console.warn('[AutumnNote] ImageDialog: image compression failed, using original file.', err);
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        this._urlInput.value = /** @type {string} */ (e.target.result);
+      };
+      reader.readAsDataURL(file);
+    });
   }
 
   _onInsert() {
@@ -159,7 +175,19 @@ export class ImageDialog extends BaseDialog {
       this._savedRange.select();
     }
 
+    // Let callers make a deferred DOM change only after the user commits the
+    // dialog. SlashMenu uses this to keep "/image" intact when the dialog is
+    // cancelled and remove it atomically immediately before image insertion.
+    const beforeInsert = this._beforeInsert;
+    this._beforeInsert = null;
+    beforeInsert?.();
+
     this.context.invoke('editor.insertImage', src, alt, align);
     this._close();
   }
+
+  _close() {
+    this._beforeInsert = null;
+    super._close();
+  }
 }