@oix1987/yjd 1.0.0 → 1.0.2

package/lib/formats/line-height.js

@@ -1,558 +0,0 @@
-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';
-
-/**
- * Line Height Format - Handles line height formatting
- * Now supports multiple editor instances with separate popup instances
- */
-class LineHeight extends InlineFormat {
-  static formatName = 'lineHeight';
-  static tagName = 'SPAN';
-  
-  constructor() {
-    super();
-    
-    // Get current editor instance
-    const currentEditor = Editor.getCurrentInstance();
-    if (!currentEditor) {
-      console.warn('No editor instance found for LineHeight format');
-      return;
-    }
-    
-    this.editorId = currentEditor.instanceId;
-    
-    // Check if this editor already has a line height select instance
-    let customSelect = currentEditor.getPopupInstance('line-height');
-    
-    if (!customSelect) {
-      // Create new custom select instance for this editor
-      const heightMap = LineHeight.getHeightMap();
-      const items = Object.values(heightMap).map(heightData => ({
-        value: heightData.height,
-        label: heightData.element,
-        title: heightData.title
-      }));
-
-      customSelect = new CustomSelect({
-        items: items,
-        displayProperty: 'label',
-        valueProperty: 'value',
-        className: 'line-height-select',
-        onItemSelect: (value, item) => {
-          LineHeight.applyLineHeightToCurrentSelection(value, this.editorId);
-        },
-        editor: currentEditor,
-        editorId: this.editorId
-      });
-      
-      // Store popup instance in editor
-      currentEditor.setPopupInstance('line-height', customSelect);
-    }
-    
-    this.customSelect = customSelect;
-    
-    // Set up event listener for selection changes
-    this.setupSelectionListener();
-  }
-
-  /**
-   * Create a new LineHeight format instance for a specific editor
-   * @param {string} editorId - Editor instance ID
-   * @returns {LineHeight} LineHeight 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 LineHeight();
-    
-    // Restore original current instance
-    Editor.currentInstance = originalCurrent;
-    
-    return format;
-  }
-
-  /**
-   * Set up event listener for selection changes to update button text
-   */
-  setupSelectionListener() {
-    // Use a debounced function to avoid too many updates
-    let updateTimeout;
-    const debouncedUpdate = () => {
-      clearTimeout(updateTimeout);
-      updateTimeout = setTimeout(() => {
-        // Only update if selection is in this editor
-        const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-          const range = selection.getRangeAt(0);
-          const editor = Editor.getInstanceById(this.editorId);
-          if (editor && (editor.editor.contains(range.startContainer) || editor.editor.isSameNode(range.startContainer))) {
-            this.updateButtonText();
-          }
-        }
-      }, 50); // 50ms delay
-    };
-
-    // Listen for selection changes
-    document.addEventListener('selectionchange', debouncedUpdate);
-    
-    // Also listen for mouseup and keyup events for immediate feedback
-    document.addEventListener('mouseup', debouncedUpdate);
-    document.addEventListener('keyup', debouncedUpdate);
-    
-    // Store the listener for cleanup
-    this.selectionListener = debouncedUpdate;
-  }
-
-  /**
-   * Get height map with different line heights
-   */
-  static getHeightMap() {
-    return {
-      '1.0': { 
-        height: '1', 
-        element: '<span>1.0</span>', 
-        title: '1.0' 
-      },
-      '1.2': { 
-        height: '1.2', 
-        element: '<span>1.2</span>', 
-        title: '1.2' 
-      },
-      '1.5': { 
-        height: '1.5', 
-        element: '<span>1.5</span>', 
-        title: '1.5' 
-      },
-      '1.8': { 
-        height: '1.8', 
-        element: '<span>1.8</span>', 
-        title: '1.8' 
-      },
-      '2.0': { 
-        height: '2', 
-        element: '<span>2.0</span>', 
-        title: '2.0' 
-      },
-      '2.5': { 
-        height: '2.5', 
-        element: '<span>2.5</span>', 
-        title: '2.5' 
-      },
-      '3.0': { 
-        height: '3', 
-        element: '<span>3.0</span>', 
-        title: '3.0' 
-      }
-    };
-  }
-
-  /**
-   * Get display name for line height
-   * @param {string} height - Line height value
-   * @returns {string} Display name
-   */
-  static getHeightDisplayName(height) {
-    const heightMap = this.getHeightMap();
-    return heightMap[height]?.title || 'line height';
-  }
-
-  /**
-   * Update custom button text based on current line height
-   */
-  updateButtonText() {
-    const currentHeight = this.getCurrentHeight();
-    const displayName = LineHeight.getHeightDisplayName(currentHeight || '1.15');
-    
-    // Find line-height button in the specific editor's toolbar using editorId
-    const editor = Editor.getInstanceById(this.editorId);
-    if (!editor) return;
-    
-    const toolbar = editor.getModule('toolbar');
-    let lineHeightButton = null;
-    
-    if (toolbar) {
-      lineHeightButton = toolbar.getButton('line-height');
-    }
-    
-    // Fallback: find button by class in the specific editor's toolbar
-    if (!lineHeightButton) {
-      const toolbarContainer = toolbar?.getContainer();
-      if (toolbarContainer) {
-        lineHeightButton = toolbarContainer.querySelector('.rich-editor-toolbar-btn.line-height-btn');
-      }
-    }
-    
-    // Final fallback: find any line-height button in the specific editor's wrapper
-    if (!lineHeightButton) {
-      lineHeightButton = editor.wrapper.querySelector('.rich-editor-toolbar-btn.line-height-btn');
-    }
-    
-    if (lineHeightButton && lineHeightButton.updateText) {
-      lineHeightButton.updateText(displayName);
-    } else if (lineHeightButton) {
-      lineHeightButton.textContent = displayName;
-    }
-  }
-
-  /**
-   * Create element with specific line height
-   * @param {string} height - Line height value
-   * @returns {HTMLElement}
-   */
-  static create(height = '1.15') {
-    const node = document.createElement('span');
-    node.style.lineHeight = height;
-    return node;
-  }
-
-  /**
-   * Static method to apply line height to current selection
-   * @param {string} height - Line height value
-   * @param {string} editorId - Editor instance ID
-   */
-  static applyLineHeightToCurrentSelection(height, 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 line height application');
-      return;
-    }
-    
-    const selection = window.getSelection();
-    if (!selection || !selection.rangeCount) return;
-
-    // Save state before applying format
-    saveBeforeFormat();
-
-    const range = selection.getRangeAt(0);
-    const lineHeightFormat = LineHeight.createForEditor(editorId);
-    if (lineHeightFormat) {
-      lineHeightFormat.apply(height);
-      
-      // Update button text after applying
-      lineHeightFormat.updateButtonText();
-    }
-    
-    // Trigger content change after applying format
-    setTimeout(() => {
-      if (editor && typeof editor.onContentChange === 'function') {
-        editor.onContentChange();
-      }
-    }, 0);
-  }
-
-  /**
-   * Apply line height format with specified height
-   * @param {string} height - Line height value
-   */
-  apply(height = '1.15') {
-    const selection = window.getSelection();
-    if (!selection || !selection.rangeCount) return;
-    // Hàm đặt caret vào bên trong span mới
-    function moveCaretInside(el) {
-      const sel = window.getSelection();
-      const range = document.createRange();
-      const textNode = el.firstChild;
-      range.setStart(textNode, textNode.length);
-      range.collapse(true);
-      sel.removeAllRanges();
-      sel.addRange(range);
-    }
-    // Save state before applying format
-    saveBeforeFormat();
-
-    const range = selection.getRangeAt(0);
-    
-    if (range.collapsed) {
-      // No selection - set style for future typing
-      let node = range.startContainer;
-      if (node.nodeType === Node.TEXT_NODE) {
-        node = node.parentNode;
-      }
-
-      // Tìm phần tử block cha gần nhất (div, p, li, ...)
-      const blockParent = node.closest('div, p, li, section, article') || node;
-      blockParent.style.lineHeight = height;
-      moveCaretInside(blockParent);
-    
-      return;
-    }
-
-    // Apply to block elements if possible for better line height effect
-    const blockElements = this.getBlockElementsInRange(range);
-    
-    if (blockElements.length > 0) {
-      // Apply to block elements
-      blockElements.forEach(block => {
-        block.style.lineHeight = height;
-      });
-    } else {
-      // Fallback: wrap in span with line-height
-      const heightSpan = this.constructor.create(height);
-      
-      try {
-        const contents = range.extractContents();
-        heightSpan.appendChild(contents);
-        range.insertNode(heightSpan);
-        
-        // Select the content in the span
-        const newRange = document.createRange();
-        newRange.selectNodeContents(heightSpan);
-        selection.removeAllRanges();
-        selection.addRange(newRange);
-      } catch (error) {
-        console.warn('Failed to apply line height manually:', error);
-      }
-    }
-  }
-
-  /**
-   * Get block elements within the range
-   * @param {Range} range - Selection range
-   * @returns {Array} Array of block elements
-   */
-  getBlockElementsInRange(range) {
-    const blockElements = [];
-    const blockTags = ['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'PRE', 'UL', 'OL', 'LI'];
-    
-    // Create a fragment of the selection
-    const fragment = range.cloneContents();
-    
-    // Get all potential block elements in the fragment
-    const walker = document.createTreeWalker(
-      fragment,
-      NodeFilter.SHOW_ELEMENT,
-      {
-        acceptNode: (node) => {
-          return blockTags.includes(node.tagName) ? 
-            NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
-        }
-      }
-    );
-
-    // Get corresponding elements from the actual document
-    let node = walker.nextNode();
-    while (node) {
-      // Find the actual element in the document that corresponds to this fragment node
-      const actualNode = range.commonAncestorContainer.querySelector(
-        `${node.tagName.toLowerCase()}:not([data-processed])`
-      );
-      if (actualNode && range.intersectsNode(actualNode)) {
-        blockElements.push(actualNode);
-        // Mark as processed to avoid duplicates
-        actualNode.setAttribute('data-processed', 'true');
-      }
-      node = walker.nextNode();
-    }
-
-    // Clean up the temporary attribute
-    blockElements.forEach(el => el.removeAttribute('data-processed'));
-
-    // If no block elements found in selection, get the closest parent block element
-    if (blockElements.length === 0) {
-      let currentNode = range.startContainer;
-      
-      // If text node, get parent element
-      if (currentNode.nodeType === Node.TEXT_NODE) {
-        currentNode = currentNode.parentElement;
-      }
-      
-      // Find parent block element
-      while (currentNode && currentNode !== document.body) {
-        if (currentNode.nodeType === Node.ELEMENT_NODE && 
-            blockTags.includes(currentNode.tagName)) {
-          blockElements.push(currentNode);
-          break;
-        }
-        currentNode = currentNode.parentElement;
-      }
-    }
-    
-    return blockElements;
-  }
-
-  /**
-   * Toggle line height format - shows/hides height picker
-   */
-  async toggle() {
-    if (this.customSelect.isVisible) {
-      this.customSelect.hide();
-    } else {
-      await this.showHeightPicker();
-    }
-  }
-
-  /**
-   * Show custom select positioned relative to line height button on toolbar
-   */
-  async showHeightPicker() {
-    // Find line-height button in the current editor's toolbar
-    const editor = Editor.getInstanceById(this.editorId);
-    if (!editor) return;
-    
-    const toolbar = editor.getModule('toolbar');
-    let lineHeightButton = null;
-    
-    if (toolbar) {
-      lineHeightButton = toolbar.getButton('line-height');
-    }
-    
-    // Fallback: find button by class in the current editor's toolbar
-    if (!lineHeightButton) {
-      const toolbarContainer = toolbar?.getContainer();
-      if (toolbarContainer) {
-        lineHeightButton = toolbarContainer.querySelector('.rich-editor-toolbar-btn.line-height-btn');
-      }
-    }
-    
-    // Final fallback: find any line-height button in the current editor's wrapper
-    if (!lineHeightButton) {
-      lineHeightButton = editor.wrapper.querySelector('.rich-editor-toolbar-btn.line-height-btn');
-    }
-    
-    if (!lineHeightButton) {
-      console.warn('Line-height button not found for editor:', this.editorId);
-      return;
-    }
-    
-    // Update current selection before showing
-    const currentHeight = this.getCurrentHeight();
-    if (currentHeight) {
-      this.customSelect.setCurrentValue(currentHeight);
-    }
-    
-    await this.customSelect.show(lineHeightButton);
-  }
-
-  /**
-   * Check if line height format is active - always return false (no active state)
-   * Only update button text to show current height
-   * @param {string} height - Optional specific height to check
-   * @returns {boolean}
-   */
-  isActive(height = null) {
-    // Always update button text to show current height
-    this.updateButtonText();
-    
-    // Never show active state for line height button
-    return false;
-  }
-
-  /**
-   * Get current line height of the selection
-   * @returns {string|null} Current line height or null
-   */
-  getCurrentHeight() {
-    const selection = window.getSelection();
-    if (!selection || !selection.rangeCount) return null;
-
-    const range = selection.getRangeAt(0);
-    let currentNode = range.startContainer;
-    
-    // If text node, get parent element
-    if (currentNode.nodeType === Node.TEXT_NODE) {
-      currentNode = currentNode.parentElement;
-    }
-    
-    // Get the specific editor instance
-    const editor = Editor.getInstanceById(this.editorId);
-    if (!editor) return '1.15';
-    
-    // Check if the selection is within this editor
-    if (!editor.editor.contains(currentNode) && !editor.editor.isSameNode(currentNode)) {
-      // Selection is not in this editor, return default
-      return '1.15';
-    }
-    
-    // Find element with line-height style
-    while (currentNode && currentNode !== document.body) {
-      if (currentNode.nodeType === Node.ELEMENT_NODE) {
-        const element = currentNode;
-        
-        // Priority 1: Check if this element has explicit inline line-height
-        if (element.style.lineHeight) {
-          const height = element.style.lineHeight;
-          return this.normalizeHeightValue(height);
-        }
-        
-        // Priority 2: Check computed line-height
-        const computedStyle = window.getComputedStyle(element);
-        const lineHeight = computedStyle.lineHeight;
-        
-        if (lineHeight && lineHeight !== 'normal' && lineHeight !== 'initial' && lineHeight !== 'inherit') {
-          // Convert pixel values to relative values if possible
-          if (lineHeight.endsWith('px')) {
-            const fontSize = parseFloat(computedStyle.fontSize);
-            const lineHeightPx = parseFloat(lineHeight);
-            if (fontSize > 0) {
-              const relative = (lineHeightPx / fontSize).toFixed(2);
-              return this.normalizeHeightValue(relative);
-            }
-          }
-          return this.normalizeHeightValue(lineHeight);
-        }
-      }
-      currentNode = currentNode.parentElement;
-    }
-
-    // Default fallback
-    return '1.15';
-  }
-
-  /**
-   * Normalize height value to match heightMap keys
-   * @param {string} height - Raw height value
-   * @returns {string} Normalized height value
-   */
-  normalizeHeightValue(height) {
-    if (!height) return '1.15';
-    
-    // Convert to number and back to string to normalize
-    const numValue = parseFloat(height);
-    if (isNaN(numValue)) return '1.15';
-    
-    // Round to 1 decimal place and convert back to string
-    const normalized = numValue.toFixed(1);
-    
-    // Check if this normalized value exists in our heightMap
-    const heightMap = this.constructor.getHeightMap();
-    if (heightMap[normalized]) {
-      return normalized;
-    }
-    
-    // If not in map, return the original value
-    return height;
-  }
-
-
-  /**
-   * Clean up event listeners to prevent memory leaks
-   */
-  destroy() {
-    if (this.selectionListener) {
-      document.removeEventListener('selectionchange', this.selectionListener);
-      document.removeEventListener('mouseup', this.selectionListener);
-      document.removeEventListener('keyup', this.selectionListener);
-      this.selectionListener = null;
-    }
-  }
-}
-
-export default LineHeight;