@oix1987/yjd 1.0.3 → 2.1.0

package/lib/formats/text-size.js

@@ -0,0 +1,498 @@
+import { InlineFormat } from '../core/format.js';
+import CustomSelect from '../ui/customselect.js';
+import { saveBeforeFormat } from '../utils/history-helper.js';
+import Editor from '../core/editor.js';
+import { execFormat, queryFormatValue } from '../utils/exec-command.js';
+
+/**
+ * Text Size Format - Handles font size formatting with 7 levels via execCommand
+ * Now supports multiple editor instances with separate popup instances
+ */
+class TextSize extends InlineFormat {
+  static formatName = 'textSize';
+  static tagName = 'SPAN';
+
+  constructor() {
+    super();
+    
+    // Get current editor instance
+    const currentEditor = Editor.getCurrentInstance();
+    if (!currentEditor) {
+      console.warn('No editor instance found for TextSize format');
+      return;
+    }
+    
+    this.editorId = currentEditor.instanceId;
+    
+    // Check if this editor already has a text size select instance
+    let customSelect = currentEditor.getPopupInstance('text-size');
+    
+    if (!customSelect) {
+      // Create new custom select instance for this editor
+      const sizeMap = TextSize.getSizeMap();
+      const items = Object.values(sizeMap).map(sizeData => ({
+        value: sizeData.size,
+        label: sizeData.element,
+        title: sizeData.title
+      }));
+
+      customSelect = new CustomSelect({
+        items: items,
+        displayProperty: 'label',
+        valueProperty: 'value',
+        className: 'text-size-select',
+        onItemSelect: (value) => {
+          TextSize.applyTextSizeToCurrentSelection(value, this.editorId);
+        },
+        editor: currentEditor,
+        editorId: this.editorId
+      });
+      
+      // Store popup instance in editor
+      currentEditor.setPopupInstance('text-size', customSelect);
+    }
+    
+    this.customSelect = customSelect;
+  }
+
+  /**
+   * Create a new TextSize format instance for a specific editor
+   * @param {string} editorId - Editor instance ID
+   * @returns {TextSize} TextSize 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 TextSize();
+    
+    // Restore original current instance
+    Editor.currentInstance = originalCurrent;
+    
+    return format;
+  }
+
+  /**
+   * 7-level text size map aligned with execCommand('fontSize', 1..7)
+   */
+  static getSizeMap() {
+    return {
+      '1': { size: '1', element: '<span >XX-Small</span>', title: 'XX-Small' },
+      '2': { size: '2', element: '<span >X-Small</span>', title: 'X-Small' },
+      '3': { size: '3', element: '<span >Small</span>', title: 'Small' },
+      '4': { size: '4', element: '<span >Medium</span>', title: 'Medium' },
+      '5': { size: '5', element: '<span >Large</span>', title: 'Large' },
+      '6': { size: '6', element: '<span >X-Large</span>', title: 'X-Large' },
+      '7': { size: '7', element: '<span >XX-Large</span>', title: 'XX-Large' },
+    };
+  }
+
+  static getSizeDisplayName(size) {
+    const sizeMap = this.getSizeMap();
+    return sizeMap[size]?.title || 'Medium';
+  }
+
+  /**
+   * Update button text based on current text size
+   */
+  updateButtonText() {
+    const currentSize = this.getCurrentSize();
+    const displayName = TextSize.getSizeDisplayName(currentSize || '4');
+
+    // Find text-size button in the current editor's toolbar
+    const editor = Editor.getInstanceById(this.editorId);
+    if (!editor) return;
+    
+    const toolbar = editor.getModule('toolbar');
+    let textSizeButton = null;
+    
+    if (toolbar) {
+      textSizeButton = toolbar.getButton('text-size');
+    }
+    
+    // Fallback: find button by class in the current editor's toolbar
+    if (!textSizeButton) {
+      const toolbarContainer = toolbar?.getContainer();
+      if (toolbarContainer) {
+        textSizeButton = toolbarContainer.querySelector('.rich-editor-toolbar-btn.text-size-btn');
+      }
+    }
+    
+    // Final fallback: find any text-size button in the current editor's wrapper
+    if (!textSizeButton) {
+      textSizeButton = editor.wrapper.querySelector('.rich-editor-toolbar-btn.text-size-btn');
+    }
+    
+    if (textSizeButton && textSizeButton.updateText) {
+      textSizeButton.updateText(displayName);
+    } else if (textSizeButton) {
+      textSizeButton.textContent = displayName;
+    }
+  }
+
+  /**
+   * Static method to update button text for any editor
+   * @param {string} editorId - Editor instance ID
+   */
+  static updateButtonTextStatic(editorId = null) {
+    // Get the correct editor instance
+    let editor = null;
+    if (editorId) {
+      editor = Editor.getInstanceById(editorId);
+    } else {
+      editor = Editor.getCurrentInstance();
+    }
+    
+    if (!editor) return;
+    
+    const currentSize = TextSize.getCurrentSizeStatic();
+    const displayName = TextSize.getSizeDisplayName(currentSize || '4');
+
+    const toolbar = editor.getModule('toolbar');
+    let textSizeButton = null;
+    
+    if (toolbar) {
+      textSizeButton = toolbar.getButton('text-size');
+    }
+    
+    // Fallback: find button by class in the current editor's toolbar
+    if (!textSizeButton) {
+      const toolbarContainer = toolbar?.getContainer();
+      if (toolbarContainer) {
+        textSizeButton = toolbarContainer.querySelector('.rich-editor-toolbar-btn.text-size-btn');
+      }
+    }
+    
+    // Final fallback: find any text-size button in the current editor's wrapper
+    if (!textSizeButton) {
+      textSizeButton = editor.wrapper.querySelector('.rich-editor-toolbar-btn.text-size-btn');
+    }
+    
+    if (textSizeButton && textSizeButton.updateText) {
+      textSizeButton.updateText(displayName);
+    } else if (textSizeButton) {
+      textSizeButton.textContent = displayName;
+    }
+  }
+
+  static create(size = '4') {
+    const node = document.createElement('span');
+    // Fallback creation with an approximate CSS size
+    node.style.fontSize = TextSize.sizeToCss(size);
+    return node;
+  }
+
+  /**
+   * Apply text size to current selection
+   * @param {string} size - Text size value
+   * @param {string} editorId - Editor instance ID
+   */
+  static applyTextSizeToCurrentSelection(size, 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 text size application');
+      return;
+    }
+    
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return;
+
+    // Save state before applying format
+    saveBeforeFormat();
+
+    const sizeFormat = TextSize.createForEditor(editorId);
+    if (sizeFormat) {
+      sizeFormat.apply(size);
+      sizeFormat.updateButtonText();
+    }
+    
+    // Trigger content change after applying format
+    setTimeout(() => {
+      if (editor && typeof editor.onContentChange === 'function') {
+        editor.onContentChange();
+      }
+    }, 0);
+  }
+
+  /**
+   * Map execCommand size (1..7) to CSS font-size for fallback/labels
+   */
+  static sizeToCss(size) {
+    const map = {
+      '1': '10px',
+      '2': '12px',
+      '3': '14px',
+      '4': '16px',
+      '5': '20px',
+      '6': '28px',
+      '7': '36px',
+    };
+    return map[String(size)] || '16px';
+  }
+
+  /**
+   * Apply text size using execCommand; works with selection and collapsed caret
+   */
+  apply(size = '4') {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return;
+
+    saveBeforeFormat();
+
+    const range = selection.getRangeAt(0);
+
+    if (!range.collapsed) {
+        // Bạn chưa nói đến xử lý khi bôi đen, nên mình bỏ qua
+        execFormat('fontSize', String(size));
+
+        // Lấy node bao quanh selection hiện tại
+        const sel = window.getSelection();
+        if (sel.rangeCount > 0) {
+            const container = sel.getRangeAt(0).commonAncestorContainer;
+            // Nếu container là text node → normalize ở parent
+            if (container.nodeType === Node.TEXT_NODE) {
+                container.parentNode.normalize();
+            } else {
+                container.normalize();
+            }
+        }   
+        
+        return;
+    }
+
+    let node = range.startContainer;
+    let offset = range.startOffset;
+
+    // Nếu caret đang trong text node → lấy cha
+    if (node.nodeType === Node.TEXT_NODE) {
+        node = node.parentNode;
+    }
+
+    // Kiểm tra nếu đang ở trong một <font>
+    const currentFont = node.closest && node.closest('font');
+
+    // ========================
+    // Trường hợp 1: caret trong <font> rỗng (chỉ có \u200B)
+    // ========================
+    if (currentFont && currentFont.textContent === "\u200B") {
+        currentFont.setAttribute('size', String(size));
+        return;
+    }
+
+    // ========================
+    // Trường hợp 2: caret trong <font> có ký tự thực
+    // ========================
+    if (currentFont && currentFont.firstChild && currentFont.firstChild.nodeType === Node.TEXT_NODE) {
+        const textNode = currentFont.firstChild;
+        const caretPos = range.startOffset; // vị trí caret trong text node
+
+        // Loại bỏ ký tự ẩn trong tính toán
+      
+        const textBefore = textNode.data.slice(0, caretPos);
+        const textAfter  = textNode.data.slice(caretPos);
+
+        const parent = currentFont.parentNode;
+
+        if (caretPos === 0) {
+            // Đang ở ĐẦU thẻ font → chèn font mới trước
+            const newFont = document.createElement('font');
+            newFont.setAttribute('size', String(size));
+            newFont.appendChild(document.createTextNode("\u200B"));
+            parent.insertBefore(newFont, currentFont);
+
+            moveCaretInside(newFont);
+
+        } else if (caretPos === textNode.data.length) {
+            // Đang ở CUỐI thẻ font → chèn font mới sau
+            const newFont = document.createElement('font');
+            newFont.setAttribute('size', String(size));
+            newFont.appendChild(document.createTextNode("\u200B"));
+            parent.insertBefore(newFont, currentFont.nextSibling);
+
+            moveCaretInside(newFont);
+
+        } else {
+
+            
+            const font1 = document.createElement('font');
+            font1.setAttribute('size', currentFont.getAttribute('size'));
+            font1.appendChild(document.createTextNode(textBefore));
+
+            const font2 = document.createElement('font');
+            font2.setAttribute('size', String(size));
+            font2.appendChild(document.createTextNode("\u200B"));
+
+            const font3 = document.createElement('font');
+            font3.setAttribute('size', currentFont.getAttribute('size'));
+            font3.appendChild(document.createTextNode(textAfter));
+
+            parent.insertBefore(font1, currentFont);
+            parent.insertBefore(font2, currentFont);
+            parent.insertBefore(font3, currentFont);
+
+            parent.removeChild(currentFont);
+
+            moveCaretInside(font2);
+        }
+        return;
+    }
+
+    // ========================
+    // Trường hợp 3: không ở trong <font> nào → tạo mới
+    // ========================
+    const newFont = document.createElement('font');
+    newFont.setAttribute('size', String(size));
+    const zwsp = document.createTextNode("\u200B");
+    newFont.appendChild(zwsp);
+
+    range.insertNode(newFont);
+    moveCaretInside(newFont);
+
+    // Hàm phụ để đưa caret vào sau ký tự ẩn
+    function moveCaretInside(fontEl) {
+        const sel = window.getSelection();
+        const range = document.createRange();
+        const textNode = fontEl.firstChild;
+        range.setStart(textNode, textNode.length);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+
+   
+  }
+
+  async toggle() {
+    if (this.customSelect.isVisible) {
+      this.customSelect.hide();
+    } else {
+      await this.showSizePicker();
+    }
+  }
+
+  async showSizePicker() {
+    // Find text-size button in the current editor's toolbar
+    const editor = Editor.getInstanceById(this.editorId);
+    if (!editor) return;
+    
+    const toolbar = editor.getModule('toolbar');
+    let textSizeButton = null;
+    
+    if (toolbar) {
+      textSizeButton = toolbar.getButton('text-size');
+    }
+    
+    // Fallback: find button by class in the current editor's toolbar
+    if (!textSizeButton) {
+      const toolbarContainer = toolbar?.getContainer();
+      if (toolbarContainer) {
+        textSizeButton = toolbarContainer.querySelector('.rich-editor-toolbar-btn.text-size-btn');
+      }
+    }
+    
+    // Final fallback: find any text-size button in the current editor's wrapper
+    if (!textSizeButton) {
+      textSizeButton = editor.wrapper.querySelector('.rich-editor-toolbar-btn.text-size-btn');
+    }
+    
+    if (!textSizeButton) {
+      console.warn('Text-size button not found for editor:', this.editorId);
+      return;
+    }
+
+    const currentSize = this.getCurrentSize();
+    if (currentSize) {
+      this.customSelect.setCurrentValue(currentSize);
+    }
+
+    await this.customSelect.show(textSizeButton);
+  }
+
+  isActive(size = null) {
+    this.updateButtonText();
+    return false;
+  }
+
+  /**
+   * Get current text size near caret/selection, return one of '1'..'7'
+   */
+  getCurrentSize() {
+    return TextSize.getCurrentSizeStatic();
+  }
+
+  /**
+   * Static method to get current text size
+   * @returns {string} Current text size
+   */
+  static getCurrentSizeStatic() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return '4';
+
+    try {
+      // Try to use queryCommandValue when available (returns 1..7 in many browsers)
+      const val = queryFormatValue('fontSize');
+      const num = parseInt(val, 10);
+      if (!isNaN(num) && num >= 1 && num <= 7) {
+        return String(num);
+      }
+    } catch (_) {}
+
+    const range = selection.getRangeAt(0);
+    let currentNode = range.startContainer;
+    if (currentNode.nodeType === Node.TEXT_NODE) {
+      currentNode = currentNode.parentElement;
+    }
+
+    while (currentNode && currentNode !== document.body) {
+      if (currentNode.nodeType === Node.ELEMENT_NODE) {
+        const element = currentNode;
+        const inline = element.style?.fontSize;
+        if (inline) return this.normalizeCssSizeToExecSize(inline);
+
+        const computed = window.getComputedStyle(element).fontSize;
+        if (computed) return this.normalizeCssSizeToExecSize(computed);
+      }
+      currentNode = currentNode.parentElement;
+    }
+
+    return '4';
+  }
+
+  /**
+   * Normalize CSS px value to closest execCommand size 1..7
+   */
+  normalizeCssSizeToExecSize(cssSize) {
+    const px = parseFloat(cssSize);
+    if (isNaN(px)) return '4';
+    const steps = [10, 12, 14, 16, 20, 28, 36];
+    let closestIndex = 3; // default to '4' (16px)
+    let minDiff = Infinity;
+    for (let i = 0; i < steps.length; i++) {
+      const diff = Math.abs(px - steps[i]);
+      if (diff < minDiff) {
+        minDiff = diff;
+        closestIndex = i;
+      }
+    }
+    return String(closestIndex + 1);
+  }
+}
+
+export default TextSize;
+
+

package/lib/formats/underline.js

@@ -0,0 +1,30 @@
+import { InlineFormat } from '../core/format.js';
+import { saveBeforeFormat } from '../utils/history-helper.js';
+
+/**
+ * Underline Format - Handles underline text formatting
+ * Extracted from FormatManager.js logic
+ */
+class Underline extends InlineFormat {
+  static formatName = 'underline';
+  static tagName = 'U';
+  static alternativeTagNames = ['SPAN'];
+
+  /**
+   * Toggle underline formatting
+   */
+
+  toggle() {
+    // Save state before applying format
+    saveBeforeFormat();
+
+    if (this.isActive()) {
+      this.remove();
+    } else {
+      this.apply();
+    }
+  }
+
+}
+
+export default Underline;