@oix1987/yjd 1.0.3 → 2.1.0

package/lib/modules/find-replace.js

@@ -0,0 +1,273 @@
+import Module from '../core/module.js';
+import IconUtils from '../ui/icons.js';
+
+/**
+ * Find & Replace module.
+ *
+ * Opens with Ctrl/Cmd+F or the toolbar "find" button. Highlights matches
+ * (wrapping them in <mark> within single text nodes), supports next/prev
+ * navigation, replace-current and replace-all. Matches that span across
+ * formatting boundaries (e.g. half inside a <b>) are not highlighted — a
+ * documented limitation of the per-text-node approach.
+ */
+export default class FindReplace extends Module {
+  constructor(editor, options = {}) {
+    super(editor, options);
+    this.hits = [];
+    this.activeIndex = -1;
+    this.caseSensitive = false;
+    this.isOpen = false;
+    this.buildPanel();
+    this.bindEvents();
+  }
+
+  buildPanel() {
+    const panel = document.createElement('div');
+    panel.className = 'yjd-find-replace';
+
+    const mkInput = (ph, cls) => {
+      const i = document.createElement('input');
+      i.type = 'text';
+      i.placeholder = ph;
+      i.className = `yjd-find-input ${cls}`;
+      i.setAttribute('aria-label', ph);
+      return i;
+    };
+    const mkBtn = (label, title, cls = '', icon = null) => {
+      const b = document.createElement('button');
+      b.type = 'button';
+      if (icon) {
+        const svg = IconUtils.getIcon(icon);
+        b.innerHTML = svg ? `<span class="icon">${svg}</span>` : label;
+      } else {
+        b.textContent = label;
+      }
+      b.title = title;
+      b.setAttribute('aria-label', title);
+      b.className = `yjd-find-btn ${cls}`.trim();
+      return b;
+    };
+
+    // Two rows: find controls, then replace controls
+    const findRow = document.createElement('div');
+    findRow.className = 'yjd-find-row';
+    const replaceRow = document.createElement('div');
+    replaceRow.className = 'yjd-find-row';
+
+    this.findInput = mkInput('Find', 'yjd-find-field');
+    this.replaceInput = mkInput('Replace with', 'yjd-find-field');
+    this.countEl = document.createElement('span');
+    this.countEl.className = 'yjd-find-count';
+    this.countEl.textContent = '0/0';
+
+    this.prevBtn = mkBtn('', 'Previous match', 'yjd-find-icon', 'chevron-up');
+    this.nextBtn = mkBtn('', 'Next match', 'yjd-find-icon', 'chevron-down');
+    this.caseBtn = mkBtn('Aa', 'Match case', 'yjd-find-icon yjd-find-toggle');
+    this.closeBtn = mkBtn('', 'Close (Esc)', 'yjd-find-icon yjd-find-close', 'close');
+    this.replaceBtn = mkBtn('Replace', 'Replace current');
+    this.replaceAllBtn = mkBtn('Replace all', 'Replace all matches');
+
+    findRow.append(this.findInput, this.countEl, this.prevBtn, this.nextBtn, this.caseBtn, this.closeBtn);
+    replaceRow.append(this.replaceInput, this.replaceBtn, this.replaceAllBtn);
+    panel.append(findRow, replaceRow);
+
+    this.panel = panel;
+    this.editor.wrapper.appendChild(panel);
+  }
+
+  bindEvents() {
+    // Open with Ctrl/Cmd+F from within the editor
+    this._onKeydown = (e) => {
+      if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'f') {
+        e.preventDefault();
+        this.open();
+      }
+    };
+    this.editor.editor.addEventListener('keydown', this._onKeydown);
+
+    // Open from the toolbar "find" button
+    this._onToolbarClick = (data) => {
+      if (data && data.command === 'find') this.open();
+    };
+    this.editor.on('toolbar-click', this._onToolbarClick);
+
+    this.findInput.addEventListener('input', () => this.runSearch());
+    this.findInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.preventDefault(); this.navigate(e.shiftKey ? -1 : 1); }
+      else if (e.key === 'Escape') { e.preventDefault(); this.close(); }
+    });
+    this.replaceInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.preventDefault(); this.replaceCurrent(); }
+      else if (e.key === 'Escape') { e.preventDefault(); this.close(); }
+    });
+    this.prevBtn.addEventListener('click', () => this.navigate(-1));
+    this.nextBtn.addEventListener('click', () => this.navigate(1));
+    this.replaceBtn.addEventListener('click', () => this.replaceCurrent());
+    this.replaceAllBtn.addEventListener('click', () => this.replaceAll());
+    this.caseBtn.addEventListener('click', () => {
+      this.caseSensitive = !this.caseSensitive;
+      this.caseBtn.classList.toggle('active', this.caseSensitive);
+      this.caseBtn.setAttribute('aria-pressed', this.caseSensitive ? 'true' : 'false');
+      this.runSearch();
+    });
+    this.closeBtn.addEventListener('click', () => this.close());
+  }
+
+  open() {
+    this.isOpen = true;
+    this.panel.classList.add('open');
+    // Sit just below the toolbar so the panel never covers its buttons
+    // (the toolbar height changes when "More" is expanded).
+    const toolbar = this.editor.wrapper.querySelector('.rich-editor-toolbar-container');
+    if (toolbar) this.panel.style.top = (toolbar.offsetHeight + 6) + 'px';
+    // Prefill with the current selection (if any, single-line)
+    const sel = window.getSelection();
+    const selText = sel && !sel.isCollapsed ? sel.toString() : '';
+    if (selText && !selText.includes('\n')) this.findInput.value = selText;
+    this.findInput.focus();
+    this.findInput.select();
+    this.runSearch();
+  }
+
+  close() {
+    this.isOpen = false;
+    this.panel.classList.remove('open');
+    this.clearHighlights();
+    this.hits = [];
+    this.activeIndex = -1;
+    this.editor.focus();
+  }
+
+  escapeRegex(s) {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  clearHighlights() {
+    const marks = this.editor.editor.querySelectorAll('mark.yjd-find-hit');
+    marks.forEach((m) => {
+      const parent = m.parentNode;
+      if (!parent) return;
+      while (m.firstChild) parent.insertBefore(m.firstChild, m);
+      parent.removeChild(m);
+      parent.normalize();
+    });
+  }
+
+  runSearch() {
+    this.clearHighlights();
+    this.hits = [];
+    this.activeIndex = -1;
+
+    const term = this.findInput.value;
+    if (!term) { this.updateCount(); return; }
+
+    let regex;
+    try {
+      regex = new RegExp(this.escapeRegex(term), this.caseSensitive ? 'g' : 'gi');
+    } catch (e) {
+      this.updateCount();
+      return;
+    }
+
+    const root = this.editor.editor;
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+    const textNodes = [];
+    let node;
+    while ((node = walker.nextNode())) {
+      if (node.nodeValue && node.nodeValue.length) textNodes.push(node);
+    }
+
+    textNodes.forEach((textNode) => {
+      const text = textNode.nodeValue;
+      const ranges = [];
+      regex.lastIndex = 0;
+      let m;
+      while ((m = regex.exec(text)) !== null) {
+        if (m[0].length === 0) { regex.lastIndex++; continue; }
+        ranges.push([m.index, m.index + m[0].length]);
+      }
+      // Wrap from last match to first so earlier offsets stay valid
+      for (let i = ranges.length - 1; i >= 0; i--) {
+        const r = document.createRange();
+        r.setStart(textNode, ranges[i][0]);
+        r.setEnd(textNode, ranges[i][1]);
+        const mark = document.createElement('mark');
+        mark.className = 'yjd-find-hit';
+        try { r.surroundContents(mark); } catch (e) { /* skip un-wrappable */ }
+      }
+    });
+
+    // Collect in document order
+    this.hits = Array.from(root.querySelectorAll('mark.yjd-find-hit'));
+    if (this.hits.length) {
+      this.activeIndex = 0;
+      this.highlightActive(true);
+    }
+    this.updateCount();
+  }
+
+  highlightActive(scroll) {
+    this.hits.forEach((m, i) => {
+      m.classList.toggle('active', i === this.activeIndex);
+    });
+    if (scroll && this.activeIndex >= 0 && this.hits[this.activeIndex]) {
+      this.hits[this.activeIndex].scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
+  }
+
+  navigate(dir) {
+    if (!this.hits.length) return;
+    this.activeIndex = (this.activeIndex + dir + this.hits.length) % this.hits.length;
+    this.highlightActive(true);
+    this.updateCount();
+  }
+
+  updateCount() {
+    const total = this.hits.length;
+    const cur = total ? this.activeIndex + 1 : 0;
+    this.countEl.textContent = `${cur}/${total}`;
+  }
+
+  replaceCurrent() {
+    if (this.activeIndex < 0 || !this.hits[this.activeIndex]) return;
+    const history = this.editor.getModule('history');
+    if (history && typeof history.saveBeforeFormat === 'function') history.saveBeforeFormat();
+
+    const mark = this.hits[this.activeIndex];
+    const at = this.activeIndex;
+    const parent = mark.parentNode;
+    parent.replaceChild(document.createTextNode(this.replaceInput.value), mark);
+    parent.normalize();
+    this.editor.onContentChange();
+
+    this.runSearch();
+    if (this.hits.length) {
+      this.activeIndex = Math.min(at, this.hits.length - 1);
+      this.highlightActive(true);
+      this.updateCount();
+    }
+  }
+
+  replaceAll() {
+    if (!this.hits.length) return;
+    const history = this.editor.getModule('history');
+    if (history && typeof history.saveBeforeFormat === 'function') history.saveBeforeFormat();
+
+    const repl = this.replaceInput.value;
+    this.hits.forEach((mark) => {
+      const parent = mark.parentNode;
+      if (parent) parent.replaceChild(document.createTextNode(repl), mark);
+    });
+    this.editor.editor.normalize();
+    this.editor.onContentChange();
+    this.runSearch();
+  }
+
+  destroy() {
+    this.editor.editor.removeEventListener('keydown', this._onKeydown);
+    this.editor.off('toolbar-click', this._onToolbarClick);
+    this.clearHighlights();
+    if (this.panel && this.panel.parentNode) this.panel.parentNode.removeChild(this.panel);
+    super.destroy();
+  }
+}

package/lib/modules/history.js

@@ -0,0 +1,425 @@
+import Module from '../core/module.js';
+
+/**
+ * History Module - Handles undo/redo functionality
+ * Extracted from FormatManager.js and ToolbarManager.js logic
+ */
+class History extends Module {
+  static DEFAULTS = {
+    delay: 1000,        // Delay between history saves
+    maxStack: 100,      // Maximum number of undo states
+    userOnly: false     // Only save user-initiated changes
+  };
+
+  constructor(editor, options = {}) {
+    super(editor, options);
+    this.stack = [];
+    this.index = -1;
+    this.lastSave = 0;
+    this.savedSelection = null;
+    
+    this.init();
+  }
+
+  init() {
+    this.setupEventListeners();
+    this.saveState(); // Save initial state
+  }
+
+  /**
+   * Setup event listeners for automatic history saving
+   */
+  setupEventListeners() {
+    // Keep references so the listeners can be removed in destroy().
+    this._onInput = () => {
+      this.handleInput();
+    };
+
+    this._onKeydownSave = (e) => {
+      // Save state before destructive operations
+      if (e.key === 'Enter' || e.key === 'Backspace' || e.key === 'Delete') {
+        this.saveState();
+      }
+    };
+
+    this._onToolbarClick = (e) => {
+      if (e.target.closest('.rich-editor-toolbar-btn')) {
+        // Save state before applying format
+        setTimeout(() => {
+          this.saveState();
+        }, 0);
+      }
+    };
+
+    this._onUndoRedo = (e) => {
+      if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === 'z') {
+        e.preventDefault();
+        this.undo();
+      } else if (((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') ||
+                 ((e.ctrlKey || e.metaKey) && e.key === 'y')) {
+        e.preventDefault();
+        this.redo();
+      }
+    };
+
+    // Save state on input with debouncing
+    this.editor.editor.addEventListener('input', this._onInput);
+    // Save state on specific commands
+    this.editor.editor.addEventListener('keydown', this._onKeydownSave);
+    // Listen for toolbar clicks to save state before formatting
+    this.editor.wrapper.addEventListener('click', this._onToolbarClick);
+    // Handle undo/redo shortcuts - only when editor is focused
+    this.editor.editor.addEventListener('keydown', this._onUndoRedo);
+
+    // Listen for DOM changes to catch all formatting operations
+    this.setupMutationObserver();
+  }
+
+  /**
+   * Setup mutation observer to watch for DOM changes
+   */
+  setupMutationObserver() {
+    this.mutationObserver = new MutationObserver((mutations) => {
+      let shouldSave = false;
+      
+      for (const mutation of mutations) {
+        // Check if the mutation is relevant (not just attribute changes on non-content elements)
+        if (mutation.type === 'childList' || 
+            (mutation.type === 'attributes' && 
+             (mutation.target.nodeType === Node.TEXT_NODE || 
+              ['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'PRE', 'UL', 'OL', 'LI', 'SPAN', 'STRONG', 'EM', 'U', 'S', 'SUB', 'SUP', 'A', 'IMG', 'VIDEO', 'TABLE', 'TR', 'TD', 'TH'].includes(mutation.target.tagName)))) {
+          shouldSave = true;
+          break;
+        }
+      }
+      
+      if (shouldSave) {
+        // Debounce the save to avoid too many saves
+        clearTimeout(this.mutationTimeout);
+        this.mutationTimeout = setTimeout(() => {
+          this.saveState();
+        }, 100);
+      }
+    });
+
+    // Start observing
+    this.mutationObserver.observe(this.editor.editor, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['style', 'class', 'href', 'src', 'alt', 'title']
+    });
+  }
+
+  /**
+   * Handle input event with debouncing
+   */
+  handleInput() {
+    const now = Date.now();
+    if (now - this.lastSave > this.options.delay) {
+      this.saveState();
+      this.lastSave = now;
+    }
+  }
+
+  /**
+   * Save current editor state
+   */
+  saveState() {
+    const content = this.editor.getContent();
+    const selection = this.saveSelection();
+    
+    // Don't save if content hasn't changed
+    if (this.stack.length > 0 && this.stack[this.index]?.content === content) {
+      return;
+    }
+
+    // Don't save if it's too soon after last save (debouncing)
+    const now = Date.now();
+    if (this.lastSave && now - this.lastSave < 50) {
+      return;
+    }
+
+    // Remove any redo states if we're not at the end
+    if (this.index < this.stack.length - 1) {
+      this.stack.splice(this.index + 1);
+    }
+
+    // Add new state
+    this.stack.push({
+      content,
+      selection,
+      timestamp: now
+    });
+
+    // Limit stack size
+    if (this.stack.length > this.options.maxStack) {
+      this.stack.shift();
+    } else {
+      this.index++;
+    }
+
+    this.lastSave = now;
+  }
+
+  /**
+   * Undo last change
+   */
+  undo() {
+    if (!this.canUndo()) return false;
+
+    this.index--;
+    const state = this.stack[this.index];
+    
+    this.restoreState(state);
+    this.onHistoryChange('undo');
+    
+    return true;
+  }
+
+  /**
+   * Redo last undone change
+   */
+  redo() {
+    if (!this.canRedo()) return false;
+
+    this.index++;
+    const state = this.stack[this.index];
+    
+    this.restoreState(state);
+    this.onHistoryChange('redo');
+    
+    return true;
+  }
+
+  /**
+   * Check if undo is possible
+   */
+  canUndo() {
+    return this.index > 0;
+  }
+
+  /**
+   * Check if redo is possible
+   */
+  canRedo() {
+    return this.index < this.stack.length - 1;
+  }
+
+  /**
+   * Restore editor state
+   * @param {object} state - State to restore
+   */
+  restoreState(state) {
+    if (!state) return;
+
+    // Restore content
+    this.editor.setContent(state.content);
+    
+    // Restore selection
+    if (state.selection) {
+      setTimeout(() => {
+        this.restoreSelection(state.selection);
+      }, 10);
+    }
+  }
+
+  /**
+   * Save current selection
+   */
+  saveSelection() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return null;
+
+    const range = selection.getRangeAt(0);
+    const editorEl = this.editor.editor;
+    
+    // Calculate offset relative to editor
+    const startOffset = this.getOffsetInEditor(range.startContainer, range.startOffset, editorEl);
+    const endOffset = this.getOffsetInEditor(range.endContainer, range.endOffset, editorEl);
+    
+    return {
+      startOffset,
+      endOffset,
+      collapsed: range.collapsed
+    };
+  }
+
+  /**
+   * Restore selection
+   * @param {object} selectionState - Selection state to restore
+   */
+  restoreSelection(selectionState) {
+    if (!selectionState) return;
+
+    const editorEl = this.editor.editor;
+    const range = document.createRange();
+    const selection = window.getSelection();
+
+    try {
+      const startNode = this.getNodeAtOffset(editorEl, selectionState.startOffset);
+      const endNode = this.getNodeAtOffset(editorEl, selectionState.endOffset);
+
+      if (startNode && endNode) {
+        range.setStart(startNode.node, startNode.offset);
+        range.setEnd(endNode.node, endNode.offset);
+        
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    } catch (error) {
+      console.warn('Could not restore selection:', error);
+      // Fallback: focus editor
+      this.editor.focus();
+    }
+  }
+
+  /**
+   * Get offset of a position within editor
+   * @param {Node} node - DOM node
+   * @param {number} offset - Offset within node
+   * @param {Element} root - Root element (editor)
+   */
+  getOffsetInEditor(node, offset, root) {
+    let totalOffset = 0;
+    const walker = document.createTreeWalker(
+      root,
+      NodeFilter.SHOW_TEXT,
+      null,
+      false
+    );
+
+    let currentNode;
+    while (currentNode = walker.nextNode()) {
+      if (currentNode === node) {
+        return totalOffset + offset;
+      }
+      totalOffset += currentNode.textContent.length;
+    }
+
+    return totalOffset;
+  }
+
+  /**
+   * Get node at specific offset within editor
+   * @param {Element} root - Root element (editor)
+   * @param {number} targetOffset - Target offset
+   */
+  getNodeAtOffset(root, targetOffset) {
+    let currentOffset = 0;
+    const walker = document.createTreeWalker(
+      root,
+      NodeFilter.SHOW_TEXT,
+      null,
+      false
+    );
+
+    let currentNode;
+    while (currentNode = walker.nextNode()) {
+      const nodeLength = currentNode.textContent.length;
+      if (currentOffset + nodeLength >= targetOffset) {
+        return {
+          node: currentNode,
+          offset: targetOffset - currentOffset
+        };
+      }
+      currentOffset += nodeLength;
+    }
+
+    // Fallback: return last node
+    return {
+      node: root.lastChild || root,
+      offset: 0
+    };
+  }
+
+  /**
+   * Clear history
+   */
+  clear() {
+    this.stack = [];
+    this.index = -1;
+    this.saveState(); // Save current state as first entry
+  }
+
+  /**
+   * Get current history state info
+   */
+  getState() {
+    return {
+      canUndo: this.canUndo(),
+      canRedo: this.canRedo(),
+      stackLength: this.stack.length,
+      currentIndex: this.index
+    };
+  }
+
+  /**
+   * Called when history changes (undo/redo)
+   * @param {string} action - 'undo' or 'redo'
+   */
+  onHistoryChange(action) {
+    // Notify other modules about history change
+    this.editor.modules.forEach(module => {
+      if (module !== this && typeof module.onHistoryChange === 'function') {
+        module.onHistoryChange(action, this.getState());
+      }
+    });
+
+    // Trigger custom event
+    const event = new CustomEvent('historychange', {
+      detail: { action, state: this.getState() }
+    });
+    this.editor.editor.dispatchEvent(event);
+  }
+
+  /**
+   * Force save current state (useful before major operations)
+   */
+  forceSave() {
+    // Temporarily disable debouncing for force save
+    const originalLastSave = this.lastSave;
+    this.lastSave = 0;
+    this.saveState();
+    this.lastSave = originalLastSave;
+  }
+
+  /**
+   * Save state before applying format (called by editor)
+   */
+  saveBeforeFormat() {
+    this.forceSave();
+  }
+
+  /**
+   * Destroy module
+   */
+  destroy() {
+    // Remove event listeners
+    if (this._onInput) {
+      this.editor.editor.removeEventListener('input', this._onInput);
+      this.editor.editor.removeEventListener('keydown', this._onKeydownSave);
+      this.editor.editor.removeEventListener('keydown', this._onUndoRedo);
+      this.editor.wrapper.removeEventListener('click', this._onToolbarClick);
+      this._onInput = this._onKeydownSave = this._onUndoRedo = this._onToolbarClick = null;
+    }
+
+    // Disconnect mutation observer
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+
+    // Clear timeout
+    if (this.mutationTimeout) {
+      clearTimeout(this.mutationTimeout);
+      this.mutationTimeout = null;
+    }
+
+    this.stack = [];
+    this.index = -1;
+    this.savedSelection = null;
+  }
+}
+
+export default History;