@oix1987/yjd 1.0.1 → 1.0.3

package/lib/ui/list-picker.js

@@ -1,307 +0,0 @@
-import IconUtils from './icons.js';
-import { appendPopup, calculatePopupPosition, setPopupPosition } from '../utils/popup-helper.js';
-
-/**
- * List Picker Component - Popup for selecting list types
- */
-class ListPicker {
-  constructor(options = {}) {
-    this.options = {
-      listTypes: [
-        { value: 'bullet', label: 'Bullet List', icon: 'list-bullet' },
-        { value: 'ordered', label: 'Numbered List', icon: 'list-ordered' },
-        { value: 'roman', label: 'Roman Numerals List', icon: 'list-roman' },
-        { value: 'alpha', label: 'Alphabetical List', icon: 'list-alpha' }
-      ],
-      onListSelect: null,
-      ...options
-    };
-    
-    this.popup = null;
-    this.isVisible = false;
-    this.currentListType = null;
-    this.clickOutsideHandler = null;
-    
-    this.createListPicker();
-  }
-
-  /**
-   * Create list picker popup
-   */
-  createListPicker() {
-    // Create popup
-    this.popup = document.createElement('div');
-    this.popup.className = 'list-picker-popup';
-    
-    // Create list type buttons
-    this.createListTypeButtons();
-    
-    // Add popup to container
-    appendPopup(this.popup);
-  }
-
-  /**
-   * Create list type buttons
-   */
-  async createListTypeButtons() {
-    const buttonContainer = document.createElement('div');
-    buttonContainer.className = 'list-button-container';
-    
-    // Icons are now inline, no need to preload
-    
-    // Create buttons
-    for (const listType of this.options.listTypes) {
-      const listButton = document.createElement('button');
-      listButton.type = 'button';
-      listButton.className = 'list-button';
-      listButton.dataset.listType = listType.value;
-      listButton.title = listType.label;
-      
-      // Add icon
-      const iconSvg = IconUtils.getIcon(listType.icon);
-      if (iconSvg) {
-        listButton.innerHTML = iconSvg;
-      } else {
-        listButton.textContent = listType.label.charAt(0);
-      }
-      
-      listButton.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.selectListType(listType.value);
-      });
-      
-      buttonContainer.appendChild(listButton);
-    }
-    
-    this.popup.appendChild(buttonContainer);
-  }
-
-  /**
-   * Setup click outside handler
-   */
-  setupClickOutside() {
-    if (this.clickOutsideHandler) {
-      document.removeEventListener('click', this.clickOutsideHandler);
-    }
-    
-    this.clickOutsideHandler = (e) => {
-      if (!this.popup.contains(e.target)) {
-        this.hide();
-      }
-    };
-    
-    // Add slight delay to avoid immediate close
-    setTimeout(() => {
-      document.addEventListener('click', this.clickOutsideHandler);
-    }, 100);
-  }
-
-  /**
-   * Remove click outside handler
-   */
-  removeClickOutside() {
-    if (this.clickOutsideHandler) {
-      document.removeEventListener('click', this.clickOutsideHandler);
-      this.clickOutsideHandler = null;
-    }
-  }
-
-  /**
-   * Show list picker popup
-   * @param {HTMLElement} anchor - Element to position popup relative to
-   */
-  show(anchor) {
-    if (!anchor) return;
-    
-    // Ensure popup is in DOM
-    if (!document.body.contains(this.popup)) {
-      appendPopup(this.popup);
-    }
-    
-    // Update current list type state
-    this.updateCurrentListType();
-    
-    // Calculate and set popup position
-    const position = calculatePopupPosition(anchor, this.popup, {
-      offsetY: 5,
-      offsetX: 0
-    });
-    setPopupPosition(this.popup, position);
-    
-    // Show popup by adding visible class
-    this.popup.classList.add('visible');
-    this.isVisible = true;
-    
-    // Setup click outside handler
-    this.setupClickOutside();
-  }
-
-  /**
-   * Hide list picker popup
-   */
-  hide() {
-    this.popup.classList.remove('visible');
-    this.isVisible = false;
-    this.removeClickOutside();
-  }
-
-  /**
-   * Select list type and trigger callback
-   * @param {string} listType - Selected list type
-   */
-  selectListType(listType) {
-    this.currentListType = listType;
-    
-    if (this.options.onListSelect) {
-      this.options.onListSelect(listType);
-    }
-    
-    this.hide();
-  }
-
-  /**
-   * Update current list type state based on selection
-   */
-  updateCurrentListType() {
-    try {
-      const listType = this.getCurrentListType();
-      this.currentListType = listType;
-      
-      // Update button states
-      this.updateButtonStates(listType);
-    } catch (error) {
-      console.warn('Error updating current list type:', error);
-    }
-  }
-
-  /**
-   * Update button states based on current list type
-   * @param {string|null} currentListType - Current active list type
-   */
-  updateButtonStates(currentListType) {
-    const buttons = this.popup.querySelectorAll('.list-button');
-    buttons.forEach(button => {
-      button.classList.remove('active');
-      if (currentListType && button.dataset.listType === currentListType) {
-        button.classList.add('active');
-      }
-    });
-  }
-
-  /**
-   * Update toolbar button icon based on selection
-   * @param {string} listType - Current list type
-   */
-  updateToolbarButtonIcon(listType) {
-    const button = document.querySelector('.rich-editor-toolbar-btn.list-btn');
-    if (!button) return;
-
-    const iconMap = {
-      'bullet': 'list-bullet',
-      'ordered': 'list-ordered',
-      'roman': 'list-roman',
-      'alpha': 'list-alpha'
-    };
-
-    const titleMap = {
-      'bullet': 'Bullet List',
-      'ordered': 'Numbered List',
-      'roman': 'Roman Numerals List',
-      'alpha': 'Alphabetical List'
-    };
-    
-    const iconName = iconMap[listType] || 'list-bullet';
-    
-    // Update button title
-    button.title = titleMap[listType] || 'List';
-    
-    // Update icon
-    const svgContent = IconUtils.getIcon(iconName);
-    if (svgContent) {
-      const iconSpan = button.querySelector('.icon');
-      if (iconSpan) {
-        iconSpan.innerHTML = svgContent;
-      } else {
-        button.innerHTML = `<span class="icon">${svgContent}</span>`;
-      }
-    }
-  }
-
-  /**
-   * Get parent list of an element
-   */
-  getParentList(element) {
-    let current = element;
-    while (current && current !== document.body) {
-      if (current.tagName === 'UL' || current.tagName === 'OL') {
-        return current;
-      }
-      current = current.parentElement;
-    }
-    return null;
-  }
-
-  /**
-   * Get list type from list element
-   */
-  getListType(listElement) {
-    if (listElement.tagName === 'OL') {
-      const type = listElement.style.listStyleType;
-      if (type === 'upper-roman') return 'roman';
-      if (type === 'lower-alpha') return 'alpha';
-      return 'ordered';
-    }
-    return 'bullet';
-  }
-
-  /**
-   * Get block element containing the given node
-   */
-  getBlockElement(node) {
-    if (!node) return null;
-    
-    let currentNode = node;
-    while (currentNode && currentNode !== document.body) {
-      if (currentNode.nodeType === Node.ELEMENT_NODE) {
-        const tagName = currentNode.tagName;
-        if (['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'LI', 'UL', 'OL'].includes(tagName)) {
-          return currentNode;
-        }
-      }
-      currentNode = currentNode.parentNode;
-    }
-    return null;
-  }
-
-  /**
-   * Get current list type
-   * @returns {string|null}
-   */
-  getCurrentListType() {
-    const selection = window.getSelection();
-    if (!selection || !selection.rangeCount) return null;
-
-    const range = selection.getRangeAt(0);
-    const listElement = this.getParentList(range.commonAncestorContainer);
-    
-    return listElement ? this.getListType(listElement) : null;
-  }
-
-  /**
-   * Destroy the list picker
-   */
-  destroy() {
-    this.removeClickOutside();
-    
-    if (this.popup && this.popup.parentNode) {
-      this.popup.parentNode.removeChild(this.popup);
-    }
-    
-    this.popup = null;
-    this.isVisible = false;
-    this.currentListType = null;
-  }
-}
-
-export default ListPicker; 

