@oix1987/yjd 1.0.3 → 2.1.0

package/lib/ui/tag-popup.js

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

@@ -0,0 +1,278 @@
+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;
+      
+      // Icon only — the label lives in the tooltip (title) above.
+      const iconSvg = IconUtils.getIcon(alignment.icon);
+      if (iconSvg) {
+        alignButton.innerHTML = `<span class="icon-wrapper">${iconSvg}</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;