overtype 2.3.3 → 2.3.5

package/dist/overtype.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.3.3
+ * 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 */
@@ -1678,6 +1688,11 @@ function generateStyles(options = {}) {
       cursor: text !important;
     }
 
+    .overtype-container.overtype-auto-resize[data-mode="preview"] .overtype-preview {
+      position: static !important;
+      height: auto !important;
+    }
+
     /* Hide syntax markers in preview mode */
     .overtype-container[data-mode="preview"] .syntax-marker {
       display: none !important;
@@ -4746,6 +4761,7 @@ var _OverType = class _OverType {
       // Callbacks
       onChange: null,
       onKeydown: null,
+      onRender: null,
       // Features
       showActiveLineRaw: false,
       showStats: false,
@@ -5144,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
@@ -5585,11 +5604,18 @@ var _OverType = class _OverType {
     const preview = this.preview;
     const wrapper = this.wrapper;
     const isPreviewMode = this.container.dataset.mode === "preview";
-    const scrollTop = isPreviewMode ? preview.scrollTop : textarea.scrollTop;
+    if (isPreviewMode) {
+      wrapper.style.removeProperty("height");
+      preview.style.removeProperty("height");
+      preview.style.removeProperty("overflow-y");
+      textarea.style.removeProperty("height");
+      textarea.style.removeProperty("overflow-y");
+      return;
+    }
+    const scrollTop = textarea.scrollTop;
     wrapper.style.setProperty("height", "auto", "important");
-    preview.style.setProperty("height", "auto", "important");
     textarea.style.setProperty("height", "auto", "important");
-    let newHeight = isPreviewMode ? preview.scrollHeight : textarea.scrollHeight;
+    let newHeight = textarea.scrollHeight;
     if (this.options.minHeight) {
       const minHeight = parseInt(this.options.minHeight);
       newHeight = Math.max(newHeight, minHeight);