autumnnote 2.0.0 → 2.2.0

package/src/js/core/range.js

@@ -1,194 +0,0 @@
-/**
- * range.js - Selection and Range utilities
- * Inspired by Summernote's range.js — rewritten as vanilla JS
- */
-
-import { isElement, closest } from './dom.js';
-
-// ---------------------------------------------------------------------------
-// WrappedRange — a convenience wrapper over the native Range API
-// ---------------------------------------------------------------------------
-
-export class WrappedRange {
-  /**
-   * @param {Node} sc - start container
-   * @param {number} so - start offset
-   * @param {Node} ec - end container
-   * @param {number} eo - end offset
-   */
-  constructor(sc, so, ec, eo) {
-    this.sc = sc;
-    this.so = so;
-    this.ec = ec;
-    this.eo = eo;
-  }
-
-  /** @returns {boolean} */
-  isCollapsed() {
-    return this.sc === this.ec && this.so === this.eo;
-  }
-
-  /** @returns {Range} */
-  toNativeRange() {
-    const range = document.createRange();
-    try {
-      range.setStart(this.sc, this.so);
-      range.setEnd(this.ec, this.eo);
-    } catch (_e) {
-      void _e; // guard against detached nodes
-    }
-    return range;
-  }
-
-  /**
-   * Select this wrapped range in the globalThis.
-   */
-  select() {
-    const sel = globalThis.getSelection();
-    if (!sel) return;
-    sel.removeAllRanges();
-    sel.addRange(this.toNativeRange());
-  }
-
-  /**
-   * Returns the common ancestor element of this range.
-   * @returns {Element|null}
-   */
-  commonAncestor() {
-    const native = this.toNativeRange();
-    const ancestor = native.commonAncestorContainer;
-    return /** @type {Element|null} */ (isElement(ancestor) ? ancestor : ancestor.parentElement);
-  }
-
-  /**
-   * Returns the nearest paragraph/block ancestor within the editable area.
-   * @param {HTMLElement} editable
-   * @returns {Element|null}
-   */
-  blockNode(editable) {
-    return /** @type {Element|null} */ (closest(this.sc, (n) => isElement(n) && n !== editable, editable));
-  }
-
-  /**
-   * Returns either the selected text string or empty string.
-   * @returns {string}
-   */
-  toString() {
-    return this.toNativeRange().toString();
-  }
-
-  /**
-   * Returns the bounding DOMRect of the range (or null).
-   * @returns {DOMRect|null}
-   */
-  getClientRects() {
-    const rects = this.toNativeRange().getClientRects();
-    return rects.length > 0 ? rects[rects.length - 1] : null;
-  }
-
-  /**
-   * Inserts a node at the start of this range.
-   * @param {Node} node
-   */
-  insertNode(node) {
-    const native = this.toNativeRange();
-    native.insertNode(node);
-  }
-
-}
-
-// ---------------------------------------------------------------------------
-// Factory helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Creates a WrappedRange from a native Range object.
- * @param {Range} range
- * @returns {WrappedRange}
- */
-export function fromNativeRange(range) {
-  return new WrappedRange(
-    range.startContainer,
-    range.startOffset,
-    range.endContainer,
-    range.endOffset,
-  );
-}
-
-/**
- * Returns a WrappedRange for the current globalThis selection,
- * optionally restricted to a given editable element.
- * @param {HTMLElement} [editable]
- * @returns {WrappedRange|null}
- */
-export function currentRange(editable) {
-  const sel = globalThis.getSelection();
-  if (!sel || sel.rangeCount === 0) return null;
-  const native = sel.getRangeAt(0);
-  // Optionally check that the selection is inside the editable element
-  if (editable && !editable.contains(native.commonAncestorContainer)) {
-    return null;
-  }
-  return fromNativeRange(native);
-}
-
-/**
- * Creates a WrappedRange that covers the entire content of an element.
- * @param {HTMLElement} el
- * @returns {WrappedRange}
- */
-export function rangeFromElement(el) {
-  return new WrappedRange(el, 0, el, el.childNodes.length);
-}
-
-/**
- * Creates a collapsed range (cursor) at the given node / offset.
- * @param {Node} node
- * @param {number} offset
- * @returns {WrappedRange}
- */
-export function collapsedRange(node, offset = 0) {
-  return new WrappedRange(node, offset, node, offset);
-}
-
-// ---------------------------------------------------------------------------
-// Utility helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Returns true if the current selection is inside the given element.
- * @param {HTMLElement} el
- * @returns {boolean}
- */
-export function isSelectionInside(el) {
-  const sel = globalThis.getSelection();
-  if (!sel || sel.rangeCount === 0) return false;
-  return el.contains(sel.getRangeAt(0).commonAncestorContainer);
-}
-
-/**
- * Saves the current selection, executes fn, then restores the selection.
- * @param {Function} fn
- */
-export function withSavedRange(fn) {
-  const sel = globalThis.getSelection();
-  if (!sel || sel.rangeCount === 0) {
-    fn(null);
-    return;
-  }
-  const saved = sel.getRangeAt(0).cloneRange();
-  fn(fromNativeRange(saved));
-  sel.removeAllRanges();
-  sel.addRange(saved);
-}
-
-/**
- * Splits the text node at the given offset and returns the two halves.
- * @param {Text} textNode
- * @param {number} offset
- * @returns {[Text, Text]}
- */
-export function splitText(textNode, offset) {
-  const after = textNode.splitText(offset);
-  return [textNode, after];
-}

