autumnnote 2.1.0 → 2.3.0

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);
-  }
-}