autumnnote 2.0.0 → 2.2.0

package/src/js/module/VideoDialog.js

@@ -1,193 +0,0 @@
-/**
- * VideoDialog.js - Dialog for inserting videos (YouTube, Vimeo, or direct file)
- * Supports:
- *   • YouTube watch URLs  → <iframe> embed
- *   • YouTube short URLs  → <iframe> embed
- *   • Vimeo URLs          → <iframe> embed
- *   • Direct video URLs   → <video> element (.mp4 / .webm / .ogg)
- */
-
-import { createElement, on } from '../core/dom.js';
-import { sanitiseUrl } from '../core/sanitise.js';
-import { BaseDialog } from './BaseDialog.js';
-
-const ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`;
-
-export class VideoDialog extends BaseDialog {
-  // ---------------------------------------------------------------------------
-  // Public API
-  // ---------------------------------------------------------------------------
-
-  show() {
-    this._saveRange();
-    this._urlInput.value = '';
-    this._widthInput.value = '560';
-    this._hintEl.textContent = '';
-    this._open();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Build dialog
-  // ---------------------------------------------------------------------------
-
-  _buildDialog() {
-    const L = this.context.locale.videoDialog;
-    const { overlay, box } = this._buildDialogShell(L.ariaLabel, ICON_SVG, L.title);
-
-    // URL input
-    const urlLabel = createElement('label', { class: 'an-label' });
-    urlLabel.textContent = L.videoUrl;
-    const urlInput = /** @type {HTMLInputElement} */ (createElement('input', {
-      type: 'url',
-      class: 'an-input',
-      placeholder: L.urlPlaceholder,
-      autocomplete: 'off',
-    }));
-    this._urlInput = urlInput;
-    this._firstInput = urlInput;
-
-    // Hint (detected source)
-    const hintEl = createElement('p', { class: 'an-dialog-hint' });
-    this._hintEl = hintEl;
-
-    // Width
-    const widthLabel = createElement('label', { class: 'an-label' });
-    widthLabel.textContent = L.widthLabel;
-    const widthInput = /** @type {HTMLInputElement} */ (createElement('input', {
-      type: 'number',
-      class: 'an-input',
-      placeholder: '560',
-      min: '80',
-      max: '1920',
-      value: '560',
-    }));
-    this._widthInput = widthInput;
-
-    const btnRow = this._buildButtonRow(L.insertBtn, L.cancelBtn, () => this._onInsert());
-    box.append(urlLabel, urlInput, hintEl, widthLabel, widthInput, btnRow);
-
-    // Live URL hint
-    const d0 = on(urlInput, 'input', () => {
-      const info = this._parseVideoUrl(urlInput.value.trim());
-      let hint = '';
-      if (info) { hint = this.context.locale.videoDialog.detected(info.type); }
-      else if (urlInput.value) { hint = this.context.locale.videoDialog.unknownFormat; }
-      hintEl.textContent = hint;
-    });
-    const d4 = on(urlInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    this._disposers.push(d0, d4);
-
-    return overlay;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Actions
-  // ---------------------------------------------------------------------------
-
-  _onInsert() {
-    const rawUrl = this._urlInput.value.trim();
-    const width  = Math.max(80, Number.parseInt(this._widthInput.value, 10) || 560);
-
-    if (!rawUrl) {
-      this._urlInput.focus();
-      return;
-    }
-
-    const html = this._buildEmbedHtml(rawUrl, width);
-    if (!html) {
-      this._hintEl.textContent = this.context.locale.videoDialog.invalidUrl;
-      this._urlInput.focus();
-      return;
-    }
-
-    if (this._savedRange) this._savedRange.select();
-    this.context.invoke('editor.insertVideo', html);
-    this._close();
-  }
-
-  // ---------------------------------------------------------------------------
-  // URL parsing & HTML building
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Parses a video URL and returns { type, embedUrl } or null.
-   * @param {string} url
-   * @returns {{ type: string, embedUrl: string }|null}
-   */
-  _parseVideoUrl(url) {
-    if (!url) return null;
-    if (!sanitiseUrl(url, { media: true })) return null;
-
-    // YouTube watch: https://www.youtube.com/watch?v=ID
-    const ytWatch = /(?:youtube\.com\/watch\?(?:.*&)?v=|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/.exec(url);
-    if (ytWatch) return { type: 'YouTube', embedUrl: `https://www.youtube.com/embed/${ytWatch[1]}` };
-
-    // YouTube short: https://youtu.be/ID
-    const ytShort = /youtu\.be\/([a-zA-Z0-9_-]{11})/.exec(url);
-    if (ytShort) return { type: 'YouTube', embedUrl: `https://www.youtube.com/embed/${ytShort[1]}` };
-
-    // YouTube Shorts: https://www.youtube.com/shorts/ID
-    const ytShorts = /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/.exec(url);
-    if (ytShorts) return { type: 'YouTube Shorts', embedUrl: `https://www.youtube.com/embed/${ytShorts[1]}` };
-
-    // Vimeo: https://vimeo.com/ID
-    const vimeo = /vimeo\.com\/(\d+)/.exec(url);
-    if (vimeo) return { type: 'Vimeo', embedUrl: `https://player.vimeo.com/video/${vimeo[1]}` };
-
-    // Direct video file
-    if (/\.(mp4|webm|ogg|ogv|mov)(#.*|\?.*)?$/i.test(url)) {
-      return { type: 'Direct video', embedUrl: url };
-    }
-
-    return null;
-  }
-
-  /**
-   * Builds the HTML string to insert.
-   * @param {string} url
-   * @param {number} width
-   * @returns {string|null}
-   */
-  _buildEmbedHtml(url, width) {
-    const info = this._parseVideoUrl(url);
-    const height = Math.round(width * 9 / 16); // 16:9
-
-    if (info && (info.type === 'YouTube' || info.type === 'YouTube Shorts' || info.type === 'Vimeo')) {
-      const iframeTitle = `${info.type} video player`;
-      return (
-        `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
-        `<iframe src="${info.embedUrl}" width="${width}" height="${height}" ` +
-        `title="${iframeTitle}" ` +
-        `frameborder="0" allowfullscreen ` +
-        `allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ` +
-        `style="display:block;max-width:100%"></iframe>` +
-        `<div class="an-video-shield"></div>` +
-        `</div>`
-      );
-    }
-
-    if (info?.type === 'Direct video') {
-      const src = info.embedUrl.replaceAll('"', '%22');
-      return (
-        `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
-        `<video src="${src}" width="${width}" height="${height}" controls ` +
-        `style="display:block;max-width:100%"></video>` +
-        `<div class="an-video-shield"></div>` +
-        `</div>`
-      );
-    }
-
-    // Unknown URL — let the user try as a direct video
-    const safeSrc = sanitiseUrl(url, { media: true });
-    if (!safeSrc) return null;
-
-    const escapedSrc = safeSrc.replaceAll('"', '%22');
-    return (
-      `<div class="an-video-wrapper" style="position:relative;display:block;width:${width}px;max-width:100%">` +
-      `<video src="${escapedSrc}" width="${width}" height="${height}" controls ` +
-      `style="display:block;max-width:100%"></video>` +
-      `<div class="an-video-shield"></div>` +
-      `</div>`
-    );
-  }
-}

