overtype 1.1.1 → 1.1.3

package/src/overtype.js

@@ -144,8 +144,14 @@ class OverType {
           lineHeight: 1.5
         },
         
+        // Native textarea properties
+        textareaProps: {},
+        
         // Behavior
         autofocus: false,
+        autoResize: false,  // Auto-expand height with content
+        minHeight: '100px', // Minimum height for autoResize mode
+        maxHeight: null,    // Maximum height for autoResize mode (null = unlimited)
         placeholder: 'Start typing...',
         value: '',
         
@@ -307,10 +313,6 @@ class OverType {
       this.wrapper = document.createElement('div');
       this.wrapper.className = 'overtype-wrapper';
       
-      // Add stats wrapper class if stats are enabled
-      if (this.options.showStats) {
-        this.wrapper.classList.add('with-stats');
-      }
       
       // Apply instance-specific styles via CSS custom properties
       if (this.options.fontSize) {
@@ -330,6 +332,19 @@ class OverType {
       this.textarea.className = 'overtype-input';
       this.textarea.placeholder = this.options.placeholder;
       this._configureTextarea();
+      
+      // Apply any native textarea properties
+      if (this.options.textareaProps) {
+        Object.entries(this.options.textareaProps).forEach(([key, value]) => {
+          if (key === 'className' || key === 'class') {
+            this.textarea.className += ' ' + value;
+          } else if (key === 'style' && typeof value === 'object') {
+            Object.assign(this.textarea.style, value);
+          } else {
+            this.textarea.setAttribute(key, value);
+          }
+        });
+      }
 
       // Create preview div
       this.preview = document.createElement('div');
@@ -340,19 +355,42 @@ class OverType {
       this.wrapper.appendChild(this.textarea);
       this.wrapper.appendChild(this.preview);
       
-      // Add stats bar if enabled
+      // Add wrapper to container first
+      this.container.appendChild(this.wrapper);
+      
+      // Add stats bar at the end (bottom) if enabled
       if (this.options.showStats) {
         this.statsBar = document.createElement('div');
         this.statsBar.className = 'overtype-stats';
-        this.wrapper.appendChild(this.statsBar);
+        this.container.appendChild(this.statsBar);
         this._updateStats();
       }
       
-      // Add wrapper to container
-      this.container.appendChild(this.wrapper);
-      
       // Add container to element
       this.element.appendChild(this.container);
+      
+      // Debug logging
+      if (window.location.pathname.includes('demo.html')) {
+        console.log('_createDOM completed:', {
+          elementId: this.element.id,
+          autoResize: this.options.autoResize,
+          containerClasses: this.container.className,
+          hasStats: !!this.statsBar,
+          hasToolbar: this.options.toolbar
+        });
+      }
+      
+      // Setup auto-resize if enabled
+      if (this.options.autoResize) {
+        this._setupAutoResize();
+      } else {
+        // Ensure auto-resize class is removed if not using auto-resize
+        this.container.classList.remove('overtype-auto-resize');
+        
+        if (window.location.pathname.includes('demo.html')) {
+          console.log('Removed auto-resize class from:', this.element.id);
+        }
+      }
     }
 
     /**
@@ -378,6 +416,16 @@ class OverType {
       if (this.options.autofocus) {
         this.textarea.focus();
       }
+      
+      // Setup or remove auto-resize
+      if (this.options.autoResize) {
+        if (!this.container.classList.contains('overtype-auto-resize')) {
+          this._setupAutoResize();
+        }
+      } else {
+        // Ensure auto-resize class is removed
+        this.container.classList.remove('overtype-auto-resize');
+      }
 
       // Update preview with initial content
       this.updatePreview();
@@ -554,6 +602,11 @@ class OverType {
     setValue(value) {
       this.textarea.value = value;
       this.updatePreview();
+      
+      // Update height if auto-resize is enabled
+      if (this.options.autoResize) {
+        this._updateAutoHeight();
+      }
     }
 
 
@@ -629,6 +682,89 @@ class OverType {
       }
     }
     
+    /**
+     * Setup auto-resize functionality
+     * @private
+     */
+    _setupAutoResize() {
+      // Add auto-resize class for styling
+      this.container.classList.add('overtype-auto-resize');
+      
+      // Store previous height for comparison
+      this.previousHeight = null;
+      
+      // Initial height update
+      this._updateAutoHeight();
+      
+      // Listen for input events
+      this.textarea.addEventListener('input', () => this._updateAutoHeight());
+      
+      // Listen for window resize
+      window.addEventListener('resize', () => this._updateAutoHeight());
+    }
+    
+    /**
+     * Update height based on scrollHeight
+     * @private
+     */
+    _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);
+      
+      // Store scroll positions
+      const scrollTop = textarea.scrollTop;
+      
+      // Reset height to get accurate scrollHeight
+      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) {
+        const maxHeight = parseInt(this.options.maxHeight);
+        if (newHeight > maxHeight) {
+          newHeight = maxHeight;
+          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
+      }
+    }
+    
     /**
      * Show or hide stats bar
      * @param {boolean} show - Whether to show stats
@@ -637,17 +773,15 @@ class OverType {
       this.options.showStats = show;
       
       if (show && !this.statsBar) {
-        // Create stats bar
+        // Create stats bar (add to container, not wrapper)
         this.statsBar = document.createElement('div');
         this.statsBar.className = 'overtype-stats';
-        this.wrapper.appendChild(this.statsBar);
-        this.wrapper.classList.add('with-stats');
+        this.container.appendChild(this.statsBar);
         this._updateStats();
       } else if (!show && this.statsBar) {
         // Remove stats bar
         this.statsBar.remove();
         this.statsBar = null;
-        this.wrapper.classList.remove('with-stats');
       }
     }
 

package/src/parser.js

@@ -109,7 +109,9 @@ export class MarkdownParser {
    * @returns {string|null} Parsed code fence or null
    */
   static parseCodeBlock(html) {
-    if (html.startsWith('```')) {
+    // Only treat as code block if ``` is alone or followed by a language identifier
+    // This prevents ```some code``` from being treated as a code fence
+    if (html.match(/^```(\s*|\w*)$/)) {
       return `<div><span class="code-fence">${html}</span></div>`;
     }
     return null;

package/src/styles.js

@@ -14,7 +14,7 @@ export function generateStyles(options = {}) {
   const {
     fontSize = '14px',
     lineHeight = 1.6,
-    fontFamily = "ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', monospace",
+    fontFamily = '"SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, "Roboto Mono", "Noto Sans Mono", "Droid Sans Mono", "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", Courier, monospace',
     padding = '20px',
     theme = null,
     mobile = {}
@@ -41,7 +41,8 @@ export function generateStyles(options = {}) {
   return `
     /* OverType Editor Styles */
     .overtype-container {
-      position: relative !important;
+      display: grid !important;
+      grid-template-rows: auto 1fr auto !important;
       width: 100% !important;
       height: 100% !important;
       ${themeVars ? `
@@ -49,12 +50,26 @@ export function generateStyles(options = {}) {
       ${themeVars}` : ''}
     }
     
+    /* Auto-resize mode styles */
+    .overtype-container.overtype-auto-resize {
+      height: auto !important;
+      grid-template-rows: auto auto auto !important;
+    }
+    
+    .overtype-container.overtype-auto-resize .overtype-wrapper {
+      height: auto !important;
+      min-height: 60px !important;
+      overflow: visible !important;
+    }
+    
     .overtype-wrapper {
       position: relative !important;
       width: 100% !important;
-      height: 100% !important;
+      height: 100% !important; /* Take full height of grid cell */
+      min-height: 60px !important; /* Minimum usable height */
       overflow: hidden !important;
       background: var(--bg-secondary, #ffffff) !important;
+      grid-row: 2 !important; /* Always second row in grid */
     }
 
     /* Critical alignment styles - must be identical for both layers */
@@ -69,6 +84,8 @@ export function generateStyles(options = {}) {
       
       /* Font properties - any difference breaks alignment */
       font-family: ${fontFamily} !important;
+      font-synthesis: none !important; /* no faux bold/italic width drift */
+      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;
       font-weight: normal !important;
@@ -335,15 +352,9 @@ export function generateStyles(options = {}) {
     }
 
     /* Stats bar */
-    .overtype-wrapper.with-stats {
-      padding-bottom: 40px !important;
-    }
     
-    .overtype-wrapper .overtype-stats {
-      position: absolute !important;
-      bottom: 0 !important;
-      left: 0 !important;
-      right: 0 !important;
+    /* Stats bar - positioned by grid, not absolute */
+    .overtype-stats {
       height: 40px !important;
       padding: 0 20px !important;
       background: #f8f9fa !important;
@@ -354,24 +365,24 @@ export function generateStyles(options = {}) {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
       font-size: 0.85rem !important;
       color: #666 !important;
-      z-index: 2 !important;
+      grid-row: 3 !important; /* Always third row in grid */
     }
     
     /* Dark theme stats bar */
-    .overtype-wrapper[data-theme="cave"] .overtype-stats {
+    .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-wrapper .overtype-stats .overtype-stat {
+    .overtype-stats .overtype-stat {
       display: flex !important;
       align-items: center !important;
       gap: 5px !important;
       white-space: nowrap !important;
     }
     
-    .overtype-wrapper .overtype-stats .live-dot {
+    .overtype-stats .live-dot {
       width: 8px !important;
       height: 8px !important;
       background: #4caf50 !important;
@@ -384,11 +395,6 @@ export function generateStyles(options = {}) {
       50% { opacity: 0.6; transform: scale(1.2); }
     }
     
-    /* Adjust textarea and preview for stats bar */
-    .overtype-wrapper.with-stats .overtype-input,
-    .overtype-wrapper.with-stats .overtype-preview {
-      height: calc(100% - 40px) !important;
-    }
 
     /* Toolbar Styles */
     .overtype-toolbar {
@@ -399,6 +405,9 @@ export function generateStyles(options = {}) {
       background: var(--toolbar-bg, var(--bg-primary, #f8f9fa));
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
+      flex-shrink: 0;
+      height: auto !important;
+      grid-row: 1 !important; /* Always first row in grid */
     }
 
     .overtype-toolbar-button {