@oix1987/yjd 1.0.3 → 2.0.0

package/lib/ui/list-picker.js

@@ -0,0 +1,307 @@
+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

@@ -0,0 +1,68 @@
+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', icon = null } = options;
+
+  // Create button
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = 'custom-select-button';
+
+  // Optional leading icon so the control is recognisable at a glance.
+  if (icon) {
+    const leadIcon = IconUtils.createIconElement(icon);
+    leadIcon.className = 'select-lead-icon';
+    button.appendChild(leadIcon);
+  }
+
+  // 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

@@ -0,0 +1,171 @@
+/**
+ * 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;