overtype 1.2.7 → 2.0.0

package/src/overtype.d.ts

@@ -41,6 +41,28 @@ export interface Stats {
   column: number;
 }
 
+/**
+ * Toolbar button definition
+ */
+export interface ToolbarButton {
+  /** Unique button identifier */
+  name: string;
+
+  /** SVG icon markup (optional for separator) */
+  icon?: string;
+
+  /** Button tooltip text (optional for separator) */
+  title?: string;
+
+  /** Button action callback (optional for separator) */
+  action?: (context: {
+    editor: OverType;
+    getValue: () => string;
+    setValue: (value: string) => void;
+    event: MouseEvent;
+  }) => void | Promise<void>;
+}
+
 export interface MobileOptions {
   fontSize?: string;
   padding?: string;
@@ -71,17 +93,11 @@ export interface Options {
   // Features
   showActiveLineRaw?: boolean;
   showStats?: boolean;
-  toolbar?: boolean | {
-    buttons?: Array<{
-      name?: string;
-      icon?: string;
-      title?: string;
-      action?: string;
-      separator?: boolean;
-    }>;
-  };
+  toolbar?: boolean;
+  toolbarButtons?: ToolbarButton[];  // Custom toolbar button configuration
   smartLists?: boolean;       // v1.2.3+ Smart list continuation
   statsFormatter?: (stats: Stats) => string;
+  codeHighlighter?: ((code: string, language: string) => string) | null;  // Per-instance code highlighter
 
   // Theme (deprecated in favor of global theme)
   theme?: string | Theme;
@@ -96,7 +112,7 @@ export interface Options {
 export interface OverTypeConstructor {
   new(target: string | Element | NodeList | Element[], options?: Options): OverTypeInstance[];
   // Static members
-  instances: WeakMap<Element, OverTypeInstance>;
+  instances: any;
   stylesInjected: boolean;
   globalListenersInitialized: boolean;
   instanceCount: number;
@@ -112,6 +128,7 @@ export interface OverTypeConstructor {
   destroyAll(): void;
   injectStyles(force?: boolean): void;
   setTheme(theme: string | Theme, customColors?: Partial<Theme['colors']>): void;
+  setCodeHighlighter(highlighter: ((code: string, language: string) => string) | null): void;
   initGlobalListeners(): void;
   getTheme(name: string): Theme;
 }
@@ -146,7 +163,8 @@ export interface OverTypeInstance {
   isInitialized(): boolean;
   reinit(options: Options): void;
   showStats(show: boolean): void;
-  setTheme(theme: string | Theme): void;
+  setTheme(theme: string | Theme): this;
+  setCodeHighlighter(highlighter: ((code: string, language: string) => string) | null): void;
   updatePreview(): void;
   
   // HTML output methods
@@ -155,8 +173,9 @@ export interface OverTypeInstance {
   getPreviewHTML(): string;
   
   // View mode methods
-  showPlainTextarea(show: boolean): void;
-  showPreviewMode(show: boolean): void;
+  showNormalEditMode(): this;
+  showPlainTextarea(): this;
+  showPreviewMode(): this;
 }
 
 // Declare the constructor as a constant with proper typing
@@ -166,4 +185,28 @@ declare const OverType: OverTypeConstructor;
 export type OverType = OverTypeInstance;
 
 // Module exports - default export is the constructor
-export default OverType;
+export default OverType;
+
+/**
+ * Pre-defined toolbar buttons
+ */
+export const toolbarButtons: {
+  bold: ToolbarButton;
+  italic: ToolbarButton;
+  code: ToolbarButton;
+  separator: ToolbarButton;
+  link: ToolbarButton;
+  h1: ToolbarButton;
+  h2: ToolbarButton;
+  h3: ToolbarButton;
+  bulletList: ToolbarButton;
+  orderedList: ToolbarButton;
+  taskList: ToolbarButton;
+  quote: ToolbarButton;
+  viewMode: ToolbarButton;
+};
+
+/**
+ * Default toolbar button layout with separators
+ */
+export const defaultToolbarButtons: ToolbarButton[];

package/src/overtype.js

@@ -10,6 +10,7 @@ import { generateStyles } from './styles.js';
 import { getTheme, mergeTheme, solar, themeToCSSVars } from './themes.js';
 import { Toolbar } from './toolbar.js';
 import { LinkTooltip } from './link-tooltip.js';
+import { defaultToolbarButtons } from './toolbar-buttons.js';
 
 /**
  * OverType Editor Class
@@ -98,25 +99,10 @@ class OverType {
 
       // Setup shortcuts manager
       this.shortcuts = new ShortcutsManager(this);
-      
+
       // Setup link tooltip
       this.linkTooltip = new LinkTooltip(this);
 
-      // Setup toolbar if enabled
-      if (this.options.toolbar) {
-        const toolbarButtons = typeof this.options.toolbar === 'object' ? this.options.toolbar.buttons : null;
-        this.toolbar = new Toolbar(this, toolbarButtons);
-        this.toolbar.create();
-        
-        // Update toolbar states on selection change
-        this.textarea.addEventListener('selectionchange', () => {
-          this.toolbar.updateButtonStates();
-        });
-        this.textarea.addEventListener('input', () => {
-          this.toolbar.updateButtonStates();
-        });
-      }
-
       // Mark as initialized
       this.initialized = true;
 
@@ -165,8 +151,10 @@ class OverType {
         showActiveLineRaw: false,
         showStats: false,
         toolbar: false,
+        toolbarButtons: null,  // Defaults to defaultToolbarButtons if toolbar: true
         statsFormatter: null,
-        smartLists: true  // Enable smart list continuation
+        smartLists: true,  // Enable smart list continuation
+        codeHighlighter: null  // Per-instance code highlighter
       };
       
       // Remove theme and colors from options - these are now global
@@ -412,6 +400,49 @@ class OverType {
       this.textarea.setAttribute('data-enable-grammarly', 'false');
     }
 
+    /**
+     * Create and setup toolbar
+     * @private
+     */
+    _createToolbar() {
+      // Use provided toolbarButtons or default to defaultToolbarButtons
+      const toolbarButtons = this.options.toolbarButtons || defaultToolbarButtons;
+
+      this.toolbar = new Toolbar(this, { toolbarButtons });
+      this.toolbar.create();
+
+      // Store listener references for cleanup
+      this._toolbarSelectionListener = () => {
+        if (this.toolbar) {
+          this.toolbar.updateButtonStates();
+        }
+      };
+      this._toolbarInputListener = () => {
+        if (this.toolbar) {
+          this.toolbar.updateButtonStates();
+        }
+      };
+
+      // Add listeners
+      this.textarea.addEventListener('selectionchange', this._toolbarSelectionListener);
+      this.textarea.addEventListener('input', this._toolbarInputListener);
+    }
+
+    /**
+     * Cleanup toolbar event listeners
+     * @private
+     */
+    _cleanupToolbarListeners() {
+      if (this._toolbarSelectionListener) {
+        this.textarea.removeEventListener('selectionchange', this._toolbarSelectionListener);
+        this._toolbarSelectionListener = null;
+      }
+      if (this._toolbarInputListener) {
+        this.textarea.removeEventListener('input', this._toolbarInputListener);
+        this._toolbarInputListener = null;
+      }
+    }
+
     /**
      * Apply options to the editor
      * @private
@@ -421,7 +452,7 @@ class OverType {
       if (this.options.autofocus) {
         this.textarea.focus();
       }
-      
+
       // Setup or remove auto-resize
       if (this.options.autoResize) {
         if (!this.container.classList.contains('overtype-auto-resize')) {
@@ -432,6 +463,17 @@ class OverType {
         this.container.classList.remove('overtype-auto-resize');
       }
 
+      // Handle toolbar option changes
+      if (this.options.toolbar && !this.toolbar) {
+        // Create toolbar if enabled and doesn't exist
+        this._createToolbar();
+      } else if (!this.options.toolbar && this.toolbar) {
+        // Destroy toolbar if disabled and exists
+        this._cleanupToolbarListeners();
+        this.toolbar.destroy();
+        this.toolbar = null;
+      }
+
       // Update preview with initial content
       this.updatePreview();
     }
@@ -443,9 +485,12 @@ class OverType {
       const text = this.textarea.value;
       const cursorPos = this.textarea.selectionStart;
       const activeLine = this._getCurrentLine(text, cursorPos);
-      
+
+      // Detect if we're in preview mode
+      const isPreviewMode = this.container.dataset.mode === 'preview';
+
       // Parse markdown
-      const html = MarkdownParser.parse(text, activeLine, this.options.showActiveLineRaw);
+      const html = MarkdownParser.parse(text, activeLine, this.options.showActiveLineRaw, this.options.codeHighlighter, isPreviewMode);
       this.preview.innerHTML = html || '<span style="color: #808080;">Start typing...</span>';
       
       // Apply code block backgrounds
@@ -778,8 +823,8 @@ class OverType {
      */
     getRenderedHTML(options = {}) {
       const markdown = this.getValue();
-      let html = MarkdownParser.parse(markdown);
-      
+      let html = MarkdownParser.parse(markdown, -1, false, this.options.codeHighlighter);
+
       if (options.cleanHTML) {
         // Remove all syntax marker spans for clean HTML export
         html = html.replace(/<span class="syntax-marker[^"]*">.*?<\/span>/g, '');
@@ -842,6 +887,45 @@ class OverType {
       this.updatePreview();
     }
 
+    /**
+     * 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
+      this.instanceTheme = theme;
+
+      // Get theme object
+      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);
+      }
+
+      // Apply CSS variables to container for instance override
+      if (themeObj && themeObj.colors) {
+        const cssVars = themeToCSSVars(themeObj.colors);
+        this.container.style.cssText += cssVars;
+      }
+
+      // Update preview to reflect new theme
+      this.updatePreview();
+
+      return this;
+    }
+
+    /**
+     * Set instance-specific code highlighter
+     * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
+     */
+    setCodeHighlighter(highlighter) {
+      this.options.codeHighlighter = highlighter;
+      this.updatePreview();
+    }
+
     /**
      * Update stats bar
      * @private
@@ -986,47 +1070,47 @@ class OverType {
     }
     
     /**
-     * Show or hide the plain textarea (toggle overlay visibility)
-     * @param {boolean} show - true to show plain textarea (hide overlay), false to show overlay
-     * @returns {boolean} Current plain textarea state
+     * Show normal edit mode (overlay with markdown preview)
+     * @returns {this} Returns this for chaining
      */
-    showPlainTextarea(show) {
-      if (show) {
-        // Show plain textarea mode (hide overlay)
-        this.container.classList.add('plain-mode');
-      } else {
-        // Show overlay mode (hide plain textarea text)
-        this.container.classList.remove('plain-mode');
-      }
-      
+    showNormalEditMode() {
+      this.container.dataset.mode = 'normal';
+
+      // Always sync scroll from preview to textarea
+      requestAnimationFrame(() => {
+        this.textarea.scrollTop = this.preview.scrollTop;
+        this.textarea.scrollLeft = this.preview.scrollLeft;
+      });
+
+      return this;
+    }
+
+    /**
+     * Show plain textarea mode (no overlay)
+     * @returns {this} Returns this for chaining
+     */
+    showPlainTextarea() {
+      this.container.dataset.mode = 'plain';
+
       // Update toolbar button if exists
       if (this.toolbar) {
         const toggleBtn = this.container.querySelector('[data-action="toggle-plain"]');
         if (toggleBtn) {
-          // Button is active when showing overlay (not plain mode)
-          toggleBtn.classList.toggle('active', !show);
-          toggleBtn.title = show ? 'Show markdown preview' : 'Show plain textarea';
+          toggleBtn.classList.remove('active');
+          toggleBtn.title = 'Show markdown preview';
         }
       }
-      
-      return show;
+
+      return this;
     }
 
     /**
-     * Show/hide preview mode
-     * @param {boolean} show - Show preview mode if true, edit mode if false
-     * @returns {boolean} Current preview mode state
+     * Show preview mode (read-only view)
+     * @returns {this} Returns this for chaining
      */
-    showPreviewMode(show) {
-      if (show) {
-        // Show preview mode (hide textarea, make preview interactive)
-        this.container.classList.add('preview-mode');
-      } else {
-        // Show edit mode
-        this.container.classList.remove('preview-mode');
-      }
-      
-      return show;
+    showPreviewMode() {
+      this.container.dataset.mode = 'preview';
+      return this;
     }
 
     /**
@@ -1120,18 +1204,18 @@ class OverType {
     static setTheme(theme, customColors = null) {
       // Process theme
       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
       document.querySelectorAll('.overtype-container').forEach(container => {
         const themeName = typeof themeObj === 'string' ? themeObj : themeObj.name;
@@ -1139,7 +1223,7 @@ class OverType {
           container.setAttribute('data-theme', themeName);
         }
       });
-      
+
       // Also handle any old-style wrappers without containers
       document.querySelectorAll('.overtype-wrapper').forEach(wrapper => {
         if (!wrapper.closest('.overtype-container')) {
@@ -1148,13 +1232,53 @@ class OverType {
             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();
+        }
+      });
+    }
+
+    /**
+     * Set global code highlighter for all OverType instances
+     * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
+     */
+    static setCodeHighlighter(highlighter) {
+      MarkdownParser.setCodeHighlighter(highlighter);
+
+      // Update all existing instances in light DOM
+      document.querySelectorAll('.overtype-wrapper').forEach(wrapper => {
+        const instance = wrapper._instance;
+        if (instance && instance.updatePreview) {
+          instance.updatePreview();
+        }
+      });
+
+      // Update web components (shadow DOM instances)
+      document.querySelectorAll('overtype-editor').forEach(webComponent => {
+        if (typeof webComponent.getEditor === 'function') {
+          const instance = webComponent.getEditor();
+          if (instance && instance.updatePreview) {
+            instance.updatePreview();
+          }
+        }
+      });
     }
 
     /**
@@ -1227,4 +1351,7 @@ OverType.currentTheme = solar;
 
 // Export for module systems
 export default OverType;
-export { OverType };
+export { OverType };
+
+// Export toolbar buttons for custom toolbar configurations
+export { toolbarButtons, defaultToolbarButtons } from './toolbar-buttons.js';