package/src/js/core/sanitise.js

@@ -1,231 +0,0 @@
-/**
- * sanitise.js - Shared HTML and URL sanitisation utilities
- *
- * Single source of truth used by Editor, Clipboard, Codeview, and renderer.
- * DOM-parser based — no regex-based stripping of HTML (avoids bypass tricks).
- */
-
-/** Tags that are unconditionally removed from editor content. */
-const PROHIBITED_TAGS = ['script', 'style', 'iframe', 'object', 'embed', 'form', 'base', 'template', 'link', 'meta', 'noscript', 'portal', 'frame', 'frameset', 'applet'];
-
-/** Tags whose element wrapper is stripped but content (child nodes) is preserved. */
-const UNWRAP_TAGS = new Set(['button']);
-
-/** Attributes whose values must be sanitised as URLs. */
-const URL_ATTRS = ['href', 'src', 'action', 'formaction', 'xlink:href'];
-
-/** Inline style properties the editor's own toolbar/table features persist on saved content. */
-const ALLOWED_STYLE_PROPS = new Set([
-  'color', 'background-color', 'font-size', 'line-height',
-  'text-align', 'vertical-align',
-  'width', 'min-width', 'height', 'min-height',
-  'border-width', 'border-style', 'border-color', 'padding',
-]);
-
-/** Value patterns that are never safe regardless of property. */
-const DANGEROUS_STYLE_VALUE_RE = /url\s*\(|expression\s*\(|@import|javascript:|vbscript:|behavior\s*:|-moz-binding/i;
-
-/** Trusted hosts for iframe embeds when allowIframes is enabled. */
-const TRUSTED_IFRAME_HOSTS = new Set([
-  'www.youtube.com',
-  'youtube.com',
-  'm.youtube.com',
-  'www.youtube-nocookie.com',
-  'youtube-nocookie.com',
-  'player.vimeo.com',
-]);
-
-const SAFE_LINK_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']);
-const SAFE_MEDIA_PROTOCOLS = new Set(['http:', 'https:', 'blob:']);
-const SAFE_RASTER_DATA_RE = /^data:image\/(?:png|jpe?g|gif|webp|avif|bmp);base64,[a-z0-9+/=\s]+$/i;
-const URL_BASE = 'https://autumnnote.invalid/';
-
-/**
- * Produce a sanitized HTML string with dangerous elements and attributes removed.
- *
- * Removes disallowed tags and wrappers, strips event-handler attributes, rejects
- * `javascript:`/`vbscript:` URLs and most `data:` URIs, restricts iframe `src`
- * to trusted hosts when enabled, and permits only checklist checkboxes as inputs.
- *
- * @param {string} html - HTML fragment to sanitize.
- * @param {Object} [options]
- * @param {boolean} [options.allowIframes=false] - If true, `iframe` elements are not removed but their `src` is restricted to trusted hosts and `srcdoc` is removed.
- * @returns {string} The sanitized HTML fragment.
- */
-export function sanitiseHTML(html, { allowIframes = false } = {}) {
-  const doc = new DOMParser().parseFromString(`<body>${html || ''}</body>`, 'text/html');
-
-  // Single querySelectorAll pass — collect all elements once to avoid
-  // repeated full-tree traversals for each category of check.
-  const allElements = Array.from(doc.querySelectorAll('*'));
-
-  // Build the prohibited tag set for fast O(1) lookup
-  const prohibited = new Set(
-    allowIframes ? PROHIBITED_TAGS.filter((t) => t !== 'iframe') : PROHIBITED_TAGS,
-  );
-
-  for (const el of allElements) {
-    const tag = el.tagName.toLowerCase();
-
-    // Unwrap elements whose wrapper is unsafe but whose content should be kept
-    if (UNWRAP_TAGS.has(tag)) {
-      el.replaceWith(...el.childNodes);
-      continue;
-    }
-
-    // Remove outright dangerous elements
-    if (prohibited.has(tag)) {
-      el.remove();
-      continue;
-    }
-
-    // Invalid embeds are removed rather than retained as empty iframes.
-    if (tag === 'iframe') {
-      const src = el.getAttribute('src');
-      if (!src || !isTrustedIframeSrc(src)) {
-        el.remove();
-        continue;
-      }
-    }
-
-    // Strip dangerous attributes
-    for (const attr of Array.from(el.attributes)) {
-      // Remove all event handlers (onclick, onload, onerror, …)
-      if (attr.name.startsWith('on')) {
-        el.removeAttribute(attr.name);
-        continue;
-      }
-      // Filter the style attribute down to an allowlisted set of safe
-      // properties (see ALLOWED_STYLE_PROPS) — not a blanket strip, since
-      // the editor's own toolbar/table features persist inline styles
-      // (text color/highlight, font size, line height, table alignment/
-      // sizing/borders) that must survive sanitisation.
-      if (attr.name === 'style') {
-        const cleaned = sanitiseStyleValue(attr.value);
-        if (cleaned) el.setAttribute('style', cleaned);
-        else el.removeAttribute('style');
-        continue;
-      }
-      // Sanitise URL attributes
-      if (URL_ATTRS.includes(attr.name)) {
-        const val = attr.value.trim();
-        const isMediaSource = attr.name === 'src' &&
-          ['IMG', 'VIDEO', 'AUDIO', 'SOURCE'].includes(el.tagName);
-        if (!isSafeUrl(val, { media: isMediaSource, allowData: el.tagName === 'IMG' })) {
-          el.removeAttribute(attr.name);
-          continue;
-        }
-      }
-      // Strip iframe HTML-injection vectors; limit src to trusted hosts
-      if (el.tagName === 'IFRAME') {
-        if (attr.name === 'srcdoc') {
-          el.removeAttribute(attr.name);
-          continue;
-        }
-        if (attr.name === 'src' && !isTrustedIframeSrc(attr.value)) {
-          el.removeAttribute(attr.name);
-        }
-      }
-    }
-
-    if (tag === 'a' && el.getAttribute('target') === '_blank') {
-      el.setAttribute('rel', 'noopener noreferrer');
-    }
-
-    // Allow only input[type="checkbox"] inside ul.an-checklist li
-    if (tag === 'input') {
-      const inChecklist = el.closest('ul.an-checklist') !== null &&
-                          el.closest('li') !== null;
-      if (!inChecklist || el.getAttribute('type') !== 'checkbox') {
-        el.remove();
-      } else {
-        for (const attr of Array.from(el.attributes)) {
-          if (!['type', 'checked', 'contenteditable'].includes(attr.name)) {
-            el.removeAttribute(attr.name);
-          }
-        }
-      }
-    }
-  }
-
-  return doc.body.innerHTML;
-}
-
-/**
- * Filters a style attribute value down to an allowlisted set of CSS
- * properties (ALLOWED_STYLE_PROPS), dropping any declaration whose value
- * contains a dangerous construct — url(), expression(), an "import" rule,
- * javascript:/vbscript:, IE behavior/-moz-binding — regardless of property.
- * @param {string} value
- * @returns {string} The filtered declaration list, or '' if nothing survives.
- */
-function sanitiseStyleValue(value) {
-  const kept = [];
-  for (const decl of (value || '').split(';')) {
-    const idx = decl.indexOf(':');
-    if (idx === -1) continue;
-    const prop = decl.slice(0, idx).trim().toLowerCase();
-    const val = decl.slice(idx + 1).trim();
-    if (!prop || !val) continue;
-    if (!ALLOWED_STYLE_PROPS.has(prop)) continue;
-    if (DANGEROUS_STYLE_VALUE_RE.test(val)) continue;
-    kept.push(`${prop}: ${val}`);
-  }
-  return kept.join('; ');
-}
-
-/**
- * Returns true if iframe src points to an approved video host.
- * Relative, protocol-relative and invalid URLs are rejected.
- * @param {string} src
- * @returns {boolean}
- */
-function isTrustedIframeSrc(src) {
-  const trimmed = (src || '').trim();
-  if (!trimmed) return false;
-  if (trimmed.startsWith('//') || trimmed.startsWith('/')) return false;
-  try {
-    const url = new URL(trimmed);
-    if (url.protocol !== 'https:') return false;
-    return TRUSTED_IFRAME_HOSTS.has(url.hostname.toLowerCase());
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Sanitises a URL string, rejecting dangerous protocols.
- *
- * Blocked protocols: javascript:, vbscript:
- * Optionally blocked: data: (safe to allow for img/src base64 embeds)
- *
- * @param {string} url
- * @param {{ allowData?: boolean, media?: boolean }} [opts]
- * @returns {string|null} The original URL if safe, null if rejected.
- */
-export function sanitiseUrl(url, { allowData = false, media = allowData } = {}) {
-  const trimmed = (url || '').trim();
-  if (!trimmed && url == null) return null;
-  return isSafeUrl(trimmed, { media, allowData }) ? url : null;
-}
-
-/**
- * Validate a URL using the browser URL parser so ASCII whitespace/control
- * characters cannot disguise a dangerous protocol (for example java\nscript:).
- * @param {string} value
- * @param {{media?: boolean, allowData?: boolean}} [options]
- * @returns {boolean}
- */
-function isSafeUrl(value, { media = false, allowData = false } = {}) {
-  const trimmed = (value || '').trim();
-  if (!trimmed) return true;
-  if (allowData && SAFE_RASTER_DATA_RE.test(trimmed)) return true;
-
-  try {
-    const parsed = new URL(trimmed, URL_BASE);
-    const protocols = media ? SAFE_MEDIA_PROTOCOLS : SAFE_LINK_PROTOCOLS;
-    return protocols.has(parsed.protocol);
-  } catch {
-    return false;
-  }
-}

package/src/js/editing/History.js

@@ -1,266 +0,0 @@
-/**
- * History.js - Undo / redo stack for editor content
- * Inspired by Summernote's History module, rewritten without jQuery
- */
-
-export class History {
-  /**
-   * @param {HTMLElement} editable - the contenteditable element
-   * @param {number} [limit=100] - maximum number of undo/redo states
-   * @param {number} [maxBytes=10485760] - maximum combined size (chars) of all
-   *   stacked snapshots (html + tokenized image data). Oldest states are
-   *   evicted first when exceeded, even if `limit` hasn't been reached —
-   *   documents with many large embedded images can otherwise hold dozens of
-   *   full-size copies in memory despite the step-count limit.
-   */
-  constructor(editable, limit = 100, maxBytes = 10 * 1024 * 1024) {
-    this.editable = editable;
-    this._limit = limit;
-    this._maxBytes = maxBytes;
-    this._bytes = 0;
-    /** @type {Array<{html: string, images?: Record<string,string>, sel: {start: number, end: number}|null}>} */
-    this.stack = [];
-    this.stackOffset = -1;
-    this._savePoint();
-  }
-
-  /**
-   * Approximate in-memory size (chars) of one stacked snapshot: the tokenized
-   * HTML string plus every image data URL it references.
-   * @param {{html: string, images?: Record<string,string>}} entry
-   * @returns {number}
-   */
-  _entrySize(entry) {
-    let size = entry.html.length;
-    if (entry.images) {
-      for (const key in entry.images) size += entry.images[key].length;
-    }
-    return size;
-  }
-
-  // ---------------------------------------------------------------------------
-  // Private helpers
-  // ---------------------------------------------------------------------------
-
-  _serialize() {
-    return this.editable.innerHTML;
-  }
-
-  /**
-   * Serializes the current selection as character offsets from the start of
-   * the editable element, so it can be restored after innerHTML replacement.
-   * @returns {{ start: number, end: number }|null}
-   */
-  _serializeSelection() {
-    const sel = globalThis.getSelection();
-    if (!sel || sel.rangeCount === 0) return null;
-    const range = sel.getRangeAt(0);
-    if (!this.editable.contains(range.startContainer)) return null;
-    return {
-      start: this._charOffset(range.startContainer, range.startOffset),
-      end: this._charOffset(range.endContainer, range.endOffset),
-    };
-  }
-
-  /**
-   * Returns the character offset of (node, offset) from the beginning of
-   * the editable's text content.
-   * @param {Node} node
-   * @param {number} offset
-   * @returns {number}
-   */
-  _charOffset(node, offset) {
-    let count = 0;
-    const walker = document.createTreeWalker(this.editable, NodeFilter.SHOW_TEXT, null);
-    let cur;
-    while ((cur = walker.nextNode())) {
-      if (cur === node) return count + offset;
-      count += /** @type {Text} */ (cur).length;
-    }
-    return 0;
-  }
-
-  /**
-   * Restores a previously serialized selection inside the editable.
-   * @param {{ start: number, end: number }|null} saved
-   */
-  _restoreSelection(saved) {
-    if (!saved) return;
-    let startNode = null, startOff = 0;
-    let endNode = null, endOff = 0;
-    let count = 0;
-    const walker = document.createTreeWalker(this.editable, NodeFilter.SHOW_TEXT, null);
-    let cur;
-    while ((cur = walker.nextNode())) {
-      const len = /** @type {Text} */ (cur).length;
-      if (!startNode && count + len >= saved.start) {
-        startNode = cur;
-        startOff = saved.start - count;
-      }
-      if (!endNode && count + len >= saved.end) {
-        endNode = cur;
-        endOff = saved.end - count;
-        break;
-      }
-      count += len;
-    }
-    if (!startNode) {
-      // Offset exceeds content (e.g. undo to a shorter state): place at end
-      const lastWalker = document.createTreeWalker(this.editable, NodeFilter.SHOW_TEXT, null);
-      let lastNode = null;
-      while ((lastNode = lastWalker.nextNode())) { startNode = lastNode; }
-      startOff = startNode ? /** @type {Text} */ (startNode).length : 0;
-      endNode = startNode;
-      endOff = startOff;
-    }
-    if (!endNode) { endNode = startNode; endOff = startOff; }
-    try {
-      const range = document.createRange();
-      range.setStart(startNode, startOff);
-      range.setEnd(endNode, endOff);
-      const sel = globalThis.getSelection();
-      sel.removeAllRanges();
-      sel.addRange(range);
-    } catch (_) {
-      void _; // detached node — fall back to placing cursor at start of editable
-      try {
-        const fb = document.createRange();
-        fb.setStart(this.editable, 0);
-        fb.collapse(true);
-        const s = globalThis.getSelection();
-        if (s) { s.removeAllRanges(); s.addRange(fb); }
-      } catch (_2) { void _2; /* fully give up */ }
-    }
-  }
-
-  _savePoint() {
-    // Trim future history if we're mid-stack
-    if (this.stackOffset < this.stack.length - 1) {
-      for (const entry of this.stack.slice(this.stackOffset + 1)) {
-        this._bytes -= this._entrySize(entry);
-      }
-      this.stack = this.stack.slice(0, this.stackOffset + 1);
-    }
-    const raw = this._serialize();
-    const { html, images } = this._tokenizeImages(raw);
-    const entry = { html, images, sel: this._serializeSelection() };
-    this.stack.push(entry);
-    this._bytes += this._entrySize(entry);
-
-    // Evict oldest states first, whichever budget (step count or byte size)
-    // is exceeded — always keep at least the just-pushed current state.
-    while (this.stack.length > 1 && (this.stack.length > this._limit || this._bytes > this._maxBytes)) {
-      this._bytes -= this._entrySize(this.stack.shift());
-    }
-    // The newly-pushed current state is always the final entry. Recompute the
-    // offset from the resulting stack instead of incrementing conditionally:
-    // a single oversized snapshot may evict several older entries at once.
-    this.stackOffset = this.stack.length - 1;
-  }
-
-  _restore(point) {
-    if (!point) return;
-    this.editable.innerHTML = this._detokenizeImages(point);
-    this._restoreSelection(point.sel);
-  }
-
-  // ---------------------------------------------------------------------------
-  // Base64 tokenisation — keeps snapshot strings small so that the
-  // per-keystroke `recordUndo` string comparison stays fast even when the
-  // editor contains large embedded images.
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Replaces every `data:…;base64,…` occurrence in `html` with a compact
-   * token `__asn_img_0__`, `__asn_img_1__`, … and returns the tokenized
-   * string together with a map from token → original data URL.
-   * @param {string} html
-   * @returns {{ html: string, images: Object<string,string> }}
-   */
-  _tokenizeImages(html) {
-    // Fast-path: skip regex entirely when there are no data URIs (common case)
-    if (!html.includes('data:')) return { html, images: /** @type {Record<string,string>} */ ({}) };
-    const images = /** @type {Record<string,string>} */ ({});
-    let index = 0;
-    const tokenized = html.replace(/data:[^;]+;base64,[^"' >]*/g, (match) => {
-      const token = `__asn_img_${index}__`;
-      images[token] = match;
-      index++;
-      return token;
-    });
-    return { html: tokenized, images };
-  }
-
-  /**
-   * Restores a snapshot by replacing tokens back with their data URLs.
-   * @param {{ html: string, images: Object<string,string> }} point
-   * @returns {string}
-   */
-  _detokenizeImages(point) {
-    if (!point.images || Object.keys(point.images).length === 0) return point.html;
-    return point.html.replace(/__asn_img_\d+__/g, (token) => point.images[token] || token);
-  }
-
-  // ---------------------------------------------------------------------------
-  // Public API
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Records the current editor state as a history checkpoint.
-   */
-  recordUndo() {
-    const current = this._serialize();
-    const { html: tokenized } = this._tokenizeImages(current);
-    const prev = this.stack[this.stackOffset];
-    if (prev?.html === tokenized) return; // No change
-    this._savePoint();
-  }
-
-  /**
-   * Undo to the previous state.
-   */
-  undo() {
-    if (this.stackOffset <= 0) return;
-    this.stackOffset--;
-    this._restore(this.stack[this.stackOffset]);
-  }
-
-  /**
-   * Redo to the next state.
-   */
-  redo() {
-    if (this.stackOffset >= this.stack.length - 1) return;
-    this.stackOffset++;
-    this._restore(this.stack[this.stackOffset]);
-  }
-
-  /**
-   * Resets the history stack (e.g. on editor destroy or full content replace).
-   */
-  reset() {
-    this.stack = [];
-    this.stackOffset = -1;
-    this._bytes = 0;
-    this._savePoint();
-  }
-
-  /** @returns {boolean} */
-  canUndo() {
-    return this.stackOffset > 0;
-  }
-
-  /** @returns {boolean} */
-  canRedo() {
-    return this.stackOffset < this.stack.length - 1;
-  }
-
-  /** @returns {number} */
-  getUndoCount() {
-    return Math.max(0, this.stackOffset);
-  }
-
-  /** @returns {number} */
-  getRedoCount() {
-    return Math.max(0, this.stack.length - 1 - this.stackOffset);
-  }
-}