overtype 2.3.5 → 2.3.7

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. ~118KB minified with all features.
+A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~117KB 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** - ~118KB minified
+- 🚀 **Lightweight** - ~117KB 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** | ~118KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
+| **Size** | ~117KB | 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,19 @@ 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) - Reported text misalignment on longer lines ([#91](https://github.com/panphora/overtype/issues/91))
+- [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))
+- [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))
 
 ### 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.5
+ * OverType v2.3.7
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -122,13 +122,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>`;
       }
     });
   }
@@ -1106,9 +1106,9 @@ function generateStyles(options = {}) {
       left: 0 !important;
       width: 100% !important;
       height: 100% !important;
-      
+
       /* Font properties - any difference breaks alignment */
-      font-family: ${fontFamily} !important;
+      font-family: var(--instance-font-family, ${fontFamily}) !important;
       font-variant-ligatures: none !important; /* keep metrics stable for code */
       font-size: var(--instance-font-size, ${fontSize}) !important;
       line-height: var(--instance-line-height, ${lineHeight}) !important;
@@ -1215,15 +1215,12 @@ function generateStyles(options = {}) {
       z-index: 0 !important;
       pointer-events: none !important;
       user-select: none !important;
-      font-family: ${fontFamily} !important;
+      font-family: var(--instance-font-family, ${fontFamily}) !important;
       font-size: var(--instance-font-size, ${fontSize}) !important;
       line-height: var(--instance-line-height, ${lineHeight}) !important;
       padding: var(--instance-padding, ${padding}) !important;
       box-sizing: border-box !important;
       color: var(--placeholder, #999) !important;
-      overflow: hidden !important;
-      white-space: nowrap !important;
-      text-overflow: ellipsis !important;
     }
 
     /* Preview layer styles */
@@ -1376,7 +1373,7 @@ function generateStyles(options = {}) {
     .overtype-wrapper .overtype-preview pre code {
       background: transparent !important;
       color: var(--code, #0d3b66) !important;
-      font-family: ${fontFamily} !important; /* Match textarea font exactly for alignment */
+      font-family: var(--instance-font-family, ${fontFamily}) !important; /* Match textarea font exactly for alignment */
     }
 
     /* Blockquotes */
@@ -1461,26 +1458,20 @@ function generateStyles(options = {}) {
     .overtype-stats {
       height: 40px !important;
       padding: 0 20px !important;
-      background: #f8f9fa !important;
-      border-top: 1px solid #e0e0e0 !important;
+      background: var(--bg-secondary, #f8f9fa) !important;
+      border-top: 1px solid var(--border, #e0e0e0) !important;
       display: flex !important;
       justify-content: space-between !important;
       align-items: center !important;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
       font-size: 0.85rem !important;
-      color: #666 !important;
+      color: var(--text-secondary, #666) !important;
       flex-shrink: 0 !important; /* Don't shrink */
       z-index: 10001 !important; /* Above link tooltip */
       position: relative !important; /* Enable z-index */
     }
-    
-    /* Dark theme stats bar */
-    .overtype-container[data-theme="cave"] .overtype-stats {
-      background: var(--bg-secondary, #1D2D3E) !important;
-      border-top: 1px solid rgba(197, 221, 232, 0.1) !important;
-      color: var(--text, #c5dde8) !important;
-    }
-    
+
+
     .overtype-stats .overtype-stat {
       display: flex !important;
       align-items: center !important;
@@ -4724,7 +4715,7 @@ var _OverType = class _OverType {
     });
     this.initialized = true;
     if (this.options.onChange) {
-      this.options.onChange(this.getValue(), this);
+      this._notifyChange();
     }
   }
   /**
@@ -4825,15 +4816,7 @@ var _OverType = class _OverType {
       return;
     }
     this.wrapper._instance = this;
-    if (this.options.fontSize) {
-      this.wrapper.style.setProperty("--instance-font-size", this.options.fontSize);
-    }
-    if (this.options.lineHeight) {
-      this.wrapper.style.setProperty("--instance-line-height", String(this.options.lineHeight));
-    }
-    if (this.options.padding) {
-      this.wrapper.style.setProperty("--instance-padding", this.options.padding);
-    }
+    this._applyInstanceCSSVars();
     this._configureTextarea();
     this._applyOptions();
   }
@@ -4881,15 +4864,7 @@ var _OverType = class _OverType {
     }
     this.wrapper = document.createElement("div");
     this.wrapper.className = "overtype-wrapper";
-    if (this.options.fontSize) {
-      this.wrapper.style.setProperty("--instance-font-size", this.options.fontSize);
-    }
-    if (this.options.lineHeight) {
-      this.wrapper.style.setProperty("--instance-line-height", String(this.options.lineHeight));
-    }
-    if (this.options.padding) {
-      this.wrapper.style.setProperty("--instance-padding", this.options.padding);
-    }
+    this._applyInstanceCSSVars();
     this.wrapper._instance = this;
     this.textarea = document.createElement("textarea");
     this.textarea.className = "overtype-input";
@@ -5003,11 +4978,34 @@ var _OverType = class _OverType {
       Object.assign(this.actionsById, buildActionsMap([toolbarButtons.upload]));
     }
   }
+  /**
+   * Apply instance-specific styles via CSS custom properties on the wrapper.
+   * Called from init paths and from _applyOptions so reinit() propagates
+   * font/padding changes.
+   * @private
+   */
+  _applyInstanceCSSVars() {
+    if (!this.wrapper)
+      return;
+    if (this.options.fontSize) {
+      this.wrapper.style.setProperty("--instance-font-size", this.options.fontSize);
+    }
+    if (this.options.lineHeight) {
+      this.wrapper.style.setProperty("--instance-line-height", String(this.options.lineHeight));
+    }
+    if (this.options.padding) {
+      this.wrapper.style.setProperty("--instance-padding", this.options.padding);
+    }
+    if (this.options.fontFamily) {
+      this.wrapper.style.setProperty("--instance-font-family", this.options.fontFamily);
+    }
+  }
   /**
    * Apply options to the editor
    * @private
    */
   _applyOptions() {
+    this._applyInstanceCSSVars();
     if (this.options.autofocus) {
       this.textarea.focus();
     }
@@ -5157,13 +5155,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
@@ -5197,6 +5201,7 @@ var _OverType = class _OverType {
    */
   handleInput(event) {
     this.updatePreview();
+    this._notifyChange();
   }
   /**
    * Handle keydown events
@@ -5377,11 +5382,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