overtype 2.3.4 → 2.3.5

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. ~118KB 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** - ~118KB 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** | ~118KB | 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 |

package/dist/overtype-webcomponent.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.3.4
+ * OverType v2.3.5
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -1241,6 +1241,16 @@ function generateStyles(options = {}) {
       -ms-user-select: none !important;
     }
 
+    /* Prevent external resets (Tailwind, Bootstrap, etc.) from breaking alignment.
+       Any element whose font metrics differ from the textarea causes the CSS "strut"
+       to inflate line boxes, drifting the overlay. Force inheritance so every element
+       inside the preview matches the textarea exactly. */
+    .overtype-wrapper .overtype-preview * {
+      font-family: inherit !important;
+      font-size: inherit !important;
+      line-height: inherit !important;
+    }
+
     /* Defensive styles for preview child divs */
     .overtype-wrapper .overtype-preview div {
       /* Reset any inherited styles */
@@ -4751,6 +4761,7 @@ var _OverType = class _OverType {
       // Callbacks
       onChange: null,
       onKeydown: null,
+      onRender: null,
       // Features
       showActiveLineRaw: false,
       showStats: false,
@@ -5149,6 +5160,9 @@ var _OverType = class _OverType {
     if (this.options.onChange && this.initialized) {
       this.options.onChange(text, this);
     }
+    if (this.options.onRender) {
+      this.options.onRender(this.preview, isPreviewMode ? "preview" : "normal", this);
+    }
   }
   /**
    * Apply background styling to code blocks
@@ -6015,6 +6029,7 @@ var OverTypeEditor = class extends HTMLElement {
     this._isConnected = false;
     this._handleChange = this._handleChange.bind(this);
     this._handleKeydown = this._handleKeydown.bind(this);
+    this._handleRender = this._handleRender.bind(this);
   }
   /**
    * Decode common escape sequences from attribute string values
@@ -6185,7 +6200,8 @@ var OverTypeEditor = class extends HTMLElement {
       smartLists: !this.hasAttribute("smart-lists") || this.getAttribute("smart-lists") !== "false",
       spellcheck: this.hasAttribute("spellcheck") && this.getAttribute("spellcheck") !== "false",
       onChange: this._handleChange,
-      onKeydown: this._handleKeydown
+      onKeydown: this._handleKeydown,
+      onRender: this._handleRender
     };
     const fontSize = this.getAttribute("font-size");
     if (fontSize)
@@ -6404,6 +6420,19 @@ var OverTypeEditor = class extends HTMLElement {
       editor: this._editor
     });
   }
+  /**
+   * Handle render events from OverType
+   * @private
+   * @param {HTMLElement} preview - The preview DOM element
+   * @param {string} mode - Current mode ('normal' or 'preview')
+   */
+  _handleRender(preview, mode) {
+    this._dispatchEvent("render", {
+      preview,
+      mode,
+      editor: this._editor
+    });
+  }
   /**
    * Update value attribute without triggering observer
    * @private