autumnnote 1.0.0

package/src/js/module/ImageTooltip.js

@@ -0,0 +1,286 @@
+// 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';
+
+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>`,
+};
+
+const SHOW_DELAY = 100;
+const HIDE_DELAY = 180;
+
+export class ImageTooltip {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this._el = null;
+    this._activeImg = null;
+    this._showTimer = null;
+    this._hideTimer = null;
+    this._disposers = [];
+  }
+
+  initialize() {
+    this._el = this._buildTooltip();
+    document.body.appendChild(this._el);
+
+    const editable = this.context.layoutInfo.editable;
+
+    this._disposers.push(
+      on(editable, 'mouseover', (e) => {
+        const img = e.target.closest('img');
+        if (img && editable.contains(img)) {
+          this._scheduleShow(img);
+        }
+      }),
+      on(editable, 'mouseout', (e) => {
+        const to = e.relatedTarget;
+        if (!to || (!editable.contains(to) && !this._el.contains(to))) {
+          this._scheduleHide();
+        }
+      }),
+      // Hide when image is deselected by clicking elsewhere
+      on(document, 'click', (e) => {
+        if (this._activeImg && !this._activeImg.contains(e.target) && !this._el.contains(e.target)) {
+          this._hide();
+        }
+      }),
+    );
+
+    return this;
+  }
+
+  destroy() {
+    this._clearTimers();
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+    if (this._el && this._el.parentNode) this._el.parentNode.removeChild(this._el);
+    this._el = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Build
+  // ---------------------------------------------------------------------------
+
+  _buildTooltip() {
+    const el = createElement('div', {
+      class: 'an-link-tooltip an-image-tooltip',
+      role: 'toolbar',
+      'aria-label': 'Image actions',
+    });
+    el.style.display = 'none';
+
+    // Label showing "Image"
+    this._label = createElement('span', { class: 'an-link-tooltip-url' });
+    this._label.textContent = 'Image';
+    el.appendChild(this._label);
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
+    this._floatLeftBtn    = this._makeBtn(ICONS.floatLeft,    'Float Left',     () => this._setFloat('left'));
+    this._floatNoneBtn    = this._makeBtn(ICONS.floatNone,    'No Float',       () => this._setFloat(''));
+    this._alignCenterBtn  = this._makeBtn(ICONS.alignCenter,  'Align Center',   () => this._setCenter());
+    this._floatRightBtn   = this._makeBtn(ICONS.floatRight,   'Float Right',    () => 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, 'Original Size', () => this._resetSize());
+
+    el.appendChild(this._originalBtn);
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
+    this._captionBtn = this._makeBtn(ICONS.caption, 'Add / Edit Caption', () => this._toggleCaption());
+    el.appendChild(this._captionBtn);
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
+    this._deleteBtn = this._makeBtn(ICONS.deleteImg, 'Delete Image', () => 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;
+  }
+
+  /**
+   * @param {string} icon
+   * @param {string} title
+   * @param {Function} handler
+   * @param {boolean} [isDanger]
+   */
+  _makeBtn(icon, title, handler, isDanger = false) {
+    const btn = createElement('button', {
+      type: 'button',
+      class: isDanger ? 'an-link-tooltip-btn an-link-tooltip-btn--danger' : 'an-link-tooltip-btn',
+      title,
+    });
+    btn.innerHTML = icon;
+    this._disposers.push(on(btn, 'click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      handler();
+    }));
+    return btn;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Show / Hide
+  // ---------------------------------------------------------------------------
+
+  _scheduleShow(img) {
+    if (this._activeImg === img && this._el.style.display !== 'none') return;
+    clearTimeout(this._hideTimer);
+    this._hideTimer = null;
+    clearTimeout(this._showTimer);
+    this._showTimer = setTimeout(() => {
+      this._activeImg = img;
+      this._show(img);
+    }, SHOW_DELAY);
+  }
+
+  _scheduleHide() {
+    clearTimeout(this._showTimer);
+    this._showTimer = null;
+    if (this._hideTimer) return;
+    this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY);
+  }
+
+  _show(img) {
+    this._el.style.display = 'flex';
+    this._positionNear(img);
+  }
+
+  _hide() {
+    this._el.style.display = 'none';
+    this._activeImg = null;
+    this._clearTimers();
+  }
+
+  _clearTimers() {
+    clearTimeout(this._showTimer);
+    clearTimeout(this._hideTimer);
+    this._showTimer = null;
+    this._hideTimer = null;
+  }
+
+  _positionNear(img) {
+    const rect   = img.getBoundingClientRect();
+    const tipW   = this._el.offsetWidth  || 220;
+    const tipH   = this._el.offsetHeight || 32;
+    const margin = 6;
+
+    let top  = rect.bottom + margin;
+    let left = rect.left + (rect.width - tipW) / 2;
+
+    if (top + tipH > window.innerHeight - margin) top = rect.top - tipH - margin;
+    if (left + tipW > window.innerWidth  - margin) left = window.innerWidth - tipW - margin;
+    if (left < margin) left = margin;
+
+    this._el.style.top  = `${top}px`;
+    this._el.style.left = `${left}px`;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Actions
+  // ---------------------------------------------------------------------------
+
+  _setFloat(value) {
+    const img = this._activeImg;
+    if (!img) return;
+    img.style.float = value;
+    img.style.display = '';
+    img.style.marginLeft  = value === 'right' ? '12px' : '';
+    img.style.marginRight = value === 'left'  ? '12px' : '';
+    this.context.invoke('editor.afterCommand');
+    this.context.invoke('imageResizer.updateOverlay');
+    this._positionNear(img);
+  }
+
+  _setCenter() {
+    const img = this._activeImg;
+    if (!img) return;
+    img.style.float        = '';
+    img.style.display      = 'block';
+    img.style.marginLeft   = 'auto';
+    img.style.marginRight  = 'auto';
+    this.context.invoke('editor.afterCommand');
+    this.context.invoke('imageResizer.updateOverlay');
+    this._positionNear(img);
+  }
+
+  _resetSize() {
+    const img = this._activeImg;
+    if (!img) return;
+    img.style.width  = '';
+    img.style.height = '';
+    this.context.invoke('editor.afterCommand');
+    this.context.invoke('imageResizer.updateOverlay');
+    this._positionNear(img);
+  }
+
+  _delete() {
+    const img = this._activeImg;
+    if (!img) return;
+    this._hide();
+    this.context.invoke('imageResizer.deselect');
+    if (img.parentNode) img.parentNode.removeChild(img);
+    this.context.invoke('editor.afterCommand');
+  }
+
+  _toggleCaption() {
+    const img = this._activeImg;
+    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 = window.getSelection();
+        if (sel) { sel.removeAllRanges(); sel.addRange(range); }
+      }
+      return;
+    }
+
+    // Wrap image in <figure><figcaption>
+    const figure = document.createElement('figure');
+    figure.className = 'an-figure';
+    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 = window.getSelection();
+    if (sel) { sel.removeAllRanges(); sel.addRange(range); }
+
+    this.context.invoke('editor.afterCommand');
+    this._hide();
+  }
+}

package/src/js/module/LinkDialog.js

@@ -0,0 +1,204 @@
+/**
+ * LinkDialog.js - Dialog for inserting / editing hyperlinks
+ * Inspired by Summernote's LinkDialog — rewritten without jQuery
+ */
+
+import { createElement, on, trapFocus } from '../core/dom.js';
+import { withSavedRange } from '../core/range.js';
+
+export class LinkDialog {
+  /**
+   * @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
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Opens the link dialog.
+   * Pre-fills with the currently selected link if present.
+   */
+  show() {
+    withSavedRange((range) => {
+      this._savedRange = range;
+    });
+    this._prefill();
+    this._open();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Build dialog
+  // ---------------------------------------------------------------------------
+
+  _buildDialog() {
+    const overlay = createElement('div', { class: 'an-dialog-overlay', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Insert link' });
+    const box = createElement('div', { class: 'an-dialog-box' });
+
+    const title = createElement('h3', { class: 'an-dialog-title' });
+    title.textContent = 'Insert Link';
+
+    // URL field
+    const urlLabel = createElement('label', { class: 'an-label' });
+    urlLabel.textContent = 'URL';
+    const urlInput = createElement('input', {
+      type: 'url',
+      class: 'an-input',
+      placeholder: 'https://',
+      id: 'an-link-url',
+      name: 'url',
+      autocomplete: 'off',
+    });
+    this._urlInput = urlInput;
+
+    // Text field
+    const textLabel = createElement('label', { class: 'an-label' });
+    textLabel.textContent = 'Display Text';
+    const textInput = createElement('input', {
+      type: 'text',
+      class: 'an-input',
+      placeholder: 'Link text',
+      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 = createElement('input', {
+      type: 'checkbox',
+      id: 'an-link-newtab',
+      name: 'openInNewTab',
+    });
+    this._tabCheckbox = tabCheckbox;
+    tabLabel.appendChild(tabCheckbox);
+    tabLabel.appendChild(document.createTextNode(' Open in new tab'));
+
+    // 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(title, urlLabel, urlInput, textLabel, textInput, tabLabel, btnRow);
+    overlay.appendChild(box);
+
+    // Events
+    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(textInput, 'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
+    this._disposers.push(d1, d2, d3, d4, d5);
+
+    return overlay;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Actions
+  // ---------------------------------------------------------------------------
+
+  _prefill() {
+    // Try to find currently selected anchor
+    const sel = window.getSelection();
+    let anchor = null;
+    if (sel && 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 = anchor.getAttribute('href') || '';
+      this._textInput.value = anchor.textContent || '';
+      this._tabCheckbox.checked = 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();
+  }
+
+  _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;
+  }
+}