overtype 2.3.6 → 2.3.8

package/README.md

@@ -1,6 +1,6 @@
 # OverType
 
-A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~117KB minified with all features.
+A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~110KB minified with all features.
 
 ## Live Examples
 
@@ -19,7 +19,7 @@ A lightweight markdown editor library with perfect WYSIWYG alignment using an in
 - ⌨️ **Keyboard shortcuts** - Common markdown shortcuts (Cmd/Ctrl+B for bold, etc.)
 - 📱 **Mobile optimized** - Responsive design with mobile-specific styles
 - 🔄 **DOM persistence aware** - Recovers from existing DOM (perfect for HyperClay and similar platforms)
-- 🚀 **Lightweight** - ~117KB minified
+- 🚀 **Lightweight** - ~110KB minified
 - 🎯 **Optional toolbar** - Clean, minimal toolbar with all essential formatting
 - ✨ **Smart shortcuts** - Keyboard shortcuts with selection preservation
 - 📝 **Smart list continuation** - GitHub-style automatic list continuation on Enter
@@ -35,7 +35,7 @@ We overlap an invisible textarea on top of styled output, giving the illusion of
 
 | Feature | OverType | HyperMD | Milkdown | TUI Editor | EasyMDE |
 |---------|----------|---------|----------|------------|---------|
-| **Size** | ~117KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
+| **Size** | ~110KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
 | **Dependencies** | Bundled | CodeMirror | ProseMirror + plugins | Multiple libs | CodeMirror |
 | **Setup** | Single file | Complex config | Build step required | Complex config | Moderate |
 | **Approach** | Invisible textarea | ContentEditable | ContentEditable | ContentEditable | CodeMirror |
