overtype 2.3.5 → 2.3.6

package/dist/overtype.min.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.3.5
+ * OverType v2.3.6
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -103,9 +103,9 @@ var OverType=(()=>{var ve=Object.defineProperty;var cn=Object.getOwnPropertyDesc
       left: 0 !important;
       width: 100% !important;
       height: 100% !important;
-      
+
       /* Font properties - any difference breaks alignment */
-      font-family: ${i} !important;
+      font-family: var(--instance-font-family, ${i}) !important;
       font-variant-ligatures: none !important; /* keep metrics stable for code */
       font-size: var(--instance-font-size, ${e}) !important;
       line-height: var(--instance-line-height, ${n}) !important;
@@ -212,15 +212,12 @@ var OverType=(()=>{var ve=Object.defineProperty;var cn=Object.getOwnPropertyDesc
       z-index: 0 !important;
       pointer-events: none !important;
       user-select: none !important;
-      font-family: ${i} !important;
+      font-family: var(--instance-font-family, ${i}) !important;
       font-size: var(--instance-font-size, ${e}) !important;
       line-height: var(--instance-line-height, ${n}) !important;
       padding: var(--instance-padding, ${o}) !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 */
@@ -373,7 +370,7 @@ var OverType=(()=>{var ve=Object.defineProperty;var cn=Object.getOwnPropertyDesc
     .overtype-wrapper .overtype-preview pre code {
       background: transparent !important;
       color: var(--code, #0d3b66) !important;
-      font-family: ${i} !important; /* Match textarea font exactly for alignment */
+      font-family: var(--instance-font-family, ${i}) !important; /* Match textarea font exactly for alignment */
     }
 
     /* Blockquotes */
@@ -458,26 +455,20 @@ var OverType=(()=>{var ve=Object.defineProperty;var cn=Object.getOwnPropertyDesc
     .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;
@@ -971,7 +962,7 @@ ${a}`:r;if(p){let k=t.value[t.selectionStart-1];t.selectionStart!==0&&k!=null&&!
 </svg>`,sn=`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" fill="none"></path>
   <circle cx="12" cy="12" r="3" fill="none"></circle>
-</svg>`;var S={bold:{name:"bold",actionId:"toggleBold",icon:Kt,title:"Bold (Ctrl+B)",action:({editor:t})=>{rt(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},italic:{name:"italic",actionId:"toggleItalic",icon:Zt,title:"Italic (Ctrl+I)",action:({editor:t})=>{st(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},code:{name:"code",actionId:"toggleCode",icon:Yt,title:"Inline Code",action:({editor:t})=>{at(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},separator:{name:"separator"},link:{name:"link",actionId:"insertLink",icon:Xt,title:"Insert Link",action:({editor:t})=>{lt(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},h1:{name:"h1",actionId:"toggleH1",icon:Qt,title:"Heading 1",action:({editor:t})=>{ut(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},h2:{name:"h2",actionId:"toggleH2",icon:Gt,title:"Heading 2",action:({editor:t})=>{ht(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},h3:{name:"h3",actionId:"toggleH3",icon:Jt,title:"Heading 3",action:({editor:t})=>{ft(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},bulletList:{name:"bulletList",actionId:"toggleBulletList",icon:en,title:"Bullet List",action:({editor:t})=>{ct(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},orderedList:{name:"orderedList",actionId:"toggleNumberedList",icon:tn,title:"Numbered List",action:({editor:t})=>{pt(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},taskList:{name:"taskList",actionId:"toggleTaskList",icon:on,title:"Task List",action:({editor:t})=>{Ie&&(Ie(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0})))}},quote:{name:"quote",actionId:"toggleQuote",icon:nn,title:"Quote",action:({editor:t})=>{dt(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},upload:{name:"upload",actionId:"uploadFile",icon:rn,title:"Upload File",action:({editor:t})=>{var n,i;if(!((n=t.options.fileUpload)!=null&&n.enabled))return;let e=document.createElement("input");e.type="file",e.multiple=!0,((i=t.options.fileUpload.mimeTypes)==null?void 0:i.length)>0&&(e.accept=t.options.fileUpload.mimeTypes.join(",")),e.onchange=()=>{var r;if(!((r=e.files)!=null&&r.length))return;let o=new DataTransfer;for(let s of e.files)o.items.add(s);t._handleDataTransfer(o)},e.click()}},viewMode:{name:"viewMode",icon:sn,title:"View mode"}},ie=[S.bold,S.italic,S.code,S.separator,S.link,S.separator,S.h1,S.h2,S.h3,S.separator,S.bulletList,S.orderedList,S.taskList,S.separator,S.quote,S.separator,S.viewMode];function ze(t){let e={};return(t||[]).forEach(n=>{if(!n||n.name==="separator")return;let i=n.actionId||n.name;n.action&&(e[i]=n.action)}),e}function an(t){let e=t||ie;return Array.isArray(e)?e.map(n=>({name:(n==null?void 0:n.name)||null,actionId:(n==null?void 0:n.actionId)||(n==null?void 0:n.name)||null,icon:(n==null?void 0:n.icon)||null,title:(n==null?void 0:n.title)||null})):null}function ri(t,e){let n=an(t),i=an(e);if(n===null||i===null)return n!==i;if(n.length!==i.length)return!0;for(let o=0;o<n.length;o++){let r=n[o],s=i[o];if(r.name!==s.name||r.actionId!==s.actionId||r.icon!==s.icon||r.title!==s.title)return!0}return!1}var v=class v{constructor(e,n={}){let i;if(typeof e=="string"){if(i=document.querySelectorAll(e),i.length===0)throw new Error(`No elements found for selector: ${e}`);i=Array.from(i)}else if(e instanceof Element)i=[e];else if(e instanceof NodeList)i=Array.from(e);else if(Array.isArray(e))i=e;else throw new Error("Invalid target: must be selector string, Element, NodeList, or Array");return i.map(r=>{if(r.overTypeInstance)return r.overTypeInstance.reinit(n),r.overTypeInstance;let s=Object.create(v.prototype);return s._init(r,n),r.overTypeInstance=s,v.instances.set(r,s),s})}_init(e,n={}){this.element=e,this.instanceTheme=n.theme||null,this.options=this._mergeOptions(n),this.instanceId=++v.instanceCount,this.initialized=!1,v.injectStyles(),v.initGlobalListeners();let i=e.querySelector(".overtype-container"),o=e.querySelector(".overtype-wrapper");i||o?this._recoverFromDOM(i,o):this._buildFromScratch(),this.instanceTheme==="auto"&&this.setTheme("auto"),this.shortcuts=new re(this),this._rebuildActionsMap(),this.linkTooltip=new He(this),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.textarea.scrollTop=this.preview.scrollTop,this.textarea.scrollLeft=this.preview.scrollLeft})}),this.initialized=!0,this.options.onChange&&this.options.onChange(this.getValue(),this)}_mergeOptions(e){let n={fontSize:"14px",lineHeight:1.6,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:"16px",mobile:{fontSize:"16px",padding:"12px",lineHeight:1.5},textareaProps:{},autofocus:!1,autoResize:!1,minHeight:"100px",maxHeight:null,placeholder:"Start typing...",value:"",onChange:null,onKeydown:null,onRender:null,showActiveLineRaw:!1,showStats:!1,toolbar:!1,toolbarButtons:null,statsFormatter:null,smartLists:!0,codeHighlighter:null,spellcheck:!1},{theme:i,colors:o,...r}=e;return{...n,...r}}_recoverFromDOM(e,n){if(e&&e.classList.contains("overtype-container"))this.container=e,this.wrapper=e.querySelector(".overtype-wrapper");else if(n){this.wrapper=n,this.container=document.createElement("div"),this.container.className="overtype-container";let i=this.instanceTheme||v.currentTheme||_,o=typeof i=="string"?i:i.name;if(o&&this.container.setAttribute("data-theme",o),this.instanceTheme){let r=typeof this.instanceTheme=="string"?V(this.instanceTheme):this.instanceTheme;if(r&&r.colors){let s=Q(r.colors);this.container.style.cssText+=s}}n.parentNode.insertBefore(this.container,n),this.container.appendChild(n)}if(!this.wrapper){e&&e.remove(),n&&n.remove(),this._buildFromScratch();return}if(this.textarea=this.wrapper.querySelector(".overtype-input"),this.preview=this.wrapper.querySelector(".overtype-preview"),!this.textarea||!this.preview){this.container.remove(),this._buildFromScratch();return}this.wrapper._instance=this,this.options.fontSize&&this.wrapper.style.setProperty("--instance-font-size",this.options.fontSize),this.options.lineHeight&&this.wrapper.style.setProperty("--instance-line-height",String(this.options.lineHeight)),this.options.padding&&this.wrapper.style.setProperty("--instance-padding",this.options.padding),this._configureTextarea(),this._applyOptions()}_buildFromScratch(){let e=this._extractContent();this.element.innerHTML="",this._createDOM(),(e||this.options.value)&&this.setValue(e||this.options.value),this._applyOptions()}_extractContent(){let e=this.element.querySelector(".overtype-input");return e?e.value:this.element.textContent||""}_createDOM(){this.container=document.createElement("div"),this.container.className="overtype-container";let e=this.instanceTheme||v.currentTheme||_,n=typeof e=="string"?e:e.name;if(n&&this.container.setAttribute("data-theme",n),this.instanceTheme){let i=typeof this.instanceTheme=="string"?V(this.instanceTheme):this.instanceTheme;if(i&&i.colors){let o=Q(i.colors);this.container.style.cssText+=o}}this.wrapper=document.createElement("div"),this.wrapper.className="overtype-wrapper",this.options.fontSize&&this.wrapper.style.setProperty("--instance-font-size",this.options.fontSize),this.options.lineHeight&&this.wrapper.style.setProperty("--instance-line-height",String(this.options.lineHeight)),this.options.padding&&this.wrapper.style.setProperty("--instance-padding",this.options.padding),this.wrapper._instance=this,this.textarea=document.createElement("textarea"),this.textarea.className="overtype-input",this.textarea.placeholder=this.options.placeholder,this._configureTextarea(),this.options.textareaProps&&Object.entries(this.options.textareaProps).forEach(([i,o])=>{i==="className"||i==="class"?this.textarea.className+=" "+o:i==="style"&&typeof o=="object"?Object.assign(this.textarea.style,o):this.textarea.setAttribute(i,o)}),this.preview=document.createElement("div"),this.preview.className="overtype-preview",this.preview.setAttribute("aria-hidden","true"),this.placeholderEl=document.createElement("div"),this.placeholderEl.className="overtype-placeholder",this.placeholderEl.setAttribute("aria-hidden","true"),this.placeholderEl.textContent=this.options.placeholder,this.wrapper.appendChild(this.textarea),this.wrapper.appendChild(this.preview),this.wrapper.appendChild(this.placeholderEl),this.container.appendChild(this.wrapper),this.options.showStats&&(this.statsBar=document.createElement("div"),this.statsBar.className="overtype-stats",this.container.appendChild(this.statsBar),this._updateStats()),this.element.appendChild(this.container),this.options.autoResize?this._setupAutoResize():this.container.classList.remove("overtype-auto-resize")}_configureTextarea(){this.textarea.setAttribute("autocomplete","off"),this.textarea.setAttribute("autocorrect","off"),this.textarea.setAttribute("autocapitalize","off"),this.textarea.setAttribute("spellcheck",String(this.options.spellcheck)),this.textarea.setAttribute("data-gramm","false"),this.textarea.setAttribute("data-gramm_editor","false"),this.textarea.setAttribute("data-enable-grammarly","false")}_createToolbar(){var n;let e=this.options.toolbarButtons||ie;if((n=this.options.fileUpload)!=null&&n.enabled&&!e.some(i=>(i==null?void 0:i.name)==="upload")){let i=e.findIndex(o=>(o==null?void 0:o.name)==="viewMode");i!==-1?(e=[...e],e.splice(i,0,S.separator,S.upload)):e=[...e,S.separator,S.upload]}this.toolbar=new ke(this,{toolbarButtons:e}),this.toolbar.create(),this._toolbarSelectionListener=()=>{this.toolbar&&this.toolbar.updateButtonStates()},this._toolbarInputListener=()=>{this.toolbar&&this.toolbar.updateButtonStates()},this.textarea.addEventListener("selectionchange",this._toolbarSelectionListener),this.textarea.addEventListener("input",this._toolbarInputListener)}_cleanupToolbarListeners(){this._toolbarSelectionListener&&(this.textarea.removeEventListener("selectionchange",this._toolbarSelectionListener),this._toolbarSelectionListener=null),this._toolbarInputListener&&(this.textarea.removeEventListener("input",this._toolbarInputListener),this._toolbarInputListener=null)}_rebuildActionsMap(){var e;this.actionsById=ze(ie),this.options.toolbarButtons&&Object.assign(this.actionsById,ze(this.options.toolbarButtons)),(e=this.options.fileUpload)!=null&&e.enabled&&Object.assign(this.actionsById,ze([S.upload]))}_applyOptions(){this.options.autofocus&&this.textarea.focus(),this.options.autoResize?this.container.classList.contains("overtype-auto-resize")?this._updateAutoHeight():this._setupAutoResize():this.container.classList.remove("overtype-auto-resize"),this.options.toolbar&&!this.toolbar?this._createToolbar():!this.options.toolbar&&this.toolbar&&(this._cleanupToolbarListeners(),this.toolbar.destroy(),this.toolbar=null),this.placeholderEl&&(this.placeholderEl.textContent=this.options.placeholder),this.options.fileUpload&&!this.fileUploadInitialized?this._initFileUpload():!this.options.fileUpload&&this.fileUploadInitialized&&this._destroyFileUpload(),this.updatePreview()}_initFileUpload(){let e=this.options.fileUpload;if(!(!e||!e.enabled)){if(e.maxSize=e.maxSize||10*1024*1024,e.mimeTypes=e.mimeTypes||[],e.batch=e.batch||!1,!e.onInsertFile||typeof e.onInsertFile!="function"){console.warn("OverType: fileUpload.onInsertFile callback is required for file uploads.");return}this._fileUploadCounter=0,this._boundHandleFilePaste=this._handleFilePaste.bind(this),this._boundHandleFileDrop=this._handleFileDrop.bind(this),this._boundHandleDragOver=this._handleDragOver.bind(this),this.textarea.addEventListener("paste",this._boundHandleFilePaste),this.textarea.addEventListener("drop",this._boundHandleFileDrop),this.textarea.addEventListener("dragover",this._boundHandleDragOver),this.fileUploadInitialized=!0}}_handleFilePaste(e){var n,i;(i=(n=e==null?void 0:e.clipboardData)==null?void 0:n.files)!=null&&i.length&&(e.preventDefault(),this._handleDataTransfer(e.clipboardData))}_handleFileDrop(e){var n,i;(i=(n=e==null?void 0:e.dataTransfer)==null?void 0:n.files)!=null&&i.length&&(e.preventDefault(),this._handleDataTransfer(e.dataTransfer))}_handleDataTransfer(e){let n=[];for(let i of e.files){if(i.size>this.options.fileUpload.maxSize||this.options.fileUpload.mimeTypes.length>0&&!this.options.fileUpload.mimeTypes.includes(i.type))continue;let o=++this._fileUploadCounter,s=`${i.type.startsWith("image/")?"!":""}[Uploading ${i.name} (#${o})...]()`;if(this.insertAtCursor(`${s}
+</svg>`;var S={bold:{name:"bold",actionId:"toggleBold",icon:Kt,title:"Bold (Ctrl+B)",action:({editor:t})=>{rt(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},italic:{name:"italic",actionId:"toggleItalic",icon:Zt,title:"Italic (Ctrl+I)",action:({editor:t})=>{st(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},code:{name:"code",actionId:"toggleCode",icon:Yt,title:"Inline Code",action:({editor:t})=>{at(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},separator:{name:"separator"},link:{name:"link",actionId:"insertLink",icon:Xt,title:"Insert Link",action:({editor:t})=>{lt(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},h1:{name:"h1",actionId:"toggleH1",icon:Qt,title:"Heading 1",action:({editor:t})=>{ut(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},h2:{name:"h2",actionId:"toggleH2",icon:Gt,title:"Heading 2",action:({editor:t})=>{ht(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},h3:{name:"h3",actionId:"toggleH3",icon:Jt,title:"Heading 3",action:({editor:t})=>{ft(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},bulletList:{name:"bulletList",actionId:"toggleBulletList",icon:en,title:"Bullet List",action:({editor:t})=>{ct(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},orderedList:{name:"orderedList",actionId:"toggleNumberedList",icon:tn,title:"Numbered List",action:({editor:t})=>{pt(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},taskList:{name:"taskList",actionId:"toggleTaskList",icon:on,title:"Task List",action:({editor:t})=>{Ie&&(Ie(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0})))}},quote:{name:"quote",actionId:"toggleQuote",icon:nn,title:"Quote",action:({editor:t})=>{dt(t.textarea),t.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}},upload:{name:"upload",actionId:"uploadFile",icon:rn,title:"Upload File",action:({editor:t})=>{var n,i;if(!((n=t.options.fileUpload)!=null&&n.enabled))return;let e=document.createElement("input");e.type="file",e.multiple=!0,((i=t.options.fileUpload.mimeTypes)==null?void 0:i.length)>0&&(e.accept=t.options.fileUpload.mimeTypes.join(",")),e.onchange=()=>{var r;if(!((r=e.files)!=null&&r.length))return;let o=new DataTransfer;for(let s of e.files)o.items.add(s);t._handleDataTransfer(o)},e.click()}},viewMode:{name:"viewMode",icon:sn,title:"View mode"}},ie=[S.bold,S.italic,S.code,S.separator,S.link,S.separator,S.h1,S.h2,S.h3,S.separator,S.bulletList,S.orderedList,S.taskList,S.separator,S.quote,S.separator,S.viewMode];function ze(t){let e={};return(t||[]).forEach(n=>{if(!n||n.name==="separator")return;let i=n.actionId||n.name;n.action&&(e[i]=n.action)}),e}function an(t){let e=t||ie;return Array.isArray(e)?e.map(n=>({name:(n==null?void 0:n.name)||null,actionId:(n==null?void 0:n.actionId)||(n==null?void 0:n.name)||null,icon:(n==null?void 0:n.icon)||null,title:(n==null?void 0:n.title)||null})):null}function ri(t,e){let n=an(t),i=an(e);if(n===null||i===null)return n!==i;if(n.length!==i.length)return!0;for(let o=0;o<n.length;o++){let r=n[o],s=i[o];if(r.name!==s.name||r.actionId!==s.actionId||r.icon!==s.icon||r.title!==s.title)return!0}return!1}var v=class v{constructor(e,n={}){let i;if(typeof e=="string"){if(i=document.querySelectorAll(e),i.length===0)throw new Error(`No elements found for selector: ${e}`);i=Array.from(i)}else if(e instanceof Element)i=[e];else if(e instanceof NodeList)i=Array.from(e);else if(Array.isArray(e))i=e;else throw new Error("Invalid target: must be selector string, Element, NodeList, or Array");return i.map(r=>{if(r.overTypeInstance)return r.overTypeInstance.reinit(n),r.overTypeInstance;let s=Object.create(v.prototype);return s._init(r,n),r.overTypeInstance=s,v.instances.set(r,s),s})}_init(e,n={}){this.element=e,this.instanceTheme=n.theme||null,this.options=this._mergeOptions(n),this.instanceId=++v.instanceCount,this.initialized=!1,v.injectStyles(),v.initGlobalListeners();let i=e.querySelector(".overtype-container"),o=e.querySelector(".overtype-wrapper");i||o?this._recoverFromDOM(i,o):this._buildFromScratch(),this.instanceTheme==="auto"&&this.setTheme("auto"),this.shortcuts=new re(this),this._rebuildActionsMap(),this.linkTooltip=new He(this),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.textarea.scrollTop=this.preview.scrollTop,this.textarea.scrollLeft=this.preview.scrollLeft})}),this.initialized=!0,this.options.onChange&&this.options.onChange(this.getValue(),this)}_mergeOptions(e){let n={fontSize:"14px",lineHeight:1.6,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:"16px",mobile:{fontSize:"16px",padding:"12px",lineHeight:1.5},textareaProps:{},autofocus:!1,autoResize:!1,minHeight:"100px",maxHeight:null,placeholder:"Start typing...",value:"",onChange:null,onKeydown:null,onRender:null,showActiveLineRaw:!1,showStats:!1,toolbar:!1,toolbarButtons:null,statsFormatter:null,smartLists:!0,codeHighlighter:null,spellcheck:!1},{theme:i,colors:o,...r}=e;return{...n,...r}}_recoverFromDOM(e,n){if(e&&e.classList.contains("overtype-container"))this.container=e,this.wrapper=e.querySelector(".overtype-wrapper");else if(n){this.wrapper=n,this.container=document.createElement("div"),this.container.className="overtype-container";let i=this.instanceTheme||v.currentTheme||_,o=typeof i=="string"?i:i.name;if(o&&this.container.setAttribute("data-theme",o),this.instanceTheme){let r=typeof this.instanceTheme=="string"?V(this.instanceTheme):this.instanceTheme;if(r&&r.colors){let s=Q(r.colors);this.container.style.cssText+=s}}n.parentNode.insertBefore(this.container,n),this.container.appendChild(n)}if(!this.wrapper){e&&e.remove(),n&&n.remove(),this._buildFromScratch();return}if(this.textarea=this.wrapper.querySelector(".overtype-input"),this.preview=this.wrapper.querySelector(".overtype-preview"),!this.textarea||!this.preview){this.container.remove(),this._buildFromScratch();return}this.wrapper._instance=this,this._applyInstanceCSSVars(),this._configureTextarea(),this._applyOptions()}_buildFromScratch(){let e=this._extractContent();this.element.innerHTML="",this._createDOM(),(e||this.options.value)&&this.setValue(e||this.options.value),this._applyOptions()}_extractContent(){let e=this.element.querySelector(".overtype-input");return e?e.value:this.element.textContent||""}_createDOM(){this.container=document.createElement("div"),this.container.className="overtype-container";let e=this.instanceTheme||v.currentTheme||_,n=typeof e=="string"?e:e.name;if(n&&this.container.setAttribute("data-theme",n),this.instanceTheme){let i=typeof this.instanceTheme=="string"?V(this.instanceTheme):this.instanceTheme;if(i&&i.colors){let o=Q(i.colors);this.container.style.cssText+=o}}this.wrapper=document.createElement("div"),this.wrapper.className="overtype-wrapper",this._applyInstanceCSSVars(),this.wrapper._instance=this,this.textarea=document.createElement("textarea"),this.textarea.className="overtype-input",this.textarea.placeholder=this.options.placeholder,this._configureTextarea(),this.options.textareaProps&&Object.entries(this.options.textareaProps).forEach(([i,o])=>{i==="className"||i==="class"?this.textarea.className+=" "+o:i==="style"&&typeof o=="object"?Object.assign(this.textarea.style,o):this.textarea.setAttribute(i,o)}),this.preview=document.createElement("div"),this.preview.className="overtype-preview",this.preview.setAttribute("aria-hidden","true"),this.placeholderEl=document.createElement("div"),this.placeholderEl.className="overtype-placeholder",this.placeholderEl.setAttribute("aria-hidden","true"),this.placeholderEl.textContent=this.options.placeholder,this.wrapper.appendChild(this.textarea),this.wrapper.appendChild(this.preview),this.wrapper.appendChild(this.placeholderEl),this.container.appendChild(this.wrapper),this.options.showStats&&(this.statsBar=document.createElement("div"),this.statsBar.className="overtype-stats",this.container.appendChild(this.statsBar),this._updateStats()),this.element.appendChild(this.container),this.options.autoResize?this._setupAutoResize():this.container.classList.remove("overtype-auto-resize")}_configureTextarea(){this.textarea.setAttribute("autocomplete","off"),this.textarea.setAttribute("autocorrect","off"),this.textarea.setAttribute("autocapitalize","off"),this.textarea.setAttribute("spellcheck",String(this.options.spellcheck)),this.textarea.setAttribute("data-gramm","false"),this.textarea.setAttribute("data-gramm_editor","false"),this.textarea.setAttribute("data-enable-grammarly","false")}_createToolbar(){var n;let e=this.options.toolbarButtons||ie;if((n=this.options.fileUpload)!=null&&n.enabled&&!e.some(i=>(i==null?void 0:i.name)==="upload")){let i=e.findIndex(o=>(o==null?void 0:o.name)==="viewMode");i!==-1?(e=[...e],e.splice(i,0,S.separator,S.upload)):e=[...e,S.separator,S.upload]}this.toolbar=new ke(this,{toolbarButtons:e}),this.toolbar.create(),this._toolbarSelectionListener=()=>{this.toolbar&&this.toolbar.updateButtonStates()},this._toolbarInputListener=()=>{this.toolbar&&this.toolbar.updateButtonStates()},this.textarea.addEventListener("selectionchange",this._toolbarSelectionListener),this.textarea.addEventListener("input",this._toolbarInputListener)}_cleanupToolbarListeners(){this._toolbarSelectionListener&&(this.textarea.removeEventListener("selectionchange",this._toolbarSelectionListener),this._toolbarSelectionListener=null),this._toolbarInputListener&&(this.textarea.removeEventListener("input",this._toolbarInputListener),this._toolbarInputListener=null)}_rebuildActionsMap(){var e;this.actionsById=ze(ie),this.options.toolbarButtons&&Object.assign(this.actionsById,ze(this.options.toolbarButtons)),(e=this.options.fileUpload)!=null&&e.enabled&&Object.assign(this.actionsById,ze([S.upload]))}_applyInstanceCSSVars(){this.wrapper&&(this.options.fontSize&&this.wrapper.style.setProperty("--instance-font-size",this.options.fontSize),this.options.lineHeight&&this.wrapper.style.setProperty("--instance-line-height",String(this.options.lineHeight)),this.options.padding&&this.wrapper.style.setProperty("--instance-padding",this.options.padding),this.options.fontFamily&&this.wrapper.style.setProperty("--instance-font-family",this.options.fontFamily))}_applyOptions(){this._applyInstanceCSSVars(),this.options.autofocus&&this.textarea.focus(),this.options.autoResize?this.container.classList.contains("overtype-auto-resize")?this._updateAutoHeight():this._setupAutoResize():this.container.classList.remove("overtype-auto-resize"),this.options.toolbar&&!this.toolbar?this._createToolbar():!this.options.toolbar&&this.toolbar&&(this._cleanupToolbarListeners(),this.toolbar.destroy(),this.toolbar=null),this.placeholderEl&&(this.placeholderEl.textContent=this.options.placeholder),this.options.fileUpload&&!this.fileUploadInitialized?this._initFileUpload():!this.options.fileUpload&&this.fileUploadInitialized&&this._destroyFileUpload(),this.updatePreview()}_initFileUpload(){let e=this.options.fileUpload;if(!(!e||!e.enabled)){if(e.maxSize=e.maxSize||10*1024*1024,e.mimeTypes=e.mimeTypes||[],e.batch=e.batch||!1,!e.onInsertFile||typeof e.onInsertFile!="function"){console.warn("OverType: fileUpload.onInsertFile callback is required for file uploads.");return}this._fileUploadCounter=0,this._boundHandleFilePaste=this._handleFilePaste.bind(this),this._boundHandleFileDrop=this._handleFileDrop.bind(this),this._boundHandleDragOver=this._handleDragOver.bind(this),this.textarea.addEventListener("paste",this._boundHandleFilePaste),this.textarea.addEventListener("drop",this._boundHandleFileDrop),this.textarea.addEventListener("dragover",this._boundHandleDragOver),this.fileUploadInitialized=!0}}_handleFilePaste(e){var n,i;(i=(n=e==null?void 0:e.clipboardData)==null?void 0:n.files)!=null&&i.length&&(e.preventDefault(),this._handleDataTransfer(e.clipboardData))}_handleFileDrop(e){var n,i;(i=(n=e==null?void 0:e.dataTransfer)==null?void 0:n.files)!=null&&i.length&&(e.preventDefault(),this._handleDataTransfer(e.dataTransfer))}_handleDataTransfer(e){let n=[];for(let i of e.files){if(i.size>this.options.fileUpload.maxSize||this.options.fileUpload.mimeTypes.length>0&&!this.options.fileUpload.mimeTypes.includes(i.type))continue;let o=++this._fileUploadCounter,s=`${i.type.startsWith("image/")?"!":""}[Uploading ${i.name} (#${o})...]()`;if(this.insertAtCursor(`${s}
 `),this.options.fileUpload.batch){n.push({file:i,placeholder:s});continue}this.options.fileUpload.onInsertFile(i).then(a=>{this.textarea.value=this.textarea.value.replace(s,a),this.textarea.dispatchEvent(new Event("input",{bubbles:!0}))},a=>{console.error("OverType: File upload failed",a),this.textarea.value=this.textarea.value.replace(s,"[Upload failed]()"),this.textarea.dispatchEvent(new Event("input",{bubbles:!0}))})}this.options.fileUpload.batch&&n.length>0&&this.options.fileUpload.onInsertFile(n.map(i=>i.file)).then(i=>{(Array.isArray(i)?i:[i]).forEach((r,s)=>{this.textarea.value=this.textarea.value.replace(n[s].placeholder,r)}),this.textarea.dispatchEvent(new Event("input",{bubbles:!0}))},i=>{console.error("OverType: File upload failed",i),n.forEach(({placeholder:o})=>{this.textarea.value=this.textarea.value.replace(o,"[Upload failed]()")}),this.textarea.dispatchEvent(new Event("input",{bubbles:!0}))})}_handleDragOver(e){e.preventDefault()}_destroyFileUpload(){this.textarea.removeEventListener("paste",this._boundHandleFilePaste),this.textarea.removeEventListener("drop",this._boundHandleFileDrop),this.textarea.removeEventListener("dragover",this._boundHandleDragOver),this._boundHandleFilePaste=null,this._boundHandleFileDrop=null,this._boundHandleDragOver=null,this.fileUploadInitialized=!1}insertAtCursor(e){let n=this.textarea.selectionStart,i=this.textarea.selectionEnd,o=!1;try{o=document.execCommand("insertText",!1,e)}catch(r){}if(!o){let r=this.textarea.value.slice(0,n),s=this.textarea.value.slice(i);this.textarea.value=r+e+s,this.textarea.setSelectionRange(n+e.length,n+e.length)}this.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}updatePreview(){let e=this.textarea.value,n=this.textarea.selectionStart,i=this._getCurrentLine(e,n),o=this.container.dataset.mode==="preview",r=T.parse(e,i,this.options.showActiveLineRaw,this.options.codeHighlighter,o);this.preview.innerHTML=r,this.placeholderEl&&(this.placeholderEl.style.display=e?"none":""),this._applyCodeBlockBackgrounds(),this.options.showStats&&this.statsBar&&this._updateStats(),this.options.onChange&&this.initialized&&this.options.onChange(e,this),this.options.onRender&&this.options.onRender(this.preview,o?"preview":"normal",this)}_applyCodeBlockBackgrounds(){let e=this.preview.querySelectorAll(".code-fence");for(let n=0;n<e.length-1;n+=2){let i=e[n],o=e[n+1],r=i.parentElement,s=o.parentElement;!r||!s||(i.style.display="block",o.style.display="block",r.classList.add("code-block-line"),s.classList.add("code-block-line"))}}_getCurrentLine(e,n){return e.substring(0,n).split(`
 `).length-1}handleInput(e){this.updatePreview()}handleKeydown(e){if(e.key==="Tab"){let i=this.textarea.selectionStart,o=this.textarea.selectionEnd,r=this.textarea.value;if(e.shiftKey&&i===o)return;if(e.preventDefault(),i!==o&&e.shiftKey){let s=r.substring(0,i),a=r.substring(i,o),c=r.substring(o),l=a.split(`
 `).map(d=>d.replace(/^  /,"")).join(`

package/package.json

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

@@ -304,16 +304,7 @@ class OverType {
       // Store reference on wrapper
       this.wrapper._instance = this;
       
-      // Apply instance-specific styles via CSS custom properties
-      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();
 
       // Disable autofill, spellcheck, and extensions
       this._configureTextarea();
@@ -388,17 +379,8 @@ class OverType {
       this.wrapper.className = 'overtype-wrapper';
       
       
-      // Apply instance-specific styles via CSS custom properties
-      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;
 
       // Create textarea
@@ -548,11 +530,36 @@ class OverType {
       }
     }
 
+    /**
+     * 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() {
+      // Re-apply instance-specific CSS vars so reinit() picks up font/padding changes
+      this._applyInstanceCSSVars();
+
       // Apply autofocus
       if (this.options.autofocus) {
         this.textarea.focus();

package/src/styles.js

@@ -121,9 +121,9 @@ export function generateStyles(options = {}) {
       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;
@@ -230,15 +230,12 @@ export function generateStyles(options = {}) {
       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 */
@@ -391,7 +388,7 @@ export function generateStyles(options = {}) {
     .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 */
@@ -476,26 +473,20 @@ export function generateStyles(options = {}) {
     .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;