@oix1987/yjd 1.0.0

package/lib/modules/toolbar.js

@@ -0,0 +1,424 @@
+import Module from '../core/module.js';
+import ColorPicker from '../ui/color-picker.js';
+import IconUtils from '../ui/icons.js';
+import createCustomButton from '../ui/select-button.js';
+
+/**
+ * Toolbar Module - Pure UI component with dual toolbar support
+ * Only handles toolbar creation and event emission
+ * No business logic or state management
+ */
+class Toolbar extends Module {
+  static DEFAULTS = {
+    container: null,
+    toolbar1: [
+      { group: 'text-format', items: ['bold', 'italic', 'underline', 'strike'] },
+      { group: 'script', items: ['subscript', 'superscript'] },
+      { group: 'colors', items: ['color', 'background'] },
+      { group: 'link', items: ['link'] },
+      { group: 'structure', items: ['heading', 'text-size'] },
+      { group: 'table', items: ['table'] },
+      { group: 'alignment', items: ['text-align'] },
+      { group: 'actions', items: ['undo', 'redo'] },
+      { group: 'more', items: ['more'] }
+    ],
+    toolbar2: [
+      { group: 'structure', items: ['list'] },
+      { group: 'indent', items: ['indent-increase', 'indent-decrease'] },
+      { group: 'font-family', items: ['font-family'] },
+      { group: 'line-height', items: ['line-height'] },
+      { group: 'capitalization', items: ['capitalization'] },
+      { group: 'media', items: ['emoji', 'image', 'video'] },
+      { group: 'content', items: ['tag'] },
+      { group: 'view', items: ['code-view'] },
+
+    ]
+  };
+
+  constructor(editor, options = {}) {
+    super(editor, options);
+    this.buttons = new Map();
+    this.toolbar2Visible = false;
+    this.events = new Map(); // Add event system
+    
+    
+    // Handle toolbar configuration
+    if (Array.isArray(options.toolbar)) {
+      // If toolbar array is provided, use only those items - COMPLETELY OVERRIDE DEFAULTS
+      this.options = {
+        container: null,
+        toolbar1: [
+          { group: 'text-format', items: options.toolbar }
+        ],
+        toolbar2: []
+      };
+    } else if (options.toolbar1 || options.toolbar2) {
+      // If specific toolbar1/toolbar2 config is provided, use it - COMPLETELY OVERRIDE DEFAULTS
+      this.options = {
+        container: null,
+        toolbar1: options.toolbar1 || [],
+        toolbar2: options.toolbar2 || []
+      };
+    } else {
+      // Use full default configuration
+      this.options = { ...Toolbar.DEFAULTS, ...options };
+    }
+    
+    
+    this.init();
+    this.preloadIcons();
+  }
+
+  init() {
+    this.container = this.createToolbarContainer();
+  }
+
+  /**
+   * Preload icons for better performance
+   */
+  async preloadIcons() {
+    // Icons are now inline, no need to preload
+    // This method is kept for backward compatibility
+  }
+
+  /**
+   * Create main toolbar container with both toolbars
+   */
+  createToolbarContainer() {
+    const container = document.createElement('div');
+    container.className = 'rich-editor-toolbar-container';
+
+    // Prevent toolbar from taking focus away from editor
+    this.editor.preventFocusLoss(container);
+
+    // Create toolbar 1
+    this.toolbar1 = this.createToolbar('rich-editor-toolbar-1', this.options.toolbar1);
+    container.appendChild(this.toolbar1);
+
+    // Create toolbar 2 (initially hidden)
+    this.toolbar2 = this.createToolbar('rich-editor-toolbar-2', this.options.toolbar2);
+    this.toolbar2.style.display = 'none';
+    container.appendChild(this.toolbar2);
+
+    return container;
+  }
+
+  /**
+   * Create toolbar element
+   */
+  createToolbar(className, toolbarItems) {
+    const toolbar = document.createElement('div');
+    toolbar.className = className;
+
+    // Create button groups based on toolbar config
+    if (Array.isArray(toolbarItems)) {
+      toolbarItems.forEach(group => {
+        if (group && group.group && Array.isArray(group.items)) {
+          // Create group container
+          const groupContainer = document.createElement('div');
+          groupContainer.className = `toolbar-group toolbar-group-${group.group}`;
+          
+          // Add buttons to group
+          group.items.forEach(item => {
+            if (typeof item === 'string') {
+              this.addButton(groupContainer, item);
+            }
+          });
+          
+          toolbar.appendChild(groupContainer);
+        }
+      });
+    }
+
+    return toolbar;
+  }
+
+  /**
+   * Add button to toolbar
+   */
+  addButton(container, format) {
+    // Special handling for more button
+    if (format === 'more') {
+      return this.addMoreButton(container);
+    }
+
+    // Custom buttons with dropdowns
+    const customButtons = {
+      'heading': { text: 'Paragraph', width: '110px', title: 'Format (Headings & Paragraphs)' },
+      'font-family': { text: 'Font Family', width: '150px', title: 'Font Family' },
+      'line-height': { text: 'Line Height', width: '110px', title: 'Line Height' },
+      'capitalization': { text: 'Capitalization', width: '130px', title: 'Text Capitalization' },
+      'text-size': { text: 'Text Size', width: '100px', title: 'Text Size' }
+    };
+
+    if (customButtons[format]) {
+      const config = customButtons[format];
+      const customButton = createCustomButton(config.text, { width: config.width });
+      customButton.dataset.command = format;
+      customButton.classList.add('rich-editor-toolbar-btn', `${format}-btn`);
+      customButton.title = config.title;
+      
+      customButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.emit('toolbar-click', { command: format, button: customButton });
+        // Maintain editor focus after button click
+        setTimeout(() => {
+          this.editor.focus();
+        }, 0);
+      });
+
+      this.buttons.set(format, customButton);
+      container.appendChild(customButton);
+      return customButton;
+    }
+
+    // Icon buttons with popups
+    const iconButtons = {
+      'text-align': { icon: 'align-left', title: 'Align Left' },
+      'list': { icon: 'list', title: 'List' }
+    };
+
+    if (iconButtons[format]) {
+      const config = iconButtons[format];
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = `rich-editor-toolbar-btn ${format}-btn`;
+      button.dataset.command = format;
+      button.title = config.title;
+      
+      const svgContent = IconUtils.getIcon(config.icon);
+      if (svgContent) {
+        button.innerHTML = `<span class="icon">${svgContent}</span>`;
+      } else {
+        button.textContent = format === 'text-align' ? '≡' : '•';
+      }
+      
+      button.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.emit('toolbar-click', { command: format, button: button });
+        // Maintain editor focus after button click
+        setTimeout(() => {
+          this.editor.focus();
+        }, 0);
+      });
+
+      this.buttons.set(format, button);
+      container.appendChild(button);
+      return button;
+    }
+
+    // Regular icon buttons
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = `rich-editor-toolbar-btn ${format}-btn`;
+    button.dataset.command = format;
+    
+    // Add icon
+    const iconElement = IconUtils.createIconElement(format, {
+      width: '16px',
+      height: '16px'
+    });
+    button.appendChild(iconElement);
+    
+    // Set title based on format
+    const titles = {
+      'bold': 'Bold (Ctrl+B)',
+      'italic': 'Italic (Ctrl+I)',
+      'underline': 'Underline (Ctrl+U)',
+      'strike': 'Strikethrough',
+      'subscript': 'Subscript',
+      'superscript': 'Superscript',
+      'color': 'Text Color',
+      'background': 'Background Color',
+      'link': 'Insert/Edit Link',
+      'table': 'Insert Table',
+      'undo': 'Undo (Ctrl+Z)',
+      'redo': 'Redo (Ctrl+Y)',
+      'indent-increase': 'Increase Indent',
+      'indent-decrease': 'Decrease Indent',
+      'emoji': 'Insert Emoji',
+      'image': 'Insert Image',
+      'video': 'Insert Video',
+      'tag': 'Insert Tag',
+
+      'import': 'Import Files',
+      'code-view': 'Switch to HTML Editor',
+
+    };
+    
+    button.title = titles[format] || format;
+    
+    // Add fallback for code-view
+    if (format === 'code-view') {
+      setTimeout(() => {
+        if (!iconElement.innerHTML.trim()) {
+          iconElement.innerHTML = '&lt;/&gt;';
+          iconElement.style.fontSize = '12px';
+          iconElement.style.fontWeight = 'bold';
+        }
+      }, 1000);
+    }
+    
+    button.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.emit('toolbar-click', { command: format, button });
+      // Maintain editor focus after button click
+      setTimeout(() => {
+        this.editor.focus();
+      }, 0);
+    });
+
+    this.buttons.set(format, button);
+    container.appendChild(button);
+    return button;
+  }
+
+  /**
+   * Add more button to toggle toolbar 2
+   */
+  addMoreButton(container) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'rich-editor-toolbar-btn more-btn';
+    button.dataset.command = 'more';
+    
+    const iconElement = IconUtils.createIconElement('more', {
+      width: '16px',
+      height: '16px'
+    });
+    button.appendChild(iconElement);
+    button.title = 'More Options';
+    
+    button.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.toggleToolbar2();
+      // Maintain editor focus after button click
+      setTimeout(() => {
+        this.editor.focus();
+      }, 0);
+    });
+
+    this.buttons.set('more', button);
+    container.appendChild(button);
+    return button;
+  }
+
+  /**
+   * Toggle toolbar 2 visibility
+   */
+  toggleToolbar2() {
+    this.toolbar2Visible = !this.toolbar2Visible;
+    
+    if (this.toolbar2Visible) {
+      this.toolbar2.style.display = 'flex';
+      this.toolbar2.style.borderTop = '1px solid #d1d5db';
+    } else {
+      this.toolbar2.style.display = 'none';
+    }
+
+    // Update more button appearance
+    const moreButton = this.buttons.get('more');
+    if (moreButton) {
+      if (this.toolbar2Visible) {
+        moreButton.classList.add('active');
+        moreButton.title = 'Hide More Options';
+      } else {
+        moreButton.classList.remove('active');
+        moreButton.title = 'More Options';
+      }
+    }
+  }
+
+  /**
+   * Get toolbar container element
+   */
+  getContainer() {
+    return this.container;
+  }
+
+  /**
+   * Get button by command
+   */
+  getButton(command) {
+    return this.buttons.get(command);
+  }
+
+  /**
+   * Set button active state
+   */
+  setButtonActive(command, isActive) {
+    const button = this.buttons.get(command);
+    if (button && button.classList) {
+      if (isActive) {
+        button.classList.add('active');
+      } else {
+        button.classList.remove('active');
+      }
+    }
+  }
+
+  /**
+   * Set button disabled state
+   */
+  setButtonDisabled(command, isDisabled) {
+    const button = this.buttons.get(command);
+    if (button) {
+      button.disabled = isDisabled;
+      button.style.opacity = isDisabled ? '0.5' : '1';
+      button.style.cursor = isDisabled ? 'not-allowed' : 'pointer';
+    }
+  }
+
+  /**
+   * Set button title
+   */
+  setButtonTitle(command, title) {
+    const button = this.buttons.get(command);
+    if (button) {
+      button.title = title;
+    }
+  }
+
+  /**
+   * Check if toolbar 2 is visible
+   */
+  isToolbar2Visible() {
+    return this.toolbar2Visible;
+  }
+
+  /**
+   * Event system methods
+   */
+  on(event, callback) {
+    if (!this.events.has(event)) {
+      this.events.set(event, []);
+    }
+    this.events.get(event).push(callback);
+  }
+
+  emit(event, data) {
+    const callbacks = this.events.get(event);
+    if (callbacks) {
+      callbacks.forEach(callback => {
+        try {
+          callback(data);
+        } catch (error) {
+          console.error(`Error in toolbar event ${event}:`, error);
+        }
+      });
+    }
+  }
+
+  /**
+   * Destroy toolbar
+   */
+  destroy() {
+    if (this.container && this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+    this.buttons.clear();
+    this.events.clear();
+  }
+}
+
+export default Toolbar; 

