autumnnote 2.1.0 → 2.2.0

package/src/js/module/CodeTooltip.js

@@ -1,493 +0,0 @@
-// CodeTooltip.js - Hover tooltip for <pre> code blocks inside the editor
-// Shows a horizontal action bar above (or below) the hovered code block,
-// consistent in appearance and interaction with ImageTooltip / TableTooltip.
-import { createElement, on } from '../core/dom.js';
-
-const SHOW_DELAY = 100;
-const HIDE_DELAY = 180;
-
-// Cached regex for extracting language class — defined once at module level.
-const _LANG_CLASS_RE = /language-(\S+)/;
-
-const ICONS = {
-  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>`,
-  wrapOn:     `<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"><line x1="3" y1="6" x2="21" y2="6"/><path d="M3 12h15a3 3 0 0 1 0 6H3"/><polyline points="6 15 3 18 6 21"/></svg>`,
-  toParagraph:`<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="M13 4v16"/><path d="M17 4v16"/><path d="M9 4h8a4 4 0 0 1 0 8H9V4z"/></svg>`,
-  deleteCode: `<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>`,
-  lineNumbers:  `<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"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-2-2-2"/></svg>`,
-};
-
-export class CodeTooltip {
-  /** @param {import('../Context.js').Context} context */
-  constructor(context) {
-    this.context = context;
-    this._el = null;
-    this._activePre = null;
-    this._showTimer = null;
-    this._hideTimer = null;
-    this._disposers = [];
-    this._copyBtn = null;
-    this._wrapBtn = null;
-    this._lineNumbersBtn = null;
-    this._langSelect = null;
-    this._prismScript = null; // script element while Prism is loading
-  }
-
-  initialize() {
-    this._el = this._buildTooltip();
-    document.body.appendChild(this._el);
-    this._ensurePrism();
-
-    const editable = this.context.layoutInfo.editable;
-
-    this._disposers.push(
-      on(editable, 'mouseover', (e) => {
-        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        const pre = /** @type {Element} */ (e.target)?.closest('pre');
-        if (pre && editable.contains(pre)) {
-          this._scheduleShow(pre);
-        }
-      }),
-      on(editable, 'mouseout', (e) => {
-        const to = /** @type {Node|null} */ (/** @type {MouseEvent} */ (e).relatedTarget);
-        if (!to || (!editable.contains(to) && !this._el.contains(to))) {
-          this._scheduleHide();
-        }
-      }),
-      on(document, 'click', (e) => {
-        const et = /** @type {Node} */ (e.target);
-        if (this._activePre &&
-          !this._activePre.contains(et) &&
-          !this._el.contains(et)) {
-          this._hide();
-        }
-      }),
-    );
-
-    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.code;
-    const el = createElement('div', {
-      class: 'an-link-tooltip an-code-tooltip',
-      role: 'toolbar',
-      'aria-label': L.ariaLabel,
-    });
-    el.style.display = 'none';
-
-    // Label
-    this._label = createElement('span', { class: 'an-link-tooltip-url' });
-    this._label.textContent = L.label;
-    el.appendChild(this._label);
-
-    el.appendChild(this._sep());
-
-    // Language selector
-    this._langSelect = /** @type {HTMLSelectElement} */ (createElement('select', {
-      class: 'an-code-lang-select',
-      title: L.syntaxLanguage,
-      'aria-label': L.syntaxAriaLabel,
-    }));
-    const LANGUAGES = [
-      ['', 'Plain text'], ['javascript', 'JavaScript'], ['typescript', 'TypeScript'],
-      ['python', 'Python'], ['html', 'HTML'], ['css', 'CSS'], ['scss', 'SCSS'],
-      ['json', 'JSON'], ['xml', 'XML'], ['bash', 'Bash / Shell'], ['sql', 'SQL'],
-      ['java', 'Java'], ['csharp', 'C#'], ['php', 'PHP'], ['ruby', 'Ruby'],
-      ['go', 'Go'], ['rust', 'Rust'], ['cpp', 'C++'], ['c', 'C'],
-      ['kotlin', 'Kotlin'], ['swift', 'Swift'],
-    ];
-    LANGUAGES.forEach(([value, label]) => {
-      const opt = createElement('option', { value });
-      opt.textContent = label;
-      this._langSelect.appendChild(opt);
-    });
-    this._disposers.push(on(this._langSelect, 'change', () => this._onLangChange()));
-    el.appendChild(this._langSelect);
-
-    el.appendChild(this._sep());
-
-    // Copy code
-    this._copyBtn = this._makeBtn(ICONS.copy, L.copyCode, () => this._copyCode());
-
-    el.appendChild(this._copyBtn);
-
-    el.appendChild(this._sep());
-
-    // Toggle word-wrap
-    this._wrapBtn = this._makeBtn(ICONS.wrapOn, L.toggleWordWrap, () => this._toggleWrap());
-    el.appendChild(this._wrapBtn);
-
-    // Toggle line numbers
-    this._lineNumbersBtn = this._makeBtn(ICONS.lineNumbers, L.lineNumbers, () => this._toggleLineNumbers());
-    el.appendChild(this._lineNumbersBtn);
-
-    el.appendChild(this._sep());
-
-    // Convert to normal paragraph
-    el.appendChild(this._makeBtn(ICONS.toParagraph, L.convertToParagraph, () => this._toParagraph()));
-
-    el.appendChild(this._sep());
-
-    // Delete block
-    el.appendChild(this._makeBtn(ICONS.deleteCode, L.deleteCodeBlock, () => this._delete(), true));
-
-    // Keep tooltip alive while hovering it
-    this._disposers.push(
-      on(el, 'mouseenter', () => this._clearTimers()),
-      on(el, 'mouseleave', () => this._scheduleHide()),
-    );
-
-    return el;
-  }
-
-  _sep() {
-    return createElement('div', { class: 'an-link-tooltip-sep' });
-  }
-
-  /**
-   * @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(pre) {
-    if (this._activePre === pre && this._el.style.display !== 'none') return;
-    clearTimeout(this._hideTimer);
-    this._hideTimer = null;
-    clearTimeout(this._showTimer);
-    this._showTimer = setTimeout(() => {
-      this._activePre = pre;
-      this._syncWrapBtn();
-      this._syncLineNumbersBtn();
-      this._syncLangSelect();
-      this._show(pre);
-    }, SHOW_DELAY);
-  }
-
-  _scheduleHide() {
-    clearTimeout(this._showTimer);
-    this._showTimer = null;
-    // Always reset the hide timer so rapid mouseout→mouseover sequences
-    // don't leave a stale timer that hides the tooltip prematurely.
-    clearTimeout(this._hideTimer);
-    this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY);
-  }
-
-  _show(pre) {
-    this._el.style.display = 'flex';
-    this._positionNear(pre);
-  }
-
-  _hide() {
-    this._el.style.display = 'none';
-    this._activePre = null;
-    this._clearTimers();
-  }
-
-  _clearTimers() {
-    clearTimeout(this._showTimer);
-    clearTimeout(this._hideTimer);
-    this._showTimer = null;
-    this._hideTimer = null;
-  }
-
-  _positionNear(pre) {
-    const rect   = pre.getBoundingClientRect();
-    const tipW   = this._el.offsetWidth  || 260;
-    const tipH   = this._el.offsetHeight || 32;
-    const margin = 6;
-
-    // Prefer above the block; fall back to below
-    let top  = rect.top - tipH - margin;
-    let left = rect.left + (rect.width - tipW) / 2;
-
-    if (top < margin) top = rect.bottom + margin;
-    if (left + tipW > globalThis.innerWidth  - margin) left = globalThis.innerWidth  - tipW - margin;
-    if (left < margin) left = margin;
-
-    // Tooltip uses position:fixed, so viewport coordinates are used directly.
-    this._el.style.top  = `${top}px`;
-    this._el.style.left = `${left}px`;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Sync wrap-button active state
-  // ---------------------------------------------------------------------------
-
-  _syncWrapBtn() {
-    if (!this._activePre || !this._wrapBtn) return;
-    const wrapped = (this._activePre.style.whiteSpace || '').includes('pre-wrap')
-      || globalThis.getComputedStyle(this._activePre).whiteSpace === 'pre-wrap';
-    this._wrapBtn.classList.toggle('active', wrapped);
-    this._wrapBtn.title = wrapped
-      ? this.context.locale.tooltips.code.disableWordWrap
-      : this.context.locale.tooltips.code.enableWordWrap;
-  }
-
-  _syncLineNumbersBtn() {
-    if (!this._activePre || !this._lineNumbersBtn) return;
-    const on = this._activePre.classList.contains('an-code-line-numbers');
-    this._lineNumbersBtn.classList.toggle('active', on);
-    this._lineNumbersBtn.title = this.context.locale.tooltips.code.lineNumbers;
-  }
-
-  _syncLangSelect() {
-    if (!this._activePre || !this._langSelect) return;
-    const codeEl = this._activePre.querySelector('code');
-    const fromAttr = this._activePre.dataset.language || '';
-    const fromClass = codeEl ? (_LANG_CLASS_RE.exec(codeEl.className) || [])[1] || '' : '';
-    this._langSelect.value = fromAttr || fromClass || '';
-  }
-
-  // ---------------------------------------------------------------------------
-  // Actions
-  // ---------------------------------------------------------------------------
-
-  _copyCode() {
-    const pre = this._activePre;
-    if (!pre) return;
-    const text = pre.textContent || '';
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(text).then(() => this._flashCopied()).catch(() => {});
-    } else {
-      // Fallback for older browsers
-      const ta = document.createElement('textarea');
-      ta.value = text;
-      ta.style.cssText = 'position:fixed;opacity:0;top:0;left:0';
-      document.body.appendChild(ta);
-      ta.select();
-      try { document.execCommand('copy'); this._flashCopied(); } catch (_) { void _; }
-      ta.remove();
-    }
-  }
-
-  _flashCopied() {
-    if (!this._copyBtn) return;
-    const original = this._copyBtn.innerHTML;
-    this._copyBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
-    this._copyBtn.classList.add('an-link-tooltip-btn--copied');
-    setTimeout(() => {
-      if (this._copyBtn) {
-        this._copyBtn.innerHTML = original;
-        this._copyBtn.classList.remove('an-link-tooltip-btn--copied');
-      }
-    }, 1400);
-  }
-
-  _toggleWrap() {
-    const pre = this._activePre;
-    if (!pre) return;
-    const isWrapped = pre.style.whiteSpace === 'pre-wrap';
-    pre.style.whiteSpace = isWrapped ? 'pre' : 'pre-wrap';
-    this._syncWrapBtn();
-    this.context.invoke('editor.afterCommand');
-    this._positionNear(pre);
-  }
-
-  _toggleLineNumbers() {
-    const pre = this._activePre;
-    if (!pre) return;
-    pre.classList.toggle('an-code-line-numbers');
-    this._syncLineNumbersBtn();
-    this.context.invoke('editor.afterCommand');
-  }
-
-  /**
-   * Applies a language to a given <pre> element: sets classes, data-language,
-   * and triggers Prism highlighting. Called by the auto-detect flow.
-   * @param {HTMLElement} pre
-   * @param {string} lang - Prism language identifier, e.g. 'javascript'
-   */
-  applyLanguage(pre, lang) {
-    if (!pre || !lang) return;
-    // Temporarily set activePre so _onLangChange can target it
-    const savedPre = this._activePre;
-    this._activePre = pre;
-    if (this._langSelect) this._langSelect.value = lang;
-    this._onLangChange();
-    // Update the select to reflect the detected language when tooltip is shown
-    if (this._langSelect) this._langSelect.value = lang;
-    this._activePre = savedPre || pre;
-    // Don't restore savedPre if it was null — keep `pre` as activePre so that
-    // the tooltip select is correct the first time the user hovers over it.
-  }
-
-  _onLangChange() {
-    const pre = this._activePre;
-    if (!pre) return;
-    const lang = this._langSelect.value;
-    const _w = /** @type {any} */ (globalThis);
-
-    // Ensure a <code> child exists (Prism targets <pre><code class="language-xxx">)
-    let codeEl = pre.querySelector('code');
-    if (!codeEl) {
-      codeEl = document.createElement('code');
-      codeEl.innerHTML = pre.innerHTML;
-      pre.innerHTML = '';
-      pre.appendChild(codeEl);
-    }
-
-    codeEl.className = lang ? `language-${lang}` : '';
-    // Mirror language class on <pre> so Prism CSS theme targets it (pre[class*='language-'])
-    pre.className = lang ? `language-${lang}` : '';
-    if (lang) {
-      pre.dataset.language = lang;
-    } else {
-      delete pre.dataset.language;
-    }
-
-    // Trigger Prism if available.
-    // contenteditable stores line breaks as <br> elements; Prism reads textContent
-    // which drops <br> entirely, collapsing all lines into one. Convert first.
-    const applyPrism = () => {
-      codeEl.querySelectorAll('br').forEach((br) => br.replaceWith('\n'));
-      _w.Prism.highlightElement(codeEl);
-      this.context.invoke('editor.afterCommand');
-    };
-
-    if (lang) {
-      if (_w.Prism !== undefined) {
-        // Grammar already loaded — highlight immediately
-        if (_w.Prism.languages[lang]) {
-          applyPrism();
-          return;
-        }
-        // Grammar not in core bundle — load the component script first
-        this._loadPrismComponent(lang, applyPrism);
-        return;
-      } else if (this._prismScript) {
-        // Prism core is still loading — highlight once it arrives, then load grammar if needed
-        this._prismScript.addEventListener('load', () => {
-          if (_w.Prism.languages[lang]) {
-            applyPrism();
-          } else {
-            this._loadPrismComponent(lang, applyPrism);
-          }
-        }, { once: true });
-        return;
-      }
-    }
-
-    this.context.invoke('editor.afterCommand');
-  }
-
-  /**
-   * Loads Prism.js + CSS from CDN when options.codeHighlight is true.
-   * Called once at initialize time. Fire-and-forget; errors are silent.
-   */
-  _ensurePrism() {
-    const _w = /** @type {any} */ (globalThis);
-    if (!this.context.options.codeHighlight || _w.Prism) return;
-    const cdn = this.context.options.codeHighlightCDN;
-    const themeHref = `${cdn}/themes/prism-tomorrow.min.css`;
-    const scriptSrc = `${cdn}/prism.min.js`;
-
-    if (!document.querySelector(`link[href="${themeHref}"]`)) {
-      const link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = themeHref;
-      document.head.appendChild(link);
-    }
-
-    const existingScript = document.querySelector(`script[src="${scriptSrc}"]`);
-    if (existingScript) {
-      this._prismScript = _w.Prism ? null : existingScript;
-      return;
-    }
-
-    const script = document.createElement('script');
-    script.dataset.manual = ''; // prevent auto-highlight on load
-    script.src = scriptSrc;
-    this._prismScript = script;
-    script.addEventListener('load', () => { this._prismScript = null; }, { once: true });
-    document.head.appendChild(script);
-  }
-
-  /**
-   * Dynamically loads a Prism language component script if not already available.
-   * Prism core only bundles: markup, css, clike, javascript.
-   * All other grammars (bash, python, etc.) need a component file.
-   * @param {string} lang  – Prism language slug (e.g. 'bash', 'python')
-   * @param {Function} cb  – called once the grammar is ready
-   */
-  _loadPrismComponent(lang, cb) {
-    const _w = /** @type {any} */ (globalThis);
-    const cdn = this.context.options.codeHighlightCDN;
-    const src = `${cdn}/components/prism-${lang}.min.js`;
-    // Avoid loading the same component twice
-    if (document.querySelector(`script[src="${src}"]`)) {
-      // Already in DOM — might still be loading; poll briefly then call cb
-      const poll = setInterval(() => {
-        if (_w.Prism?.languages[lang]) {
-          clearInterval(poll);
-          cb();
-        }
-      }, 50);
-      setTimeout(() => clearInterval(poll), 3000); // give up after 3s
-      return;
-    }
-    const s = document.createElement('script');
-    s.src = src;
-    s.addEventListener('load', /** @type {EventListener} */ (cb), { once: true });
-    document.head.appendChild(s);
-  }
-
-  _toParagraph() {
-    const pre = this._activePre;
-    if (!pre) return;
-    const editable = this.context.layoutInfo.editable;
-    if (!editable) return;
-
-    // Replace <pre> with <p> preserving lines as <br>
-    const lines = (pre.textContent || '').split('\n');
-    const p = document.createElement('p');
-    lines.forEach((line, i) => {
-      if (i > 0) p.appendChild(document.createElement('br'));
-      p.appendChild(document.createTextNode(line));
-    });
-
-    pre.parentNode.replaceChild(p, pre);
-    this._hide();
-    this.context.invoke('editor.afterCommand');
-  }
-
-  _delete() {
-    const pre = this._activePre;
-    if (!pre) return;
-    this._hide();
-    pre.remove();
-    this.context.invoke('editor.afterCommand');
-  }
-}

