overtype 2.2.0 → 2.3.0

package/dist/overtype.cjs

@@ -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
@@ -882,6 +882,20 @@ var solar = {
     // 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"
   }
 };
 var cave = {
@@ -948,6 +962,20 @@ var cave = {
     // 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"
   }
 };
 var themes = {
@@ -971,20 +999,30 @@ function resolveAutoTheme(themeName) {
   const mq = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
   return (mq == null ? void 0 : mq.matches) ? "cave" : "solar";
 }
-function themeToCSSVars(colors) {
+function themeToCSSVars(colors, previewColors) {
   const vars = [];
   for (const [key, value] of Object.entries(colors)) {
     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");
 }
-function mergeTheme(baseTheme, customColors = {}) {
+function mergeTheme(baseTheme, customColors = {}, customPreviewColors = {}) {
   return {
     ...baseTheme,
     colors: {
       ...baseTheme.colors,
       ...customColors
+    },
+    previewColors: {
+      ...baseTheme.previewColors,
+      ...customPreviewColors
     }
   };
 }
@@ -1011,7 +1049,7 @@ function generateStyles(options = {}) {
       }
     }
   ` : "";
-  const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors) : "";
+  const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors, theme.previewColors) : "";
   return `
     /* OverType Editor Styles */
     
@@ -1683,27 +1721,29 @@ 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 */
@@ -1753,14 +1793,14 @@ 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;
@@ -1789,7 +1829,8 @@ 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;
@@ -1800,14 +1841,16 @@ 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;
     }
@@ -1815,18 +1858,18 @@ 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;
     }
@@ -5488,7 +5531,7 @@ var _OverType = class _OverType {
         this.container.setAttribute("data-theme", themeName);
       }
       if (themeObj && themeObj.colors) {
-        const cssVars = themeToCSSVars(themeObj.colors);
+        const cssVars = themeToCSSVars(themeObj.colors, themeObj.previewColors);
         this.container.style.cssText += cssVars;
       }
       this.updatePreview();
@@ -5500,7 +5543,7 @@ var _OverType = class _OverType {
     const themeObj = getTheme(themeName);
     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();
   }