overtype 2.3.5 → 2.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overtype",
-  "version": "2.3.5",
+  "version": "2.3.7",
   "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.js

@@ -189,7 +189,7 @@ class OverType {
 
       // Call onChange if provided
       if (this.options.onChange) {
-        this.options.onChange(this.getValue(), this);
+        this._notifyChange();
       }
     }
 
@@ -304,16 +304,7 @@ class OverType {
       // Store reference on wrapper
       this.wrapper._instance = this;
       
-      // Apply instance-specific styles via CSS custom properties
-      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();
 
       // Disable autofill, spellcheck, and extensions
       this._configureTextarea();
@@ -388,17 +379,8 @@ class OverType {
       this.wrapper.className = 'overtype-wrapper';
       
       
-      // Apply instance-specific styles via CSS custom properties
-      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;
 
       // Create textarea
@@ -548,11 +530,36 @@ class OverType {
       }
     }
 
+    /**
+     * 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() {
+      // Re-apply instance-specific CSS vars so reinit() picks up font/padding changes
+      this._applyInstanceCSSVars();
+
       // Apply autofocus
       if (this.options.autofocus) {
         this.textarea.focus();
@@ -740,17 +747,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
@@ -799,6 +810,7 @@ class OverType {
      */
     handleInput(event) {
       this.updatePreview();
+      this._notifyChange();
     }
 
     /**
@@ -1052,6 +1064,7 @@ class OverType {
      * @param {string} value - Markdown content to set
      */
     setValue(value) {
+      const didChange = this.textarea.value !== value;
       this.textarea.value = value;
       this.updatePreview();
 
@@ -1059,6 +1072,10 @@ class OverType {
       if (this.options.autoResize) {
         this._updateAutoHeight();
       }
+
+      if (didChange) {
+        this._notifyChange();
+      }
     }
 
     /**

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>`;
       }
     });
   }

package/src/styles.js

@@ -121,9 +121,9 @@ export 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;
@@ -230,15 +230,12 @@ export 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 */
@@ -391,7 +388,7 @@ export 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 */
@@ -476,26 +473,20 @@ export 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;