overtype 2.3.2 → 2.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overtype",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "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

@@ -1321,33 +1321,39 @@ class OverType {
      */
     _updateAutoHeight() {
       if (!this.options.autoResize) return;
-      
+
       const textarea = this.textarea;
       const preview = this.preview;
       const wrapper = this.wrapper;
-      
-      // Get computed styles
-      const computed = window.getComputedStyle(textarea);
-      const paddingTop = parseFloat(computed.paddingTop);
-      const paddingBottom = parseFloat(computed.paddingBottom);
-      
+      const isPreviewMode = this.container.dataset.mode === 'preview';
+
+      if (isPreviewMode) {
+        // In preview mode, CSS makes the preview position:static so it flows naturally.
+        // Just clear any inline heights left over from edit mode.
+        wrapper.style.removeProperty('height');
+        preview.style.removeProperty('height');
+        preview.style.removeProperty('overflow-y');
+        textarea.style.removeProperty('height');
+        textarea.style.removeProperty('overflow-y');
+        return;
+      }
+
       // Store scroll positions
       const scrollTop = textarea.scrollTop;
-      
+
       // Reset heights to get accurate scrollHeight
       // Wrapper must also reset so the absolute-positioned textarea isn't constrained
       wrapper.style.setProperty('height', 'auto', 'important');
       textarea.style.setProperty('height', 'auto', 'important');
 
-      // Calculate new height based on scrollHeight
       let newHeight = textarea.scrollHeight;
-      
+
       // Apply min height constraint
       if (this.options.minHeight) {
         const minHeight = parseInt(this.options.minHeight);
         newHeight = Math.max(newHeight, minHeight);
       }
-      
+
       // Apply max height constraint
       let overflow = 'hidden';
       if (this.options.maxHeight) {
@@ -1357,25 +1363,24 @@ class OverType {
           overflow = 'auto';
         }
       }
-      
+
       // Apply the new height to all elements with !important to override base styles
       const heightPx = newHeight + 'px';
       textarea.style.setProperty('height', heightPx, 'important');
       textarea.style.setProperty('overflow-y', overflow, 'important');
-      
+
       preview.style.setProperty('height', heightPx, 'important');
       preview.style.setProperty('overflow-y', overflow, 'important');
-      
+
       wrapper.style.setProperty('height', heightPx, 'important');
-      
+
       // Restore scroll position
       textarea.scrollTop = scrollTop;
       preview.scrollTop = scrollTop;
-      
+
       // Track if height changed
       if (this.previousHeight !== newHeight) {
         this.previousHeight = newHeight;
-        // Could dispatch a custom event here if needed
       }
     }
     
@@ -1409,6 +1414,7 @@ class OverType {
     showNormalEditMode() {
       this.container.dataset.mode = 'normal';
       this.updatePreview(); // Re-render with normal mode (e.g., show syntax markers)
+      this._updateAutoHeight();
 
       // Always sync scroll from preview to textarea
       requestAnimationFrame(() => {
@@ -1425,6 +1431,7 @@ class OverType {
      */
     showPlainTextarea() {
       this.container.dataset.mode = 'plain';
+      this._updateAutoHeight();
 
       // Update toolbar button if exists
       if (this.toolbar) {
@@ -1445,6 +1452,7 @@ class OverType {
     showPreviewMode() {
       this.container.dataset.mode = 'preview';
       this.updatePreview(); // Re-render with preview mode (e.g., checkboxes)
+      this._updateAutoHeight();
       return this;
     }
 

package/src/styles.js

@@ -693,6 +693,11 @@ export 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;