overtype 2.3.4 → 2.3.6

package/dist/overtype-webcomponent.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.3.4
+ * OverType v2.3.6
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -1129,9 +1129,9 @@ var OverTypeEditor = (() => {
       left: 0 !important;
       width: 100% !important;
       height: 100% !important;
-      
+
       /* Font properties - any difference breaks alignment */
-      font-family: ${fontFamily} !important;
+      font-family: var(--instance-font-family, ${fontFamily}) !important;
       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;
@@ -1238,15 +1238,12 @@ var OverTypeEditor = (() => {
       z-index: 0 !important;
       pointer-events: none !important;
       user-select: none !important;
-      font-family: ${fontFamily} !important;
+      font-family: var(--instance-font-family, ${fontFamily}) !important;
       font-size: var(--instance-font-size, ${fontSize}) !important;
       line-height: var(--instance-line-height, ${lineHeight}) !important;
       padding: var(--instance-padding, ${padding}) !important;
       box-sizing: border-box !important;
       color: var(--placeholder, #999) !important;
-      overflow: hidden !important;
-      white-space: nowrap !important;
-      text-overflow: ellipsis !important;
     }
 
     /* Preview layer styles */
@@ -1264,6 +1261,16 @@ var OverTypeEditor = (() => {
       -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 */
@@ -1389,7 +1396,7 @@ var OverTypeEditor = (() => {
     .overtype-wrapper .overtype-preview pre code {
       background: transparent !important;
       color: var(--code, #0d3b66) !important;
-      font-family: ${fontFamily} !important; /* Match textarea font exactly for alignment */
+      font-family: var(--instance-font-family, ${fontFamily}) !important; /* Match textarea font exactly for alignment */
     }
 
     /* Blockquotes */
@@ -1474,26 +1481,20 @@ var OverTypeEditor = (() => {
     .overtype-stats {
       height: 40px !important;
       padding: 0 20px !important;
-      background: #f8f9fa !important;
-      border-top: 1px solid #e0e0e0 !important;
+      background: var(--bg-secondary, #f8f9fa) !important;
+      border-top: 1px solid var(--border, #e0e0e0) !important;
       display: flex !important;
       justify-content: space-between !important;
       align-items: center !important;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
       font-size: 0.85rem !important;
-      color: #666 !important;
+      color: var(--text-secondary, #666) !important;
       flex-shrink: 0 !important; /* Don't shrink */
       z-index: 10001 !important; /* Above link tooltip */
       position: relative !important; /* Enable z-index */
     }
-    
-    /* Dark theme stats bar */
-    .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-stats .overtype-stat {
       display: flex !important;
       align-items: center !important;
@@ -4774,6 +4775,7 @@ ${blockSuffix}` : suffix;
         // Callbacks
         onChange: null,
         onKeydown: null,
+        onRender: null,
         // Features
         showActiveLineRaw: false,
         showStats: false,
@@ -4837,15 +4839,7 @@ ${blockSuffix}` : suffix;
         return;
       }
       this.wrapper._instance = this;
-      if (this.options.fontSize) {
-        this.wrapper.style.setProperty("--instance-font-size", this.options.fontSize);
-      }
-      if (this.options.lineHeight) {
-        this.wrapper.style.setProperty("--instance-line-height", String(this.options.lineHeight));
-      }
-      if (this.options.padding) {
-        this.wrapper.style.setProperty("--instance-padding", this.options.padding);
-      }
+      this._applyInstanceCSSVars();
       this._configureTextarea();
       this._applyOptions();
     }
@@ -4893,15 +4887,7 @@ ${blockSuffix}` : suffix;
       }
       this.wrapper = document.createElement("div");
       this.wrapper.className = "overtype-wrapper";
-      if (this.options.fontSize) {
-        this.wrapper.style.setProperty("--instance-font-size", this.options.fontSize);
-      }
-      if (this.options.lineHeight) {
-        this.wrapper.style.setProperty("--instance-line-height", String(this.options.lineHeight));
-      }
-      if (this.options.padding) {
-        this.wrapper.style.setProperty("--instance-padding", this.options.padding);
-      }
+      this._applyInstanceCSSVars();
       this.wrapper._instance = this;
       this.textarea = document.createElement("textarea");
       this.textarea.className = "overtype-input";
@@ -5015,11 +5001,34 @@ ${blockSuffix}` : suffix;
         Object.assign(this.actionsById, buildActionsMap([toolbarButtons.upload]));
       }
     }
+    /**
+     * Apply instance-specific styles via CSS custom properties on the wrapper.
+     * Called from init paths and from _applyOptions so reinit() propagates
+     * font/padding changes.
+     * @private
+     */
+    _applyInstanceCSSVars() {
+      if (!this.wrapper)
+        return;
+      if (this.options.fontSize) {
+        this.wrapper.style.setProperty("--instance-font-size", this.options.fontSize);
+      }
+      if (this.options.lineHeight) {
+        this.wrapper.style.setProperty("--instance-line-height", String(this.options.lineHeight));
+      }
+      if (this.options.padding) {
+        this.wrapper.style.setProperty("--instance-padding", this.options.padding);
+      }
+      if (this.options.fontFamily) {
+        this.wrapper.style.setProperty("--instance-font-family", this.options.fontFamily);
+      }
+    }
     /**
      * Apply options to the editor
      * @private
      */
     _applyOptions() {
+      this._applyInstanceCSSVars();
       if (this.options.autofocus) {
         this.textarea.focus();
       }
@@ -5172,6 +5181,9 @@ ${blockSuffix}` : suffix;
       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
@@ -6038,6 +6050,7 @@ ${blockSuffix}` : suffix;
       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
@@ -6208,7 +6221,8 @@ ${blockSuffix}` : suffix;
         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)
@@ -6427,6 +6441,19 @@ ${blockSuffix}` : suffix;
         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