overtype 1.2.7 → 2.0.0

package/src/toolbar.js

@@ -1,351 +1,286 @@
 /**
  * Toolbar component for OverType editor
- * Provides markdown formatting buttons with icons
+ * Provides markdown formatting buttons with support for custom buttons
  */
 
-import * as icons from './icons.js';
 import * as markdownActions from 'markdown-actions';
 
 export class Toolbar {
-  constructor(editor, buttonConfig = null) {
+  constructor(editor, options = {}) {
     this.editor = editor;
     this.container = null;
     this.buttons = {};
-    this.buttonConfig = buttonConfig;
-  }
 
+    // Get toolbar buttons array
+    this.toolbarButtons = options.toolbarButtons || [];
+  }
 
   /**
-   * Create and attach toolbar to editor
+   * Create and render toolbar
    */
   create() {
-    // Create toolbar container
     this.container = document.createElement('div');
     this.container.className = 'overtype-toolbar';
     this.container.setAttribute('role', 'toolbar');
-    this.container.setAttribute('aria-label', 'Text formatting');
-
-    // Define toolbar buttons
-    const buttonConfig = this.buttonConfig ?? [
-      { name: 'bold', icon: icons.boldIcon, title: 'Bold (Ctrl+B)', action: 'toggleBold' },
-      { name: 'italic', icon: icons.italicIcon, title: 'Italic (Ctrl+I)', action: 'toggleItalic' },
-      { separator: true },
-      { name: 'h1', icon: icons.h1Icon, title: 'Heading 1', action: 'insertH1' },
-      { name: 'h2', icon: icons.h2Icon, title: 'Heading 2', action: 'insertH2' },
-      { name: 'h3', icon: icons.h3Icon, title: 'Heading 3', action: 'insertH3' },
-      { separator: true },
-      { name: 'link', icon: icons.linkIcon, title: 'Insert Link (Ctrl+K)', action: 'insertLink' },
-      { name: 'code', icon: icons.codeIcon, title: 'Code (Ctrl+`)', action: 'toggleCode' },
-      { separator: true },
-      { name: 'quote', icon: icons.quoteIcon, title: 'Quote', action: 'toggleQuote' },
-      { separator: true },
-      { name: 'bulletList', icon: icons.bulletListIcon, title: 'Bullet List', action: 'toggleBulletList' },
-      { name: 'orderedList', icon: icons.orderedListIcon, title: 'Numbered List', action: 'toggleNumberedList' },
-      { name: 'taskList', icon: icons.taskListIcon, title: 'Task List', action: 'toggleTaskList' },
-      { separator: true },
-      { name: 'viewMode', icon: icons.eyeIcon, title: 'View mode', action: 'toggle-view-menu', hasDropdown: true }
-    ];
+    this.container.setAttribute('aria-label', 'Formatting toolbar');
 
-    // Create buttons
-    buttonConfig.forEach(config => {
-      if (config.separator) {
-        const separator = document.createElement('div');
-        separator.className = 'overtype-toolbar-separator';
-        separator.setAttribute('role', 'separator');
+    // Create buttons from toolbarButtons array
+    this.toolbarButtons.forEach(buttonConfig => {
+      if (buttonConfig.name === 'separator') {
+        const separator = this.createSeparator();
         this.container.appendChild(separator);
       } else {
-        const button = this.createButton(config);
-        this.buttons[config.name] = button;
+        const button = this.createButton(buttonConfig);
+        this.buttons[buttonConfig.name] = button;
         this.container.appendChild(button);
       }
     });
 
-    // Insert toolbar into container before editor wrapper
-    const container = this.editor.element.querySelector('.overtype-container');
-    const wrapper = this.editor.element.querySelector('.overtype-wrapper');
-    if (container && wrapper) {
-      container.insertBefore(this.container, wrapper);
-    }
+    this.editor.wrapper.insertBefore(this.container, this.editor.wrapper.firstChild);
+  }
 
-    return this.container;
+  /**
+   * Create a toolbar separator
+   */
+  createSeparator() {
+    const separator = document.createElement('div');
+    separator.className = 'overtype-toolbar-separator';
+    separator.setAttribute('role', 'separator');
+    return separator;
   }
 
   /**
-   * Create individual toolbar button
+   * Create a toolbar button
    */
-  createButton(config) {
+  createButton(buttonConfig) {
     const button = document.createElement('button');
     button.className = 'overtype-toolbar-button';
     button.type = 'button';
-    button.title = config.title;
-    button.setAttribute('aria-label', config.title);
-    button.setAttribute('data-action', config.action);
-    button.innerHTML = config.icon;
+    button.setAttribute('data-button', buttonConfig.name);
+    button.title = buttonConfig.title || '';
+    button.setAttribute('aria-label', buttonConfig.title || buttonConfig.name);
+    button.innerHTML = this.sanitizeSVG(buttonConfig.icon || '');
 
-    // Add dropdown if needed
-    if (config.hasDropdown) {
+    // Special handling for viewMode dropdown
+    if (buttonConfig.name === 'viewMode') {
       button.classList.add('has-dropdown');
-      // Store reference for dropdown
-      if (config.name === 'viewMode') {
-        this.viewModeButton = button;
-      }
+      button.dataset.dropdown = 'true';
+      button.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.toggleViewModeDropdown(button);
+      });
+      return button;
     }
 
-    // Add click handler
-    button.addEventListener('click', (e) => {
+    // Standard button click handler
+    button._clickHandler = async (e) => {
       e.preventDefault();
-      this.handleAction(config.action, button);
-    });
-
-    return button;
-  }
 
-  /**
-   * Handle toolbar button actions
-   */
-  async handleAction(action, button) {
-    const textarea = this.editor.textarea;
-    if (!textarea) return;
+      // Focus textarea before action
+      this.editor.textarea.focus();
 
-    // Handle dropdown toggle
-    if (action === 'toggle-view-menu') {
-      this.toggleViewDropdown(button);
-      return;
-    }
+      try {
+        if (buttonConfig.action) {
+          // Call action with consistent context object
+          await buttonConfig.action({
+            editor: this.editor,
+            getValue: () => this.editor.getValue(),
+            setValue: (value) => this.editor.setValue(value),
+            event: e
+          });
+        }
+      } catch (error) {
+        console.error(`Button "${buttonConfig.name}" error:`, error);
 
-    // Focus textarea for other actions
-    textarea.focus();
+        // Dispatch error event
+        this.editor.wrapper.dispatchEvent(new CustomEvent('button-error', {
+          detail: { buttonName: buttonConfig.name, error }
+        }));
 
-    try {
-      
-      switch (action) {
-        case 'toggleBold':
-          markdownActions.toggleBold(textarea);
-          break;
-        case 'toggleItalic':
-          markdownActions.toggleItalic(textarea);
-          break;
-        case 'insertH1':
-          markdownActions.toggleH1(textarea);
-          break;
-        case 'insertH2':
-          markdownActions.toggleH2(textarea);
-          break;
-        case 'insertH3':
-          markdownActions.toggleH3(textarea);
-          break;
-        case 'insertLink':
-          markdownActions.insertLink(textarea);
-          break;
-        case 'toggleCode':
-          markdownActions.toggleCode(textarea);
-          break;
-        case 'toggleBulletList':
-          markdownActions.toggleBulletList(textarea);
-          break;
-        case 'toggleNumberedList':
-          markdownActions.toggleNumberedList(textarea);
-          break;
-        case 'toggleQuote':
-          markdownActions.toggleQuote(textarea);
-          break;
-        case 'toggleTaskList':
-          markdownActions.toggleTaskList(textarea);
-          break;
-        case 'toggle-plain':
-          // Toggle between plain textarea and overlay mode
-          const isPlain = this.editor.container.classList.contains('plain-mode');
-          this.editor.showPlainTextarea(!isPlain);
-          break;
+        // Visual feedback
+        button.classList.add('button-error');
+        button.style.animation = 'buttonError 0.3s';
+        setTimeout(() => {
+          button.classList.remove('button-error');
+          button.style.animation = '';
+        }, 300);
       }
+    };
 
-      // Trigger input event to update preview
-      textarea.dispatchEvent(new Event('input', { bubbles: true }));
-    } catch (error) {
-      console.error('Error loading markdown-actions:', error);
-    }
+    button.addEventListener('click', button._clickHandler);
+    return button;
   }
 
   /**
-   * Update toolbar button states based on current selection
+   * Sanitize SVG to prevent XSS
    */
-  async updateButtonStates() {
-    const textarea = this.editor.textarea;
-    if (!textarea) return;
+  sanitizeSVG(svg) {
+    if (typeof svg !== 'string') return '';
 
-    try {
-      const activeFormats = markdownActions.getActiveFormats(textarea);
+    // Remove script tags and on* event handlers
+    const cleaned = svg
+      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+      .replace(/\son\w+\s*=\s*["'][^"']*["']/gi, '')
+      .replace(/\son\w+\s*=\s*[^\s>]*/gi, '');
 
-      // Update button states
-      Object.entries(this.buttons).forEach(([name, button]) => {
-        let isActive = false;
-        
-        switch (name) {
-          case 'bold':
-            isActive = activeFormats.includes('bold');
-            break;
-          case 'italic':
-            isActive = activeFormats.includes('italic');
-            break;
-          case 'code':
-            // Disabled: code detection is unreliable in code blocks
-            // isActive = activeFormats.includes('code');
-            isActive = false;
-            break;
-          case 'bulletList':
-            isActive = activeFormats.includes('bullet-list');
-            break;
-          case 'orderedList':
-            isActive = activeFormats.includes('numbered-list');
-            break;
-          case 'quote':
-            isActive = activeFormats.includes('quote');
-            break;
-          case 'taskList':
-            isActive = activeFormats.includes('task-list');
-            break;
-          case 'h1':
-            isActive = activeFormats.includes('header');
-            break;
-          case 'h2':
-            isActive = activeFormats.includes('header-2');
-            break;
-          case 'h3':
-            isActive = activeFormats.includes('header-3');
-            break;
-          case 'togglePlain':
-            // Button is active when in overlay mode (not plain mode)
-            isActive = !this.editor.container.classList.contains('plain-mode');
-            break;
-        }
-
-        button.classList.toggle('active', isActive);
-        button.setAttribute('aria-pressed', isActive.toString());
-      });
-    } catch (error) {
-      // Silently fail if markdown-actions not available
-    }
+    return cleaned;
   }
 
   /**
-   * Toggle view mode dropdown menu
+   * Toggle view mode dropdown (internal implementation)
+   * Not exposed to users - viewMode button behavior is fixed
    */
-  toggleViewDropdown(button) {
+  toggleViewModeDropdown(button) {
     // Close any existing dropdown
     const existingDropdown = document.querySelector('.overtype-dropdown-menu');
     if (existingDropdown) {
       existingDropdown.remove();
       button.classList.remove('dropdown-active');
-      document.removeEventListener('click', this.handleDocumentClick);
       return;
     }
 
-    // Create dropdown menu
-    const dropdown = this.createViewDropdown();
-    
+    button.classList.add('dropdown-active');
+
+    const dropdown = this.createViewModeDropdown(button);
+
     // Position dropdown relative to button
     const rect = button.getBoundingClientRect();
-    dropdown.style.top = `${rect.bottom + 4}px`;
+    dropdown.style.position = 'absolute';
+    dropdown.style.top = `${rect.bottom + 5}px`;
     dropdown.style.left = `${rect.left}px`;
-    
-    // Append to body instead of button
+
     document.body.appendChild(dropdown);
-    button.classList.add('dropdown-active');
-    
-    // Store reference for document click handler
+
+    // Click outside to close
     this.handleDocumentClick = (e) => {
-      if (!button.contains(e.target) && !dropdown.contains(e.target)) {
+      if (!dropdown.contains(e.target) && !button.contains(e.target)) {
         dropdown.remove();
         button.classList.remove('dropdown-active');
         document.removeEventListener('click', this.handleDocumentClick);
       }
     };
-    
-    // Close on click outside
+
     setTimeout(() => {
       document.addEventListener('click', this.handleDocumentClick);
     }, 0);
   }
 
   /**
-   * Create view mode dropdown menu
+   * Create view mode dropdown menu (internal implementation)
    */
-  createViewDropdown() {
+  createViewModeDropdown(button) {
     const dropdown = document.createElement('div');
     dropdown.className = 'overtype-dropdown-menu';
-    
-    // Determine current mode
-    const isPlain = this.editor.container.classList.contains('plain-mode');
-    const isPreview = this.editor.container.classList.contains('preview-mode');
-    const currentMode = isPreview ? 'preview' : (isPlain ? 'plain' : 'normal');
-    
-    // Create menu items
-    const modes = [
+
+    const items = [
       { id: 'normal', label: 'Normal Edit', icon: '✓' },
       { id: 'plain', label: 'Plain Textarea', icon: '✓' },
       { id: 'preview', label: 'Preview Mode', icon: '✓' }
     ];
-    
-    modes.forEach(mode => {
-      const item = document.createElement('button');
-      item.className = 'overtype-dropdown-item';
-      item.type = 'button';
-      
-      const check = document.createElement('span');
-      check.className = 'overtype-dropdown-check';
-      check.textContent = currentMode === mode.id ? mode.icon : '';
-      
-      const label = document.createElement('span');
-      label.textContent = mode.label;
-      
-      item.appendChild(check);
-      item.appendChild(label);
-      
-      if (currentMode === mode.id) {
-        item.classList.add('active');
+
+    const currentMode = this.editor.container.dataset.mode || 'normal';
+
+    items.forEach(item => {
+      const menuItem = document.createElement('button');
+      menuItem.className = 'overtype-dropdown-item';
+      menuItem.type = 'button';
+      menuItem.textContent = item.label;
+
+      if (item.id === currentMode) {
+        menuItem.classList.add('active');
+        menuItem.setAttribute('aria-current', 'true');
+        const checkmark = document.createElement('span');
+        checkmark.className = 'overtype-dropdown-icon';
+        checkmark.textContent = item.icon;
+        menuItem.prepend(checkmark);
       }
-      
-      item.addEventListener('click', (e) => {
-        e.stopPropagation();
-        this.setViewMode(mode.id);
+
+      menuItem.addEventListener('click', (e) => {
+        e.preventDefault();
+
+        // Handle view mode changes
+        switch(item.id) {
+          case 'plain':
+            this.editor.showPlainTextarea();
+            break;
+          case 'preview':
+            this.editor.showPreviewMode();
+            break;
+          case 'normal':
+          default:
+            this.editor.showNormalEditMode();
+            break;
+        }
+
         dropdown.remove();
-        this.viewModeButton.classList.remove('dropdown-active');
+        button.classList.remove('dropdown-active');
         document.removeEventListener('click', this.handleDocumentClick);
       });
-      
-      dropdown.appendChild(item);
+
+      dropdown.appendChild(menuItem);
     });
-    
+
     return dropdown;
   }
 
   /**
-   * Set view mode
+   * Update active states of toolbar buttons
    */
-  setViewMode(mode) {
-    // Clear all mode classes
-    this.editor.container.classList.remove('plain-mode', 'preview-mode');
-    
-    switch(mode) {
-      case 'plain':
-        this.editor.showPlainTextarea(true);
-        break;
-      case 'preview':
-        this.editor.showPreviewMode(true);
-        break;
-      case 'normal':
-      default:
-        // Normal edit mode
-        this.editor.showPlainTextarea(false);
-        if (typeof this.editor.showPreviewMode === 'function') {
-          this.editor.showPreviewMode(false);
+  updateButtonStates() {
+    try {
+      const activeFormats = markdownActions.getActiveFormats?.(
+        this.editor.textarea,
+        this.editor.textarea.selectionStart
+      ) || [];
+
+      Object.entries(this.buttons).forEach(([name, button]) => {
+        if (name === 'viewMode') return; // Skip dropdown button
+
+        let isActive = false;
+
+        switch(name) {
+          case 'bold':
+            isActive = activeFormats.includes('bold');
+            break;
+          case 'italic':
+            isActive = activeFormats.includes('italic');
+            break;
+          case 'code':
+            isActive = false; // Disabled: unreliable in code blocks
+            break;
+          case 'bulletList':
+            isActive = activeFormats.includes('bullet-list');
+            break;
+          case 'orderedList':
+            isActive = activeFormats.includes('numbered-list');
+            break;
+          case 'taskList':
+            isActive = activeFormats.includes('task-list');
+            break;
+          case 'quote':
+            isActive = activeFormats.includes('quote');
+            break;
+          case 'h1':
+            isActive = activeFormats.includes('header');
+            break;
+          case 'h2':
+            isActive = activeFormats.includes('header-2');
+            break;
+          case 'h3':
+            isActive = activeFormats.includes('header-3');
+            break;
         }
-        break;
+
+        button.classList.toggle('active', isActive);
+        button.setAttribute('aria-pressed', isActive.toString());
+      });
+    } catch (error) {
+      // Silently fail if markdown-actions not available
     }
   }
 
   /**
-   * Destroy toolbar
+   * Destroy toolbar and cleanup
    */
   destroy() {
     if (this.container) {
@@ -353,9 +288,19 @@ export class Toolbar {
       if (this.handleDocumentClick) {
         document.removeEventListener('click', this.handleDocumentClick);
       }
+
+      // Clean up button listeners
+      Object.values(this.buttons).forEach(button => {
+        if (button._clickHandler) {
+          button.removeEventListener('click', button._clickHandler);
+          delete button._clickHandler;
+        }
+      });
+
+      // Remove container
       this.container.remove();
       this.container = null;
       this.buttons = {};
     }
   }
-}
+}