@oix1987/yjd 1.0.0 → 1.0.2

package/lib/ui/tag-popup.js

@@ -1,249 +0,0 @@
-/**
- * Tag Popup Component - Popup for inserting custom tags
- */
-import { appendPopup, calculatePopupPosition, setPopupPosition } from '../utils/popup-helper.js';
-
-class TagPopup {
-  constructor(options = {}) {
-    this.options = {
-      onTagInsert: null,
-      editor: null,
-      ...options
-    };
-    
-    this.popup = null;
-    this.isVisible = false;
-    this.clickOutsideHandler = null;
-    this.selectedTagType = 'mention';
-    
-    this.createTagPopup();
-  }
-
-  createTagPopup() {
-    this.popup = document.createElement('div');
-    this.popup.className = 'tag-popup';
-    
-    const content = document.createElement('div');
-    content.className = 'tag-popup-content';
-    
-    // Title
-    const title = document.createElement('h3');
-    title.textContent = 'Insert tags';
-    title.className = 'yjd-input-title';
-    content.appendChild(title);
-    
-    // Tag type selector
-    const group1 = document.createElement('div');
-    group1.className = 'yjd-input-group';
-    
-    const typeLabel = document.createElement('label');
-    typeLabel.textContent = 'Type';
-    typeLabel.className = 'yjd-input-label';
-    
-    this.typeSelect = document.createElement('select');
-    this.typeSelect.className = 'yjd-select-input';
-    this.typeSelect.innerHTML = `
-      <option value="mention">Mention</option>
-      <option value="hashtag">Hashtag</option>
-      <option value="custom">Custom</option>
-    `;
-    this.typeSelect.addEventListener('change', () => this.updateSuggestions());
-    
-    group1.appendChild(typeLabel);
-    group1.appendChild(this.typeSelect);
-    content.appendChild(group1);
-    
-    // Content input
-    const group2 = document.createElement('div');
-    group2.className = 'yjd-input-group';
-    
-    const contentLabel = document.createElement('label');
-    contentLabel.textContent = 'Content';
-    contentLabel.className = 'yjd-input-label';
-    
-    this.contentInput = document.createElement('input');
-    this.contentInput.type = 'text';
-    this.contentInput.className = 'yjd-input';
-    this.contentInput.placeholder = 'Please enter tag content';
-    this.contentInput.addEventListener('input', () => this.updateInsertButton());
-    this.contentInput.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        this.insertTag();
-      }
-    });
-    
-    group2.appendChild(contentLabel);
-    group2.appendChild(this.contentInput);
-    content.appendChild(group2);
-    
-    // Suggestions
-    const group3 = document.createElement('div');
-    group3.className = 'yjd-input-group';
-    this.suggestionsContainer = document.createElement('div');
-    this.suggestionsContainer.className = 'tag-suggestions-container';
-    
-    const suggestionsLabel = document.createElement('label');
-    suggestionsLabel.textContent = 'Suggestions';
-    suggestionsLabel.className = 'yjd-input-label';
-    
-    this.suggestionsList = document.createElement('div');
-    this.suggestionsList.className = 'yjd-suggestions-list';
-    
-    this.suggestionsContainer.appendChild(this.suggestionsList);
-    group3.appendChild(suggestionsLabel);
-    group3.appendChild(this.suggestionsContainer);
-    content.appendChild(group3);
-    
-    // Buttons
-    const buttonContainer = document.createElement('div');
-    buttonContainer.className = 'yjd-button-container';
-    
-    const cancelButton = document.createElement('button');
-    cancelButton.type = 'button';
-    cancelButton.className = 'yjd-button-cancel';
-    cancelButton.textContent = 'Cancel';
-    cancelButton.addEventListener('click', () => this.hide());
-    
-    this.insertButton = document.createElement('button');
-    this.insertButton.type = 'button';
-    this.insertButton.className = 'yjd-button-confirm';
-    this.insertButton.textContent = 'Insert Tag';
-    this.insertButton.disabled = true;
-    this.insertButton.addEventListener('click', () => this.insertTag());
-    
-    buttonContainer.appendChild(cancelButton);
-    buttonContainer.appendChild(this.insertButton);
-    content.appendChild(buttonContainer);
-    
-    this.popup.appendChild(content);
-    appendPopup(this.popup);
-    
-    // Prevent focus loss when clicking on popup
-    if (this.options.editor && typeof this.options.editor.preventFocusLoss === 'function') {
-      this.options.editor.preventFocusLoss(this.popup);
-    }
-    
-    this.updateSuggestions();
-  }
-
-  updateSuggestions() {
-    this.selectedTagType = this.typeSelect.value;
-    this.suggestionsList.innerHTML = '';
-    
-    const suggestions = this.getSuggestions(this.selectedTagType);
-    
-    suggestions.forEach(suggestion => {
-      const suggestionButton = document.createElement('button');
-      suggestionButton.type = 'button';
-      suggestionButton.className = 'yjd-suggestion-button';
-      suggestionButton.textContent = suggestion;
-      
-      suggestionButton.addEventListener('click', () => {
-        this.contentInput.value = suggestion;
-        this.updateInsertButton();
-        this.contentInput.focus();
-      });
-      
-      this.suggestionsList.appendChild(suggestionButton);
-    });
-  }
-
-  getSuggestions(tagType) {
-    const suggestions = {
-      mention: ['john', 'admin', 'team', 'support'],
-      hashtag: ['urgent', 'done',  'important'],
-      custom: ['warning',  'info', 'success']
-    };
-    
-    return suggestions[tagType] || [];
-  }
-
-  updateInsertButton() {
-    const hasContent = this.contentInput.value.trim();
-    this.insertButton.disabled = !hasContent;
-  }
-
-  insertTag() {
-    const content = this.contentInput.value.trim();
-    
-    if (!content) return;
-    
-    if (this.options.onTagInsert) {
-      this.options.onTagInsert(this.selectedTagType, content);
-    }
-    
-    this.hide();
-    this.reset();
-  }
-
-  reset() {
-    this.contentInput.value = '';
-    this.typeSelect.value = 'mention';
-    this.selectedTagType = 'mention';
-    this.updateInsertButton();
-    this.updateSuggestions();
-  }
-
-  setupClickOutside() {
-    if (this.clickOutsideHandler) {
-      document.removeEventListener('click', this.clickOutsideHandler);
-    }
-    
-    this.clickOutsideHandler = (e) => {
-      if (!this.popup.contains(e.target)) {
-        this.hide();
-      }
-    };
-    
-    setTimeout(() => {
-      document.addEventListener('click', this.clickOutsideHandler);
-    }, 100);
-  }
-
-  removeClickOutside() {
-    if (this.clickOutsideHandler) {
-      document.removeEventListener('click', this.clickOutsideHandler);
-      this.clickOutsideHandler = null;
-    }
-  }
-
-  show(anchor) {
-    if (!anchor) return;
-    
-    // Calculate and set popup position
-    const position = calculatePopupPosition(anchor, this.popup, {
-      offsetY: 5,
-      offsetX: 0
-    });
-    setPopupPosition(this.popup, position);
-    
-    this.popup.classList.add('visible');
-    this.isVisible = true;
-    
-    this.setupClickOutside();
-    
-    setTimeout(() => {
-      this.contentInput.focus();
-    }, 100);
-  }
-
-  hide() {
-    this.popup.classList.remove('visible');
-    this.isVisible = false;
-    this.removeClickOutside();
-  }
-
-  destroy() {
-    this.removeClickOutside();
-    
-    if (this.popup && this.popup.parentNode) {
-      this.popup.parentNode.removeChild(this.popup);
-    }
-    
-    this.popup = null;
-    this.isVisible = false;
-  }
-}
-
-export default TagPopup; 

