@oix1987/yjd 1.0.3 → 2.1.0

package/lib/formats/superscript.js

@@ -0,0 +1,39 @@
+import { InlineFormat } from '../core/format.js';
+import { saveBeforeFormat } from '../utils/history-helper.js';
+import registry from '../core/registry.js';
+/**
+ * Superscript Format - Handles superscript text formatting
+ * Creates <sup> elements for superscript text
+ */
+class Superscript extends InlineFormat {
+  static formatName = 'superscript';
+  static tagName = 'SUP';
+
+  /**
+   * Toggle superscript formatting
+   */
+  removeSubscriptBeforeApply() {
+    // Resolved via registry (not a static import) to avoid a circular
+    // dependency between superscript.js and subscript.js.
+    const Subscript = registry.get('formats/subscript');
+    if (!Subscript) return;
+    const subscript = new Subscript();
+    if (subscript.isActive()) {
+      subscript.remove();
+    }
+  }
+  toggle() {
+    // Save state before applying format
+    saveBeforeFormat();
+
+    if (this.isActive()) {
+      this.remove();
+    } else {
+      // Ensure mutual exclusivity: remove subscript before applying superscript
+      this.removeSubscriptBeforeApply();
+      this.apply();
+    }
+  }
+}
+
+export default Superscript; 

package/lib/formats/table.js

