overtype 2.3.6 → 2.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overtype",
-  "version": "2.3.6",
+  "version": "2.3.8",
   "description": "A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay",
   "main": "dist/overtype.cjs",
   "module": "dist/overtype.esm.js",

package/src/overtype.d.ts

@@ -140,6 +140,8 @@ export interface Options {
   // Callbacks
   onChange?: (value: string, instance: OverTypeInstance) => void;
   onKeydown?: (event: KeyboardEvent, instance: OverTypeInstance) => void;
+  onFocus?: (event: FocusEvent, instance: OverTypeInstance) => void;
+  onBlur?: (event: FocusEvent, instance: OverTypeInstance) => void;
 }
 
 // Interface for constructor that returns array
@@ -158,7 +160,8 @@ export interface OverTypeConstructor {
   MarkdownParser: any;
   ShortcutsManager: any;
   init(target: string | Element | NodeList | Element[], options?: Options): OverTypeInstance[];
-  getInstance(element: Element): OverTypeInstance | null;
+  initFromData(target: string | Element | NodeList | Element[], defaults?: Options): OverTypeInstance[];
+  getInstance(target: string | Element | NodeList | Element[]): OverTypeInstance | null;
   destroyAll(): void;
   injectStyles(force?: boolean): void;
   setTheme(theme: string | Theme, customColors?: Partial<Theme['colors']>): void;
@@ -225,6 +228,26 @@ export type OverType = OverTypeInstance;
 // Module exports - default export is the constructor
 export default OverType;
 
+/** Re-exported markdown-actions. Useful for custom toolbar implementations */
+export const markdownActions: {
+  toggleBold(textarea: HTMLTextAreaElement): void;
+  toggleItalic(textarea: HTMLTextAreaElement): void;
+  toggleCode(textarea: HTMLTextAreaElement): void;
+  insertLink(textarea: HTMLTextAreaElement, options?: { url?: string; text?: string }): void;
+  toggleBulletList(textarea: HTMLTextAreaElement): void;
+  toggleNumberedList(textarea: HTMLTextAreaElement): void;
+  toggleQuote(textarea: HTMLTextAreaElement): void;
+  toggleTaskList(textarea: HTMLTextAreaElement): void;
+  insertHeader(textarea: HTMLTextAreaElement, level?: number, toggle?: boolean): void;
+  toggleH1(textarea: HTMLTextAreaElement): void;
+  toggleH2(textarea: HTMLTextAreaElement): void;
+  toggleH3(textarea: HTMLTextAreaElement): void;
+  getActiveFormats(textarea: HTMLTextAreaElement): string[];
+  hasFormat(textarea: HTMLTextAreaElement, format: string): boolean;
+  expandSelection(textarea: HTMLTextAreaElement, options?: object): void;
+  applyCustomFormat(textarea: HTMLTextAreaElement, format: object): void;
+};
+
 /**
  * Pre-defined toolbar buttons
  */

package/src/overtype.js

@@ -93,23 +93,9 @@ class OverType {
      * @returns {Array} Array of OverType instances
      */
     constructor(target, options = {}) {
-      // Convert target to array of elements
-      let elements;
-      
-      if (typeof target === 'string') {
-        elements = document.querySelectorAll(target);
-        if (elements.length === 0) {
-          throw new Error(`No elements found for selector: ${target}`);
-        }
-        elements = Array.from(elements);
-      } else if (target instanceof Element) {
-        elements = [target];
-      } else if (target instanceof NodeList) {
-        elements = Array.from(target);
-      } else if (Array.isArray(target)) {
-        elements = target;
-      } else {
-        throw new Error('Invalid target: must be selector string, Element, NodeList, or Array');
+      const elements = OverType._resolveTargets(target);
+      if (typeof target === 'string' && elements.length === 0) {
+        throw new Error(`No elements found for selector: ${target}`);
       }
 
       // Initialize all elements and return array
@@ -189,7 +175,7 @@ class OverType {
 
       // Call onChange if provided
       if (this.options.onChange) {
-        this.options.onChange(this.getValue(), this);
+        this._notifyChange();
       }
     }
 
@@ -228,6 +214,8 @@ class OverType {
         onChange: null,
         onKeydown: null,
         onRender: null,
+        onFocus: null,
+        onBlur: null,
         
         // Features
         showActiveLineRaw: false,
@@ -747,17 +735,21 @@ class OverType {
         this._updateStats();
       }
       
-      // Trigger onChange callback
-      if (this.options.onChange && this.initialized) {
-        this.options.onChange(text, this);
-      }
-
       // Trigger onRender callback
       if (this.options.onRender) {
         this.options.onRender(this.preview, isPreviewMode ? 'preview' : 'normal', this);
       }
     }
 
+    /**
+     * Notify listeners that the editor value changed
+     * @private
+     */
+    _notifyChange() {
+      if (!this.options.onChange || !this.initialized) return;
+      this.options.onChange(this.textarea.value, this);
+    }
+
     /**
      * Apply background styling to code blocks
      * @private
@@ -806,6 +798,27 @@ class OverType {
      */
     handleInput(event) {
       this.updatePreview();
+      this._notifyChange();
+    }
+
+    /**
+     * Handle focus events
+     * @private
+     */
+    handleFocus(event) {
+      if (this.options.onFocus) {
+        this.options.onFocus(event, this);
+      }
+    }
+
+    /**
+     * Handle blur events
+     * @private
+     */
+    handleBlur(event) {
+      if (this.options.onBlur) {
+        this.options.onBlur(event, this);
+      }
     }
 
     /**
@@ -1059,6 +1072,7 @@ class OverType {
      * @param {string} value - Markdown content to set
      */
     setValue(value) {
+      const didChange = this.textarea.value !== value;
       this.textarea.value = value;
       this.updatePreview();
 
@@ -1066,6 +1080,10 @@ class OverType {
       if (this.options.autoResize) {
         this._updateAutoHeight();
       }
+
+      if (didChange) {
+        this._notifyChange();
+      }
     }
 
     /**
@@ -1522,9 +1540,9 @@ class OverType {
      * // HTML: <div class="editor" data-ot-toolbar="true" data-ot-theme="cave"></div>
      * OverType.initFromData('.editor', { fontSize: '14px' });
      */
-    static initFromData(selector, defaults = {}) {
-      const elements = document.querySelectorAll(selector);
-      return Array.from(elements).map(el => {
+    static initFromData(target, defaults = {}) {
+      const elements = OverType._resolveTargets(target);
+      return elements.map(el => {
         const options = { ...defaults };
 
         // Parse data-ot-* attributes (kebab-case to camelCase)
@@ -1540,6 +1558,35 @@ class OverType {
       });
     }
 
+    /**
+     * Normalize various target shapes to an array of Elements
+     * @private
+     * @param {string|Element|NodeList|Element[]} target
+     * @returns {Element[]}
+     */
+    static _resolveTargets(target) {
+      if (target == null) {
+        throw new Error('Invalid target: must be selector string, Element, NodeList, or Array');
+      }
+      if (typeof target === 'string') {
+        return Array.from(document.querySelectorAll(target));
+      }
+      if (target instanceof Element) {
+        return [target];
+      }
+      if (target instanceof NodeList) {
+        return Array.from(target);
+      }
+      if (Array.isArray(target)) {
+        return target;
+      }
+      // Array-like (e.g. jQuery objects expose numeric indices and length)
+      if (typeof target.length === 'number') {
+        return Array.from(target);
+      }
+      throw new Error('Invalid target: must be selector string, Element, NodeList, or Array');
+    }
+
     /**
      * Parse a data attribute value to the appropriate type
      * @private
@@ -1553,11 +1600,21 @@ class OverType {
     }
 
     /**
-     * Get instance from element
-     * @param {Element} element - DOM element
-     * @returns {OverType|null} OverType instance or null
+     * Get instance from a target. Accepts the same shapes as the constructor;
+     * for multi-element targets, returns the instance for the first matching
+     * element, or null if none.
+     * @param {string|Element|NodeList|Element[]} target
+     * @returns {OverType|null}
      */
-    static getInstance(element) {
+    static getInstance(target) {
+      let element;
+      if (target instanceof Element) {
+        element = target;
+      } else {
+        const elements = OverType._resolveTargets(target);
+        element = elements[0];
+      }
+      if (!element) return null;
       return element.overTypeInstance || OverType.instances.get(element) || null;
     }
 
@@ -1767,6 +1824,24 @@ class OverType {
         }
       });
 
+      // Focus event (capture: true because focus does not bubble)
+      document.addEventListener('focus', (e) => {
+        if (e.target && e.target.classList && e.target.classList.contains('overtype-input')) {
+          const wrapper = e.target.closest('.overtype-wrapper');
+          const instance = wrapper?._instance;
+          if (instance) instance.handleFocus(e);
+        }
+      }, true);
+
+      // Blur event (capture: true because blur does not bubble)
+      document.addEventListener('blur', (e) => {
+        if (e.target && e.target.classList && e.target.classList.contains('overtype-input')) {
+          const wrapper = e.target.closest('.overtype-wrapper');
+          const instance = wrapper?._instance;
+          if (instance) instance.handleBlur(e);
+        }
+      }, true);
+
       // Scroll event
       document.addEventListener('scroll', (e) => {
         if (e.target && e.target.classList && e.target.classList.contains('overtype-input')) {
@@ -1817,3 +1892,7 @@ export { OverType };
 
 // Export toolbar buttons for custom toolbar configurations
 export { toolbarButtons, defaultToolbarButtons } from './toolbar-buttons.js';
+
+// Re-export markdown-actions. Useful for custom toolbar implementations
+export * as markdownActions from 'markdown-actions';
+

package/src/parser.js

@@ -134,15 +134,15 @@ export class MarkdownParser {
    * @returns {string} Parsed task list item
    */
   static parseTaskList(html, isPreviewMode = false) {
-    return html.replace(/^((?: )*)-\s+\[([ xX])\]\s+(.+)$/, (match, indent, checked, content) => {
+    return html.replace(/^((?: )*)-(\s+)\[([ xX])\](\s*)(.*)$/, (match, indent, spacingBeforeBox, checked, spacingAfterBox, content) => {
       content = this.parseInlineElements(content);
       if (isPreviewMode) {
         // Preview mode: render actual checkbox
         const isChecked = checked.toLowerCase() === 'x';
         return `${indent}<li class="task-list"><input type="checkbox" ${isChecked ? 'checked' : ''}> ${content}</li>`;
       } else {
-        // Normal mode: keep syntax visible for alignment
-        return `${indent}<li class="task-list"><span class="syntax-marker">- [${checked}] </span>${content}</li>`;
+        // Normal mode: keep syntax (including user spacing) visible for alignment
+        return `${indent}<li class="task-list"><span class="syntax-marker">-${spacingBeforeBox}[${checked}]${spacingAfterBox}</span>${content}</li>`;
       }
     });
   }