package/src/js/module/VideoResizer.js

@@ -1,66 +0,0 @@
-// VideoResizer.js - Interactive resize handles for selected videos in the editor
-// Targets .an-video-wrapper divs (containing <iframe> or <video>)
-import { on } from '../core/dom.js';
-import { BaseResizer } from './BaseResizer.js';
-
-export class VideoResizer extends BaseResizer {
-  get _overlayClass() { return 'an-video-resizer'; }
-  get _selectedClass() { return 'an-video-selected'; }
-
-  /**
-   * Walk up the DOM from `el` to find the nearest .an-video-wrapper,
-   * or an iframe/video whose parent is .an-video-wrapper.
-   * @param {EventTarget|null} el
-   * @returns {HTMLElement|null}
-   */
-  _findTarget(el) {
-    if (!el || !(el instanceof Element)) return null;
-    if (el.classList?.contains('an-video-wrapper')) return /** @type {HTMLElement} */ (el);
-    return /** @type {HTMLElement|null} */ (el.closest('.an-video-wrapper'));
-  }
-
-  /** @param {HTMLElement} wrapper */
-  _getStartSize(wrapper) {
-    return { w: wrapper.offsetWidth || 560, h: wrapper.offsetHeight || 315 };
-  }
-
-  _getMinSize() {
-    return { minW: 80, minH: 45 };
-  }
-
-  /** @param {HTMLElement} wrapper @param {number} w @param {number} h */
-  _applySize(wrapper, w, h) {
-    // Resize wrapper and inner embed via CSS only — attribute writes are redundant
-    wrapper.style.width  = `${w}px`;
-    wrapper.style.height = `${h}px`;
-    const embed = /** @type {HTMLElement|null} */ (wrapper.querySelector('iframe, video'));
-    if (embed) {
-      embed.style.width  = `${w}px`;
-      embed.style.height = `${h}px`;
-    }
-  }
-
-  _extraListeners() {
-    const editable = this.context.layoutInfo.editable;
-    return [
-      // D1: Prevent native browser drag of video wrappers. Without this, a user
-      // can hold-and-drag to produce a "copy" that lands outside .an-editable,
-      // where the .an-video-shield CSS loses its containing context so the
-      // copied video becomes directly playable.
-      on(editable, 'dragstart', (e) => {
-        if (e.target instanceof Element && e.target.closest('.an-video-wrapper')) {
-          e.preventDefault();
-        }
-      }),
-    ];
-  }
-
-  // ---------------------------------------------------------------------------
-  // Public API used by other modules
-  // ---------------------------------------------------------------------------
-
-  /** @returns {HTMLElement|null} */
-  getActiveWrapper() {
-    return this._active;
-  }
-}