@@ -0,0 +1,293 @@
+import { BlockFormat } from '../core/format.js';
+import TablePopup from '../ui/table-popup.js';
+import Editor from '../core/editor.js';
+
+/**
+ * Table Format - HTML table insertion
+ * Now supports multiple editor instances with separate popup instances
+ */
+class Table extends BlockFormat {
+  static formatName = 'table';
+  static tagName = 'TABLE';
+  static savedRanges = new Map(); // Map to store saved ranges for each editor
+
+  constructor() {
+    super();
+    
+    // Get current editor instance
+    const currentEditor = Editor.getCurrentInstance();
+    if (!currentEditor) {
+      console.warn('No editor instance found for Table format');
+      return;
+    }
+    
+    this.editorId = currentEditor.instanceId;
+    
+    // Check if this editor already has a table popup instance
+    let tablePopup = currentEditor.getPopupInstance('table');
+    
+    if (!tablePopup) {
+      // Create new table popup instance for this editor
+      tablePopup = new TablePopup({
+        onTableSelect: (tableData) => {
+          Table.insertTable(tableData, this.editorId);
+        },
+        editor: currentEditor,
+        editorId: this.editorId
+      });
+      
+      // Store popup instance in editor
+      currentEditor.setPopupInstance('table', tablePopup);
+    }
+    
+    this.tablePopup = tablePopup;
+  }
+
+  /**
+   * Create a new Table format instance for a specific editor
+   * @param {string} editorId - Editor instance ID
+   * @returns {Table} Table 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 Table();
+    
+    // Restore original current instance
+    Editor.currentInstance = originalCurrent;
+    
+    return format;
+  }
+
+  /**
+   * Insert table at saved cursor position
+   * @param {Object} tableData - Table data with rows and cols
+   * @param {string} editorId - Editor instance ID
+   */
+  static insertTable(tableData, 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 table insertion');
+      return;
+    }
+    
+    // Get saved range for this editor
+    const savedRange = Table.savedRanges.get(editorId);
+    if (!savedRange) return;
+    
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(savedRange);
+    
+    const range = selection.getRangeAt(0);
+
+    // Create table HTML
+    const tableElement = Table.createTableElement(tableData.rows, tableData.cols);
+
+    // Clear any selected content
+    if (!range.collapsed) {
+      range.deleteContents();
+    }
+
+    // Insert the table as a top-level block (not nested inside a heading or
+    // inline formatting tags, which would produce invalid HTML).
+    if (typeof editor.insertBlock === 'function') {
+      editor.insertBlock(tableElement);
+    } else {
+      range.insertNode(tableElement);
+    }
+
+    // Position cursor in first cell
+    const firstCell = tableElement.querySelector('td');
+    if (firstCell) {
+      const newRange = document.createRange();
+      newRange.setStart(firstCell, 0);
+      newRange.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+    }
+    
+    // Clear saved range for this editor
+    Table.savedRanges.delete(editorId);
+    
+    // Trigger content change event
+    if (editor && typeof editor.onContentChange === 'function') {
+      editor.onContentChange();
+    }
+  }
+
+  /**
+   * Create table element
+   */
+  static createTableElement(rows, cols) {
+    const table = document.createElement('table');
+    table.className = 'rich-editor-table';
+    table.cellSpacing = '0';
+    table.cellPadding = '0';
+    table.border = '1';
+    
+    const tbody = document.createElement('tbody');
+    
+    for (let r = 0; r < rows; r++) {
+      const row = document.createElement('tr');
+      
+      for (let c = 0; c < cols; c++) {
+        const cell = document.createElement('td');
+        cell.innerHTML = '<br>'; // empty placeholder (keeps height, not counted as content)
+        cell.style.minWidth = '50px';
+        cell.style.minHeight = '24px';
+        cell.style.padding = '4px 8px';
+        cell.style.border = '1px solid #ddd';
+        cell.style.verticalAlign = 'top';
+        
+        // Make cells editable
+        cell.contentEditable = 'true';
+        
+        row.appendChild(cell);
+      }
+      
+      tbody.appendChild(row);
+    }
+    
+    table.appendChild(tbody);
+    
+    // Add table styles
+    table.style.borderCollapse = 'collapse';
+    table.style.width = '100%';
+    table.style.margin = '10px 0';
+    
+    return table;
+  }
+
+  /**
+   * Toggle table popup
+   */
+  toggle() {
+    if (this.tablePopup.isVisible) {
+      this.tablePopup.hide();
+    } else {
+      this.showPopup();
+    }
+  }
+
+  /**
+   * Show table popup
+   */
+  showPopup() {
+    // Lưu vị trí con trỏ hiện tại cho editor này
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      Table.savedRanges.set(this.editorId, selection.getRangeAt(0).cloneRange());
+    }
+    
+    // Find table button in the current editor's toolbar
+    const editor = Editor.getInstanceById(this.editorId);
+    if (!editor) return;
+    
+    const toolbar = editor.getModule('toolbar');
+    let tableButton = null;
+    
+    if (toolbar) {
+      tableButton = toolbar.getButton('table');
+    }
+    
+    // Fallback: find button by class in the current editor's toolbar
+    if (!tableButton) {
+      const toolbarContainer = toolbar?.getContainer();
+      if (toolbarContainer) {
+        tableButton = toolbarContainer.querySelector('.rich-editor-toolbar-btn.table-btn');
+      }
+    }
+    
+    // Final fallback: find any table button in the current editor's wrapper
+    if (!tableButton) {
+      tableButton = editor.wrapper.querySelector('.rich-editor-toolbar-btn.table-btn');
+    }
+    
+    if (!tableButton) {
+      console.warn('Table button not found for editor:', this.editorId);
+      return;
+    }
+    
+    this.tablePopup.show(tableButton);
+  }
+
+  /**
+   * Check if cursor is in a table
+   */
+  isActive() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return false;
+    
+    let node = selection.getRangeAt(0).startContainer;
+    
+    // Find parent table element
+    while (node && node !== document.body) {
+      if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'TABLE') {
+        return true;
+      }
+      node = node.parentNode;
+    }
+    
+    return false;
+  }
+
+  /**
+   * Get current table if cursor is in one
+   */
+  getCurrentTable() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return null;
+    
+    let node = selection.getRangeAt(0).startContainer;
+    
+    // Find parent table element
+    while (node && node !== document.body) {
+      if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'TABLE') {
+        return node;
+      }
+      node = node.parentNode;
+    }
+    
+    return null;
+  }
+
+  /**
+   * Apply table formatting (not applicable for this format)
+   */
+  apply() {
+    this.showPopup();
+  }
+
+  /**
+   * Remove table formatting
+   */
+  remove() {
+    const table = this.getCurrentTable();
+    if (table) {
+      // Hide resize handles before removing table
+      if (window.richEditor && window.richEditor.resizeHandles) {
+        window.richEditor.resizeHandles.hideHandles();
+      }
+      table.parentNode.removeChild(table);
+    }
+  }
+}
+
+export default Table; 

