autumnnote 2.1.0 → 2.2.0

package/src/js/module/LinkTooltip.js

@@ -1,250 +0,0 @@
-// 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 = /** @type {Element} */ (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 = /** @type {Node|null} */ (/** @type {MouseEvent} */ (e).relatedTarget);
-        if (!to || (!editable.contains(to) && !this._el.contains(to))) {
-          this._scheduleHide();
-        }
-      }),
-      // 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 = [];
-    if (this._el?.parentNode) this._el.remove();
-    this._el = null;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Build
-  // ---------------------------------------------------------------------------
-
-  _buildTooltip() {
-    const L = this.context.locale.tooltips.link;
-    const el = createElement('div', { class: 'an-link-tooltip', role: 'toolbar', 'aria-label': L.ariaLabel });
-    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,   L.openLink,   () => this._openLink());
-    this._copyBtn   = this._makeBtn(ICONS.copy,   L.copyUrl,    () => this._copyLink());
-    this._editBtn   = this._makeBtn(ICONS.edit,   L.editLink,   () => this._editLink());
-    this._unlinkBtn = this._makeBtn(ICONS.unlink, L.removeLink, () => 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 isReadOnly = this.context.layoutInfo.container.classList.contains('an-disabled');
-    const url = anchor.getAttribute('href') || '';
-    this._urlLabel.textContent = this._truncateUrl(url);
-    this._urlLabel.title = url;
-    // In read-only mode keep only open + copy; hide edit and unlink
-    this._editBtn.style.display   = isReadOnly ? 'none' : '';
-    this._unlinkBtn.style.display = isReadOnly ? 'none' : '';
-    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 > globalThis.innerHeight - margin) {
-      top = rect.top - tipH - margin;
-    }
-    if (left + tipW > globalThis.innerWidth - margin) {
-      left = globalThis.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?.getAttribute('href');
-    if (url) globalThis.open(url, '_blank', 'noopener,noreferrer');
-    this._hide();
-  }
-
-  _copyLink() {
-    const url = 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');
-        ta.remove();
-      });
-    }
-    // Brief visual feedback  
-    if (this._copyBtn) {
-      this._copyBtn.classList.add('an-link-tooltip-btn--copied');
-      setTimeout(() => 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 = globalThis.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 = globalThis.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/MarkdownShortcuts.js

@@ -1,250 +0,0 @@
-/**
- * MarkdownShortcuts.js — Convert Markdown-style syntax typed directly in the
- * editor into rich HTML elements (input rules / auto-format).
- *
- * Activated when `markdownShortcuts: true` (the default).
- *
- * Block rules — triggered by Space or Enter at the start of a line:
- *   #[#[#]]·     → H1 / H2 / H3
- *   >·           → blockquote
- *   -·  or *·   → unordered list item
- *   1.·          → ordered list item
- *   [ ]·         → checklist item
- *   ---          → horizontal rule  (on Enter)
- *   ```          → code block       (on Enter)
- *
- * Inline rules — triggered when the closing marker is typed:
- *   **text**     → <strong>
- *   *text*       → <em>
- *   ~~text~~     → <s>
- *   `code`       → <code>
- */
-
-import { on } from '../core/dom.js';
-
-export class MarkdownShortcuts {
-  /** @param {import('../Context.js').Context} context */
-  constructor(context) {
-    this.context = context;
-    this.options = context.options;
-    this._disposers = [];
-  }
-
-  initialize() {
-    if (!this.options.markdownShortcuts) return this;
-    const editable = this.context.layoutInfo.editable;
-    const d1 = on(editable, 'keydown', /** @param {KeyboardEvent} e */ (e) => this._onKeydown(e));
-    const d2 = on(editable, 'input', () => this._onInput());
-    this._disposers.push(d1, d2);
-    return this;
-  }
-
-  destroy() {
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-  }
-
-  // ---------------------------------------------------------------------------
-  // Block rules (Space / Enter)
-  // ---------------------------------------------------------------------------
-
-  _onKeydown(e) {
-    if (e.key === ' ') {
-      if (this._applyBlockRule()) e.preventDefault();
-    } else if (e.key === 'Enter') {
-      if (this._applyEnterRule()) e.preventDefault();
-    }
-  }
-
-  /**
-   * Returns the plain text of the line the cursor is on, up to the cursor.
-   * @returns {{ text: string, range: Range, lineNode: Node } | null}
-   */
-  _getLineContext() {
-    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;
-
-    // Walk up to find the block-level ancestor inside the editable
-    let node = range.startContainer;
-    while (node && node !== editable && !this._isBlock(node)) {
-      node = node.parentNode;
-    }
-    if (!node || node === editable) node = range.startContainer;
-
-    // Collect all text content before the cursor within that block
-    const tmpRange = document.createRange();
-    tmpRange.setStart(node, 0);
-    tmpRange.setEnd(range.startContainer, range.startOffset);
-    const text = tmpRange.toString();
-
-    return { text, range, lineNode: node };
-  }
-
-  _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';
-  }
-
-  /** Applies block rule on Space key. Returns true if a rule fired. */
-  _applyBlockRule() {
-    const ctx = this._getLineContext();
-    if (!ctx) return false;
-    const { text } = ctx;
-
-    const blockPatterns = [
-      { re: /^(#{1,3})$/, handler: (m) => this._convertToHeading(m[1].length) },
-      { re: /^>$/, handler: () => this._convertToBlockquote() },
-      { re: /^[-*]$/, handler: () => this._convertToList('ul') },
-      { re: /^1\.$/, handler: () => this._convertToList('ol') },
-      { re: /^\[ \]$/, handler: () => this._convertToChecklist() },
-    ];
-
-    for (const { re, handler } of blockPatterns) {
-      const m = re.exec(text);
-      if (m) {
-        handler(m);
-        return true;
-      }
-    }
-    return false;
-  }
-
-  /** Applies block rule on Enter key (---, ```). Returns true if a rule fired. */
-  _applyEnterRule() {
-    const ctx = this._getLineContext();
-    if (!ctx) return false;
-    const { text } = ctx;
-
-    if (/^-{3,}$/.test(text)) {
-      this._convertToHr();
-      return true;
-    }
-    if (/^`{3}/.test(text)) {
-      this._convertToCodeBlock();
-      return true;
-    }
-    return false;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Block converters
-  // ---------------------------------------------------------------------------
-
-  _selectLineAndDelete() {
-    const sel = globalThis.getSelection();
-    if (!sel?.rangeCount) return;
-    const range = sel.getRangeAt(0);
-    // Select from the start of the block to the cursor and delete
-    const startRange = document.createRange();
-    startRange.setStart(range.startContainer.parentNode || range.startContainer, 0);
-    startRange.setEnd(range.startContainer, range.startOffset);
-    startRange.deleteContents();
-  }
-
-  _convertToHeading(level) {
-    this._selectLineAndDelete();
-    document.execCommand('formatBlock', false, `h${level}`);
-    this.context.triggerEvent('change', this.context.getHTML());
-  }
-
-  _convertToBlockquote() {
-    this._selectLineAndDelete();
-    document.execCommand('formatBlock', false, 'blockquote');
-    this.context.triggerEvent('change', this.context.getHTML());
-  }
-
-  _convertToList(type) {
-    this._selectLineAndDelete();
-    document.execCommand(type === 'ul' ? 'insertUnorderedList' : 'insertOrderedList');
-    this.context.triggerEvent('change', this.context.getHTML());
-  }
-
-  _convertToChecklist() {
-    this._selectLineAndDelete();
-    this.context.invoke('editor.toggleChecklist');
-    this.context.triggerEvent('change', this.context.getHTML());
-  }
-
-  _convertToHr() {
-    this._selectLineAndDelete();
-    this.context.invoke('editor.insertHr');
-    this.context.triggerEvent('change', this.context.getHTML());
-  }
-
-  _convertToCodeBlock() {
-    this._selectLineAndDelete();
-    document.execCommand('formatBlock', false, 'pre');
-    this.context.triggerEvent('change', this.context.getHTML());
-  }
-
-  // ---------------------------------------------------------------------------
-  // Inline rules (input event)
-  // ---------------------------------------------------------------------------
-
-  _onInput() {
-    const sel = globalThis.getSelection();
-    if (!sel?.rangeCount) return;
-    const range = sel.getRangeAt(0);
-    if (!range.collapsed) return;
-
-    const editable = this.context.layoutInfo.editable;
-    if (!editable.contains(range.startContainer)) return;
-
-    const node = range.startContainer;
-    if (node.nodeType !== Node.TEXT_NODE) return;
-
-    const text = node.textContent;
-    const offset = range.startOffset;
-
-    const inlineRules = [
-      // **bold**
-      { re: /\*\*(.+?)\*\*$/, tag: 'strong' },
-      // *italic* (not part of **)
-      { re: /(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)$/, tag: 'em' },
-      // ~~strike~~
-      { re: /~~(.+?)~~$/, tag: 's' },
-      // `code`
-      { re: /`([^`]+)`$/, tag: 'code' },
-    ];
-
-    const upToCursor = text.slice(0, offset);
-    for (const { re, tag } of inlineRules) {
-      const m = re.exec(upToCursor);
-      if (!m) continue;
-
-      const matchStart = upToCursor.length - m[0].length;
-      const matchEnd = offset;
-      const innerText = m[1];
-
-      // Replace matched text with formatted element
-      const before = text.slice(0, matchStart);
-      const after = text.slice(matchEnd);
-
-      const el = document.createElement(tag);
-      el.textContent = innerText;
-
-      // Rebuild the text node and insert the element
-      const beforeNode = document.createTextNode(before);
-      const afterNode = document.createTextNode('​' + after);
-
-      /** @type {ChildNode} */ (node).before(beforeNode, el, afterNode);
-      /** @type {ChildNode} */ (node).remove();
-
-      // Place cursor after the element (after the ZWS)
-      const newRange = document.createRange();
-      newRange.setStart(afterNode, 1);
-      newRange.collapse(true);
-      sel.removeAllRanges();
-      sel.addRange(newRange);
-
-      this.context.triggerEvent('change', this.context.getHTML());
-      break;
-    }
-  }
-}