package/src/js/module/Codeview.js

@@ -1,125 +0,0 @@
-/**
- * Codeview.js - HTML source code view / WYSIWYG toggle
- * Inspired by Summernote's Codeview module
- */
-
-import { createElement } from '../core/dom.js';
-import { sanitiseHTML } from '../core/sanitise.js';
-
-export class Codeview {
-  /**
-   * @param {import('../Context.js').Context} context
-   */
-  constructor(context) {
-    this.context = context;
-    this.options = context.options;
-    this._active = false;
-    /** @type {HTMLTextAreaElement|null} */
-    this._textarea = null;
-    this._disposers = [];
-  }
-
-  initialize() {
-    return this;
-  }
-
-  destroy() {
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    this._textarea?.remove();
-    this._textarea = null;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Public API
-  // ---------------------------------------------------------------------------
-
-  toggle() {
-    if (this._active) {
-      this.deactivate();
-    } else {
-      this.activate();
-    }
-  }
-
-  isActive() {
-    return this._active;
-  }
-
-  activate() {
-    if (this._active) return;
-    const { editable } = this.context.layoutInfo;
-    const html = editable.innerHTML;
-
-    this._textarea = /** @type {HTMLTextAreaElement} */ (createElement('textarea', {
-      class: 'an-codeview',
-      spellcheck: 'false',
-      autocomplete: 'off',
-      autocorrect: 'off',
-      autocapitalize: 'off',
-    }));
-    this._textarea.value = this._prettyPrint(html);
-
-    editable.style.display = 'none';
-    editable.parentNode.insertBefore(this._textarea, editable.nextSibling);
-
-    this._active = true;
-    this.context.invoke('toolbar.refresh');
-  }
-
-  deactivate() {
-    if (!this._active || !this._textarea) return;
-    const { editable } = this.context.layoutInfo;
-    // Sanitise the HTML typed in the textarea before applying (allow iframes for video embeds)
-    editable.innerHTML = sanitiseHTML(this._textarea.value, { allowIframes: true });
-    this._textarea.remove();
-    this._textarea = null;
-    editable.style.display = '';
-    this._active = false;
-    this.context.invoke('toolbar.refresh');
-    this.context.invoke('editor.afterCommand');
-  }
-
-  // ---------------------------------------------------------------------------
-  // Helpers
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Very simple HTML pretty-printer (indent nested tags).
-   * Inline elements (a, span, strong, em, etc.) are kept on one line to
-   * avoid injecting whitespace that would change rendered text.
-   * @param {string} html
-   * @returns {string}
-   */
-  _prettyPrint(html) {
-    // Tags whose content must NOT be split with newlines (breaks text rendering)
-    const INLINE_RE = /^<(a|abbr|b|bdo|br|button|cite|code|dfn|em|i|img|input|kbd|label|output|q|samp|select|small|span|strong|sub|sup|textarea|time|tt|u|var)([\s>/])/i;
-    let indent = 0;
-    return html
-      .replace(/>\s*</g, (match, offset, str) => {
-        // Check what comes after the '>' — if it starts an inline tag, keep on same line
-        const remaining = str.slice(offset + 1);
-        if (INLINE_RE.test(remaining.trimStart())) return '><';
-        return '>\n<';
-      })
-      .split('\n')
-      .map((line) => {
-        const stripped = line.trim();
-        if (!stripped) return '';
-        if (stripped.startsWith('</')) indent = Math.max(0, indent - 1);
-        const out = '  '.repeat(indent) + stripped;
-        if (
-          /^<[^/!][^>]*[^/]>/.test(stripped) &&
-          !INLINE_RE.test(stripped) &&
-          !/^<(br|hr|img|input|link|meta)/.test(stripped)
-        ) {
-          indent++;
-        }
-        return out;
-      })
-      .filter(Boolean)
-      .join('\n');
-  }
-
-}
-