package/src/js/module/VideoTooltip.js

@@ -1,248 +0,0 @@
-// VideoTooltip.js - Hover tooltip for video wrappers inside the editor
-// Displays a horizontal action bar below (or above) the selected video,
-// similar in appearance and interaction to LinkTooltip.
-import { createElement, on } from '../core/dom.js';
-import { BaseMediaTooltip } from './BaseMediaTooltip.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>`,
-  deleteVideo: `<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>`,
-  preview:     `<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"><polygon points="5 3 19 12 5 21 5 3"/></svg>`,
-};
-
-export class VideoTooltip extends BaseMediaTooltip {
-  initialize() {
-    this._el = this._buildTooltip();
-    document.body.appendChild(this._el);
-
-    const editable = this.context.layoutInfo.editable;
-
-    this._disposers.push(
-      on(editable, 'mouseover', (e) => {
-        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        // The shield div sits on top of iframes — we detect hover via it or the wrapper
-        const target = /** @type {Element} */ (e.target);
-        const wrapper = target?.closest('.an-video-wrapper');
-        if (wrapper && editable.contains(wrapper)) {
-          this._scheduleShow(wrapper);
-        }
-      }, { passive: true }),
-      on(editable, 'mouseout', (e) => {
-        const to = /** @type {MouseEvent} */ (e).relatedTarget;
-        if (!to || (!editable.contains(/** @type {Node} */ (to)) && !this._el.contains(/** @type {Node} */ (to)))) {
-          this._scheduleHide();
-        }
-      }, { passive: true }),
-      on(document, 'click', (e) => {
-        const target = /** @type {Node} */ (e.target);
-        if (
-          this._active &&
-          !this._active.contains(target) &&
-          !this._el.contains(target)
-        ) {
-          this._hide();
-        }
-      }),
-      // 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() {
-    if (this._previewMode) this._exitPreview();
-    this._clearTimers();
-    this._disposers.forEach((d) => d());
-    this._disposers = [];
-    this._el?.remove();
-    this._el = null;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Base hooks — keep the bar pinned while a preview is playing
-  // ---------------------------------------------------------------------------
-
-  /** @returns {boolean} */
-  _canHide() { return !this._previewMode; }
-
-  _beforeHide() {
-    if (this._previewMode) this._exitPreview();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Build
-  // ---------------------------------------------------------------------------
-
-  _buildTooltip() {
-    const L = this.context.locale.tooltips.video;
-    const el = createElement('div', {
-      class: 'an-link-tooltip an-video-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(createElement('div', { class: 'an-link-tooltip-sep' }));
-
-    this._floatLeftBtn  = this._makeBtn(ICONS.floatLeft,    L.floatLeft,    () => this._setFloat('left'));
-    this._floatNoneBtn  = this._makeBtn(ICONS.floatNone,    L.noFloat,      () => this._setFloat(''));
-    this._alignCenterBtn = this._makeBtn(ICONS.alignCenter, L.alignCenter,  () => this._setCenter());
-    this._floatRightBtn = this._makeBtn(ICONS.floatRight,   L.floatRight,   () => 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, L.originalSize, () => this._resetSize());
-
-    el.appendChild(this._originalBtn);
-
-    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
-
-    this._previewBtn = this._makeBtn(ICONS.preview, L.previewVideo, () => this._togglePreview());
-    el.appendChild(this._previewBtn);
-
-    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
-
-    this._deleteBtn = this._makeBtn(ICONS.deleteVideo, L.deleteVideo, () => 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;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Actions
-  // ---------------------------------------------------------------------------
-
-  _setFloat(value) {
-    const wrapper = this._active;
-    if (!wrapper) return;
-    wrapper.style.float        = value;
-    wrapper.style.display      = value ? 'inline-block' : '';
-    wrapper.style.marginLeft   = value === 'right' ? '12px' : '';
-    wrapper.style.marginRight  = value === 'left'  ? '12px' : '';
-    this.context.invoke('editor.afterCommand');
-    this.context.invoke('videoResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
-  }
-
-  _setCenter() {
-    const wrapper = this._active;
-    if (!wrapper) return;
-    wrapper.style.float       = '';
-    wrapper.style.display     = 'block';
-    wrapper.style.marginLeft  = 'auto';
-    wrapper.style.marginRight = 'auto';
-    this.context.invoke('editor.afterCommand');
-    this.context.invoke('videoResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
-  }
-
-  _resetSize() {
-    const wrapper = this._active;
-    if (!wrapper) return;
-    const embed = /** @type {HTMLElement|null} */ (wrapper.querySelector('iframe, video'));
-    wrapper.style.width  = '';
-    wrapper.style.height = '';
-    if (embed) {
-      embed.removeAttribute('width');
-      embed.removeAttribute('height');
-      embed.style.width  = '';
-      embed.style.height = '';
-    }
-    this.context.invoke('editor.afterCommand');
-    this.context.invoke('videoResizer.updateOverlay');
-    requestAnimationFrame(() => { if (this._active) this._positionNear(this._active); });
-  }
-
-  _delete() {
-    const wrapper = this._active;
-    if (!wrapper) return;
-    this._hide();
-    this.context.invoke('videoResizer.deselect');
-    wrapper.remove();
-    this.context.invoke('editor.afterCommand');
-  }
-
-  // ---------------------------------------------------------------------------
-  // Preview mode — temporarily disables the shield so the video is interactive
-  // ---------------------------------------------------------------------------
-
-  _togglePreview() {
-    if (this._previewMode) {
-      this._exitPreview();
-    } else {
-      this._enterPreview();
-    }
-  }
-
-  _enterPreview() {
-    const wrapper = this._active;
-    if (!wrapper) return;
-    this._previewMode = true;
-
-    // Hide the shield so the iframe / video receives pointer events directly
-    const shield = /** @type {HTMLElement|null} */ (wrapper.querySelector('.an-video-shield'));
-    if (shield) shield.style.display = 'none';
-
-    // Hide the resize overlay — it would block interaction with the embed
-    this.context.invoke('videoResizer.deselect');
-
-    // Visual feedback: button turns primary-coloured
-    this._previewBtn.classList.add('an-link-tooltip-btn--copied');
-    this._previewBtn.title = this.context.locale.tooltips.video.exitPreview;
-
-    // Exit preview on mousedown outside the wrapper.
-    // Using 'mousedown' (not 'click') so clicks inside an iframe
-    // — which never bubble to the outer document — don't accidentally
-    // leave preview mode stuck. For <video> elements, mousedown on the
-    // video is inside the wrapper so contains() returns true → no exit.
-    this._previewClickOff = (e) => {
-      if (!wrapper.contains(e.target) && !this._el.contains(e.target)) {
-        this._exitPreview();
-      }
-    };
-    document.addEventListener('mousedown', this._previewClickOff, true);
-  }
-
-  _exitPreview() {
-    this._previewMode = false;
-
-    const wrapper = this._active;
-    if (wrapper) {
-      // Restore the shield
-      const shield = /** @type {HTMLElement|null} */ (wrapper.querySelector('.an-video-shield'));
-      if (shield) shield.style.display = '';
-    }
-
-    // Reset button appearance
-    this._previewBtn.classList.remove('an-link-tooltip-btn--copied');
-    this._previewBtn.title = this.context.locale.tooltips.video.previewVideo;
-
-    if (this._previewClickOff) {
-      document.removeEventListener('mousedown', this._previewClickOff, true);
-      this._previewClickOff = null;
-    }
-  }
-}