package/lib/ui/select-button.js

@@ -1,61 +0,0 @@
-import IconUtils from './icons.js';
-
-/**
- * Create Custom Button - Simple utility to create styled button
- * @param {string} text - Button text content
- * @param {Object} options - Button options
- * @param {string} options.width - Button width (e.g., '120px', 'auto')
- * @returns {HTMLElement} Button element
- */
-function createCustomButton(text = 'Button', options = {}) {
-  const { width = 'auto' } = options;
-
-  // Create button
-  const button = document.createElement('button');
-  button.type = 'button';
-  button.className = 'custom-select-button';
-  
-  // Create text span
-  const textSpan = document.createElement('span');
-  textSpan.textContent = text;
-  textSpan.className = 'button-text';
-  
-  // Create dropdown icon
-  const dropdownIcon = IconUtils.createIconElement('dropdown');
-  dropdownIcon.className = 'dropdown-icon';
-  
-  // Add text and icon to button
-  button.appendChild(textSpan);
-  button.appendChild(dropdownIcon);
-  
-  // Apply styles
-  button.style.width = width;
-  button.style.padding = '0px 5px 0px 8px';
-  button.style.setProperty('height', '32px', 'important');
-  button.style.setProperty('borderRadius', '6px', 'important');
-  button.style.setProperty('alignItems', 'center', 'important');
-  button.style.fontSize = '14px';
-  button.style.fontWeight = '400';
-  button.style.color = '#374151';
-  button.style.background = '#FFFFFF';
-  button.style.cursor = 'pointer';
-  button.style.border = '1px solid #d1d5db';
-  button.style.display = 'flex';
-  button.style.justifyContent = 'space-between';
-  button.style.alignItems = 'center';
-  
-  // Style the text span to take available space
-  textSpan.style.flex = '1';
-  textSpan.style.textAlign = 'left';
-  
-  // Style the dropdown icon
-  
-  // Add method to update button text
-  button.updateText = function(newText) {
-    textSpan.textContent = newText;
-  };
-  
-  return button;
-}
-
-export default createCustomButton; 

