autumnnote 2.0.0 → 2.2.0

package/src/js/module/ImageDialog.js

@@ -1,193 +0,0 @@
-/**
- * ImageDialog.js - Dialog for inserting images (by URL or file upload)
- * Inspired by Summernote's ImageDialog — rewritten without jQuery
- */
-
-import { createElement, on } from '../core/dom.js';
-import { BaseDialog } from './BaseDialog.js';
-
-const ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
-
-export class ImageDialog extends BaseDialog {
-  // ---------------------------------------------------------------------------
-  // Public API
-  // ---------------------------------------------------------------------------
-
-  /**
-   * @param {{ beforeInsert?: () => void }} [hooks]
-   */
-  show({ beforeInsert } = {}) {
-    this._beforeInsert = typeof beforeInsert === 'function' ? beforeInsert : null;
-    this._saveRange();
-    this._urlInput.value = '';
-    this._altInput.value = '';
-    if (this._fileInput) this._fileInput.value = '';
-    this._open();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Build dialog
-  // ---------------------------------------------------------------------------
-
-  _buildDialog() {
-    const L = this.context.locale.imageDialog;
-    const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG, L.title);
-
-    // URL field
-    const urlLabel = createElement('label', { class: 'an-label' });
-    urlLabel.textContent = L.imageUrl;
-    const urlInput = /** @type {HTMLInputElement} */ (createElement('input', {
-      type: 'url',
-      class: 'an-input',
-      placeholder: L.urlPlaceholder,
-      autocomplete: 'off',
-    }));
-    this._urlInput = urlInput;
-    this._firstInput = urlInput;
-
-    // Alt text
-    const altLabel = createElement('label', { class: 'an-label' });
-    altLabel.textContent = L.altText;
-    const altInput = /** @type {HTMLInputElement} */ (createElement('input', {
-      type: 'text',
-      class: 'an-input',
-      placeholder: L.altPlaceholder,
-      autocomplete: 'off',
-    }));
-    this._altInput = altInput;
-
-    box.append(urlLabel, urlInput, altLabel, altInput);
-
-    // Alignment
-    const alignLabel = createElement('label', { class: 'an-label' });
-    alignLabel.textContent = L.alignment;
-    const alignRow = createElement('div', { class: 'an-align-row' });
-    const alignOptions = [
-      { value: '',       label: L.alignNone   },
-      { value: 'left',   label: L.alignLeft   },
-      { value: 'center', label: L.alignCenter },
-      { value: 'right',  label: L.alignRight  },
-    ];
-    alignOptions.forEach(({ value, label }) => {
-      const radioId = `an-align-${value || 'none'}`;
-      const radio = /** @type {HTMLInputElement} */ (createElement('input', { type: 'radio', name: 'an-img-align', id: radioId, value }));
-      if (value === '') radio.checked = true;
-      const lbl = createElement('label', { for: radioId, class: 'an-align-label' });
-      lbl.textContent = label;
-      alignRow.append(radio, lbl);
-    });
-    this._alignRow = alignRow;
-    box.append(alignLabel, alignRow);
-
-    if (this.options.allowImageUpload !== false) {
-      const fileLabel = createElement('label', { class: 'an-label' });
-      fileLabel.textContent = L.uploadLabel;
-      const fileInput = /** @type {HTMLInputElement} */ (createElement('input', {
-        type: 'file',
-        class: 'an-input',
-        accept: 'image/jpeg,image/png,image/gif,image/webp,image/svg+xml,image/avif',
-      }));
-      this._fileInput = fileInput;
-      // Hint line shown below the file input for format errors
-      const fileHint = createElement('p', { class: 'an-dialog-hint' });
-      this._fileHint = fileHint;
-      const d = on(fileInput, 'change', () => this._onFileChange());
-      this._disposers.push(d);
-      box.append(fileLabel, fileInput, fileHint);
-    }
-
-    const btnRow = this._buildButtonRow(L.insertBtn, L.cancelBtn, () => this._onInsert());
-    box.append(btnRow);
-
-    const d4 = on(urlInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    const d5 = on(altInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    this._disposers.push(d4, d5);
-
-    return overlay;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Actions
-  // ---------------------------------------------------------------------------
-
-  _onFileChange() {
-    if (this.context._alive === false) return;
-    const file = this._fileInput?.files?.[0];
-    if (!file?.type?.startsWith('image/')) return;
-
-    // C2: Only allow web-displayable formats. TIFF, BMP, RAW and similar
-    // formats are not rendered by browsers — reject them with a clear message.
-    const SUPPORTED = new Set([
-      'image/jpeg', 'image/png', 'image/gif',
-      'image/webp', 'image/svg+xml', 'image/avif',
-    ]);
-    if (!SUPPORTED.has(file.type)) {
-      const message = this.context.locale.errors.imageFormat(file.type);
-      if (this._fileHint) this._fileHint.textContent = message;
-      this.context.triggerEvent('imageError', { file, message });
-      this._fileInput.value = '';
-      return;
-    }
-    if (this._fileHint) this._fileHint.textContent = '';
-
-    // Validate file size (max 5 MB by default)
-    const maxSize = (this.options.maxImageSize || 5) * 1024 * 1024;
-    if (file.size > maxSize) {
-      const message = this.context.locale.errors.imageSize(this.options.maxImageSize || 5);
-      if (this._fileHint) this._fileHint.textContent = message;
-      console.warn('[AutumnNote] ImageDialog:', message);
-      this.context.triggerEvent('imageError', { file, message });
-      this._fileInput.value = '';
-      return;
-    }
-
-    // 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() {
-    const src = this._urlInput.value.trim();
-    const alt = this._altInput.value.trim();
-    const alignRadio = this._alignRow?.querySelector('input[name="an-img-align"]:checked');
-    const align = alignRadio ? /** @type {HTMLInputElement} */ (alignRadio).value : '';
-
-    if (!src) {
-      this._urlInput.focus();
-      return;
-    }
-
-    if (this._savedRange) {
-      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/ImageResizer.js

@@ -1,42 +0,0 @@
-// ImageResizer.js - Interactive resize handles for selected images in the editor
-import { BaseResizer } from './BaseResizer.js';
-
-export class ImageResizer extends BaseResizer {
-  get _overlayClass() { return 'an-image-resizer'; }
-  get _selectedClass() { return 'an-image-selected'; }
-
-  /** @param {EventTarget|null} el @returns {HTMLImageElement|null} */
-  _findTarget(el) {
-    return /** @type {HTMLImageElement|null} */ (
-      el instanceof Element ? el.closest('img') : null
-    );
-  }
-
-  /** @param {HTMLImageElement} img */
-  _getStartSize(img) {
-    return {
-      w: img.offsetWidth  || img.naturalWidth  || 100,
-      h: img.offsetHeight || img.naturalHeight || 100,
-    };
-  }
-
-  _getMinSize() {
-    const min = this.context.options?.minImageSize ?? 20;
-    return { minW: min, minH: min };
-  }
-
-  /** @param {HTMLImageElement} img @param {number} w @param {number} h */
-  _applySize(img, w, h) {
-    img.style.width  = `${w}px`;
-    img.style.height = `${h}px`;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Public API used by other modules
-  // ---------------------------------------------------------------------------
-
-  /** @returns {HTMLImageElement|null} */
-  getActiveImage() {
-    return /** @type {HTMLImageElement|null} */ (this._active);
-  }
-}

package/src/js/module/ImageTooltip.js

@@ -1,285 +0,0 @@
-// ImageTooltip.js - Hover tooltip for images inside the editor
-// Displays a horizontal action bar below (or above) the selected image,
-// similar in appearance and interaction to LinkTooltip.
-import { createElement, on } from '../core/dom.js';
-import { BaseMediaTooltip } from './BaseMediaTooltip.js';
-
-const ICONS = {
-  floatLeft:   `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="8" height="8" rx="1"/><line x1="12" y1="6" x2="22" y2="6"/><line x1="12" y1="9" x2="22" y2="9"/><line x1="12" y1="12" x2="22" y2="12"/><line x1="2" y1="16" x2="22" y2="16"/><line x1="2" y1="20" x2="18" y2="20"/></svg>`,
-  floatRight:  `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="14" y="4" width="8" height="8" rx="1"/><line x1="2" y1="6" x2="12" y2="6"/><line x1="2" y1="9" x2="12" y2="9"/><line x1="2" y1="12" x2="12" y2="12"/><line x1="2" y1="16" x2="22" y2="16"/><line x1="2" y1="20" x2="18" y2="20"/></svg>`,
-  floatNone:   `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="8" height="8" rx="1"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="3" y1="19" x2="17" y2="19"/></svg>`,
-  alignCenter: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="4" width="10" height="8" rx="1"/><line x1="3" y1="16" x2="21" y2="16"/><line x1="6" y1="20" x2="18" y2="20"/></svg>`,
-  originalSize:`<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`,
-  deleteImg:   `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>`,
-  caption:     `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="11" rx="2"/><line x1="6" y1="18" x2="18" y2="18"/><line x1="9" y1="21" x2="15" y2="21"/></svg>`,
-  rotateLeft:  `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><polyline points="3 3 3 8 8 8"/></svg>`,
-  rotateRight: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><polyline points="21 3 21 8 16 8"/></svg>`,
-  crop:        `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 2 6 18 22 18"/><polyline points="2 6 18 6 18 22"/></svg>`,
-};
-
-export class ImageTooltip extends BaseMediaTooltip {
-  initialize() {
-    this._el = this._buildTooltip();
-    document.body.appendChild(this._el);
-
-    const editable = this.context.layoutInfo.editable;
-
-    this._disposers.push(
-      on(editable, 'mouseover', (e) => {
-        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        const img = /** @type {Element} */ (e.target)?.closest('img');
-        // Skip when the image is inside a link — LinkTooltip takes priority there
-        if (img && editable.contains(img) && !img.closest('a[href]')) {
-          this._scheduleShow(img);
-        }
-      }, { passive: true }),
-      on(editable, 'mouseout', (e) => {
-        const to = /** @type {Node|null} */ (/** @type {MouseEvent} */ (e).relatedTarget);
-        if (!to || (!editable.contains(to) && !this._el.contains(to))) {
-          this._scheduleHide();
-        }
-      }, { passive: true }),
-      // Hide when image is deselected by clicking elsewhere
-      on(document, 'click', (e) => {
-        const et = /** @type {Node} */ (e.target);
-        if (this._active && !this._active.contains(et) && !this._el.contains(et)) {
-          this._hide();
-        }
-      }),
-      // Hide when the page scrolls or resizes — the tooltip position becomes stale
-      on(globalThis, 'scroll', () => this._hide(), { passive: true }),
-      on(globalThis, 'resize', () => this._hide(), { passive: true }),
-    );
-
-    return this;
-  }
-
-  destroy() {
-    this._clearTimers();
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    this._el?.remove();
-    this._el = null;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Build
-  // ---------------------------------------------------------------------------
-
-  _buildTooltip() {
-    const L = this.context.locale.tooltips.image;
-    const el = createElement('div', {
-      class: 'an-link-tooltip an-image-tooltip',
-      role: 'toolbar',
-      'aria-label': L.ariaLabel,
-    });
-    el.style.display = 'none';
-
-    // Label showing "Image"
-    this._label = createElement('span', { class: 'an-link-tooltip-url' });
-    this._label.textContent = L.label;
-    el.appendChild(this._label);
-
-    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
-
-    this._floatLeftBtn    = this._makeBtn(ICONS.floatLeft,    L.floatLeft,    () => this._setFloat('left'));
-    this._floatNoneBtn    = this._makeBtn(ICONS.floatNone,    L.noFloat,      () => this._setFloat(''));
-    this._alignCenterBtn  = this._makeBtn(ICONS.alignCenter,  L.alignCenter,  () => this._setCenter());
-    this._floatRightBtn   = this._makeBtn(ICONS.floatRight,   L.floatRight,   () => this._setFloat('right'));
-
-    el.appendChild(this._floatLeftBtn);
-    el.appendChild(this._floatNoneBtn);
-    el.appendChild(this._alignCenterBtn);
-    el.appendChild(this._floatRightBtn);
-
-    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
-
-    this._originalBtn = this._makeBtn(ICONS.originalSize, L.originalSize, () => this._resetSize());
-
-    el.appendChild(this._originalBtn);
-
-    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
-
-    el.appendChild(this._makeBtn(ICONS.rotateLeft,  L.rotateLeft,  () => this._rotate(-90)));
-    el.appendChild(this._makeBtn(ICONS.rotateRight, L.rotateRight, () => this._rotate(90)));
-
-    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
-
-    this._cropBtn = this._makeBtn(ICONS.crop, L.cropImage, () => this._crop());
-    el.appendChild(this._cropBtn);
-
-    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
-
-    this._captionBtn = this._makeBtn(ICONS.caption, L.addCaption, () => this._toggleCaption());
-    el.appendChild(this._captionBtn);
-
-    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
-
-    this._deleteBtn = this._makeBtn(ICONS.deleteImg, L.deleteImage, () => this._delete(), true);
-
-    el.appendChild(this._deleteBtn);
-
-    // Keep tooltip alive while hovering it
-    this._disposers.push(
-      on(el, 'mouseenter', () => this._clearTimers()),
-      on(el, 'mouseleave', () => this._scheduleHide()),
-    );
-
-    return el;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Actions
-  // ---------------------------------------------------------------------------
-
-  _setFloat(value) {
-    const img = this._active;
-    if (!img) return;
-    const target = /** @type {HTMLElement} */ (img.closest('figure.an-figure') || img);
-    target.style.float = value;
-    target.style.display = '';
-    // Clear explicit width set for centering so the figure is free to float
-    if (target !== img) target.style.width = '';
-    target.style.marginLeft  = value === 'right' ? '12px' : '';
-    target.style.marginRight = value === 'left'  ? '12px' : '';
-    this.context.invoke('editor.afterCommand');
-    this.context.invoke('imageResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
-  }
-
-  _setCenter() {
-    const img = this._active;
-    if (!img) return;
-    const target = /** @type {HTMLElement} */ (img.closest('figure.an-figure') || img);
-    target.style.float        = '';
-    target.style.display      = 'block';
-    // C1/C3: use fit-content so the block figure shrinks to the image width;
-    // without an explicit width, margin:auto has no effect on a 100%-wide block.
-    if (target !== img) target.style.width = 'fit-content';
-    target.style.marginLeft   = 'auto';
-    target.style.marginRight  = 'auto';
-    this.context.invoke('editor.afterCommand');
-    this.context.invoke('imageResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
-  }
-
-  _resetSize() {
-    const img = this._active;
-    if (!img) return;
-    img.style.width  = '';
-    img.style.height = '';
-    this.context.invoke('editor.afterCommand');
-    this.context.invoke('imageResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
-  }
-
-  /**
-   * Rotate the active image by `delta` degrees (±90).
-   * Reads the existing rotate() value from the transform style so
-   * repeated clicks accumulate correctly.
-   * @param {number} delta
-   */
-  _rotate(delta) {
-    const img = this._active;
-    if (!img) return;
-    // Parse current rotation angle from inline transform
-    const current = img.style.transform || '';
-    const match   = /rotate\((-?[\d.]+)deg\)/.exec(current);
-    const prev    = match ? Number.parseFloat(match[1]) : 0;
-    const next    = (prev + delta + 360) % 360; // normalise to [0, 360)
-    // Preserve any other transform functions (e.g. scale), replace only rotate()
-    const cleaned = current.replace(/rotate\(-?[\d.]+deg\)/, '').trim();
-    if (cleaned) {
-      img.style.transform = `${cleaned} rotate(${next}deg)`;
-    } else {
-      img.style.transform = next === 0 ? '' : `rotate(${next}deg)`;
-    }
-    this.context.invoke('editor.afterCommand');
-    this.context.invoke('imageResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
-  }
-
-  _delete() {
-    const img = this._active;
-    if (!img) return;
-    this._hide();
-    this.context.invoke('imageResizer.deselect');
-    const figure = img.closest('figure.an-figure');
-    if (figure) {
-      figure.remove();
-    } else {
-      img.remove();
-    }
-    this.context.invoke('editor.afterCommand');
-  }
-
-  _crop() {
-    const img = this._active;
-    if (!img) return;
-    // Hide the tooltip while the crop overlay is active
-    this._hide();
-    // Delegate to imageCropOverlay module
-    this.context.invoke('imageCropOverlay.open', img);
-  }
-
-  _toggleCaption() {
-    const img = this._active;
-    if (!img) return;
-
-    // If already inside a figure, move focus to the figcaption
-    const existing = img.closest('figure.an-figure');
-    if (existing) {
-      const cap = existing.querySelector('figcaption.an-figcaption');
-      if (cap) {
-        this._hide();
-        const range = document.createRange();
-        range.selectNodeContents(cap);
-        const sel = globalThis.getSelection();
-        if (sel) { sel.removeAllRanges(); sel.addRange(range); }
-      }
-      return;
-    }
-
-    // Wrap image in <figure><figcaption>
-    const figure = document.createElement('figure');
-    figure.className = 'an-figure';
-
-    // Transfer existing alignment from <img> to <figure> (C4 fix)
-    if (img.style.float) {
-      figure.style.float       = img.style.float;
-      figure.style.marginLeft  = img.style.marginLeft;
-      figure.style.marginRight = img.style.marginRight;
-      img.style.float       = '';
-      img.style.marginLeft  = '';
-      img.style.marginRight = '';
-    } else if (img.style.display === 'block' && img.style.marginLeft === 'auto') {
-      // C1/C3: use fit-content so the centered block figure tightly wraps the
-      // image, making margin:auto actually centre it regardless of image width.
-      figure.style.display      = 'block';
-      figure.style.width        = 'fit-content';
-      figure.style.marginLeft   = 'auto';
-      figure.style.marginRight  = 'auto';
-      img.style.display     = '';
-      img.style.marginLeft  = '';
-      img.style.marginRight = '';
-    }
-    const figcaption = document.createElement('figcaption');
-    figcaption.className = 'an-figcaption';
-    figcaption.textContent = 'Caption';
-
-    img.parentNode.insertBefore(figure, img);
-    figure.appendChild(img);
-    figure.appendChild(figcaption);
-
-    // Select caption text immediately
-    const range = document.createRange();
-    range.selectNodeContents(figcaption);
-    const sel = globalThis.getSelection();
-    if (sel) { sel.removeAllRanges(); sel.addRange(range); }
-
-    this.context.invoke('editor.afterCommand');
-    // Re-sync the resize overlay: wrapping img in <figure> changes its layout position.
-    this.context.invoke('imageResizer.updateOverlay');
-    this._hide();
-  }
-}

package/src/js/module/LinkDialog.js

@@ -1,145 +0,0 @@
-/**
- * LinkDialog.js - Dialog for inserting / editing hyperlinks
- * Inspired by Summernote's LinkDialog — rewritten without jQuery
- */
-
-import { createElement, on } from '../core/dom.js';
-import { BaseDialog } from './BaseDialog.js';
-
-const ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`;
-
-export class LinkDialog extends BaseDialog {
-  // ---------------------------------------------------------------------------
-  // Public API
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Opens the link dialog.
-   * Pre-fills with the currently selected link if present.
-   */
-  show() {
-    this._saveRange();
-    this._prefill();
-    this._open();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Build dialog
-  // ---------------------------------------------------------------------------
-
-  _buildDialog() {
-    const L = this.context.locale.linkDialog;
-    const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG, L.title);
-
-    // URL field
-    const urlLabel = createElement('label', { class: 'an-label' });
-    urlLabel.textContent = L.url;
-    const urlInput = /** @type {HTMLInputElement} */ (createElement('input', {
-      type: 'url',
-      class: 'an-input',
-      placeholder: L.urlPlaceholder,
-      id: 'an-link-url',
-      name: 'url',
-      autocomplete: 'off',
-    }));
-    this._urlInput = urlInput;
-    this._firstInput = urlInput;
-
-    // Text field
-    const textLabel = createElement('label', { class: 'an-label' });
-    textLabel.textContent = L.displayText;
-    const textInput = /** @type {HTMLInputElement} */ (createElement('input', {
-      type: 'text',
-      class: 'an-input',
-      placeholder: L.textPlaceholder,
-      id: 'an-link-text',
-      name: 'linkText',
-      autocomplete: 'off',
-    }));
-    this._textInput = textInput;
-
-    // Open in new tab
-    const tabLabel = createElement('label', { class: 'an-label an-label-inline' });
-    const tabCheckbox = /** @type {HTMLInputElement} */ (createElement('input', {
-      type: 'checkbox',
-      id: 'an-link-newtab',
-      name: 'openInNewTab',
-    }));
-    this._tabCheckbox = tabCheckbox;
-    tabLabel.appendChild(tabCheckbox);
-    tabLabel.appendChild(document.createTextNode(' ' + L.openInNewTab));
-
-    const btnRow = this._buildButtonRow(L.insertBtn, L.cancelBtn, () => this._onInsert());
-
-    box.append(urlLabel, urlInput, textLabel, textInput, tabLabel, btnRow);
-
-    const d4 = on(urlInput,  'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    const d5 = on(textInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    this._disposers.push(d4, d5);
-
-    return overlay;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Actions
-  // ---------------------------------------------------------------------------
-
-  _prefill() {
-    // Try to find currently selected anchor
-    const sel = globalThis.getSelection();
-    let anchor = null;
-    if (sel?.rangeCount > 0) {
-      let node = sel.getRangeAt(0).startContainer;
-      while (node) {
-        if (node.nodeName === 'A') { anchor = node; break; }
-        node = node.parentNode;
-      }
-    }
-    if (anchor) {
-      this._urlInput.value = /** @type {Element} */ (anchor).getAttribute('href') || '';
-      this._textInput.value = anchor.textContent || '';
-      this._tabCheckbox.checked = /** @type {Element} */ (anchor).getAttribute('target') === '_blank';
-    } else {
-      this._urlInput.value = '';
-      this._textInput.value = sel ? sel.toString() : '';
-      this._tabCheckbox.checked = false;
-    }
-  }
-
-  _onInsert() {
-    let url = this._urlInput.value.trim();
-    const text = this._textInput.value.trim();
-    const newTab = this._tabCheckbox.checked;
-
-    if (!url) {
-      this._urlInput.focus();
-      return;
-    }
-
-    // Auto-prefix with https:// if no protocol is present
-    if (!/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(url)) {
-      url = 'https://' + url;
-    }
-
-    // Block unsafe protocols
-    try {
-      const parsed = new URL(url);
-      if (/^javascript:/i.test(parsed.protocol) || /^vbscript:/i.test(parsed.protocol) || /^data:/i.test(parsed.protocol)) {
-        this._urlInput.focus();
-        return;
-      }
-    } catch {
-      // URL constructor failed — not a valid URL
-      this._urlInput.focus();
-      return;
-    }
-
-    // Restore selection then insert
-    if (this._savedRange) {
-      this._savedRange.select();
-    }
-
-    this.context.invoke('editor.insertLink', url, text, newTab);
-    this._close();
-  }
-}