overtype 1.1.1 → 1.1.3

package/README.md

@@ -140,6 +140,26 @@ editors.forEach((editor, index) => {
 });
 ```
 
+### Form Integration
+
+```javascript
+// Use with form validation
+const [editor] = new OverType('#message', {
+  placeholder: 'Your message...',
+  textareaProps: {
+    required: true,
+    maxLength: 500,
+    name: 'message'
+  }
+});
+
+// The textarea will work with native form validation
+document.querySelector('form').addEventListener('submit', (e) => {
+  const content = editor.getValue();
+  // Form will automatically validate required field
+});
+```
+
 ### Custom Theme
 
 ```javascript
@@ -270,6 +290,14 @@ new OverType(target, options)
   placeholder: 'Start typing...',
   value: '',
   
+  // Native textarea properties
+  textareaProps: {
+    required: true,
+    maxLength: 500,
+    name: 'content',
+    // Any HTML textarea attribute
+  },
+  
   // Stats bar
   showStats: false,  // Enable/disable stats bar
   statsFormatter: (stats) => {  // Custom stats format

package/dist/overtype.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v1.1.0
+ * OverType v1.1.3
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author Demo User
@@ -105,7 +105,7 @@ var MarkdownParser = class {
    * @returns {string|null} Parsed code fence or null
    */
   static parseCodeBlock(html) {
-    if (html.startsWith("```")) {
+    if (html.match(/^```(\s*|\w*)$/)) {
       return `<div><span class="code-fence">${html}</span></div>`;
     }
     return null;
@@ -1294,7 +1294,7 @@ 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 = {}
@@ -1314,7 +1314,8 @@ 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 ? `
@@ -1322,12 +1323,26 @@ 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 */
@@ -1342,6 +1357,8 @@ 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;
@@ -1608,15 +1625,9 @@ 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;
@@ -1627,24 +1638,24 @@ 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;
@@ -1657,11 +1668,6 @@ 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 {
@@ -1672,6 +1678,9 @@ 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 {
@@ -2223,8 +2232,16 @@ var _OverType = class _OverType {
         padding: "12px",
         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: "",
       // Callbacks
@@ -2341,9 +2358,6 @@ var _OverType = class _OverType {
     }
     this.wrapper = document.createElement("div");
     this.wrapper.className = "overtype-wrapper";
-    if (this.options.showStats) {
-      this.wrapper.classList.add("with-stats");
-    }
     if (this.options.fontSize) {
       this.wrapper.style.setProperty("--instance-font-size", this.options.fontSize);
     }
@@ -2358,19 +2372,47 @@ var _OverType = class _OverType {
     this.textarea.className = "overtype-input";
     this.textarea.placeholder = this.options.placeholder;
     this._configureTextarea();
+    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);
+        }
+      });
+    }
     this.preview = document.createElement("div");
     this.preview.className = "overtype-preview";
     this.preview.setAttribute("aria-hidden", "true");
     this.wrapper.appendChild(this.textarea);
     this.wrapper.appendChild(this.preview);
+    this.container.appendChild(this.wrapper);
     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();
     }
-    this.container.appendChild(this.wrapper);
     this.element.appendChild(this.container);
+    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
+      });
+    }
+    if (this.options.autoResize) {
+      this._setupAutoResize();
+    } else {
+      this.container.classList.remove("overtype-auto-resize");
+      if (window.location.pathname.includes("demo.html")) {
+        console.log("Removed auto-resize class from:", this.element.id);
+      }
+    }
   }
   /**
    * Configure textarea attributes
@@ -2393,6 +2435,13 @@ var _OverType = class _OverType {
     if (this.options.autofocus) {
       this.textarea.focus();
     }
+    if (this.options.autoResize) {
+      if (!this.container.classList.contains("overtype-auto-resize")) {
+        this._setupAutoResize();
+      }
+    } else {
+      this.container.classList.remove("overtype-auto-resize");
+    }
     this.updatePreview();
   }
   /**
@@ -2517,6 +2566,9 @@ var _OverType = class _OverType {
   setValue(value) {
     this.textarea.value = value;
     this.updatePreview();
+    if (this.options.autoResize) {
+      this._updateAutoHeight();
+    }
   }
   /**
    * Focus the editor
@@ -2580,6 +2632,57 @@ var _OverType = class _OverType {
         `;
     }
   }
+  /**
+   * Setup auto-resize functionality
+   * @private
+   */
+  _setupAutoResize() {
+    this.container.classList.add("overtype-auto-resize");
+    this.previousHeight = null;
+    this._updateAutoHeight();
+    this.textarea.addEventListener("input", () => this._updateAutoHeight());
+    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;
+    const computed = window.getComputedStyle(textarea);
+    const paddingTop = parseFloat(computed.paddingTop);
+    const paddingBottom = parseFloat(computed.paddingBottom);
+    const scrollTop = textarea.scrollTop;
+    textarea.style.setProperty("height", "auto", "important");
+    let newHeight = textarea.scrollHeight;
+    if (this.options.minHeight) {
+      const minHeight = parseInt(this.options.minHeight);
+      newHeight = Math.max(newHeight, minHeight);
+    }
+    let overflow = "hidden";
+    if (this.options.maxHeight) {
+      const maxHeight = parseInt(this.options.maxHeight);
+      if (newHeight > maxHeight) {
+        newHeight = maxHeight;
+        overflow = "auto";
+      }
+    }
+    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");
+    textarea.scrollTop = scrollTop;
+    preview.scrollTop = scrollTop;
+    if (this.previousHeight !== newHeight) {
+      this.previousHeight = newHeight;
+    }
+  }
   /**
    * Show or hide stats bar
    * @param {boolean} show - Whether to show stats
@@ -2589,13 +2692,11 @@ var _OverType = class _OverType {
     if (show && !this.statsBar) {
       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) {
       this.statsBar.remove();
       this.statsBar = null;
-      this.wrapper.classList.remove("with-stats");
     }
   }
   /**