@oix1987/yjd 1.0.3 → 2.1.0

package/lib/formats/color.js

@@ -0,0 +1,183 @@
+import { InlineFormat } from '../core/format.js';
+import ColorPicker from '../ui/color-picker.js';
+import { saveBeforeFormat } from '../utils/history-helper.js';
+import Editor from '../core/editor.js';
+import { execFormat, setStyleWithCSS } from '../utils/exec-command.js';
+
+/**
+ * Color Format - Handles text color formatting
+ */
+class Color extends InlineFormat {
+  static formatName = 'color';
+  static tagName = 'SPAN';
+  static attribute = 'color';
+
+  // Selection saved when the picker opens, restored before applying — so the
+  // colour still lands on the right text after a tap clears the live selection
+  // (mobile/touch) or focus moves to the picker.
+  static savedRanges = new Map();
+
+  constructor() {
+    super();
+    
+    // Get current editor instance
+    const currentEditor = Editor.getCurrentInstance();
+    if (!currentEditor) {
+      console.warn('No editor instance found for Color format');
+      return;
+    }
+    
+    this.editorId = currentEditor.instanceId;
+    
+    // Check if this editor already has a color picker instance
+    let colorPicker = currentEditor.getPopupInstance('color');
+    
+    if (!colorPicker) {
+      // Create new color picker instance for this editor
+      const editorId = this.editorId;
+      colorPicker = new ColorPicker({
+        onColorSelect: (color) => {
+          Color.applyColorToCurrentSelection(color, editorId);
+        },
+        editor: Editor.getCurrentInstance()
+      });
+      
+      // Store popup instance in editor
+      currentEditor.setPopupInstance('color', colorPicker);
+    }
+    
+    this.colorPicker = colorPicker;
+  }
+
+  /**
+   * Static method to apply color to current selection
+   */
+  static applyColorToCurrentSelection(color, editorId = null) {
+    const selection = window.getSelection();
+    // Restore the selection captured when the picker opened (a tap on the
+    // picker may have collapsed the live selection, especially on mobile).
+    const saved = editorId != null ? Color.savedRanges.get(editorId) : null;
+    if (saved) {
+      selection.removeAllRanges();
+      selection.addRange(saved);
+    }
+    if (editorId != null) Color.savedRanges.delete(editorId);
+
+    if (!selection || !selection.rangeCount || selection.isCollapsed) return;
+
+    // Save state before applying format
+    saveBeforeFormat();
+
+    setStyleWithCSS(true);
+    // 'transparent' is the picker's "reset to default" entry — clear the colour
+    // back to the editor default rather than painting an explicit colour.
+    execFormat('foreColor', color === 'transparent' ? 'inherit' : color);
+
+    // Refresh toolbar state (active highlight + swatch) and notify listeners.
+    setTimeout(() => {
+      const currentEditor = Editor.getCurrentInstance();
+      if (currentEditor) {
+        if (typeof currentEditor.updateToolbarButtonStates === 'function') {
+          currentEditor.updateToolbarButtonStates();
+        }
+        if (typeof currentEditor.onContentChange === 'function') {
+          currentEditor.onContentChange();
+        }
+      }
+    }, 0);
+  }
+
+  /**
+   * Toggle color formatting - shows/hides color picker
+   */
+  toggle() {
+    if (this.colorPicker.isVisible) {
+      this.colorPicker.hide();
+    } else {
+      this.showColorPicker();
+    }
+  }
+
+  /**
+   * Show color picker positioned relative to color button on toolbar
+   */
+  showColorPicker() {
+    // Find color button in the current editor's toolbar
+    const editor = Editor.getInstanceById(this.editorId);
+    if (!editor) return;
+
+    // Capture the current selection so we can apply the colour to it even if a
+    // tap on the picker clears the live selection. Fall back to the editor's
+    // last non-collapsed range (mobile clears the selection on touchstart).
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount && !sel.isCollapsed) {
+      Color.savedRanges.set(this.editorId, sel.getRangeAt(0).cloneRange());
+    } else if (editor._lastRange) {
+      Color.savedRanges.set(this.editorId, editor._lastRange.cloneRange());
+    }
+
+    const toolbar = editor.getModule('toolbar');
+    let colorButton = null;
+    
+    if (toolbar) {
+      colorButton = toolbar.getButton('color');
+    }
+    
+    // Fallback: find button by class in the current editor's toolbar
+    if (!colorButton) {
+      const toolbarContainer = toolbar?.getContainer();
+      if (toolbarContainer) {
+        colorButton = toolbarContainer.querySelector('.rich-editor-toolbar-btn.color-btn');
+      }
+    }
+    
+    // Final fallback: find any color button in the current editor's wrapper
+    if (!colorButton) {
+      colorButton = editor.wrapper.querySelector('.rich-editor-toolbar-btn.color-btn');
+    }
+    
+    if (!colorButton) {
+      console.warn('Color button not found for editor:', this.editorId);
+      return;
+    }
+    
+    this.colorPicker.show(colorButton);
+  }
+
+  /**
+   * Check if color formatting is active in current selection
+   */
+  isActive() {
+    return !!Color.getCurrentColor();
+  }
+
+  /**
+   * Return the explicit text colour applied at the current selection, or null
+   * when the text uses the editor's default colour. We look for an EXPLICIT
+   * inline colour (the `<span style="color:…">` / `<font color>` that the
+   * editor inserts) rather than comparing the computed colour to a hardcoded
+   * default — the default depends on the active theme, so a hardcoded compare
+   * made the button look permanently "active".
+   */
+  static getCurrentColor() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return null;
+
+    let node = selection.getRangeAt(0).startContainer;
+    if (node.nodeType === Node.TEXT_NODE) node = node.parentNode;
+
+    while (node && node.nodeType === Node.ELEMENT_NODE) {
+      if (node.classList && node.classList.contains('rich-editor-area')) break;
+      if (node.style && node.style.color && node.style.color !== 'inherit') {
+        return node.style.color;
+      }
+      if (node.tagName === 'FONT' && node.getAttribute('color')) {
+        return node.getAttribute('color');
+      }
+      node = node.parentNode;
+    }
+    return null;
+  }
+}
+
+export default Color; 

