autumnnote 1.14.0 → 1.16.0

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.14.0',
+  version: '1.16.0',
 };
 
 // ---------------------------------------------------------------------------

package/src/js/module/Clipboard.js

@@ -371,7 +371,11 @@ export class Clipboard {
       execCommand('insertHTML', html);
       this.context.invoke('editor.afterCommand');
     };
-    reader.onerror = () => console.warn('[AutumnNote] Failed to read dropped markdown file', file.name);
+    reader.onerror = () => {
+      const message = `Failed to read dropped markdown file "${file.name}".`;
+      console.warn(`[AutumnNote] ${message}`);
+      this.context.triggerEvent('pasteError', { message });
+    };
     reader.readAsText(file);
   }
 
@@ -412,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.`;
@@ -427,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;
   }
@@ -497,8 +501,7 @@ export class Editor {
 
   undo() {
     if (this._history) {
-      clearTimeout(this._snapshotTimer);
-      this._snapshotTimer = null;
+      this._flushPendingSnapshot();
       this._history.undo();
       this.context.invoke('toolbar.refresh');
       this.context.invoke('statusbar.update');
@@ -508,8 +511,7 @@ export class Editor {
 
   redo() {
     if (this._history) {
-      clearTimeout(this._snapshotTimer);
-      this._snapshotTimer = null;
+      this._flushPendingSnapshot();
       this._history.redo();
       this.context.invoke('toolbar.refresh');
       this.context.invoke('statusbar.update');
@@ -517,6 +519,14 @@ export class Editor {
     }
   }
 
+  /** Records a debounced change before an immediate undo/redo command. */
+  _flushPendingSnapshot() {
+    if (this._snapshotTimer === null) return;
+    clearTimeout(this._snapshotTimer);
+    this._snapshotTimer = null;
+    this._history?.recordUndo();
+  }
+
   canUndo() {
     return this._history ? this._history.canUndo() : false;
   }
@@ -533,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/ImageCropOverlay.js

@@ -444,6 +444,7 @@ export class ImageCropOverlay {
    * @param {(e: MouseEvent) => void} onMove
    */
   _attachDocDrag(onMove) {
+    this._dragDisposers?.();
     const onTouchMove = (e) => {
       e.preventDefault();
       const te3 = /** @type {TouchEvent} */ (e); onMove(/** @type {MouseEvent} */ (/** @type {unknown} */ ({ clientX: te3.touches[0].clientX, clientY: te3.touches[0].clientY })));
@@ -455,7 +456,9 @@ export class ImageCropOverlay {
       document.removeEventListener('touchend',  cleanup);
       document.body.style.userSelect = '';
       document.body.style.cursor     = '';
+      this._dragDisposers = null;
     };
+    this._dragDisposers = cleanup;
     document.body.style.userSelect = 'none';
     document.addEventListener('mousemove', onMove);
     document.addEventListener('mouseup',   cleanup, { once: true });
@@ -561,6 +564,8 @@ export class ImageCropOverlay {
    * @param {boolean} _committed - reserved for future use
    */
   _close(_committed) {
+    this._dragDisposers?.();
+    this._dragDisposers = null;
     this._disposers.forEach((d) => d());
     this._disposers = [];
 

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();
+  }
 }

package/src/js/module/MarkdownShortcuts.js

@@ -167,13 +167,13 @@ export class MarkdownShortcuts {
 
   _convertToChecklist() {
     this._selectLineAndDelete();
-    this.context.invoke('editor.checklist');
+    this.context.invoke('editor.toggleChecklist');
     this.context.triggerEvent('change', this.context.getHTML());
   }
 
   _convertToHr() {
     this._selectLineAndDelete();
-    this.context.invoke('editor.insertHR');
+    this.context.invoke('editor.insertHr');
     this.context.triggerEvent('change', this.context.getHTML());
   }
 

package/src/js/module/SlashMenu.js

@@ -0,0 +1,376 @@
+/**
+ * SlashMenu.js — Notion-style "/" command palette for quick block insertion.
+ *
+ * Typing "/" as the very first character of an otherwise-empty block opens a
+ * filterable list of quick-insert commands (headings, lists, table, image, …).
+ * Arrow keys navigate, Enter/Tab selects, Escape or deleting back past the
+ * "/" closes it. Disabled via `slashMenu: false`.
+ *
+ * Positioning follows the same synchronous-caret-rect technique as Mention.js:
+ * getBoundingClientRect() on a zero-width Range over the trigger character is
+ * reliable while the triggering DOM event is still live, but often returns an
+ * empty rect once deferred into a callback — so the rect is captured eagerly
+ * in `_onInput`, not lazily when the menu is rendered.
+ */
+
+import { on } from '../core/dom.js';
+
+export class SlashMenu {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+    this._disposers = [];
+
+    /** @type {HTMLElement|null} */
+    this._menu = null;
+    /** @type {Array<{id: string, label: string, keywords: string, run: () => void}>} */
+    this._filtered = [];
+    this._activeIndex = -1;
+    this._open = false;
+    this._query = '';
+    /** @type {Text|null} */
+    this._textNode = null;
+    this._triggerOffset = 0;
+    /** @type {DOMRect|null} */
+    this._caretRect = null;
+  }
+
+  initialize() {
+    if (this.options.slashMenu === false) return this;
+    const editable = this.context.layoutInfo.editable;
+    const d1 = on(editable, 'input', () => this._onInput());
+    const d2 = on(editable, 'keydown', (e) => this._onKeydown(e));
+    const d3 = on(document, 'click', (e) => this._onDocClick(e));
+    this._disposers.push(d1, d2, d3);
+    return this;
+  }
+
+  destroy() {
+    this._menu?.remove();
+    this._menu = null;
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+  }
+
+  // ---------------------------------------------------------------------------
+  // Command list
+  // ---------------------------------------------------------------------------
+
+  _commands() {
+    const L = this.context.locale.slashMenu;
+    const ctx = this.context;
+    const builtIns = [
+      { id: 'h1', label: L.heading1, keywords: 'h1 heading title', run: () => ctx.invoke('editor.formatBlock', 'h1') },
+      { id: 'h2', label: L.heading2, keywords: 'h2 heading subtitle', run: () => ctx.invoke('editor.formatBlock', 'h2') },
+      { id: 'h3', label: L.heading3, keywords: 'h3 heading', run: () => ctx.invoke('editor.formatBlock', 'h3') },
+      { id: 'ul', label: L.bulletList, keywords: 'ul bullet list unordered', run: () => ctx.invoke('editor.insertUL') },
+      { id: 'ol', label: L.numberedList, keywords: 'ol numbered list ordered', run: () => ctx.invoke('editor.insertOL') },
+      { id: 'checklist', label: L.checklist, keywords: 'checklist todo checkbox task', run: () => ctx.invoke('editor.toggleChecklist') },
+      { id: 'quote', label: L.blockquote, keywords: 'quote blockquote', run: () => ctx.invoke('editor.formatBlock', 'blockquote') },
+      { id: 'code', label: L.codeBlock, keywords: 'code pre block', run: () => ctx.invoke('editor.formatBlock', 'pre') },
+      { id: 'hr', label: L.horizontalRule, keywords: 'hr divider rule line', run: () => ctx.invoke('editor.insertHr') },
+      { id: 'table', label: L.table, keywords: 'table grid', run: () => ctx.invoke('editor.insertTable', 3, 3) },
+      { id: 'image', label: L.image, keywords: 'image picture photo upload', run: () => ctx.invoke('imageDialog.show') },
+    ];
+    const custom = (this.options.slashCommands || []).map((command) => ({
+      id: command.id,
+      label: command.label || command.id,
+      keywords: command.keywords || '',
+      run: () => command.run(ctx),
+    }));
+    return [...builtIns, ...custom];
+  }
+
+  refresh() {
+    if (this._open) this._filterAndRender();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Menu DOM
+  // ---------------------------------------------------------------------------
+
+  _buildMenu() {
+    const el = document.createElement('div');
+    el.className = 'an-slash-menu';
+    el.setAttribute('role', 'listbox');
+    el.style.display = 'none';
+
+    el.addEventListener('mousedown', (e) => e.preventDefault());
+    el.addEventListener('click', (e) => {
+      const item = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-slash-menu-item'));
+      if (item) this._select(+item.dataset.index);
+    });
+    el.addEventListener('mousemove', (e) => {
+      const item = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-slash-menu-item'));
+      if (item) this._highlight(+item.dataset.index);
+    });
+
+    document.body.appendChild(el);
+    this._menu = el;
+    return el;
+  }
+
+  _renderItems() {
+    if (!this._menu) this._buildMenu();
+    const menu = this._menu;
+    const L = this.context.locale.slashMenu;
+
+    if (this._filtered.length === 0) {
+      menu.innerHTML = '';
+      const empty = document.createElement('div');
+      empty.className = 'an-slash-menu-empty';
+      empty.textContent = L.noResults;
+      menu.appendChild(empty);
+      this._activeIndex = -1;
+      return;
+    }
+
+    const frag = document.createDocumentFragment();
+    this._filtered.forEach((item, i) => {
+      const row = document.createElement('div');
+      row.className = 'an-slash-menu-item';
+      row.setAttribute('role', 'option');
+      row.id = `an-slash-option-${item.id}`;
+      row.dataset.index = String(i);
+      row.textContent = item.label;
+      frag.appendChild(row);
+    });
+    menu.innerHTML = '';
+    menu.appendChild(frag);
+    this._highlight(0);
+  }
+
+  _highlight(index) {
+    if (!this._menu) return;
+    this._menu.querySelectorAll('.an-slash-menu-item').forEach((el, i) => {
+      const active = i === index;
+      el.classList.toggle('an-slash-menu-active', active);
+      el.setAttribute('aria-selected', String(active));
+      if (active) this._menu.setAttribute('aria-activedescendant', el.id);
+    });
+    this._activeIndex = index;
+  }
+
+  _position() {
+    const menu = this._menu;
+    const rect = this._caretRect;
+    if (!menu || !rect || rect.height === 0) return;
+
+    menu.style.visibility = 'hidden';
+    menu.style.display = 'block';
+    const mh = menu.offsetHeight;
+    const mw = menu.offsetWidth;
+
+    let top = rect.bottom + 4;
+    let left = rect.left;
+    if (rect.bottom + mh + 8 > globalThis.innerHeight) {
+      top = rect.top - mh - 4;
+    }
+    left = Math.max(8, Math.min(left, globalThis.innerWidth - mw - 8));
+
+    menu.style.top = `${top}px`;
+    menu.style.left = `${left}px`;
+    menu.style.visibility = '';
+  }
+
+  _open_() {
+    this._open = true;
+    this._filterAndRender();
+    this._position();
+  }
+
+  _close() {
+    if (this._menu) this._menu.style.display = 'none';
+    this._open = false;
+    this._filtered = [];
+    this._activeIndex = -1;
+    this._menu?.removeAttribute('aria-activedescendant');
+    this._textNode = null;
+    this._caretRect = null;
+    this._query = '';
+  }
+
+  // ---------------------------------------------------------------------------
+  // Trigger detection
+  // ---------------------------------------------------------------------------
+
+  _isBlock(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) return false;
+    const display = globalThis.getComputedStyle(node).display;
+    return display === 'block' || display === 'list-item' || display === 'table-cell';
+  }
+
+  /**
+   * Detects a "/" trigger at the caret, requiring it to be the only content
+   * typed so far in its block (i.e. the block's text is exactly "/" + query,
+   * nothing before or after). This deliberately avoids firing mid-sentence
+   * (e.g. "10/20", "and/or").
+   * @returns {{ query: string, textNode: Text, triggerOffset: number } | null}
+   */
+  _getTriggerContext() {
+    const sel = globalThis.getSelection();
+    if (!sel?.rangeCount) return null;
+    const range = sel.getRangeAt(0);
+    if (!range.collapsed) return null;
+
+    const editable = this.context.layoutInfo.editable;
+    if (!editable.contains(range.startContainer)) return null;
+    if (range.startContainer.nodeType !== Node.TEXT_NODE) return null;
+
+    let block = range.startContainer.parentNode;
+    while (block && block !== editable && !this._isBlock(block)) block = block.parentNode;
+    if (!block || block === editable) return null;
+
+    const fullText = block.textContent || '';
+    const beforeRange = document.createRange();
+    beforeRange.setStart(block, 0);
+    beforeRange.setEnd(range.startContainer, range.startOffset);
+    const before = beforeRange.toString();
+
+    const m = /^\/(\S*)$/.exec(before);
+    if (!m) return null;
+    if (fullText.length > before.length) return null; // content after the caret
+
+    return {
+      query: m[1],
+      textNode: /** @type {Text} */ (range.startContainer),
+      triggerOffset: range.startOffset - m[0].length,
+    };
+  }
+
+  /**
+   * Captures the caret rect synchronously — see file header for why this
+   * can't be deferred to a later tick.
+   */
+  _captureCaretRect(textNode, triggerOffset) {
+    try {
+      const r = document.createRange();
+      const end = Math.min(triggerOffset + 1, textNode.textContent.length);
+      r.setStart(textNode, triggerOffset);
+      r.setEnd(textNode, end);
+      const candidate = r.getBoundingClientRect();
+      if (candidate.height > 0) return candidate;
+    } catch (_) { void _; }
+
+    const sel = globalThis.getSelection();
+    if (!sel?.rangeCount) return null;
+    const rects = sel.getRangeAt(0).getClientRects();
+    return rects.length > 0 ? rects[rects.length - 1] : null;
+  }
+
+  _filterAndRender() {
+    const q = this._query.toLowerCase();
+    this._filtered = q
+      ? this._commands().filter((c) => c.keywords.includes(q) || c.label.toLowerCase().includes(q))
+      : this._commands();
+    this._renderItems();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Events
+  // ---------------------------------------------------------------------------
+
+  _onInput() {
+    const ctx = this._getTriggerContext();
+    if (!ctx) {
+      if (this._open) this._close();
+      return;
+    }
+
+    this._textNode = ctx.textNode;
+    this._triggerOffset = ctx.triggerOffset;
+    this._query = ctx.query;
+    this._caretRect = this._captureCaretRect(ctx.textNode, ctx.triggerOffset);
+
+    if (!this._open) this._open_();
+    else { this._filterAndRender(); this._position(); }
+  }
+
+  _onKeydown(e) {
+    if (!this._open) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (this._filtered.length === 0) return;
+      this._highlight((this._activeIndex + 1) % this._filtered.length);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (this._filtered.length === 0) return;
+      this._highlight((this._activeIndex - 1 + this._filtered.length) % this._filtered.length);
+    } else if (e.key === 'Enter' || e.key === 'Tab') {
+      if (this._activeIndex >= 0) {
+        e.preventDefault();
+        this._select(this._activeIndex);
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this._close();
+    }
+  }
+
+  _onDocClick(e) {
+    if (!this._open) return;
+    if (this._menu?.contains(e.target)) return;
+    this._close();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Selection
+  // ---------------------------------------------------------------------------
+
+  _deleteTriggerText() {
+    const node = this._textNode;
+    if (!node?.isConnected) return;
+    const before = node.textContent.slice(0, this._triggerOffset);
+    const after = node.textContent.slice(this._triggerOffset + 1 + this._query.length);
+    node.textContent = before + after;
+
+    const sel = globalThis.getSelection();
+    if (!sel) return;
+    const range = document.createRange();
+    range.setStart(node, this._triggerOffset);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+
+  _makeTriggerRemover() {
+    const node = this._textNode;
+    const triggerOffset = this._triggerOffset;
+    const query = this._query;
+    return () => {
+      if (!node?.isConnected) return;
+      const before = node.textContent.slice(0, triggerOffset);
+      const after = node.textContent.slice(triggerOffset + 1 + query.length);
+      node.textContent = before + after;
+
+      const sel = globalThis.getSelection();
+      if (!sel) return;
+      const range = document.createRange();
+      range.setStart(node, triggerOffset);
+      range.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    };
+  }
+
+  _select(index) {
+    const item = this._filtered[index];
+    if (!item) return;
+
+    if (item.id === 'image') {
+      const beforeInsert = this._makeTriggerRemover();
+      this._close();
+      this.context.invoke('imageDialog.show', { beforeInsert });
+      return;
+    }
+
+    this._deleteTriggerText();
+    this._close();
+    // Editor.* methods invoked by commands already call afterCommand()
+    // internally (toolbar/statusbar refresh + debounced undo snapshot + the
+    // 'change' event), so no manual triggerEvent here — see Editor.js.
+    item.run();
+  }
+}

package/src/js/module/Statusbar.js

@@ -4,7 +4,6 @@
  */
 
 import { createElement, on } from '../core/dom.js';
-import { debounce } from '../core/func.js';
 
 // Cache the segmenter instance at module level to avoid per-call allocation
 const _segmenter =
@@ -97,7 +96,6 @@ export class Statusbar {
     info.appendChild(this._charCountEl);
     this.el.appendChild(info);
 
-    this._bindContentEvents();
     this.update();
     return this;
   }
@@ -202,13 +200,9 @@ export class Statusbar {
   // Counter update
   // ---------------------------------------------------------------------------
 
-  _bindContentEvents() {
-    const editable = this.context.layoutInfo.editable;
-    const updateDebounced = debounce(() => this.update(), 200);
-    const d = on(editable, 'input', /** @type {EventListener} */ (updateDebounced));
-    this._disposers.push(d);
-  }
-
+  // Editor.afterCommand() already invokes 'statusbar.update' on every native
+  // 'input' event and after every toolbar/formatting command, so a separate
+  // content listener here would just re-run this on the same keystroke.
   update() {
     if (!this._wordCountEl || !this._charCountEl) return;
     const editable = this.context.layoutInfo.editable;

package/src/js/module/TableTooltip.js

@@ -239,6 +239,7 @@ export class TableTooltip {
           !this._activeTable.contains(et) &&
           !this._el.contains(et) &&
           !this._sizePopover?.contains(et) &&
+          !this._shadePopover?.contains(et) &&
           !this._borderColorPopover?.contains(et)) {
           this._hide();
         }
@@ -1058,7 +1059,7 @@ export class TableTooltip {
 
     const d1 = on(applyBtn, 'click', () => {
       const val = Number.parseInt(this._sizeInputEl.value, 10);
-      if (val > 0 && typeof this._sizeApply === 'function') this._sizeApply(val);
+      if (val >= 0 && typeof this._sizeApply === 'function') this._sizeApply(val);
       this._hideSizePopover();
     });
     const d2 = on(cancelBtn, 'click', () => this._hideSizePopover());