@@ -775,14 +775,20 @@ Special thanks to:
 - [Kristián Kostecký](https://github.com/kristiankostecky) - Fixed toolbar option being ignored in reinit() ([#62](https://github.com/panphora/overtype/pull/62))
 - [Lyric Wai](https://github.com/lyricat) - Fixed double-escaping of links ([#64](https://github.com/panphora/overtype/pull/64)), shared code block alignment fix ([#65](https://github.com/panphora/overtype/issues/65))
 - [kozi](https://github.com/kozi) - Reported Firefox link tooltip bug ([#68](https://github.com/panphora/overtype/issues/68)), toolbar positioning ([#69](https://github.com/panphora/overtype/issues/69)), theme CSS variable issues ([#70](https://github.com/panphora/overtype/issues/70), [#71](https://github.com/panphora/overtype/issues/71))
-- [1951FDG](https://github.com/1951FDG) - Reported unordered list rendering bug ([#74](https://github.com/panphora/overtype/issues/74)), suggested showStats() API improvement ([#77](https://github.com/panphora/overtype/issues/77))
-- [nodesocket](https://github.com/nodesocket) - Reported toolbarButtons export issues ([#73](https://github.com/panphora/overtype/issues/73), [#78](https://github.com/panphora/overtype/issues/78)), suggested image toolbar button ([#89](https://github.com/panphora/overtype/issues/89))
+- [1951FDG](https://github.com/1951FDG) - Reported unordered list rendering bug ([#74](https://github.com/panphora/overtype/issues/74)), suggested showStats() API improvement ([#77](https://github.com/panphora/overtype/issues/77)), reported placeholder CSS regression ([#102](https://github.com/panphora/overtype/issues/102))
+- [nodesocket](https://github.com/nodesocket) - Reported toolbarButtons export issues ([#73](https://github.com/panphora/overtype/issues/73), [#78](https://github.com/panphora/overtype/issues/78)), suggested image toolbar button ([#89](https://github.com/panphora/overtype/issues/89)), reported custom theme stats bar styling ([#101](https://github.com/panphora/overtype/issues/101))
 - [Travis Bell](https://github.com/travisbell) - Reported keyboard shortcuts bug in ESM build ([#80](https://github.com/panphora/overtype/issues/80))
 - [fab2713](https://github.com/fab2713) - Reported italic rendering in lists ([#81](https://github.com/panphora/overtype/issues/81)), reinit maxHeight ([#82](https://github.com/panphora/overtype/issues/82)), placeholder visibility ([#83](https://github.com/panphora/overtype/issues/83)), suggested auto theme ([#84](https://github.com/panphora/overtype/issues/84)), relative URL prefix ([#85](https://github.com/panphora/overtype/issues/85)), minification improvements ([#94](https://github.com/panphora/overtype/issues/94))
 - [oooo-ps](https://github.com/oooo-ps) - Reported remote script loading issue ([#86](https://github.com/panphora/overtype/issues/86))
 - [ddarfantasy](https://github.com/ddarfantasy), [ThaUnknown](https://github.com/ThaUnknown) - Reported and debugged text misalignment caused by CSS framework font resets ([#91](https://github.com/panphora/overtype/issues/91))
 - [milen-yordanov](https://github.com/milen-yordanov) - Reported code block colors ignoring theme in preview mode ([#97](https://github.com/panphora/overtype/issues/97))
 - [asalimian](https://github.com/asalimian) - Reported spellcheck being disabled ([#98](https://github.com/panphora/overtype/issues/98))
+- [be5invis](https://github.com/be5invis) - Reported reinit() not propagating fontSize changes ([#108](https://github.com/panphora/overtype/issues/108)), suggested focus/blur callbacks ([#107](https://github.com/panphora/overtype/issues/107))
+- [Danny Vink](https://github.com/dannyvink) - Fixed task list overlay alignment with spaced checkbox markers ([#109](https://github.com/panphora/overtype/pull/109))
+- [yurivish](https://github.com/yurivish) - Reported fontFamily option not being applied ([#110](https://github.com/panphora/overtype/issues/110))
+- [phinnaeus](https://github.com/phinnaeus) - Diagnosed missing fontFamily wiring ([#110](https://github.com/panphora/overtype/issues/110))
+- [Tan Nhu](https://github.com/tnhu) - Fixed onChange feedback loop with async syntax highlighters ([#111](https://github.com/panphora/overtype/pull/111))
+- [pscanf](https://github.com/pscanf) - Re-exported markdown-actions for custom toolbar implementations ([#105](https://github.com/panphora/overtype/issues/105), [#106](https://github.com/panphora/overtype/pull/106))
 
 ### TypeScript & Framework Support
 - [merlinz01](https://github.com/merlinz01) - Contributed TypeScript declaration file ([#20](https://github.com/panphora/overtype/pull/20))

package/dist/overtype-webcomponent.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.3.6
+ * OverType v2.3.8
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -7,6 +7,10 @@
  */
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -122,13 +126,13 @@ var MarkdownParser = class {
    * @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) {
         const isChecked = checked.toLowerCase() === "x";
         return `${indent}<li class="task-list"><input type="checkbox" ${isChecked ? "checked" : ""}> ${content}</li>`;
       } else {
-        return `${indent}<li class="task-list"><span class="syntax-marker">- [${checked}] </span>${content}</li>`;
+        return `${indent}<li class="task-list"><span class="syntax-marker">-${spacingBeforeBox}[${checked}]${spacingAfterBox}</span>${content}</li>`;
       }
     });
   }
@@ -1887,6 +1891,30 @@ function generateStyles(options = {}) {
 }
 
 // node_modules/markdown-actions/dist/markdown-actions.esm.js
+var markdown_actions_esm_exports = {};
+__export(markdown_actions_esm_exports, {
+  applyCustomFormat: () => applyCustomFormat,
+  default: () => src_default,
+  expandSelection: () => expandSelection2,
+  getActiveFormats: () => getActiveFormats2,
+  getDebugMode: () => getDebugMode,
+  hasFormat: () => hasFormat2,
+  insertHeader: () => insertHeader,
+  insertLink: () => insertLink,
+  preserveSelection: () => preserveSelection,
+  setDebugMode: () => setDebugMode,
+  setUndoMethod: () => setUndoMethod,
+  toggleBold: () => toggleBold,
+  toggleBulletList: () => toggleBulletList,
+  toggleCode: () => toggleCode,
+  toggleH1: () => toggleH1,
+  toggleH2: () => toggleH2,
+  toggleH3: () => toggleH3,
+  toggleItalic: () => toggleItalic,
+  toggleNumberedList: () => toggleNumberedList,
+  toggleQuote: () => toggleQuote,
+  toggleTaskList: () => toggleTaskList
+});
 var __defProp2 = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -1973,6 +2001,9 @@ function mergeWithDefaults(format) {
   return __spreadValues(__spreadValues({}, getDefaultStyle()), format);
 }
 var debugMode = false;
+function setDebugMode(enabled) {
+  debugMode = enabled;
+}
 function getDebugMode() {
   return debugMode;
 }
@@ -2093,6 +2124,19 @@ function insertText(textarea, { text, selectionStart, selectionEnd }) {
     console.groupEnd();
   }
 }
+function setUndoMethod(method) {
+  switch (method) {
+    case "native":
+      canInsertText = true;
+      break;
+    case "manual":
+      canInsertText = false;
+      break;
+    case "auto":
+      canInsertText = null;
+      break;
+  }
+}
 function isMultipleLines(string) {
   return string.trim().split("\n").length > 1;
 }
@@ -2162,6 +2206,15 @@ function newlinesToSurroundSelectedText(textarea) {
   }
   return { newlinesToAppend, newlinesToPrepend };
 }
+function preserveSelection(textarea, callback) {
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  const scrollTop = textarea.scrollTop;
+  callback();
+  textarea.selectionStart = start;
+  textarea.selectionEnd = end;
+  textarea.scrollTop = scrollTop;
+}
 function applyLineOperation(textarea, operation, options = {}) {
   const originalStart = textarea.selectionStart;
   const originalEnd = textarea.selectionEnd;
@@ -2535,6 +2588,43 @@ function getActiveFormats(textarea) {
   }
   return formats;
 }
+function hasFormat(textarea, format) {
+  const activeFormats = getActiveFormats(textarea);
+  return activeFormats.includes(format);
+}
+function expandSelection(textarea, options = {}) {
+  if (!textarea)
+    return;
+  const { toWord, toLine, toFormat } = options;
+  const { selectionStart, selectionEnd, value } = textarea;
+  if (toLine) {
+    const lines = value.split("\n");
+    let lineStart = 0;
+    let lineEnd = 0;
+    let currentPos = 0;
+    for (const line of lines) {
+      if (selectionStart >= currentPos && selectionStart <= currentPos + line.length) {
+        lineStart = currentPos;
+        lineEnd = currentPos + line.length;
+        break;
+      }
+      currentPos += line.length + 1;
+    }
+    textarea.selectionStart = lineStart;
+    textarea.selectionEnd = lineEnd;
+  } else if (toWord && selectionStart === selectionEnd) {
+    let start = selectionStart;
+    let end = selectionEnd;
+    while (start > 0 && !/\s/.test(value[start - 1])) {
+      start--;
+    }
+    while (end < value.length && !/\s/.test(value[end])) {
+      end++;
+    }
+    textarea.selectionStart = start;
+    textarea.selectionEnd = end;
+  }
+}
 function toggleBold(textarea) {
   if (!textarea || textarea.disabled || textarea.readOnly)
     return;
@@ -2728,6 +2818,51 @@ function toggleH3(textarea) {
 function getActiveFormats2(textarea) {
   return getActiveFormats(textarea);
 }
+function hasFormat2(textarea, format) {
+  return hasFormat(textarea, format);
+}
+function expandSelection2(textarea, options = {}) {
+  expandSelection(textarea, options);
+}
+function applyCustomFormat(textarea, format) {
+  if (!textarea || textarea.disabled || textarea.readOnly)
+    return;
+  const style = mergeWithDefaults(format);
+  let result;
+  if (style.multiline) {
+    const selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
+    if (isMultipleLines(selectedText)) {
+      result = multilineStyle(textarea, style);
+    } else {
+      result = blockStyle(textarea, style);
+    }
+  } else {
+    result = blockStyle(textarea, style);
+  }
+  insertText(textarea, result);
+}
+var src_default = {
+  toggleBold,
+  toggleItalic,
+  toggleCode,
+  insertLink,
+  toggleBulletList,
+  toggleNumberedList,
+  toggleQuote,
+  toggleTaskList,
+  insertHeader,
+  toggleH1,
+  toggleH2,
+  toggleH3,
+  getActiveFormats: getActiveFormats2,
+  hasFormat: hasFormat2,
+  expandSelection: expandSelection2,
+  applyCustomFormat,
+  preserveSelection,
+  setUndoMethod,
+  setDebugMode,
+  getDebugMode
+};
 
 // src/toolbar.js
 var Toolbar = class {
@@ -4653,21 +4788,9 @@ var _OverType = class _OverType {
    * @returns {Array} Array of OverType instances
    */
   constructor(target, options = {}) {
-    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}`);
     }
     const instances = elements.map((element) => {
       if (element.overTypeInstance) {
@@ -4715,7 +4838,7 @@ var _OverType = class _OverType {
     });
     this.initialized = true;
     if (this.options.onChange) {
-      this.options.onChange(this.getValue(), this);
+      this._notifyChange();
     }
   }
   /**
@@ -4753,6 +4876,8 @@ var _OverType = class _OverType {
       onChange: null,
       onKeydown: null,
       onRender: null,
+      onFocus: null,
+      onBlur: null,
       // Features
       showActiveLineRaw: false,
       showStats: false,
@@ -5155,13 +5280,19 @@ var _OverType = class _OverType {
     if (this.options.showStats && this.statsBar) {
       this._updateStats();
     }
-    if (this.options.onChange && this.initialized) {
-      this.options.onChange(text, this);
-    }
     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
@@ -5195,6 +5326,25 @@ var _OverType = 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);
+    }
   }
   /**
    * Handle keydown events
@@ -5375,11 +5525,15 @@ var _OverType = class _OverType {
    * @param {string} value - Markdown content to set
    */
   setValue(value) {
+    const didChange = this.textarea.value !== value;
     this.textarea.value = value;
     this.updatePreview();
     if (this.options.autoResize) {
       this._updateAutoHeight();
     }
+    if (didChange) {
+      this._notifyChange();
+    }
   }
   /**
    * Execute an action by ID
@@ -5736,9 +5890,9 @@ var _OverType = 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 };
       for (const attr of el.attributes) {
         if (attr.name.startsWith("data-ot-")) {
@@ -5750,6 +5904,33 @@ var _OverType = class _OverType {
       return new _OverType(el, options)[0];
     });
   }
+  /**
+   * 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;
+    }
+    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
@@ -5766,11 +5947,22 @@ var _OverType = class _OverType {
     return value;
   }
   /**
-   * 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;
   }
   /**
@@ -5948,6 +6140,22 @@ var _OverType = class _OverType {
           instance.handleKeydown(e);
       }
     });
+    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 == null ? void 0 : wrapper._instance;
+        if (instance)
+          instance.handleFocus(e);
+      }
+    }, true);
+    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 == null ? void 0 : wrapper._instance;
+        if (instance)
+          instance.handleBlur(e);
+      }
+    }, true);
     document.addEventListener("scroll", (e) => {
       if (e.target && e.target.classList && e.target.classList.contains("overtype-input")) {
         const wrapper = e.target.closest(".overtype-wrapper");