package/lib/formats/emoji.js

@@ -0,0 +1,282 @@
+import { InlineFormat } from '../core/format.js';
+import EmojiPicker from '../ui/emoji-picker.js';
+import Editor from '../core/editor.js';
+
+/**
+ * Emoji Format - Handles emoji insertion
+ * Now supports multiple editor instances with separate popup instances
+ */
+class Emoji extends InlineFormat {
+  static formatName = 'emoji';
+  static tagName = 'SPAN';
+  static className = 'emoji';
+
+  constructor() {
+    super();
+    
+    // Get current editor instance
+    const currentEditor = Editor.getCurrentInstance();
+    if (!currentEditor) {
+      console.warn('No editor instance found for Emoji format');
+      return;
+    }
+    
+    this.editorId = currentEditor.instanceId;
+    
+    // Check if this editor already has an emoji picker instance
+    let emojiPicker = currentEditor.getPopupInstance('emoji');
+    
+    if (!emojiPicker) {
+      // Create new emoji picker instance for this editor
+      emojiPicker = new EmojiPicker({
+        onEmojiSelect: (emoji) => {
+          Emoji.insertEmojiAtCurrentPosition(emoji, this.editorId);
+        },
+        editor: currentEditor,
+        editorId: this.editorId
+      });
+      
+      // Store popup instance in editor
+      currentEditor.setPopupInstance('emoji', emojiPicker);
+    }
+    
+    this.emojiPicker = emojiPicker;
+  }
+
+  /**
+   * Create a new Emoji format instance for a specific editor
+   * @param {string} editorId - Editor instance ID
+   * @returns {Emoji} Emoji format instance
+   */
+  static createForEditor(editorId) {
+    const editor = Editor.getInstanceById(editorId);
+    if (!editor) {
+      console.warn('No editor instance found for ID:', editorId);
+      return null;
+    }
+    
+    // Temporarily set as current instance
+    const originalCurrent = Editor.currentInstance;
+    Editor.currentInstance = editor;
+    
+    // Create format instance
+    const format = new Emoji();
+    
+    // Restore original current instance
+    Editor.currentInstance = originalCurrent;
+    
+    return format;
+  }
+
+  /**
+   * Create emoji element
+   * @param {string} value - Emoji character
+   * @returns {HTMLElement}
+   */
+  static create(value) {
+    const span = document.createElement('SPAN');
+    span.className = 'emoji';
+    span.textContent = value;
+    span.setAttribute('data-emoji', value);
+    return span;
+  }
+
+  /**
+   * Insert emoji at current cursor position
+   * @param {string} emoji - Emoji character to insert
+   * @param {string} editorId - Editor instance ID
+   */
+  static insertEmojiAtCurrentPosition(emoji, editorId = null) {
+    // Get the correct editor instance
+    let editor = null;
+    if (editorId) {
+      editor = Editor.getInstanceById(editorId);
+    } else {
+      editor = Editor.getCurrentInstance();
+    }
+    
+    if (!editor) {
+      console.warn('No editor instance found for emoji insertion');
+      return;
+    }
+    
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return;
+
+    try {
+      const range = selection.getRangeAt(0);
+      
+      // Check if cursor is inside an existing emoji span
+      let currentNode = range.startContainer;
+      let emojiParent = null;
+      
+      // If cursor is in a text node, check its parent
+      if (currentNode.nodeType === Node.TEXT_NODE) {
+        currentNode = currentNode.parentNode;
+      }
+      
+      // Find if we're inside an emoji span
+      while (currentNode && currentNode !== editor.element) {
+        if (currentNode.classList && currentNode.classList.contains('emoji')) {
+          emojiParent = currentNode;
+          break;
+        }
+        currentNode = currentNode.parentNode;
+      }
+      
+      // If cursor is inside an emoji span, move it outside
+      if (emojiParent) {
+        // Move cursor after the emoji span
+        range.setStartAfter(emojiParent);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      
+      // Create emoji element
+      const emojiElement = Emoji.create(emoji);
+      
+      // Insert emoji at cursor position
+      range.deleteContents();
+      range.insertNode(emojiElement);
+      
+      // Create a zero-width space character after the emoji
+      const zeroWidthSpace = document.createTextNode('\u200B'); // Zero-width space
+      
+      // Insert zero-width space after emoji
+      range.setStartAfter(emojiElement);
+      range.insertNode(zeroWidthSpace);
+      
+      // Position cursor after the zero-width space
+      range.setStartAfter(zeroWidthSpace);
+      range.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      
+      // Trigger content change event
+      if (editor && typeof editor.onContentChange === 'function') {
+        editor.onContentChange();
+      }
+      
+    } catch (error) {
+      console.error('Error inserting emoji:', error);
+    }
+  }
+
+  /**
+   * Apply emoji formatting - shows emoji picker
+   */
+  apply(value) {
+    if (value) {
+      Emoji.insertEmojiAtCurrentPosition(value, this.editorId);
+    } else {
+      this.showEmojiPicker();
+    }
+  }
+
+  /**
+   * Remove emoji formatting
+   */
+  remove() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return;
+
+    const range = selection.getRangeAt(0);
+    const emojiElement = this.getEmojiElement(range);
+    
+    if (emojiElement) {
+      // Replace emoji element with its text content
+      const textNode = document.createTextNode(emojiElement.textContent);
+      emojiElement.parentNode.replaceChild(textNode, emojiElement);
+    }
+  }
+
+  /**
+   * Toggle emoji formatting - shows emoji picker
+   */
+  toggle() {
+    if (this.emojiPicker.isVisible) {
+      this.emojiPicker.hide();
+    } else {
+      this.showEmojiPicker();
+    }
+  }
+
+  /**
+   * Show emoji picker popup
+   */
+  showEmojiPicker() {
+    // Find emoji button in the current editor's toolbar
+    const editor = Editor.getInstanceById(this.editorId);
+    if (!editor) return;
+    
+    const toolbar = editor.getModule('toolbar');
+    let emojiButton = null;
+    
+    if (toolbar) {
+      emojiButton = toolbar.getButton('emoji');
+    }
+    
+    // Fallback: find button by class in the current editor's toolbar
+    if (!emojiButton) {
+      const toolbarContainer = toolbar?.getContainer();
+      if (toolbarContainer) {
+        emojiButton = toolbarContainer.querySelector('.rich-editor-toolbar-btn.emoji-btn');
+      }
+    }
+    
+    // Final fallback: find any emoji button in the current editor's wrapper
+    if (!emojiButton) {
+      emojiButton = editor.wrapper.querySelector('.rich-editor-toolbar-btn.emoji-btn');
+    }
+    
+    if (!emojiButton) {
+      console.warn('Emoji button not found for editor:', this.editorId);
+      return;
+    }
+    
+    this.emojiPicker.show(emojiButton);
+  }
+
+  /**
+   * Check if emoji formatting is active
+   */
+  isActive() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return false;
+
+    const range = selection.getRangeAt(0);
+    const emojiElement = this.getEmojiElement(range);
+    
+    return emojiElement !== null;
+  }
+
+  /**
+   * Get emoji element from selection
+   * @param {Range} range - Selection range
+   * @returns {HTMLElement|null}
+   */
+  getEmojiElement(range) {
+    let node = range.commonAncestorContainer;
+    
+    // If it's a text node, get its parent
+    if (node.nodeType === Node.TEXT_NODE) {
+      node = node.parentNode;
+    }
+    
+    // Check if current node is an emoji
+    if (node.classList && node.classList.contains('emoji')) {
+      return node;
+    }
+    
+    // Check if selection contains an emoji
+    const emojiInSelection = range.cloneContents().querySelector('.emoji');
+    if (emojiInSelection) {
+      return emojiInSelection;
+    }
+    
+    return null;
+  }
+}
+
+export default Emoji;