autumnnote 1.0.0

package/src/js/module/ImageDialog.js

@@ -0,0 +1,208 @@
+/**
+ * ImageDialog.js - Dialog for inserting images (by URL or file upload)
+ * Inspired by Summernote's ImageDialog — rewritten without jQuery
+ */
+
+import { createElement, on, trapFocus } from '../core/dom.js';
+import { withSavedRange } from '../core/range.js';
+
+export class ImageDialog {
+  /**
+   * @param {import('../Context.js').Context} context
+   */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+    /** @type {HTMLElement|null} */
+    this._dialog = null;
+    this._disposers = [];
+    this._savedRange = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  initialize() {
+    this._dialog = this._buildDialog();
+    document.body.appendChild(this._dialog);
+    return this;
+  }
+
+  destroy() {
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+    if (this._dialog && this._dialog.parentNode) {
+      this._dialog.parentNode.removeChild(this._dialog);
+    }
+    this._dialog = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  show() {
+    withSavedRange((range) => {
+      this._savedRange = range;
+    });
+    this._urlInput.value = '';
+    this._altInput.value = '';
+    if (this._fileInput) this._fileInput.value = '';
+    this._open();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Build dialog
+  // ---------------------------------------------------------------------------
+
+  _buildDialog() {
+    const overlay = createElement('div', {
+      class: 'an-dialog-overlay',
+      role: 'dialog',
+      'aria-modal': 'true',
+      'aria-label': 'Insert image',
+    });
+    const box = createElement('div', { class: 'an-dialog-box' });
+
+    const title = createElement('h3', { class: 'an-dialog-title' });
+    title.textContent = 'Insert Image';
+
+    // URL tab
+    const urlLabel = createElement('label', { class: 'an-label' });
+    urlLabel.textContent = 'Image URL';
+    const urlInput = createElement('input', {
+      type: 'url',
+      class: 'an-input',
+      placeholder: 'https://example.com/image.png',
+      autocomplete: 'off',
+    });
+    this._urlInput = urlInput;
+
+    // Alt text
+    const altLabel = createElement('label', { class: 'an-label' });
+    altLabel.textContent = 'Alt Text';
+    const altInput = createElement('input', {
+      type: 'text',
+      class: 'an-input',
+      placeholder: 'Describe the image',
+      autocomplete: 'off',
+    });
+    this._altInput = altInput;
+
+    box.append(title, urlLabel, urlInput, altLabel, altInput);
+
+    // Alignment
+    const alignLabel = createElement('label', { class: 'an-label' });
+    alignLabel.textContent = 'Alignment';
+    const alignRow = createElement('div', { class: 'an-align-row' });
+    const alignOptions = [
+      { value: '',       label: 'None'   },
+      { value: 'left',   label: 'Left'   },
+      { value: 'center', label: 'Center' },
+      { value: 'right',  label: 'Right'  },
+    ];
+    alignOptions.forEach(({ value, label }) => {
+      const radioId = `an-align-${value || 'none'}`;
+      const radio = 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 = 'Or upload a file';
+      const fileInput = createElement('input', {
+        type: 'file',
+        class: 'an-input',
+        accept: 'image/*',
+      });
+      this._fileInput = fileInput;
+      const d = on(fileInput, 'change', () => this._onFileChange());
+      this._disposers.push(d);
+      box.append(fileLabel, fileInput);
+    }
+
+    // Buttons
+    const btnRow = createElement('div', { class: 'an-dialog-actions' });
+    const insertBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
+    insertBtn.textContent = 'Insert';
+    const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
+    cancelBtn.textContent = 'Cancel';
+    btnRow.appendChild(insertBtn);
+    btnRow.appendChild(cancelBtn);
+
+    box.append(btnRow);
+    overlay.appendChild(box);
+
+    const d1 = on(insertBtn, 'click', () => this._onInsert());
+    const d2 = on(cancelBtn, 'click', () => this._close());
+    const d3 = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
+    const d4 = on(urlInput, 'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
+    const d5 = on(altInput, 'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
+    this._disposers.push(d1, d2, d3, d4, d5);
+
+    return overlay;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Actions
+  // ---------------------------------------------------------------------------
+
+  _onFileChange() {
+    const file = this._fileInput && this._fileInput.files && this._fileInput.files[0];
+    if (!file || !file.type.startsWith('image/')) return;
+
+    // Validate file size (max 5 MB by default)
+    const maxSize = (this.options.maxImageSize || 5) * 1024 * 1024;
+    if (file.size > maxSize) {
+      const message = `Image file is too large. Maximum allowed size is ${this.options.maxImageSize || 5} MB.`;
+      console.warn('[AutumnNote] ImageDialog:', message);
+      this.context.triggerEvent('imageError', { file, message });
+      this._fileInput.value = '';
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      this._urlInput.value = e.target.result;
+    };
+    reader.readAsDataURL(file);
+  }
+
+  _onInsert() {
+    const src = this._urlInput.value.trim();
+    const alt = this._altInput.value.trim();
+    const alignRadio = this._alignRow && this._alignRow.querySelector('input[name="an-img-align"]:checked');
+    const align = alignRadio ? alignRadio.value : '';
+
+    if (!src) {
+      this._urlInput.focus();
+      return;
+    }
+
+    if (this._savedRange) {
+      this._savedRange.select();
+    }
+
+    this.context.invoke('editor.insertImage', src, alt, align);
+    this._close();
+  }
+
+  _open() {
+    if (this._dialog) {
+      this._dialog.style.display = 'flex';
+      this._removeTrap = trapFocus(this._dialog, () => this._close());
+      setTimeout(() => this._urlInput && this._urlInput.focus(), 50);
+    }
+  }
+
+  _close() {
+    if (this._dialog) this._dialog.style.display = 'none';
+    if (this._removeTrap) { this._removeTrap(); this._removeTrap = null; }
+    this._savedRange = null;
+  }
+}

package/src/js/module/ImageResizer.js

@@ -0,0 +1,216 @@
+// ImageResizer.js - Interactive resize handles for selected images in the editor
+import { on } from '../core/dom.js';
+
+/**
+ * Eight handle positions. 'pos' is used as CSS class suffix and
+ * to determine which axis/direction is being dragged.
+ *
+ * Pos length 2 → corner handle → maintain aspect ratio.
+ * Pos length 1 → edge handle  → single-axis resize.
+ */
+const HANDLE_DEFS = [
+  { pos: 'nw', cursor: 'nw-resize' },
+  { pos: 'n',  cursor: 'n-resize'  },
+  { pos: 'ne', cursor: 'ne-resize' },
+  { pos: 'e',  cursor: 'e-resize'  },
+  { pos: 'se', cursor: 'se-resize' },
+  { pos: 's',  cursor: 's-resize'  },
+  { pos: 'sw', cursor: 'sw-resize' },
+  { pos: 'w',  cursor: 'w-resize'  },
+];
+
+export class ImageResizer {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    /** @type {HTMLImageElement|null} */
+    this._activeImg = null;
+    this._overlay = null;
+    this._disposers = [];
+  }
+
+  initialize() {
+    this._overlay = this._buildOverlay();
+    document.body.appendChild(this._overlay);
+
+    const editable = this.context.layoutInfo.editable;
+
+    this._disposers.push(
+      on(editable, 'click', (e) => this._onEditorClick(e)),
+      // Also select on right-click so the highlight shows before the context menu
+      on(editable, 'contextmenu', (e) => {
+        const img = e.target.closest('img');
+        if (img) this._select(img);
+      }),
+      on(document, 'click', (e) => this._onDocClick(e)),
+      on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
+      on(window, 'resize', () => this._updateOverlayPosition()),
+      on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
+    );
+
+    return this;
+  }
+
+  destroy() {
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+    if (this._dragDisposers) {
+      this._dragDisposers.forEach((d) => d());
+      this._dragDisposers = null;
+    }
+    this._deselect();
+    if (this._overlay && this._overlay.parentNode) {
+      this._overlay.parentNode.removeChild(this._overlay);
+    }
+    this._overlay = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API used by other modules
+  // ---------------------------------------------------------------------------
+
+  /** @returns {HTMLImageElement|null} */
+  getActiveImage() {
+    return this._activeImg;
+  }
+
+  /** Re-sync overlay position (call after external size changes). */
+  updateOverlay() {
+    this._updateOverlayPosition();
+  }
+
+  /** Programmatically clear the current image selection. */
+  deselect() {
+    this._deselect();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Internal
+  // ---------------------------------------------------------------------------
+
+  _buildOverlay() {
+    const overlay = document.createElement('div');
+    overlay.className = 'an-image-resizer';
+    overlay.style.display = 'none';
+
+    HANDLE_DEFS.forEach(({ pos }) => {
+      const h = document.createElement('div');
+      h.className = `an-resize-handle an-resize-${pos}`;
+      h.dataset.handle = pos;
+      // Attach handle listeners here so they're torn down in destroy() via _disposers
+      this._disposers.push(
+        on(h, 'mousedown', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this._startResize(e, pos);
+        }),
+      );
+      overlay.appendChild(h);
+    });
+
+    return overlay;
+  }
+
+  _onEditorClick(e) {
+    const img = e.target.closest('img');
+    if (img) {
+      // Prevent browser from deselecting the current text selection / opening native resize
+      e.preventDefault();
+      this._select(img);
+    }
+  }
+
+  _onDocClick(e) {
+    if (!this._activeImg) return;
+    if (e.target === this._activeImg) return;
+    if (this._overlay && this._overlay.contains(e.target)) return;
+    // Don't deselect while interacting with the context menu
+    if (e.target.closest('.an-contextmenu')) return;
+    this._deselect();
+  }
+
+  _select(img) {
+    if (this._activeImg && this._activeImg !== img) {
+      this._activeImg.classList.remove('an-image-selected');
+    }
+    this._activeImg = img;
+    img.classList.add('an-image-selected');
+    this._updateOverlayPosition();
+    this._overlay.style.display = 'block';
+  }
+
+  _deselect() {
+    if (this._activeImg) {
+      this._activeImg.classList.remove('an-image-selected');
+      this._activeImg = null;
+    }
+    if (this._overlay) this._overlay.style.display = 'none';
+  }
+
+  _updateOverlayPosition() {
+    if (!this._activeImg || !this._overlay) return;
+    const rect = this._activeImg.getBoundingClientRect();
+    this._overlay.style.left   = `${rect.left}px`;
+    this._overlay.style.top    = `${rect.top}px`;
+    this._overlay.style.width  = `${rect.width}px`;
+    this._overlay.style.height = `${rect.height}px`;
+  }
+
+  _startResize(e, pos) {
+    const img = this._activeImg;
+    if (!img) return;
+
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startW = img.offsetWidth  || img.naturalWidth  || 100;
+    const startH = img.offsetHeight || img.naturalHeight || 100;
+    const aspectRatio = startW / (startH || 1);
+    const isCorner = pos.length === 2; // 'nw','ne','se','sw'
+
+    const editable = this.context.layoutInfo.editable;
+    const onMove = (me) => {
+      const dx = me.clientX - startX;
+      const dy = me.clientY - startY;
+      const maxW = editable.clientWidth || Infinity;
+      let newW = startW;
+      let newH = startH;
+
+      if (pos.includes('e')) newW = Math.max(20, startW + dx);
+      if (pos.includes('w')) newW = Math.max(20, startW - dx);
+      if (pos.includes('s')) newH = Math.max(20, startH + dy);
+      if (pos.includes('n')) newH = Math.max(20, startH - dy);
+
+      // Clamp to container width
+      newW = Math.min(newW, maxW);
+
+      if (isCorner) {
+        // Lock aspect ratio: use larger absolute delta to drive both dimensions
+        if (Math.abs(dx) >= Math.abs(dy)) {
+          newH = Math.max(20, Math.round(newW / aspectRatio));
+        } else {
+          newW = Math.min(Math.max(20, Math.round(newH * aspectRatio)), maxW);
+          newH = Math.max(20, Math.round(newW / aspectRatio));
+        }
+      }
+
+      img.style.width  = `${newW}px`;
+      img.style.height = `${newH}px`;
+      this._updateOverlayPosition();
+    };
+
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      this._dragDisposers = null;
+      this.context.invoke('editor.afterCommand');
+    };
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    // Track these so destroy() can clean them up if called during an active drag
+    this._dragDisposers = [
+      () => document.removeEventListener('mousemove', onMove),
+      () => document.removeEventListener('mouseup', onUp),
+    ];
+  }
+}