overtype 2.1.0 → 2.2.0

package/src/overtype.js

@@ -7,10 +7,69 @@
 import { MarkdownParser } from './parser.js';
 import { ShortcutsManager } from './shortcuts.js';
 import { generateStyles } from './styles.js';
-import { getTheme, mergeTheme, solar, themeToCSSVars } from './themes.js';
+import { getTheme, mergeTheme, solar, themeToCSSVars, resolveAutoTheme } from './themes.js';
 import { Toolbar } from './toolbar.js';
 import { LinkTooltip } from './link-tooltip.js';
-import { defaultToolbarButtons } from './toolbar-buttons.js';
+import { defaultToolbarButtons, toolbarButtons as builtinToolbarButtons } from './toolbar-buttons.js';
+
+/**
+ * Build action map from toolbar button configurations
+ * @param {Array} buttons - Array of button config objects
+ * @returns {Object} Map of actionId -> action function
+ */
+function buildActionsMap(buttons) {
+  const map = {};
+  (buttons || []).forEach((btn) => {
+    if (!btn || btn.name === 'separator') return;
+    const id = btn.actionId || btn.name;
+    if (btn.action) {
+      map[id] = btn.action;
+    }
+  });
+  return map;
+}
+
+/**
+ * Normalize toolbar buttons for comparison
+ * @param {Array|null} buttons
+ * @returns {Array|null}
+ */
+function normalizeButtons(buttons) {
+  const list = buttons || defaultToolbarButtons;
+  if (!Array.isArray(list)) return null;
+  return list.map((btn) => ({
+    name: btn?.name || null,
+    actionId: btn?.actionId || btn?.name || null,
+    icon: btn?.icon || null,
+    title: btn?.title || null
+  }));
+}
+
+/**
+ * Determine if toolbar button configuration changed
+ * @param {Array|null} prevButtons
+ * @param {Array|null} nextButtons
+ * @returns {boolean}
+ */
+function toolbarButtonsChanged(prevButtons, nextButtons) {
+  const prev = normalizeButtons(prevButtons);
+  const next = normalizeButtons(nextButtons);
+
+  if (prev === null || next === null) return prev !== next;
+  if (prev.length !== next.length) return true;
+
+  for (let i = 0; i < prev.length; i++) {
+    const a = prev[i];
+    const b = next[i];
+    if (a.name !== b.name ||
+        a.actionId !== b.actionId ||
+        a.icon !== b.icon ||
+        a.title !== b.title) {
+      return true;
+    }
+  }
+  return false;
+}
 
 /**
  * OverType Editor Class
@@ -21,6 +80,11 @@ class OverType {
     static stylesInjected = false;
     static globalListenersInitialized = false;
     static instanceCount = 0;
+    static _autoMediaQuery = null;
+    static _autoMediaListener = null;
+    static _autoInstances = new Set();
+    static _globalAutoTheme = false;
+    static _globalAutoCustomColors = null;
 
     /**
      * Constructor - Always returns an array of instances
@@ -97,9 +161,16 @@ class OverType {
         this._buildFromScratch();
       }
 
+      if (this.instanceTheme === 'auto') {
+        this.setTheme('auto');
+      }
+
       // Setup shortcuts manager
       this.shortcuts = new ShortcutsManager(this);
 
+      // Build action map from toolbar buttons (works whether or not toolbar UI is shown)
+      this._rebuildActionsMap();
+
       // Setup link tooltip
       this.linkTooltip = new LinkTooltip(this);
 
@@ -164,7 +235,8 @@ class OverType {
         toolbarButtons: null,  // Defaults to defaultToolbarButtons if toolbar: true
         statsFormatter: null,
         smartLists: true,  // Enable smart list continuation
-        codeHighlighter: null  // Per-instance code highlighter
+        codeHighlighter: null,  // Per-instance code highlighter
+        spellcheck: false  // Browser spellcheck (disabled by default)
       };
       
       // Remove theme and colors from options - these are now global
@@ -352,9 +424,16 @@ class OverType {
       this.preview.className = 'overtype-preview';
       this.preview.setAttribute('aria-hidden', 'true');
 
+      // Create placeholder shim
+      this.placeholderEl = document.createElement('div');
+      this.placeholderEl.className = 'overtype-placeholder';
+      this.placeholderEl.setAttribute('aria-hidden', 'true');
+      this.placeholderEl.textContent = this.options.placeholder;
+
       // Assemble DOM
       this.wrapper.appendChild(this.textarea);
       this.wrapper.appendChild(this.preview);
+      this.wrapper.appendChild(this.placeholderEl);
       
       // No need to prevent link clicks - pointer-events handles this
       
@@ -389,7 +468,7 @@ class OverType {
       this.textarea.setAttribute('autocomplete', 'off');
       this.textarea.setAttribute('autocorrect', 'off');
       this.textarea.setAttribute('autocapitalize', 'off');
-      this.textarea.setAttribute('spellcheck', 'false');
+      this.textarea.setAttribute('spellcheck', String(this.options.spellcheck));
       this.textarea.setAttribute('data-gramm', 'false');
       this.textarea.setAttribute('data-gramm_editor', 'false');
       this.textarea.setAttribute('data-enable-grammarly', 'false');
@@ -400,12 +479,22 @@ class OverType {
      * @private
      */
     _createToolbar() {
-      // Use provided toolbarButtons or default to defaultToolbarButtons
-      const toolbarButtons = this.options.toolbarButtons || defaultToolbarButtons;
+      let toolbarButtons = this.options.toolbarButtons || defaultToolbarButtons;
+
+      if (this.options.fileUpload?.enabled && !toolbarButtons.some(b => b?.name === 'upload')) {
+        const viewModeIdx = toolbarButtons.findIndex(b => b?.name === 'viewMode');
+        if (viewModeIdx !== -1) {
+          toolbarButtons = [...toolbarButtons];
+          toolbarButtons.splice(viewModeIdx, 0, builtinToolbarButtons.separator, builtinToolbarButtons.upload);
+        } else {
+          toolbarButtons = [...toolbarButtons, builtinToolbarButtons.separator, builtinToolbarButtons.upload];
+        }
+      }
 
       this.toolbar = new Toolbar(this, { toolbarButtons });
       this.toolbar.create();
 
+
       // Store listener references for cleanup
       this._toolbarSelectionListener = () => {
         if (this.toolbar) {
@@ -438,6 +527,26 @@ class OverType {
       }
     }
 
+    /**
+     * Rebuild the action map from current toolbar button configuration
+     * Called during init and reinit to keep shortcuts in sync with toolbar buttons
+     * @private
+     */
+    _rebuildActionsMap() {
+      // Always start with default actions (shortcuts always work regardless of toolbar config)
+      this.actionsById = buildActionsMap(defaultToolbarButtons);
+
+      // Overlay custom toolbar actions (can add/override, but never remove core actions)
+      if (this.options.toolbarButtons) {
+        Object.assign(this.actionsById, buildActionsMap(this.options.toolbarButtons));
+      }
+
+      // Register upload action when file upload is enabled
+      if (this.options.fileUpload?.enabled) {
+        Object.assign(this.actionsById, buildActionsMap([builtinToolbarButtons.upload]));
+      }
+    }
+
     /**
      * Apply options to the editor
      * @private
@@ -452,6 +561,8 @@ class OverType {
       if (this.options.autoResize) {
         if (!this.container.classList.contains('overtype-auto-resize')) {
           this._setupAutoResize();
+        } else {
+          this._updateAutoHeight();
         }
       } else {
         // Ensure auto-resize class is removed
@@ -469,10 +580,135 @@ class OverType {
         this.toolbar = null;
       }
 
+      // Update placeholder text
+      if (this.placeholderEl) {
+        this.placeholderEl.textContent = this.options.placeholder;
+      }
+
+      // Setup or remove file upload
+      if (this.options.fileUpload && !this.fileUploadInitialized) {
+        this._initFileUpload();
+      } else if (!this.options.fileUpload && this.fileUploadInitialized) {
+        this._destroyFileUpload();
+      }
+
       // Update preview with initial content
       this.updatePreview();
     }
 
+    _initFileUpload() {
+      const options = this.options.fileUpload;
+      if (!options || !options.enabled) return;
+
+      options.maxSize = options.maxSize || 10 * 1024 * 1024;
+      options.mimeTypes = options.mimeTypes || [];
+      options.batch = options.batch || false;
+      if (!options.onInsertFile || typeof options.onInsertFile !== 'function') {
+        console.warn('OverType: fileUpload.onInsertFile callback is required for file uploads.');
+        return;
+      }
+
+      this._fileUploadCounter = 0;
+      this._boundHandleFilePaste = this._handleFilePaste.bind(this);
+      this._boundHandleFileDrop = this._handleFileDrop.bind(this);
+      this._boundHandleDragOver = this._handleDragOver.bind(this);
+
+      this.textarea.addEventListener('paste', this._boundHandleFilePaste);
+      this.textarea.addEventListener('drop', this._boundHandleFileDrop);
+      this.textarea.addEventListener('dragover', this._boundHandleDragOver);
+
+      this.fileUploadInitialized = true;
+    }
+
+    _handleFilePaste(e) {
+      if (!e?.clipboardData?.files?.length) return;
+      e.preventDefault();
+      this._handleDataTransfer(e.clipboardData);
+    }
+
+    _handleFileDrop(e) {
+      if (!e?.dataTransfer?.files?.length) return;
+      e.preventDefault();
+      this._handleDataTransfer(e.dataTransfer);
+    }
+
+    _handleDataTransfer(dataTransfer) {
+      const files = [];
+      for (const file of dataTransfer.files) {
+        if (file.size > this.options.fileUpload.maxSize) continue;
+        if (this.options.fileUpload.mimeTypes.length > 0
+          && !this.options.fileUpload.mimeTypes.includes(file.type)) continue;
+
+        const id = ++this._fileUploadCounter;
+        const prefix = file.type.startsWith('image/') ? '!' : '';
+        const placeholder = `${prefix}[Uploading ${file.name} (#${id})...]()`;
+        this.insertAtCursor(`${placeholder}\n`);
+
+        if (this.options.fileUpload.batch) {
+          files.push({ file, placeholder });
+          continue;
+        }
+
+        this.options.fileUpload.onInsertFile(file).then((text) => {
+          this.textarea.value = this.textarea.value.replace(placeholder, text);
+          this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        }, (error) => {
+          console.error('OverType: File upload failed', error);
+          this.textarea.value = this.textarea.value.replace(placeholder, '[Upload failed]()');
+          this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+      }
+
+      if (this.options.fileUpload.batch && files.length > 0) {
+        this.options.fileUpload.onInsertFile(files.map(f => f.file)).then((result) => {
+          const texts = Array.isArray(result) ? result : [result];
+          texts.forEach((text, index) => {
+            this.textarea.value = this.textarea.value.replace(files[index].placeholder, text);
+          });
+          this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        }, (error) => {
+          console.error('OverType: File upload failed', error);
+          files.forEach(({ placeholder }) => {
+            this.textarea.value = this.textarea.value.replace(placeholder, '[Upload failed]()');
+          });
+          this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+      }
+    }
+
+    _handleDragOver(e) {
+      e.preventDefault();
+    }
+
+    _destroyFileUpload() {
+      this.textarea.removeEventListener('paste', this._boundHandleFilePaste);
+      this.textarea.removeEventListener('drop', this._boundHandleFileDrop);
+      this.textarea.removeEventListener('dragover', this._boundHandleDragOver);
+      this._boundHandleFilePaste = null;
+      this._boundHandleFileDrop = null;
+      this._boundHandleDragOver = null;
+      this.fileUploadInitialized = false;
+    }
+
+    insertAtCursor(text) {
+      const start = this.textarea.selectionStart;
+      const end = this.textarea.selectionEnd;
+
+      let inserted = false;
+      try {
+        inserted = document.execCommand('insertText', false, text);
+      } catch (_) {}
+
+      if (!inserted) {
+        const before = this.textarea.value.slice(0, start);
+        const after = this.textarea.value.slice(end);
+        this.textarea.value = before + text + after;
+        this.textarea.setSelectionRange(start + text.length, start + text.length);
+      }
+
+      this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+
     /**
      * Update preview with parsed markdown
      */
@@ -486,7 +722,12 @@ class OverType {
 
       // Parse markdown
       const html = MarkdownParser.parse(text, activeLine, this.options.showActiveLineRaw, this.options.codeHighlighter, isPreviewMode);
-      this.preview.innerHTML = html || '<span style="color: #808080;">Start typing...</span>';
+      this.preview.innerHTML = html;
+
+      // Show/hide placeholder shim
+      if (this.placeholderEl) {
+        this.placeholderEl.style.display = text ? 'none' : '';
+      }
       
       // Apply code block backgrounds
       this._applyCodeBlockBackgrounds();
@@ -807,13 +1048,50 @@ class OverType {
     setValue(value) {
       this.textarea.value = value;
       this.updatePreview();
-      
+
       // Update height if auto-resize is enabled
       if (this.options.autoResize) {
         this._updateAutoHeight();
       }
     }
 
+    /**
+     * Execute an action by ID
+     * Central dispatcher used by toolbar clicks, keyboard shortcuts, and programmatic calls
+     * @param {string} actionId - The action identifier (e.g., 'toggleBold', 'insertLink')
+     * @param {Event|null} event - Optional event that triggered the action
+     * @returns {Promise<boolean>} Whether the action was executed successfully
+     */
+    async performAction(actionId, event = null) {
+      const textarea = this.textarea;
+      if (!textarea) return false;
+
+      const action = this.actionsById?.[actionId];
+      if (!action) {
+        console.warn(`OverType: Unknown action "${actionId}"`);
+        return false;
+      }
+
+      textarea.focus();
+
+      try {
+        await action({
+          editor: this,
+          getValue: () => this.getValue(),
+          setValue: (value) => this.setValue(value),
+          event
+        });
+        // Note: actions are responsible for dispatching input event
+        // This preserves behavior for direct consumers of toolbarButtons.*.action
+        return true;
+      } catch (error) {
+        console.error(`OverType: Action "${actionId}" error:`, error);
+        this.wrapper.dispatchEvent(new CustomEvent('button-error', {
+          detail: { actionId, error }
+        }));
+        return false;
+      }
+    }
 
     /**
      * Get the rendered HTML of the current content
@@ -882,39 +1160,89 @@ class OverType {
      * @param {Object} options - New options to apply
      */
     reinit(options = {}) {
+      const prevToolbarButtons = this.options?.toolbarButtons;
       this.options = this._mergeOptions({ ...this.options, ...options });
+      const toolbarNeedsRebuild = this.toolbar &&
+        this.options.toolbar &&
+        toolbarButtonsChanged(prevToolbarButtons, this.options.toolbarButtons);
+
+      // Rebuild action map in case toolbarButtons changed
+      this._rebuildActionsMap();
+
+      if (toolbarNeedsRebuild) {
+        this._cleanupToolbarListeners();
+        this.toolbar.destroy();
+        this.toolbar = null;
+        this._createToolbar();
+      }
+
+      if (this.fileUploadInitialized) {
+        this._destroyFileUpload();
+      }
+      if (this.options.fileUpload) {
+        this._initFileUpload();
+      }
+
       this._applyOptions();
       this.updatePreview();
     }
 
+    showToolbar() {
+      if (this.toolbar) {
+        this.toolbar.show();
+      } else {
+        this._createToolbar();
+      }
+    }
+
+    hideToolbar() {
+      if (this.toolbar) {
+        this.toolbar.hide();
+      }
+    }
+
     /**
      * Set theme for this instance
      * @param {string|Object} theme - Theme name or custom theme object
      * @returns {this} Returns this for chaining
      */
     setTheme(theme) {
-      // Update instance theme
+      OverType._autoInstances.delete(this);
       this.instanceTheme = theme;
 
-      // Get theme object
-      const themeObj = typeof theme === 'string' ? getTheme(theme) : theme;
-      const themeName = typeof themeObj === 'string' ? themeObj : themeObj.name;
+      if (theme === 'auto') {
+        OverType._autoInstances.add(this);
+        OverType._startAutoListener();
+        this._applyResolvedTheme(resolveAutoTheme('auto'));
+      } else {
+        const themeObj = typeof theme === 'string' ? getTheme(theme) : theme;
+        const themeName = typeof themeObj === 'string' ? themeObj : themeObj.name;
 
-      // Update container theme attribute
-      if (themeName) {
-        this.container.setAttribute('data-theme', themeName);
+        if (themeName) {
+          this.container.setAttribute('data-theme', themeName);
+        }
+
+        if (themeObj && themeObj.colors) {
+          const cssVars = themeToCSSVars(themeObj.colors);
+          this.container.style.cssText += cssVars;
+        }
+
+        this.updatePreview();
       }
 
-      // Apply CSS variables to container for instance override
+      OverType._stopAutoListener();
+      return this;
+    }
+
+    _applyResolvedTheme(themeName) {
+      const themeObj = getTheme(themeName);
+      this.container.setAttribute('data-theme', themeName);
+
       if (themeObj && themeObj.colors) {
-        const cssVars = themeToCSSVars(themeObj.colors);
-        this.container.style.cssText += cssVars;
+        this.container.style.cssText = themeToCSSVars(themeObj.colors);
       }
 
-      // Update preview to reflect new theme
       this.updatePreview();
-
-      return this;
     }
 
     /**
@@ -1122,6 +1450,13 @@ class OverType {
      * Destroy the editor instance
      */
     destroy() {
+      OverType._autoInstances.delete(this);
+      OverType._stopAutoListener();
+
+      if (this.fileUploadInitialized) {
+        this._destroyFileUpload();
+      }
+
       // Remove instance reference
       this.element.overTypeInstance = null;
       OverType.instances.delete(this.element);
@@ -1178,7 +1513,7 @@ class OverType {
           }
         }
 
-        return new OverType(el, options);
+        return new OverType(el, options)[0];
       });
     }
 
@@ -1246,59 +1581,89 @@ class OverType {
      * @param {Object} customColors - Optional color overrides
      */
     static setTheme(theme, customColors = null) {
-      // Process theme
+      OverType._globalAutoTheme = false;
+      OverType._globalAutoCustomColors = null;
+
+      if (theme === 'auto') {
+        OverType._globalAutoTheme = true;
+        OverType._globalAutoCustomColors = customColors;
+        OverType._startAutoListener();
+        OverType._applyGlobalTheme(resolveAutoTheme('auto'), customColors);
+        return;
+      }
+
+      OverType._stopAutoListener();
+      OverType._applyGlobalTheme(theme, customColors);
+    }
+
+    static _applyGlobalTheme(theme, customColors = null) {
       let themeObj = typeof theme === 'string' ? getTheme(theme) : theme;
 
-      // Apply custom colors if provided
       if (customColors) {
         themeObj = mergeTheme(themeObj, customColors);
       }
 
-      // Store as current theme
       OverType.currentTheme = themeObj;
-
-      // Re-inject styles with new theme
       OverType.injectStyles(true);
 
-      // Update all existing instances - update container theme attribute
+      const themeName = typeof themeObj === 'string' ? themeObj : themeObj.name;
+
       document.querySelectorAll('.overtype-container').forEach(container => {
-        const themeName = typeof themeObj === 'string' ? themeObj : themeObj.name;
         if (themeName) {
           container.setAttribute('data-theme', themeName);
         }
       });
 
-      // Also handle any old-style wrappers without containers
       document.querySelectorAll('.overtype-wrapper').forEach(wrapper => {
         if (!wrapper.closest('.overtype-container')) {
-          const themeName = typeof themeObj === 'string' ? themeObj : themeObj.name;
           if (themeName) {
             wrapper.setAttribute('data-theme', themeName);
           }
         }
 
-        // Trigger preview update for the instance
         const instance = wrapper._instance;
         if (instance) {
           instance.updatePreview();
         }
       });
 
-      // Update web components (shadow DOM instances)
-      const themeName = typeof themeObj === 'string' ? themeObj : themeObj.name;
       document.querySelectorAll('overtype-editor').forEach(webComponent => {
-        // Set the theme attribute to update the theme name
         if (themeName && typeof webComponent.setAttribute === 'function') {
           webComponent.setAttribute('theme', themeName);
         }
-        // Also call refreshTheme() to handle cases where the theme name stays the same
-        // but the theme object's properties have changed
         if (typeof webComponent.refreshTheme === 'function') {
           webComponent.refreshTheme();
         }
       });
     }
 
+    static _startAutoListener() {
+      if (OverType._autoMediaQuery) return;
+      if (!window.matchMedia) return;
+
+      OverType._autoMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      OverType._autoMediaListener = (e) => {
+        const resolved = e.matches ? 'cave' : 'solar';
+
+        if (OverType._globalAutoTheme) {
+          OverType._applyGlobalTheme(resolved, OverType._globalAutoCustomColors);
+        }
+
+        OverType._autoInstances.forEach(inst => inst._applyResolvedTheme(resolved));
+      };
+
+      OverType._autoMediaQuery.addEventListener('change', OverType._autoMediaListener);
+    }
+
+    static _stopAutoListener() {
+      if (OverType._autoInstances.size > 0 || OverType._globalAutoTheme) return;
+      if (!OverType._autoMediaQuery) return;
+
+      OverType._autoMediaQuery.removeEventListener('change', OverType._autoMediaListener);
+      OverType._autoMediaQuery = null;
+      OverType._autoMediaListener = null;
+    }
+
     /**
      * Set global code highlighter for all OverType instances
      * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
@@ -1428,4 +1793,4 @@ export default OverType;
 export { OverType };
 
 // Export toolbar buttons for custom toolbar configurations
-export { toolbarButtons, defaultToolbarButtons } from './toolbar-buttons.js';
+export { toolbarButtons, defaultToolbarButtons } from './toolbar-buttons.js';

package/src/parser.js

@@ -87,6 +87,7 @@ export class MarkdownParser {
   static parseHeader(html) {
     return html.replace(/^(#{1,3})\s(.+)$/, (match, hashes, content) => {
       const level = hashes.length;
+      content = this.parseInlineElements(content);
       return `<h${level}><span class="syntax-marker">${hashes} </span>${content}</h${level}>`;
     });
   }
@@ -121,6 +122,7 @@ export class MarkdownParser {
    */
   static parseBulletList(html) {
     return html.replace(/^((?:&nbsp;)*)([-*+])\s(.+)$/, (match, indent, marker, content) => {
+      content = this.parseInlineElements(content);
       return `${indent}<li class="bullet-list"><span class="syntax-marker">${marker} </span>${content}</li>`;
     });
   }
@@ -133,6 +135,7 @@ export class MarkdownParser {
    */
   static parseTaskList(html, isPreviewMode = false) {
     return html.replace(/^((?:&nbsp;)*)-\s+\[([ xX])\]\s+(.+)$/, (match, indent, checked, content) => {
+      content = this.parseInlineElements(content);
       if (isPreviewMode) {
         // Preview mode: render actual checkbox
         const isChecked = checked.toLowerCase() === 'x';
@@ -151,6 +154,7 @@ export class MarkdownParser {
    */
   static parseNumberedList(html) {
     return html.replace(/^((?:&nbsp;)*)(\d+\.)\s(.+)$/, (match, indent, marker, content) => {
+      content = this.parseInlineElements(content);
       return `${indent}<li class="ordered-list"><span class="syntax-marker">${marker} </span>${content}</li>`;
     });
   }
@@ -188,7 +192,7 @@ export class MarkdownParser {
    */
   static parseItalic(html) {
     // Single asterisk - must not be adjacent to other asterisks
-    // Also must not be inside a syntax-marker span (to avoid matching bullet list markers)
+    // Must not be inside a syntax-marker span (avoid matching bullet list markers like ">* ")
     html = html.replace(/(?<![\*>])\*(?!\*)(.+?)(?<!\*)\*(?!\*)/g, '<em><span class="syntax-marker">*</span>$1<span class="syntax-marker">*</span></em>');
 
     // Single underscore - must be at word boundaries to avoid matching inside words
@@ -464,8 +468,10 @@ export class MarkdownParser {
     html = this.parseBulletList(html);
     html = this.parseNumberedList(html);
 
-    // Parse inline elements
-    html = this.parseInlineElements(html);
+    // Parse inline elements (skip for headers and list items — already parsed inside those functions)
+    if (!html.includes('<li') && !html.includes('<h')) {
+      html = this.parseInlineElements(html);
+    }
 
     // Wrap in div to maintain line structure
     if (html.trim() === '') {