overtype 2.2.0 → 2.3.0

package/dist/overtype.min.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.2.0
+ * OverType v2.3.0
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -12,8 +12,8 @@ var OverType=(()=>{var ve=Object.defineProperty;var cn=Object.getOwnPropertyDesc
 `),p=s.slice(3).trim(),h=p?` class="language-${p}"`:"",u=l,f=n||this.codeHighlighter;if(f)try{let g=l.replace(/&quot;/g,'"').replace(/&#39;/g,"'").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&amp;/g,"&"),y=f(g,p);y&&typeof y.then=="function"?console.warn("Async highlighters are not supported in Node.js (non-DOM) context. Use synchronous highlighters for server-side rendering."):y&&typeof y=="string"&&y.trim()&&(u=y)}catch(g){console.warn("Code highlighting failed:",g)}let m=`<div><span class="code-fence">${s}</span></div>`;return m+=`<pre class="code-block"><code${h}>${u}</code></pre>`,m+=`<div><span class="code-fence">${c}</span></div>`,m}),o}static getListContext(e,n){let o=e.split(`
 `),i=0,r=0,s=0;for(let h=0;h<o.length;h++){let u=o[h].length;if(i+u>=n){r=h,s=i;break}i+=u+1}let a=o[r],c=s+a.length,d=a.match(this.LIST_PATTERNS.checkbox);if(d)return{inList:!0,listType:"checkbox",indent:d[1],marker:"-",checked:d[2]==="x",content:d[3],lineStart:s,lineEnd:c,markerEndPos:s+d[1].length+d[2].length+5};let l=a.match(this.LIST_PATTERNS.bullet);if(l)return{inList:!0,listType:"bullet",indent:l[1],marker:l[2],content:l[3],lineStart:s,lineEnd:c,markerEndPos:s+l[1].length+l[2].length+1};let p=a.match(this.LIST_PATTERNS.numbered);return p?{inList:!0,listType:"numbered",indent:p[1],marker:parseInt(p[2]),content:p[3],lineStart:s,lineEnd:c,markerEndPos:s+p[1].length+p[2].length+2}:{inList:!1,listType:null,indent:"",marker:null,content:a,lineStart:s,lineEnd:c,markerEndPos:s}}static createNewListItem(e){switch(e.listType){case"bullet":return`${e.indent}${e.marker} `;case"numbered":return`${e.indent}${e.marker+1}. `;case"checkbox":return`${e.indent}- [ ] `;default:return""}}static renumberLists(e){let n=e.split(`
 `),o=new Map,i=!1;return n.map(s=>{let a=s.match(this.LIST_PATTERNS.numbered);if(a){let c=a[1],d=c.length,l=a[3];i||o.clear();let p=(o.get(d)||0)+1;o.set(d,p);for(let[h]of o)h>d&&o.delete(h);return i=!0,`${c}${p}. ${l}`}else return(s.trim()===""||!s.match(/^\s/))&&(i=!1,o.clear()),s}).join(`
-`)}};C(T,"linkIndex",0),C(T,"codeHighlighter",null),C(T,"customSyntax",null),C(T,"LIST_PATTERNS",{bullet:/^(\s*)([-*+])\s+(.*)$/,numbered:/^(\s*)(\d+)\.\s+(.*)$/,checkbox:/^(\s*)-\s+\[([ x])\]\s+(.*)$/});var re=class{constructor(e){this.editor=e}handleKeydown(e){if(!(navigator.platform.toLowerCase().includes("mac")?e.metaKey:e.ctrlKey))return!1;let i=null;switch(e.key.toLowerCase()){case"b":e.shiftKey||(i="toggleBold");break;case"i":e.shiftKey||(i="toggleItalic");break;case"k":e.shiftKey||(i="insertLink");break;case"7":e.shiftKey&&(i="toggleNumberedList");break;case"8":e.shiftKey&&(i="toggleBulletList");break}return i?(e.preventDefault(),this.editor.performAction(i,e),!0):!1}destroy(){}};var B={name:"solar",colors:{bgPrimary:"#faf0ca",bgSecondary:"#ffffff",text:"#0d3b66",textPrimary:"#0d3b66",textSecondary:"#5a7a9b",h1:"#f95738",h2:"#ee964b",h3:"#3d8a51",strong:"#ee964b",em:"#f95738",del:"#ee964b",link:"#0d3b66",code:"#0d3b66",codeBg:"rgba(244, 211, 94, 0.4)",blockquote:"#5a7a9b",hr:"#5a7a9b",syntaxMarker:"rgba(13, 59, 102, 0.52)",syntax:"#999999",cursor:"#f95738",selection:"rgba(244, 211, 94, 0.4)",listMarker:"#ee964b",rawLine:"#5a7a9b",border:"#e0e0e0",hoverBg:"#f0f0f0",primary:"#0d3b66",toolbarBg:"#ffffff",toolbarIcon:"#0d3b66",toolbarHover:"#f5f5f5",toolbarActive:"#faf0ca",placeholder:"#999999"}},We={name:"cave",colors:{bgPrimary:"#141E26",bgSecondary:"#1D2D3E",text:"#c5dde8",textPrimary:"#c5dde8",textSecondary:"#9fcfec",h1:"#d4a5ff",h2:"#f6ae2d",h3:"#9fcfec",strong:"#f6ae2d",em:"#9fcfec",del:"#f6ae2d",link:"#9fcfec",code:"#c5dde8",codeBg:"#1a232b",blockquote:"#9fcfec",hr:"#c5dde8",syntaxMarker:"rgba(159, 207, 236, 0.73)",syntax:"#7a8c98",cursor:"#f26419",selection:"rgba(51, 101, 138, 0.4)",listMarker:"#f6ae2d",rawLine:"#9fcfec",border:"#2a3f52",hoverBg:"#243546",primary:"#9fcfec",toolbarBg:"#1D2D3E",toolbarIcon:"#c5dde8",toolbarHover:"#243546",toolbarActive:"#2a3f52",placeholder:"#6a7a88"}},qe={solar:B,cave:We,auto:B,light:B,dark:We};function V(t){return typeof t=="string"?{...qe[t]||qe.solar,name:t}:t}function Pe(t){if(t!=="auto")return t;let e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e!=null&&e.matches?"cave":"solar"}function Q(t){let e=[];for(let[n,o]of Object.entries(t)){let i=n.replace(/([A-Z])/g,"-$1").toLowerCase();e.push(`--${i}: ${o};`)}return e.join(`
-`)}function Ke(t,e={}){return{...t,colors:{...t.colors,...e}}}function Ze(t={}){let{fontSize:e="14px",lineHeight:n=1.6,fontFamily:o='"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:i="20px",theme:r=null,mobile:s={}}=t,a=Object.keys(s).length>0?`
+`)}};C(T,"linkIndex",0),C(T,"codeHighlighter",null),C(T,"customSyntax",null),C(T,"LIST_PATTERNS",{bullet:/^(\s*)([-*+])\s+(.*)$/,numbered:/^(\s*)(\d+)\.\s+(.*)$/,checkbox:/^(\s*)-\s+\[([ x])\]\s+(.*)$/});var re=class{constructor(e){this.editor=e}handleKeydown(e){if(!(navigator.platform.toLowerCase().includes("mac")?e.metaKey:e.ctrlKey))return!1;let i=null;switch(e.key.toLowerCase()){case"b":e.shiftKey||(i="toggleBold");break;case"i":e.shiftKey||(i="toggleItalic");break;case"k":e.shiftKey||(i="insertLink");break;case"7":e.shiftKey&&(i="toggleNumberedList");break;case"8":e.shiftKey&&(i="toggleBulletList");break}return i?(e.preventDefault(),this.editor.performAction(i,e),!0):!1}destroy(){}};var B={name:"solar",colors:{bgPrimary:"#faf0ca",bgSecondary:"#ffffff",text:"#0d3b66",textPrimary:"#0d3b66",textSecondary:"#5a7a9b",h1:"#f95738",h2:"#ee964b",h3:"#3d8a51",strong:"#ee964b",em:"#f95738",del:"#ee964b",link:"#0d3b66",code:"#0d3b66",codeBg:"rgba(244, 211, 94, 0.4)",blockquote:"#5a7a9b",hr:"#5a7a9b",syntaxMarker:"rgba(13, 59, 102, 0.52)",syntax:"#999999",cursor:"#f95738",selection:"rgba(244, 211, 94, 0.4)",listMarker:"#ee964b",rawLine:"#5a7a9b",border:"#e0e0e0",hoverBg:"#f0f0f0",primary:"#0d3b66",toolbarBg:"#ffffff",toolbarIcon:"#0d3b66",toolbarHover:"#f5f5f5",toolbarActive:"#faf0ca",placeholder:"#999999"},previewColors:{text:"#1a1a1a",h1:"#1a1a1a",h2:"#2a2a2a",h3:"#3a3a3a",strong:"inherit",em:"inherit",link:"#0066cc",code:"#1a1a1a",codeBg:"rgba(135, 131, 120, 0.15)",blockquote:"#555",hr:"#ddd",bg:"transparent"}},We={name:"cave",colors:{bgPrimary:"#141E26",bgSecondary:"#1D2D3E",text:"#c5dde8",textPrimary:"#c5dde8",textSecondary:"#9fcfec",h1:"#d4a5ff",h2:"#f6ae2d",h3:"#9fcfec",strong:"#f6ae2d",em:"#9fcfec",del:"#f6ae2d",link:"#9fcfec",code:"#c5dde8",codeBg:"#1a232b",blockquote:"#9fcfec",hr:"#c5dde8",syntaxMarker:"rgba(159, 207, 236, 0.73)",syntax:"#7a8c98",cursor:"#f26419",selection:"rgba(51, 101, 138, 0.4)",listMarker:"#f6ae2d",rawLine:"#9fcfec",border:"#2a3f52",hoverBg:"#243546",primary:"#9fcfec",toolbarBg:"#1D2D3E",toolbarIcon:"#c5dde8",toolbarHover:"#243546",toolbarActive:"#2a3f52",placeholder:"#6a7a88"},previewColors:{text:"#c5dde8",h1:"#e0e0e0",h2:"#d0d0d0",h3:"#c0c0c0",strong:"inherit",em:"inherit",link:"#6cb6e0",code:"#c5dde8",codeBg:"rgba(255, 255, 255, 0.08)",blockquote:"#9aa8b4",hr:"rgba(255, 255, 255, 0.15)",bg:"transparent"}},qe={solar:B,cave:We,auto:B,light:B,dark:We};function V(t){return typeof t=="string"?{...qe[t]||qe.solar,name:t}:t}function Pe(t){if(t!=="auto")return t;let e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e!=null&&e.matches?"cave":"solar"}function Q(t,e){let n=[];for(let[o,i]of Object.entries(t)){let r=o.replace(/([A-Z])/g,"-$1").toLowerCase();n.push(`--${r}: ${i};`)}if(e)for(let[o,i]of Object.entries(e)){let r=o.replace(/([A-Z])/g,"-$1").toLowerCase();n.push(`--preview-${r}: ${i};`)}return n.join(`
+`)}function Ke(t,e={},n={}){return{...t,colors:{...t.colors,...e},previewColors:{...t.previewColors,...n}}}function Ze(t={}){let{fontSize:e="14px",lineHeight:n=1.6,fontFamily:o='"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:i="20px",theme:r=null,mobile:s={}}=t,a=Object.keys(s).length>0?`
     @media (max-width: 640px) {
       .overtype-wrapper .overtype-input,
       .overtype-wrapper .overtype-preview {
@@ -21,7 +21,7 @@ var OverType=(()=>{var ve=Object.defineProperty;var cn=Object.getOwnPropertyDesc
         `)}
       }
     }
-  `:"",c=r&&r.colors?Q(r.colors):"";return`
+  `:"",c=r&&r.colors?Q(r.colors,r.previewColors):"";return`
     /* OverType Editor Styles */
     
     /* Middle-ground CSS Reset - Prevent parent styles from leaking in */
@@ -692,27 +692,29 @@ var OverType=(()=>{var ve=Object.defineProperty;var cn=Object.getOwnPropertyDesc
     }
 
     /* Headers - restore proper sizing in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1, 
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2, 
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1,
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2,
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
       font-weight: 600 !important;
       margin: 0 !important;
       display: block !important;
-      color: inherit !important; /* Use parent text color */
-      line-height: 1 !important; /* Tight line height for headings */
+      line-height: 1 !important;
     }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 { 
-      font-size: 2em !important; 
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 {
+      font-size: 2em !important;
+      color: var(--preview-h1, #222) !important;
     }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2 { 
-      font-size: 1.5em !important; 
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2 {
+      font-size: 1.5em !important;
+      color: var(--preview-h2, #333) !important;
     }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 { 
-      font-size: 1.17em !important; 
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
+      font-size: 1.17em !important;
+      color: var(--preview-h3, #444) !important;
     }
 
     /* Lists - restore list styling in preview mode */
@@ -762,14 +764,14 @@ var OverType=(()=>{var ve=Object.defineProperty;var cn=Object.getOwnPropertyDesc
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview a {
       pointer-events: auto !important;
       cursor: pointer !important;
-      color: var(--link, #0066cc) !important;
+      color: var(--preview-link, #0066cc) !important;
       text-decoration: underline !important;
     }
 
     /* Code blocks - proper pre/code styling in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block {
-      background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
-      color: var(--code, #0d3b66) !important;
+      background: var(--preview-code-bg, rgba(135, 131, 120, 0.15)) !important;
+      color: var(--preview-code, #333) !important;
       padding: 1.2em !important;
       border-radius: 3px !important;
       overflow-x: auto !important;
@@ -798,7 +800,8 @@ var OverType=(()=>{var ve=Object.defineProperty;var cn=Object.getOwnPropertyDesc
     /* Blockquotes - enhanced styling in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .blockquote {
       display: block !important;
-      border-left: 4px solid var(--blockquote, #ddd) !important;
+      border-left: 4px solid var(--preview-blockquote, #666) !important;
+      color: var(--preview-blockquote, #666) !important;
       padding-left: 1em !important;
       margin: 1em 0 !important;
       font-style: italic !important;
@@ -809,14 +812,16 @@ var OverType=(()=>{var ve=Object.defineProperty;var cn=Object.getOwnPropertyDesc
       font-family: Georgia, 'Times New Roman', serif !important;
       font-size: 16px !important;
       line-height: 1.8 !important;
-      color: var(--text, #333) !important; /* Consistent text color */
+      color: var(--preview-text, #333) !important;
+      background: var(--preview-bg, transparent) !important;
     }
 
     /* Inline code in preview mode - keep monospace */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview code {
       font-family: ${o} !important;
       font-size: 0.9em !important;
-      background: rgba(135, 131, 120, 0.15) !important;
+      background: var(--preview-code-bg, rgba(135, 131, 120, 0.15)) !important;
+      color: var(--preview-code, #333) !important;
       padding: 0.2em 0.4em !important;
       border-radius: 3px !important;
     }
@@ -824,18 +829,18 @@ var OverType=(()=>{var ve=Object.defineProperty;var cn=Object.getOwnPropertyDesc
     /* Strong and em elements in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview strong {
       font-weight: 700 !important;
-      color: inherit !important; /* Use parent text color */
+      color: var(--preview-strong, inherit) !important;
     }
 
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview em {
       font-style: italic !important;
-      color: inherit !important; /* Use parent text color */
+      color: var(--preview-em, inherit) !important;
     }
 
     /* HR in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .hr-marker {
       display: block !important;
-      border-top: 2px solid var(--hr, #ddd) !important;
+      border-top: 2px solid var(--preview-hr, #ddd) !important;
       text-indent: -9999px !important;
       height: 2px !important;
     }
@@ -961,7 +966,7 @@ ${a}`:r;if(d){let k=t.value[t.selectionStart-1];t.selectionStart!==0&&k!=null&&!
 `+n),this.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}splitListItem(e,n){let o=e.content.substring(n-e.markerEndPos);this.textarea.setSelectionRange(n,e.lineEnd),document.execCommand("delete");let i=T.createNewListItem(e);document.execCommand("insertText",!1,`
 `+i+o);let r=this.textarea.selectionStart-o.length;this.textarea.setSelectionRange(r,r),this.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}scheduleNumberedListUpdate(){this.numberUpdateTimeout&&clearTimeout(this.numberUpdateTimeout),this.numberUpdateTimeout=setTimeout(()=>{this.updateNumberedLists()},10)}updateNumberedLists(){let e=this.textarea.value,n=this.textarea.selectionStart,o=T.renumberLists(e);if(o!==e){let i=0,r=e.split(`
 `),s=o.split(`
-`),a=0;for(let d=0;d<r.length&&a<n;d++){if(r[d]!==s[d]){let l=s[d].length-r[d].length;a+r[d].length<n&&(i+=l)}a+=r[d].length+1}this.textarea.value=o;let c=n+i;this.textarea.setSelectionRange(c,c),this.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}}handleScroll(e){this.preview.scrollTop=this.textarea.scrollTop,this.preview.scrollLeft=this.textarea.scrollLeft}getValue(){return this.textarea.value}setValue(e){this.textarea.value=e,this.updatePreview(),this.options.autoResize&&this._updateAutoHeight()}async performAction(e,n=null){var r;let o=this.textarea;if(!o)return!1;let i=(r=this.actionsById)==null?void 0:r[e];if(!i)return console.warn(`OverType: Unknown action "${e}"`),!1;o.focus();try{return await i({editor:this,getValue:()=>this.getValue(),setValue:s=>this.setValue(s),event:n}),!0}catch(s){return console.error(`OverType: Action "${e}" error:`,s),this.wrapper.dispatchEvent(new CustomEvent("button-error",{detail:{actionId:e,error:s}})),!1}}getRenderedHTML(e={}){let n=this.getValue(),o=T.parse(n,-1,!1,this.options.codeHighlighter);return e.cleanHTML&&(o=o.replace(/<span class="syntax-marker[^"]*">.*?<\/span>/g,""),o=o.replace(/\sclass="(bullet-list|ordered-list|code-fence|hr-marker|blockquote|url-part)"/g,""),o=o.replace(/\sclass=""/g,"")),o}getPreviewHTML(){return this.preview.innerHTML}getCleanHTML(){return this.getRenderedHTML({cleanHTML:!0})}focus(){this.textarea.focus()}blur(){this.textarea.blur()}isInitialized(){return this.initialized}reinit(e={}){var i;let n=(i=this.options)==null?void 0:i.toolbarButtons;this.options=this._mergeOptions({...this.options,...e});let o=this.toolbar&&this.options.toolbar&&ro(n,this.options.toolbarButtons);this._rebuildActionsMap(),o&&(this._cleanupToolbarListeners(),this.toolbar.destroy(),this.toolbar=null,this._createToolbar()),this.fileUploadInitialized&&this._destroyFileUpload(),this.options.fileUpload&&this._initFileUpload(),this._applyOptions(),this.updatePreview()}showToolbar(){this.toolbar?this.toolbar.show():this._createToolbar()}hideToolbar(){this.toolbar&&this.toolbar.hide()}setTheme(e){if(v._autoInstances.delete(this),this.instanceTheme=e,e==="auto")v._autoInstances.add(this),v._startAutoListener(),this._applyResolvedTheme(Pe("auto"));else{let n=typeof e=="string"?V(e):e,o=typeof n=="string"?n:n.name;if(o&&this.container.setAttribute("data-theme",o),n&&n.colors){let i=Q(n.colors);this.container.style.cssText+=i}this.updatePreview()}return v._stopAutoListener(),this}_applyResolvedTheme(e){let n=V(e);this.container.setAttribute("data-theme",e),n&&n.colors&&(this.container.style.cssText=Q(n.colors)),this.updatePreview()}setCodeHighlighter(e){this.options.codeHighlighter=e,this.updatePreview()}_updateStats(){if(!this.statsBar)return;let e=this.textarea.value,n=e.split(`
+`),a=0;for(let d=0;d<r.length&&a<n;d++){if(r[d]!==s[d]){let l=s[d].length-r[d].length;a+r[d].length<n&&(i+=l)}a+=r[d].length+1}this.textarea.value=o;let c=n+i;this.textarea.setSelectionRange(c,c),this.textarea.dispatchEvent(new Event("input",{bubbles:!0}))}}handleScroll(e){this.preview.scrollTop=this.textarea.scrollTop,this.preview.scrollLeft=this.textarea.scrollLeft}getValue(){return this.textarea.value}setValue(e){this.textarea.value=e,this.updatePreview(),this.options.autoResize&&this._updateAutoHeight()}async performAction(e,n=null){var r;let o=this.textarea;if(!o)return!1;let i=(r=this.actionsById)==null?void 0:r[e];if(!i)return console.warn(`OverType: Unknown action "${e}"`),!1;o.focus();try{return await i({editor:this,getValue:()=>this.getValue(),setValue:s=>this.setValue(s),event:n}),!0}catch(s){return console.error(`OverType: Action "${e}" error:`,s),this.wrapper.dispatchEvent(new CustomEvent("button-error",{detail:{actionId:e,error:s}})),!1}}getRenderedHTML(e={}){let n=this.getValue(),o=T.parse(n,-1,!1,this.options.codeHighlighter);return e.cleanHTML&&(o=o.replace(/<span class="syntax-marker[^"]*">.*?<\/span>/g,""),o=o.replace(/\sclass="(bullet-list|ordered-list|code-fence|hr-marker|blockquote|url-part)"/g,""),o=o.replace(/\sclass=""/g,"")),o}getPreviewHTML(){return this.preview.innerHTML}getCleanHTML(){return this.getRenderedHTML({cleanHTML:!0})}focus(){this.textarea.focus()}blur(){this.textarea.blur()}isInitialized(){return this.initialized}reinit(e={}){var i;let n=(i=this.options)==null?void 0:i.toolbarButtons;this.options=this._mergeOptions({...this.options,...e});let o=this.toolbar&&this.options.toolbar&&ro(n,this.options.toolbarButtons);this._rebuildActionsMap(),o&&(this._cleanupToolbarListeners(),this.toolbar.destroy(),this.toolbar=null,this._createToolbar()),this.fileUploadInitialized&&this._destroyFileUpload(),this.options.fileUpload&&this._initFileUpload(),this._applyOptions(),this.updatePreview()}showToolbar(){this.toolbar?this.toolbar.show():this._createToolbar()}hideToolbar(){this.toolbar&&this.toolbar.hide()}setTheme(e){if(v._autoInstances.delete(this),this.instanceTheme=e,e==="auto")v._autoInstances.add(this),v._startAutoListener(),this._applyResolvedTheme(Pe("auto"));else{let n=typeof e=="string"?V(e):e,o=typeof n=="string"?n:n.name;if(o&&this.container.setAttribute("data-theme",o),n&&n.colors){let i=Q(n.colors,n.previewColors);this.container.style.cssText+=i}this.updatePreview()}return v._stopAutoListener(),this}_applyResolvedTheme(e){let n=V(e);this.container.setAttribute("data-theme",e),n&&n.colors&&(this.container.style.cssText=Q(n.colors,n.previewColors)),this.updatePreview()}setCodeHighlighter(e){this.options.codeHighlighter=e,this.updatePreview()}_updateStats(){if(!this.statsBar)return;let e=this.textarea.value,n=e.split(`
 `),o=e.length,i=e.split(/\s+/).filter(l=>l.length>0).length,r=this.textarea.selectionStart,a=e.substring(0,r).split(`
 `),c=a.length,d=a[a.length-1].length+1;this.options.statsFormatter?this.statsBar.innerHTML=this.options.statsFormatter({chars:o,words:i,lines:n.length,line:c,column:d}):this.statsBar.innerHTML=`
           <div class="overtype-stat">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overtype",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "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.d.ts

@@ -3,6 +3,21 @@
 // Definitions generated from themes.js and styles.js
 // DO NOT EDIT MANUALLY - Run 'npm run generate:types' to regenerate
 
+export interface PreviewColors {
+    bg?: string;
+    blockquote?: string;
+    code?: string;
+    codeBg?: string;
+    em?: string;
+    h1?: string;
+    h2?: string;
+    h3?: string;
+    hr?: string;
+    link?: string;
+    strong?: string;
+    text?: string;
+}
+
 export interface Theme {
   name: string;
   colors: {
@@ -38,6 +53,7 @@ export interface Theme {
     toolbarHover?: string;
     toolbarIcon?: string;
   };
+  previewColors?: PreviewColors;
 }
 
 export interface Stats {
@@ -110,6 +126,7 @@ export interface Options {
   // Theme (deprecated in favor of global theme)
   theme?: string | Theme;
   colors?: Partial<Theme['colors']>;
+  previewColors?: PreviewColors;
 
   // File upload
   fileUpload?: {

package/src/overtype.js

@@ -1223,7 +1223,7 @@ class OverType {
         }
 
         if (themeObj && themeObj.colors) {
-          const cssVars = themeToCSSVars(themeObj.colors);
+          const cssVars = themeToCSSVars(themeObj.colors, themeObj.previewColors);
           this.container.style.cssText += cssVars;
         }
 
@@ -1239,7 +1239,7 @@ class OverType {
       this.container.setAttribute('data-theme', themeName);
 
       if (themeObj && themeObj.colors) {
-        this.container.style.cssText = themeToCSSVars(themeObj.colors);
+        this.container.style.cssText = themeToCSSVars(themeObj.colors, themeObj.previewColors);
       }
 
       this.updatePreview();

package/src/styles.js

@@ -37,7 +37,7 @@ export function generateStyles(options = {}) {
   ` : '';
 
   // Generate theme variables if provided
-  const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors) : '';
+  const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors, theme.previewColors) : '';
 
   return `
     /* OverType Editor Styles */
@@ -710,27 +710,29 @@ export function generateStyles(options = {}) {
     }
 
     /* Headers - restore proper sizing in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1, 
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2, 
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1,
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2,
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
       font-weight: 600 !important;
       margin: 0 !important;
       display: block !important;
-      color: inherit !important; /* Use parent text color */
-      line-height: 1 !important; /* Tight line height for headings */
+      line-height: 1 !important;
     }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 { 
-      font-size: 2em !important; 
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 {
+      font-size: 2em !important;
+      color: var(--preview-h1, #222) !important;
     }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2 { 
-      font-size: 1.5em !important; 
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2 {
+      font-size: 1.5em !important;
+      color: var(--preview-h2, #333) !important;
     }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 { 
-      font-size: 1.17em !important; 
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
+      font-size: 1.17em !important;
+      color: var(--preview-h3, #444) !important;
     }
 
     /* Lists - restore list styling in preview mode */
@@ -780,14 +782,14 @@ export function generateStyles(options = {}) {
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview a {
       pointer-events: auto !important;
       cursor: pointer !important;
-      color: var(--link, #0066cc) !important;
+      color: var(--preview-link, #0066cc) !important;
       text-decoration: underline !important;
     }
 
     /* Code blocks - proper pre/code styling in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block {
-      background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
-      color: var(--code, #0d3b66) !important;
+      background: var(--preview-code-bg, rgba(135, 131, 120, 0.15)) !important;
+      color: var(--preview-code, #333) !important;
       padding: 1.2em !important;
       border-radius: 3px !important;
       overflow-x: auto !important;
@@ -816,7 +818,8 @@ export function generateStyles(options = {}) {
     /* Blockquotes - enhanced styling in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .blockquote {
       display: block !important;
-      border-left: 4px solid var(--blockquote, #ddd) !important;
+      border-left: 4px solid var(--preview-blockquote, #666) !important;
+      color: var(--preview-blockquote, #666) !important;
       padding-left: 1em !important;
       margin: 1em 0 !important;
       font-style: italic !important;
@@ -827,14 +830,16 @@ export function generateStyles(options = {}) {
       font-family: Georgia, 'Times New Roman', serif !important;
       font-size: 16px !important;
       line-height: 1.8 !important;
-      color: var(--text, #333) !important; /* Consistent text color */
+      color: var(--preview-text, #333) !important;
+      background: var(--preview-bg, transparent) !important;
     }
 
     /* Inline code in preview mode - keep monospace */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview code {
       font-family: ${fontFamily} !important;
       font-size: 0.9em !important;
-      background: rgba(135, 131, 120, 0.15) !important;
+      background: var(--preview-code-bg, rgba(135, 131, 120, 0.15)) !important;
+      color: var(--preview-code, #333) !important;
       padding: 0.2em 0.4em !important;
       border-radius: 3px !important;
     }
@@ -842,18 +847,18 @@ export function generateStyles(options = {}) {
     /* Strong and em elements in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview strong {
       font-weight: 700 !important;
-      color: inherit !important; /* Use parent text color */
+      color: var(--preview-strong, inherit) !important;
     }
 
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview em {
       font-style: italic !important;
-      color: inherit !important; /* Use parent text color */
+      color: var(--preview-em, inherit) !important;
     }
 
     /* HR in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .hr-marker {
       display: block !important;
-      border-top: 2px solid var(--hr, #ddd) !important;
+      border-top: 2px solid var(--preview-hr, #ddd) !important;
       text-indent: -9999px !important;
       height: 2px !important;
     }

package/src/themes.js

@@ -40,6 +40,20 @@ export const solar = {
     toolbarHover: '#f5f5f5',     // Light gray - hover background
     toolbarActive: '#faf0ca',    // Lemon Chiffon - active button background
     placeholder: '#999999',      // Gray - placeholder text
+  },
+  previewColors: {
+    text: '#1a1a1a',
+    h1: '#1a1a1a',
+    h2: '#2a2a2a',
+    h3: '#3a3a3a',
+    strong: 'inherit',
+    em: 'inherit',
+    link: '#0066cc',
+    code: '#1a1a1a',
+    codeBg: 'rgba(135, 131, 120, 0.15)',
+    blockquote: '#555',
+    hr: '#ddd',
+    bg: 'transparent',
   }
 };
 
@@ -80,6 +94,20 @@ export const cave = {
     toolbarHover: '#243546',     // Slightly lighter charcoal - hover background
     toolbarActive: '#2a3f52',    // Even lighter - active button background
     placeholder: '#6a7a88',      // Muted blue-gray - placeholder text
+  },
+  previewColors: {
+    text: '#c5dde8',
+    h1: '#e0e0e0',
+    h2: '#d0d0d0',
+    h3: '#c0c0c0',
+    strong: 'inherit',
+    em: 'inherit',
+    link: '#6cb6e0',
+    code: '#c5dde8',
+    codeBg: 'rgba(255, 255, 255, 0.08)',
+    blockquote: '#9aa8b4',
+    hr: 'rgba(255, 255, 255, 0.15)',
+    bg: 'transparent',
   }
 };
 
@@ -125,13 +153,18 @@ export function resolveAutoTheme(themeName) {
  * @param {Object} colors - Theme colors object
  * @returns {string} CSS custom properties string
  */
-export function themeToCSSVars(colors) {
+export function themeToCSSVars(colors, previewColors) {
   const vars = [];
   for (const [key, value] of Object.entries(colors)) {
-    // Convert camelCase to kebab-case
     const varName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
     vars.push(`--${varName}: ${value};`);
   }
+  if (previewColors) {
+    for (const [key, value] of Object.entries(previewColors)) {
+      const varName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      vars.push(`--preview-${varName}: ${value};`);
+    }
+  }
   return vars.join('\n');
 }
 
@@ -141,12 +174,16 @@ export function themeToCSSVars(colors) {
  * @param {Object} customColors - Custom color overrides
  * @returns {Object} Merged theme object
  */
-export function mergeTheme(baseTheme, customColors = {}) {
+export function mergeTheme(baseTheme, customColors = {}, customPreviewColors = {}) {
   return {
     ...baseTheme,
     colors: {
       ...baseTheme.colors,
       ...customColors
+    },
+    previewColors: {
+      ...baseTheme.previewColors,
+      ...customPreviewColors
     }
   };
 }