package/lib/ui/table-popup.js

@@ -1,171 +0,0 @@
-/**
- * Table Popup Component - Interactive table size picker
- */
-import { PopupPositioning } from '../utils/popup-positioning.js';
-import { appendPopup, calculatePopupPosition, setPopupPosition } from '../utils/popup-helper.js';
-
-class TablePopup {
-  constructor(options = {}) {
-    this.options = {
-      maxRows: 8,
-      maxCols: 8,
-      onTableSelect: null,
-      ...options
-    };
-    
-    this.popup = null;
-    this.isVisible = false;
-    this.selectedRows = 1;
-    this.selectedCols = 1;
-    this.grid = null;
-    this.sizeDisplay = null;
-    
-    this.createPopup();
-  }
-
-  createPopup() {
-    this.popup = document.createElement('div');
-    this.popup.className = 'table-popup';
-    
-    const content = document.createElement('div');
-    content.className = 'table-popup-content';
-    
-    // Create size display text
-    this.createSizeDisplay();
-    
-    // Create grid selector
-    this.createGridSelector();
-    
-    content.appendChild(this.grid);
-    content.appendChild(this.sizeDisplay);
-    this.popup.appendChild(content);
-    appendPopup(this.popup);
-  }
-
-  createSizeDisplay() {
-    this.sizeDisplay = document.createElement('div');
-    this.sizeDisplay.className = 'table-size-display';
-    
-  }
-  createGridSelector() {
-    this.grid = document.createElement('div');
-    this.grid.className = 'table-grid-selector';
-    
-    // Create grid of cells
-    for (let row = 1; row <= this.options.maxRows; row++) {
-      for (let col = 1; col <= this.options.maxCols; col++) {
-        const cell = document.createElement('div');
-        cell.className = 'table-grid-cell';
-        cell.dataset.row = row;
-        cell.dataset.col = col;
-        
-        // Mouse events
-        cell.addEventListener('mouseenter', () => {
-          this.highlightGrid(row, col);
-        });
-        
-        cell.addEventListener('click', () => {
-          this.selectSize(row, col);
-          this.handleInsert();
-        });
-        
-        this.grid.appendChild(cell);
-      }
-    }
-    
-    // Reset hover when leaving grid
-    this.grid.addEventListener('mouseleave', () => {
-      this.highlightGrid(1, 1);
-    });
-  }
-
-  highlightGrid(rows, cols) {
-    this.selectedRows = rows;
-    this.selectedCols = cols;
-    
-    // Update size display text
-    this.updateSizeDisplay(rows, cols);
-    
-    // Update grid visual
-    const cells = this.grid.querySelectorAll('.table-grid-cell');
-    cells.forEach(cell => {
-      const cellRow = parseInt(cell.dataset.row);
-      const cellCol = parseInt(cell.dataset.col);
-      
-      if (cellRow <= rows && cellCol <= cols) {
-        cell.classList.add('highlighted');
-      } else {
-        cell.classList.remove('highlighted');
-      }
-    });
-  }
-
-  updateSizeDisplay(rows, cols) {
-    if (this.sizeDisplay) {
-      this.sizeDisplay.textContent = `${rows}x${cols}`;
-    }
-  }
-
-  selectSize(rows, cols) {
-    this.selectedRows = rows;
-    this.selectedCols = cols;
-    this.updateSizeDisplay(rows, cols);
-  }
-
-  handleInsert() {
-    if (this.options.onTableSelect) {
-      this.options.onTableSelect({
-        rows: this.selectedRows,
-        cols: this.selectedCols
-      });
-    }
-    
-    this.hide();
-  }
-
-  show(anchor) {
-    if (!anchor) return;
-    
-    // Reset selection
-    this.selectedRows = 1;
-    this.selectedCols = 1;
-    this.highlightGrid(1, 1);
-    
-    // Calculate and set popup position
-    const position = calculatePopupPosition(anchor, this.popup, {
-      offsetY: 5,
-      offsetX: 0
-    });
-    setPopupPosition(this.popup, position);
-    
-    // Show popup
-    this.popup.classList.add('visible');
-    this.isVisible = true;
-    
-    // Click outside to close
-    setTimeout(() => {
-      document.addEventListener('click', this.closeOnClickOutside);
-    }, 100);
-  }
-
-  hide() {
-    this.popup.classList.remove('visible');
-    this.isVisible = false;
-    document.removeEventListener('click', this.closeOnClickOutside);
-  }
-
-  closeOnClickOutside = (e) => {
-    if (!this.popup.contains(e.target)) {
-      this.hide();
-    }
-  }
-
-  destroy() {
-    document.removeEventListener('click', this.closeOnClickOutside);
-    if (this.popup && this.popup.parentNode) {
-      this.popup.parentNode.removeChild(this.popup);
-    }
-  }
-}
-
-export default TablePopup;