overtype 2.3.7 → 2.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overtype",
-  "version": "2.3.7",
+  "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
@@ -228,6 +214,8 @@ class OverType {
         onChange: null,
         onKeydown: null,
         onRender: null,
+        onFocus: null,
+        onBlur: null,
         
         // Features
         showActiveLineRaw: false,
@@ -813,6 +801,26 @@ class OverType {
       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);
+      }
+    }
+
     /**
      * Handle keydown events
      * @private
@@ -1532,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)
@@ -1550,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
@@ -1563,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;
     }
 
@@ -1777,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')) {
@@ -1827,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';
+