package/lib/styles-loader.js

@@ -0,0 +1,144 @@
+/**
+ * CSS Loader - Load và inject CSS styles vào DOM
+ * Thay thế cho việc sử dụng inline styles
+ */
+class StylesLoader {
+  static loaded = false;
+  static styleElement = null;
+
+  /**
+   * Load CSS từ file hoặc string
+   */
+  static async loadStyles() {
+    if (this.loaded) return;
+
+    try {
+      // Tạo style element
+      this.styleElement = document.createElement('style');
+      this.styleElement.id = 'rich-editor-styles';
+      
+      // Load CSS từ file
+      const response = await fetch(new URL('./styles.css', import.meta.url));
+      const cssText = await response.text();
+      
+      this.styleElement.textContent = cssText;
+      
+      // Inject vào head
+      document.head.appendChild(this.styleElement);
+      
+      this.loaded = true;
+      
+    } catch (error) {
+      
+      // Fallback: load minimal styles
+      this.loadFallbackStyles();
+    }
+  }
+
+  /**
+   * Load minimal fallback styles nếu không thể load từ file
+   */
+  static loadFallbackStyles() {
+    const fallbackCSS = `
+      .yjd-rich-editor { 
+        position: relative; 
+        background: #fff; 
+        border: 1px solid #ddd; 
+        border-radius: 4px; 
+        display: flex; 
+        flex-direction: column; 
+        font-family: system-ui, sans-serif; 
+      }
+      .yjd-rich-editor .rich-editor-area { 
+        flex: 1; 
+        padding: 20px; 
+        outline: none; 
+        min-height: 100px; 
+      }
+      .yjd-rich-editor .rich-editor-toolbar { 
+        display: flex; 
+        gap: 4px; 
+        padding: 8px; 
+        border-bottom: 1px solid #ddd; 
+        background: #f9f9f9; 
+      }
+      .yjd-rich-editor .rich-editor-toolbar-btn { 
+        padding: 4px 8px; 
+        border: 1px solid #ccc; 
+        border-radius: 3px; 
+        background: #fff; 
+        cursor: pointer; 
+      }
+      .yjd-rich-editor .table-grid-selector { 
+        position: absolute; 
+        background: white; 
+        border: 1px solid #ccc; 
+        border-radius: 4px; 
+        padding: 10px; 
+        box-shadow: 0 2px 8px rgba(0,0,0,0.15); 
+        z-index: 1000; 
+        display: none; 
+      }
+      .yjd-rich-editor .table-grid-cell { 
+        width: 20px; 
+        height: 20px; 
+        border: 1px solid #ddd; 
+        cursor: pointer; 
+        background: white; 
+      }
+    `;
+
+    this.styleElement = document.createElement('style');
+    this.styleElement.id = 'rich-editor-styles-fallback';
+    this.styleElement.textContent = fallbackCSS;
+    document.head.appendChild(this.styleElement);
+    
+    this.loaded = true;
+  }
+
+  /**
+   * Unload styles
+   */
+  static unloadStyles() {
+    if (this.styleElement && this.styleElement.parentNode) {
+      this.styleElement.parentNode.removeChild(this.styleElement);
+      this.styleElement = null;
+      this.loaded = false;
+    }
+  }
+
+  /**
+   * Check if styles are loaded
+   */
+  static isLoaded() {
+    return this.loaded;
+  }
+
+  /**
+   * Reload styles
+   */
+  static async reloadStyles() {
+    this.unloadStyles();
+    await this.loadStyles();
+  }
+
+  /**
+   * Add custom CSS
+   */
+  static addCustomCSS(css, id = 'rich-editor-custom') {
+    // Remove existing custom styles
+    const existing = document.getElementById(id);
+    if (existing) {
+      existing.remove();
+    }
+
+    // Add new custom styles
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+    
+  }
+}
+
+export default StylesLoader;