package/lib/formats/tag.js

@@ -0,0 +1,304 @@
+import { InlineFormat } from '../core/format.js';
+import TagPopup from '../ui/tag-popup.js';
+import Editor from '../core/editor.js';
+
+/**
+ * Tag Format - Handles custom tag insertion
+ * Now supports multiple editor instances with separate popup instances
+ */
+class Tag extends InlineFormat {
+  static formatName = 'tag';
+  static tagName = 'SPAN';
+  static className = 'custom-tag';
+  static savedRanges = new Map(); // Map to store saved ranges for each editor
+
+  constructor() {
+    super();
+    
+    // Get current editor instance
+    const currentEditor = Editor.getCurrentInstance();
+    if (!currentEditor) {
+      console.warn('No editor instance found for Tag format');
+      return;
+    }
+    
+    this.editorId = currentEditor.instanceId;
+    
+    // Check if this editor already has a tag popup instance
+    let tagPopup = currentEditor.getPopupInstance('tag');
+    
+    if (!tagPopup) {
+      // Create new tag popup instance for this editor
+      tagPopup = new TagPopup({
+        onTagInsert: (tagType, tagContent) => {
+          Tag.insertTagAtCurrentPosition(tagType, tagContent, this.editorId);
+        },
+        editor: currentEditor,
+        editorId: this.editorId
+      });
+      
+      // Store popup instance in editor
+      currentEditor.setPopupInstance('tag', tagPopup);
+    }
+    
+    this.tagPopup = tagPopup;
+  }
+
+  /**
+   * Create a new Tag format instance for a specific editor
+   * @param {string} editorId - Editor instance ID
+   * @returns {Tag} Tag 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 Tag();
+    
+    // Restore original current instance
+    Editor.currentInstance = originalCurrent;
+    
+    return format;
+  }
+
+  /**
+   * Create tag element
+   * @param {string} tagType - Type of tag (@, #, custom)
+   * @param {string} content - Tag content
+   * @returns {HTMLElement}
+   */
+  static create(tagType, content) {
+    const span = document.createElement('SPAN');
+    span.className = `custom-tag tag-${tagType}`;
+    
+    let displayText = content;
+    if (tagType === 'mention') {
+      displayText = `@${content}`;
+    } else if (tagType === 'hashtag') {
+      displayText = `#${content}`;
+    } else if (tagType === 'custom') {
+      displayText = `<${content}>`;
+    }
+    
+    span.textContent = displayText;
+    span.setAttribute('data-tag-type', tagType);
+    span.setAttribute('data-tag-content', content);
+    span.setAttribute('contenteditable', 'false');
+    
+    return span;
+  }
+
+  /**
+   * Insert tag at current cursor position
+   * @param {string} tagType - Type of tag
+   * @param {string} content - Tag content
+   * @param {string} editorId - Editor instance ID
+   */
+  static insertTagAtCurrentPosition(tagType, content, 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 tag insertion');
+      return;
+    }
+    
+    // Use saved range if available, otherwise get current selection
+    const selection = window.getSelection();
+    if (!selection) return;
+
+    try {
+      // Restore saved range if exists for this editor
+      const savedRange = Tag.savedRanges.get(editorId);
+      if (savedRange) {
+        selection.removeAllRanges();
+        selection.addRange(savedRange);
+        Tag.savedRanges.delete(editorId);
+      } else if (!selection.rangeCount) {
+        return;
+      }
+
+      const range = selection.getRangeAt(0);
+      
+      // Create tag element
+      const tagElement = Tag.create(tagType, content);
+      
+      // Insert tag at cursor position
+      range.deleteContents();
+      range.insertNode(tagElement);
+      
+      // Add a space after the tag for easier editing
+      const spaceNode = document.createTextNode(' ');
+      range.setStartAfter(tagElement);
+      range.insertNode(spaceNode);
+      
+      // Position cursor after the space
+      range.setStartAfter(spaceNode);
+      range.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      
+      // Focus back on editor
+      if (editor && editor.element) {
+        editor.element.focus();
+      }
+      
+      // Trigger content change event
+      if (editor && typeof editor.onContentChange === 'function') {
+        editor.onContentChange();
+      }
+      
+    } catch (error) {
+      console.error('Error inserting tag:', error);
+    }
+  }
+
+  /**
+   * Apply tag formatting - shows tag popup
+   */
+  apply(tagType, content) {
+    if (tagType && content) {
+      Tag.insertTagAtCurrentPosition(tagType, content, this.editorId);
+    } else {
+      // Save current selection before showing popup
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        Tag.savedRanges.set(this.editorId, selection.getRangeAt(0).cloneRange());
+      }
+      this.showTagPopup();
+    }
+  }
+
+  /**
+   * Remove tag formatting
+   */
+  remove() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return;
+
+    const range = selection.getRangeAt(0);
+    const tagElement = this.getTagElement(range);
+    
+    if (tagElement) {
+      // Replace tag element with its text content
+      const textNode = document.createTextNode(tagElement.textContent);
+      tagElement.parentNode.replaceChild(textNode, tagElement);
+    }
+  }
+
+  /**
+   * Toggle tag formatting - shows tag popup
+   */
+  toggle() {
+    if (this.tagPopup.isVisible) {
+      this.tagPopup.hide();
+    } else {
+      // Save current selection before showing popup
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        Tag.savedRanges.set(this.editorId, selection.getRangeAt(0).cloneRange());
+      }
+      this.showTagPopup();
+    }
+  }
+
+  /**
+   * Show tag popup
+   */
+  showTagPopup() {
+    // Find tag button in the current editor's toolbar
+    const editor = Editor.getInstanceById(this.editorId);
+    if (!editor) return;
+    
+    const toolbar = editor.getModule('toolbar');
+    let tagButton = null;
+    
+    if (toolbar) {
+      tagButton = toolbar.getButton('tag');
+    }
+    
+    // Fallback: find button by class in the current editor's toolbar
+    if (!tagButton) {
+      const toolbarContainer = toolbar?.getContainer();
+      if (toolbarContainer) {
+        tagButton = toolbarContainer.querySelector('.rich-editor-toolbar-btn.tag-btn');
+      }
+    }
+    
+    // Final fallback: find any tag button in the current editor's wrapper
+    if (!tagButton) {
+      tagButton = editor.wrapper.querySelector('.rich-editor-toolbar-btn.tag-btn');
+    }
+    
+    if (!tagButton) {
+      console.warn('Tag button not found for editor:', this.editorId);
+      return;
+    }
+    
+    this.tagPopup.show(tagButton);
+  }
+
+  /**
+   * Check if tag formatting is active
+   */
+  isActive() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return false;
+
+    const range = selection.getRangeAt(0);
+    return this.getTagElement(range) !== null;
+  }
+
+  /**
+   * Get tag element from selection
+   * @param {Range} range - Selection range
+   * @returns {HTMLElement|null}
+   */
+  getTagElement(range) {
+    let node = range.commonAncestorContainer;
+    
+    // If it's a text node, get its parent
+    if (node.nodeType === Node.TEXT_NODE) {
+      node = node.parentNode;
+    }
+    
+    // Check if current node is a tag
+    if (node.classList && node.classList.contains('custom-tag')) {
+      return node;
+    }
+    
+    // Check if selection contains a tag
+    const tagInSelection = range.cloneContents().querySelector('.custom-tag');
+    return tagInSelection || null;
+  }
+
+  /**
+   * Get predefined tag suggestions
+   * @param {string} tagType - Type of tag
+   * @returns {Array} - Array of suggestions
+   */
+  static getSuggestions(tagType) {
+    const suggestions = {
+      mention: ['john', 'sarah', 'admin', 'team', 'support'],
+      hashtag: ['urgent', 'todo', 'done', 'review', 'important'],
+      custom: ['note', 'warning', 'tip', 'info', 'success']
+    };
+    
+    return suggestions[tagType] || [];
+  }
+}
+
+export default Tag;