package/lib/ui/text-align-picker.js

@@ -1,281 +0,0 @@
-import IconUtils from './icons.js';
-import { appendPopup, calculatePopupPosition, setPopupPosition } from '../utils/popup-helper.js';
-
-/**
- * Text Align Picker Component - Popup for selecting text alignment
- */
-class TextAlignPicker {
-  constructor(options = {}) {
-    this.options = {
-      alignments: [
-        { value: 'left', label: 'Align Left', icon: 'align-left' },
-        { value: 'center', label: 'Align Center', icon: 'align-center' },
-        { value: 'right', label: 'Align Right', icon: 'align-right' },
-        { value: 'justify', label: 'Justify', icon: 'align-justify' }
-      ],
-      onAlignSelect: null,
-      ...options
-    };
-    
-    this.popup = null;
-    this.isVisible = false;
-    this.currentAlignment = 'left';
-    this.clickOutsideHandler = null;
-    
-    this.createAlignPicker();
-  }
-
-  /**
-   * Create text align picker popup
-   */
-  createAlignPicker() {
-    // Create popup
-    this.popup = document.createElement('div');
-    this.popup.className = 'text-align-picker-popup';
-    
-    // Create alignment buttons
-    this.createAlignmentButtons();
-    
-    // Add popup to container
-    appendPopup(this.popup);
-  }
-
-  /**
-   * Create alignment buttons
-   */
-  async createAlignmentButtons() {
-    const buttonContainer = document.createElement('div');
-    buttonContainer.className = 'align-button-container';
-    
-    // Icons are now inline, no need to preload
-    
-    // Create buttons
-    for (const alignment of this.options.alignments) {
-      const alignButton = document.createElement('button');
-      alignButton.type = 'button';
-      alignButton.className = 'align-button';
-      alignButton.dataset.alignment = alignment.value;
-      alignButton.title = alignment.label;
-      
-      // Add icon
-      const iconSvg = IconUtils.getIcon(alignment.icon);
-      if (iconSvg) {
-        alignButton.innerHTML = `
-          <span class="icon-wrapper">${iconSvg}</span>
-          <span class="label-text">${alignment.label}</span>
-        `;
-      } else {
-        alignButton.textContent = alignment.label.charAt(0);
-      }
-      
-      alignButton.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.selectAlignment(alignment.value);
-      });
-      
-      buttonContainer.appendChild(alignButton);
-    }
-    
-    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 text align 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 alignment state
-    this.updateCurrentAlignment();
-    
-    // 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 text align picker popup
-   */
-  hide() {
-    this.popup.classList.remove('visible');
-    this.isVisible = false;
-    this.removeClickOutside();
-  }
-
-  /**
-   * Select alignment and trigger callback
-   * @param {string} alignment - Selected alignment
-   */
-  selectAlignment(alignment) {
-    this.currentAlignment = alignment;
-    
-    if (this.options.onAlignSelect) {
-      this.options.onAlignSelect(alignment);
-    }
-    
-    this.hide();
-  }
-
-  /**
-   * Update current alignment state based on selection
-   */
-  updateCurrentAlignment() {
-    const selection = window.getSelection();
-    if (!selection || !selection.rangeCount) return;
-
-    try {
-      const range = selection.getRangeAt(0);
-
-      // Lấy tất cả block trong vùng chọn
-      const blocks = this.getSelectedBlockElements(range);
-
-      // Nếu có block → lấy block đầu tiên, nếu không thì fallback về block bao quanh
-      const firstBlock = blocks.length > 0
-        ? blocks[0]
-        : this.getBlockElement(range.commonAncestorContainer);
-
-      if (firstBlock) {
-        const textAlign = window.getComputedStyle(firstBlock).textAlign;
-        this.currentAlignment =
-          textAlign === 'left' || textAlign === 'start' || !textAlign
-            ? 'left'
-            : textAlign;
-      } else {
-        this.currentAlignment = 'left';
-      }
-
-      // Cập nhật trạng thái nút trong popup
-      const buttons = this.popup.querySelectorAll('.align-button');
-      buttons.forEach(button => {
-        if (button.dataset.alignment === this.currentAlignment) {
-          button.classList.add('active');
-        } else {
-          button.classList.remove('active');
-        }
-      });
-
-      // Cập nhật icon trên toolbar
-      this.updateToolbarButtonIcon(this.currentAlignment);
-    } catch (error) {
-      console.error('Error updating current alignment:', error);
-    }
-  }
-
-  /**
-   * Lấy tất cả block element trong vùng chọn
-   */
-  getSelectedBlockElements(range) {
-    const blocks = [];
-    const startBlock = this.getBlockElement(range.startContainer);
-    const endBlock = this.getBlockElement(range.endContainer);
-
-    if (startBlock) blocks.push(startBlock);
-
-    if (startBlock && endBlock && startBlock !== endBlock) {
-      let current = startBlock;
-      while (current && current !== endBlock) {
-        current = current.nextElementSibling;
-        if (current && this.getBlockElement(current) && !blocks.includes(current)) {
-          blocks.push(current);
-        }
-      }
-      if (endBlock && !blocks.includes(endBlock)) {
-        blocks.push(endBlock);
-      }
-    }
-
-    return blocks;
-  }
-
-  /**
-   * Update toolbar button icon based on alignment
-   * @param {string} alignment - Current alignment
-   */
-  updateToolbarButtonIcon(alignment) {
-    // Import TextAlign class to use its static method
-    import('../formats/text-align.js').then(module => {
-      const TextAlign = module.default;
-      TextAlign.updateToolbarButtonIcon(alignment);
-    }).catch(error => {
-      console.warn('Could not import TextAlign class:', error);
-    });
-  }
-
-  /**
-   * Get the 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'].includes(tagName)) {
-          return currentNode;
-        }
-      }
-      currentNode = currentNode.parentNode;
-    }
-    return null;
-  }
-
-  /**
-   * Destroy text align picker
-   */
-  destroy() {
-    this.removeClickOutside();
-    if (this.popup && this.popup.parentNode) {
-      this.popup.parentNode.removeChild(this.popup);
-    }
-  }
-}
-
-export default TextAlignPicker;