autumnnote 1.0.0

package/src/js/module/LinkTooltip.js

@@ -0,0 +1,242 @@
+// LinkTooltip.js - Hover tooltip for links inside the editor
+// Displays a small action bar with: visit link, edit link, unlink
+import { createElement, on } from '../core/dom.js';
+
+const ICONS = {
+  open:   `<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="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>`,
+  edit:   `<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="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`,
+  unlink: `<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="M18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71"/><path d="M5.17 11.75l-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71"/><line x1="8" y1="2" x2="8" y2="5"/><line x1="2" y1="8" x2="5" y2="8"/><line x1="16" y1="19" x2="16" y2="22"/><line x1="19" y1="16" x2="22" y2="16"/></svg>`,
+  copy:   `<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="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`,
+};
+
+/** Delay in ms before showing / after hiding to avoid flicker */
+const SHOW_DELAY = 120;
+const HIDE_DELAY = 200;
+
+export class LinkTooltip {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this._el = null;
+    this._activeAnchor = 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(
+      // Detect when pointer enters a link
+      on(editable, 'mouseover', (e) => {
+        const anchor = e.target.closest('a[href]');
+        if (anchor && editable.contains(anchor)) {
+          this._scheduleShow(anchor);
+        }
+      }),
+      // Detect when pointer leaves the editable area entirely
+      on(editable, 'mouseout', (e) => {
+        const to = e.relatedTarget;
+        if (!to || (!editable.contains(to) && !this._el.contains(to))) {
+          this._scheduleHide();
+        }
+      }),
+    );
+
+    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', role: 'toolbar', 'aria-label': 'Link actions' });
+    el.style.display = 'none';
+
+    // URL preview text (truncated)
+    this._urlLabel = createElement('span', { class: 'an-link-tooltip-url' });
+    el.appendChild(this._urlLabel);
+
+    // Separator
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
+    // Action buttons
+    this._openBtn   = this._makeBtn(ICONS.open,   'Open link',   () => this._openLink());
+    this._copyBtn   = this._makeBtn(ICONS.copy,   'Copy URL',    () => this._copyLink());
+    this._editBtn   = this._makeBtn(ICONS.edit,   'Edit link',   () => this._editLink());
+    this._unlinkBtn = this._makeBtn(ICONS.unlink, 'Remove link', () => this._unlink());
+
+    el.appendChild(this._openBtn);
+    el.appendChild(this._copyBtn);
+    el.appendChild(this._editBtn);
+    el.appendChild(this._unlinkBtn);
+
+    // Keep tooltip alive while hovering it
+    this._disposers.push(
+      on(el, 'mouseenter', () => this._clearTimers()),
+      on(el, 'mouseleave', () => this._scheduleHide()),
+    );
+
+    return el;
+  }
+
+  _makeBtn(icon, title, handler) {
+    const btn = createElement('button', { type: 'button', class: 'an-link-tooltip-btn', title });
+    btn.innerHTML = icon;
+    this._disposers.push(on(btn, 'click', (e) => { e.preventDefault(); e.stopPropagation(); handler(); }));
+    return btn;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Show / Hide logic
+  // ---------------------------------------------------------------------------
+
+  _scheduleShow(anchor) {
+    if (this._activeAnchor === anchor && this._el.style.display !== 'none') return;
+    clearTimeout(this._hideTimer);
+    this._hideTimer = null;
+    clearTimeout(this._showTimer);
+    this._showTimer = setTimeout(() => {
+      this._activeAnchor = anchor;
+      this._show(anchor);
+    }, SHOW_DELAY);
+  }
+
+  _scheduleHide() {
+    clearTimeout(this._showTimer);
+    this._showTimer = null;
+    if (this._hideTimer) return;
+    this._hideTimer = setTimeout(() => {
+      this._hide();
+    }, HIDE_DELAY);
+  }
+
+  _show(anchor) {
+    const url = anchor.getAttribute('href') || '';
+    this._urlLabel.textContent = this._truncateUrl(url);
+    this._urlLabel.title = url;
+    this._el.style.display = 'flex';
+    this._positionNear(anchor);
+  }
+
+  _hide() {
+    this._el.style.display = 'none';
+    this._activeAnchor = null;
+    this._clearTimers();
+  }
+
+  _clearTimers() {
+    clearTimeout(this._showTimer);
+    clearTimeout(this._hideTimer);
+    this._showTimer = null;
+    this._hideTimer = null;
+  }
+
+  _positionNear(anchor) {
+    const rect   = anchor.getBoundingClientRect();
+    const tipW   = this._el.offsetWidth  || 260;
+    const tipH   = this._el.offsetHeight || 34;
+    const margin = 6;
+
+    // Prefer below the link; if no room, put above
+    let top  = rect.bottom + margin;
+    let left = rect.left;
+
+    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`;
+  }
+
+  _truncateUrl(url) {
+    try {
+      const u = new URL(url);
+      const display = u.host + (u.pathname !== '/' ? u.pathname : '');
+      return display.length > 48 ? display.slice(0, 48) + '…' : display;
+    } catch {
+      return url.length > 48 ? url.slice(0, 48) + '…' : url;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Actions
+  // ---------------------------------------------------------------------------
+
+  _openLink() {
+    const url = this._activeAnchor && this._activeAnchor.getAttribute('href');
+    if (url) window.open(url, '_blank', 'noopener,noreferrer');
+    this._hide();
+  }
+
+  _copyLink() {
+    const url = this._activeAnchor && this._activeAnchor.getAttribute('href');
+    if (url) {
+      navigator.clipboard.writeText(url).catch(() => {
+        // Fallback for environments where clipboard API is unavailable
+        const ta = document.createElement('textarea');
+        ta.value = url;
+        ta.style.position = 'fixed';
+        ta.style.opacity  = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+      });
+    }
+    // Brief visual feedback  
+    if (this._copyBtn) {
+      this._copyBtn.classList.add('an-link-tooltip-btn--copied');
+      setTimeout(() => this._copyBtn && this._copyBtn.classList.remove('an-link-tooltip-btn--copied'), 1000);
+    }
+  }
+
+  _editLink() {
+    const anchor = this._activeAnchor;
+    if (!anchor) return;
+    this._hide();
+
+    // Place cursor inside the anchor, then open the link dialog (which pre-fills from selection)
+    const sel = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(anchor);
+    sel.removeAllRanges();
+    sel.addRange(range);
+
+    this.context.invoke('linkDialog.show');
+  }
+
+  _unlink() {
+    const anchor = this._activeAnchor;
+    if (!anchor) return;
+    this._hide();
+
+    // Select the anchor text, then remove the link
+    const sel = window.getSelection();
+    const range = document.createRange();
+    range.selectNode(anchor);
+    sel.removeAllRanges();
+    sel.addRange(range);
+
+    document.execCommand('unlink');
+    this.context.invoke('editor.afterCommand');
+  }
+}

package/src/js/module/Placeholder.js

@@ -0,0 +1,44 @@
+/**
+ * Placeholder.js - Shows placeholder text when the editor is empty
+ * Inspired by Summernote's Placeholder module
+ */
+
+import { on } from '../core/dom.js';
+
+export class Placeholder {
+  /**
+   * @param {import('../Context.js').Context} context
+   */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+    this._disposers = [];
+  }
+
+  initialize() {
+    const editable = this.context.layoutInfo.editable;
+    const placeholder = this.options.placeholder || '';
+    if (placeholder) {
+      editable.dataset.placeholder = placeholder;
+    }
+
+    const update = () => this._update();
+    const d1 = on(editable, 'input', update);
+    const d2 = on(editable, 'focus', update);
+    const d3 = on(editable, 'blur', update);
+    this._disposers.push(d1, d2, d3);
+    this._update();
+    return this;
+  }
+
+  destroy() {
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+  }
+
+  _update() {
+    const editable = this.context.layoutInfo.editable;
+    const isEmpty = !editable.textContent.trim() && !editable.querySelector('img, table, hr');
+    editable.classList.toggle('an-placeholder', isEmpty);
+  }
+}

package/src/js/module/ShortcutsDialog.js

@@ -0,0 +1,141 @@
+/**
+ * ShortcutsDialog.js - Modal dialog listing all keyboard shortcuts.
+ * Opened via the toolbar '?' button or Shift+? inside the editor.
+ */
+
+import { createElement, on, trapFocus } from '../core/dom.js';
+
+const SHORTCUTS = [
+  {
+    category: 'Text Formatting',
+    items: [
+      { keys: 'Ctrl + B',         action: 'Bold' },
+      { keys: 'Ctrl + I',         action: 'Italic' },
+      { keys: 'Ctrl + U',         action: 'Underline' },
+      { keys: 'Ctrl + K',         action: 'Insert / edit link' },
+    ],
+  },
+  {
+    category: 'History',
+    items: [
+      { keys: 'Ctrl + Z',                   action: 'Undo' },
+      { keys: 'Ctrl + Y  /  Ctrl + Shift + Z', action: 'Redo' },
+    ],
+  },
+  {
+    category: 'Selection & Navigation',
+    items: [
+      { keys: 'Ctrl + A',    action: 'Select all content' },
+      { keys: 'Tab',         action: 'Indent list item / insert spaces' },
+      { keys: 'Shift + Tab', action: 'Outdent list item' },
+    ],
+  },
+  {
+    category: 'Clipboard',
+    items: [
+      { keys: 'Ctrl + Shift + V', action: 'Paste as plain text' },
+    ],
+  },
+  {
+    category: 'Find & Replace',
+    items: [
+      { keys: 'Ctrl + F', action: 'Find in document' },
+      { keys: 'Ctrl + H', action: 'Find & Replace' },
+    ],
+  },
+  {
+    category: 'Editor',
+    items: [
+      { keys: 'Shift + ?', action: 'Show this keyboard shortcuts dialog' },
+    ],
+  },
+];
+
+export class ShortcutsDialog {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this._dialog = null;
+    this._closeBtn = null;
+    this._disposers = [];
+  }
+
+  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;
+  }
+
+  show() {
+    if (this._dialog) {
+      this._dialog.style.display = 'flex';
+      this._removeTrap = trapFocus(this._dialog, () => this._close());
+      setTimeout(() => this._closeBtn && this._closeBtn.focus(), 50);
+    }
+  }
+
+  _close() {
+    if (this._dialog) this._dialog.style.display = 'none';
+    if (this._removeTrap) { this._removeTrap(); this._removeTrap = null; }
+  }
+
+  _buildDialog() {
+    const overlay = createElement('div', {
+      class: 'an-dialog-overlay',
+      role: 'dialog',
+      'aria-modal': 'true',
+      'aria-label': 'Keyboard Shortcuts',
+    });
+
+    const box = createElement('div', { class: 'an-dialog-box an-shortcuts-box' });
+
+    // Title row with close button
+    const titleRow = createElement('div', { class: 'an-icon-title-row' });
+    const title = createElement('h3', { class: 'an-dialog-title' });
+    title.textContent = 'Keyboard Shortcuts';
+    const closeBtn = createElement('button', {
+      type: 'button',
+      class: 'an-icon-close',
+      'aria-label': 'Close',
+    });
+    closeBtn.textContent = '×';
+    this._closeBtn = closeBtn;
+    titleRow.append(title, closeBtn);
+    box.appendChild(titleRow);
+
+    SHORTCUTS.forEach(({ category, items }) => {
+      const catEl = createElement('div', { class: 'an-shortcuts-cat' });
+      catEl.textContent = category;
+      box.appendChild(catEl);
+
+      const table = createElement('div', { class: 'an-shortcuts-table' });
+      items.forEach(({ keys, action }) => {
+        const row = createElement('div', { class: 'an-shortcuts-row' });
+        const keyEl = createElement('span', { class: 'an-shortcuts-key' });
+        keyEl.textContent = keys;
+        const actEl = createElement('span', { class: 'an-shortcuts-action' });
+        actEl.textContent = action;
+        row.append(keyEl, actEl);
+        table.appendChild(row);
+      });
+      box.appendChild(table);
+    });
+
+    overlay.appendChild(box);
+
+    const d1 = on(closeBtn, 'click', () => this._close());
+    const d2 = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
+    this._disposers.push(d1, d2);
+
+    return overlay;
+  }
+}

package/src/js/module/Statusbar.js

@@ -0,0 +1,238 @@
+/**
+ * Statusbar.js - Displays word count, character count and resize handle
+ * Inspired by Summernote's Statusbar module — rewritten without jQuery
+ */
+
+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 =
+  typeof Intl !== 'undefined' && typeof Intl.Segmenter === 'function'
+    ? new Intl.Segmenter(undefined, { granularity: 'word' })
+    : null;
+
+/**
+ * Count words in a string, CJK-aware.
+ * Uses Intl.Segmenter (Chromium 87+, Firefox 125+, Safari 17+) when available,
+ * falling back to a simple whitespace split for older environments.
+ * @param {string} text
+ * @returns {number}
+ */
+function _countWords(text) {
+  const trimmed = text.trim();
+  if (!trimmed) return 0;
+  if (_segmenter) {
+    let count = 0;
+    for (const seg of _segmenter.segment(trimmed)) {
+      if (seg.isWordLike) count++;
+    }
+    return count;
+  }
+  // Fallback: split on whitespace
+  return trimmed.split(/\s+/).length;
+}
+
+/**
+ * Toggles warning/exceeded CSS classes on a count element.
+ * @param {HTMLElement} el
+ * @param {number} current
+ * @param {number} limit  0 = no limit
+ */
+function _applyLimitClass(el, current, limit) {
+  if (!limit) {
+    el.classList.remove('an-count-warn', 'an-count-exceeded');
+    return;
+  }
+  if (current > limit) {
+    el.classList.add('an-count-exceeded');
+    el.classList.remove('an-count-warn');
+  } else if (current >= limit * 0.9) {
+    el.classList.add('an-count-warn');
+    el.classList.remove('an-count-exceeded');
+  } else {
+    el.classList.remove('an-count-warn', 'an-count-exceeded');
+  }
+}
+
+export class Statusbar {
+  /**
+   * @param {import('../Context.js').Context} context
+   */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+    /** @type {HTMLElement|null} */
+    this.el = null;
+    this._disposers = [];
+    /** @type {HTMLElement|null} */
+    this._wordCountEl = null;
+    /** @type {HTMLElement|null} */
+    this._charCountEl = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Lifecycle
+  // ---------------------------------------------------------------------------
+
+  initialize() {
+    this.el = createElement('div', { class: 'an-statusbar' });
+
+    // Resize handle
+    if (this.options.resizable !== false) {
+      const handle = createElement('div', {
+        class: 'an-resize-handle',
+        title: 'Resize editor',
+        'aria-hidden': 'true',
+      });
+      this._bindResize(handle);
+      this.el.appendChild(handle);
+    }
+
+    // Counters
+    this._wordCountEl = createElement('span', { class: 'an-word-count' });
+    this._charCountEl = createElement('span', { class: 'an-char-count' });
+    const info = createElement('div', { class: 'an-status-info' });
+    info.appendChild(this._wordCountEl);
+    info.appendChild(this._charCountEl);
+    this.el.appendChild(info);
+
+    this._bindContentEvents();
+    this.update();
+    return this;
+  }
+
+  destroy() {
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+    if (this._dragDisposers) {
+      this._dragDisposers.forEach((d) => d());
+      this._dragDisposers = null;
+    }
+    if (this.el && this.el.parentNode) {
+      this.el.parentNode.removeChild(this.el);
+    }
+    this.el = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Resize logic
+  // ---------------------------------------------------------------------------
+
+  _bindResize(handle) {
+    let startY = 0;
+    let startH = 0;
+    // Resize the container (flex column parent) so that the editable — which
+    // has flex:1 / flex-basis:0 — automatically fills the remaining space.
+    // Setting height directly on a flex:1 item has no effect because the flex
+    // algorithm ignores the height property when flex-basis is non-auto.
+    const containerEl = this.context.layoutInfo.container;
+
+    const applyDelta = (clientY) => {
+      const delta = clientY - startY;
+      const minH = this.options.minHeight || 100;
+      containerEl.style.height = `${Math.max(minH, startH + delta)}px`;
+    };
+
+    // Mouse drag
+    const onMouseMove = (event) => applyDelta(event.clientY);
+
+    const onMouseUp = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+      this._dragDisposers = null;
+    };
+
+    const onMouseDown = (event) => {
+      startY = event.clientY;
+      startH = containerEl.offsetHeight;
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+      // Track drag-phase listeners so destroy() can remove them mid-drag
+      this._dragDisposers = [
+        () => document.removeEventListener('mousemove', onMouseMove),
+        () => document.removeEventListener('mouseup', onMouseUp),
+      ];
+      event.preventDefault();
+    };
+
+    // Touch drag
+    const onTouchMove = (event) => {
+      const touch = event.touches[0];
+      if (touch) { event.preventDefault(); applyDelta(touch.clientY); }
+    };
+
+    const onTouchEnd = () => {
+      document.removeEventListener('touchmove', onTouchMove);
+      document.removeEventListener('touchend', onTouchEnd);
+      this._dragDisposers = null;
+    };
+
+    const onTouchStart = (event) => {
+      const touch = event.touches[0];
+      if (!touch) return;
+      startY = touch.clientY;
+      startH = containerEl.offsetHeight;
+      document.addEventListener('touchmove', onTouchMove, { passive: false });
+      document.addEventListener('touchend', onTouchEnd);
+      this._dragDisposers = [
+        () => document.removeEventListener('touchmove', onTouchMove),
+        () => document.removeEventListener('touchend', onTouchEnd),
+      ];
+    };
+
+    const d1 = on(handle, 'mousedown', onMouseDown);
+    const d2 = on(handle, 'touchstart', onTouchStart);
+    this._disposers.push(d1, d2);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Counter update
+  // ---------------------------------------------------------------------------
+
+  _bindContentEvents() {
+    const editable = this.context.layoutInfo.editable;
+    const updateDebounced = debounce(() => this.update(), 200);
+    const d = on(editable, 'input', updateDebounced);
+    this._disposers.push(d);
+  }
+
+  update() {
+    if (!this._wordCountEl || !this._charCountEl) return;
+    const editable = this.context.layoutInfo.editable;
+    const text = editable.innerText || '';
+    const words = _countWords(text);
+    const chars = text.replace(/\n/g, '').length;
+    const maxWords = this.options.maxWords || 0;
+    const maxChars = this.options.maxChars || 0;
+
+    this._wordCountEl.textContent = maxWords
+      ? `Words: ${words}/${maxWords}`
+      : `Words: ${words}`;
+    this._charCountEl.textContent = maxChars
+      ? `Chars: ${chars}/${maxChars}`
+      : `Chars: ${chars}`;
+
+    // Apply warning / exceeded styles
+    _applyLimitClass(this._wordCountEl, words, maxWords);
+    _applyLimitClass(this._charCountEl, chars, maxChars);
+  }
+
+  /**
+   * Returns the current word count of the editor content.
+   * @returns {number}
+   */
+  getWordCount() {
+    const editable = this.context.layoutInfo.editable;
+    return _countWords(editable.innerText || '');
+  }
+
+  /**
+   * Returns the current character count (excluding newlines) of the editor content.
+   * @returns {number}
+   */
+  getCharCount() {
+    const editable = this.context.layoutInfo.editable;
+    return ((editable.innerText || '').replace(/\n/g, '')).length;
+  }
+}