overtype 2.2.0 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overtype",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "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, var(--preview-h1-default)) !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, var(--preview-h2-default)) !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, var(--preview-h3-default)) !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, var(--preview-link-default)) !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, var(--preview-code-bg-default)) !important;
+      color: var(--preview-code, var(--preview-code-default)) !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, var(--preview-blockquote-default)) !important;
+      color: var(--preview-blockquote, var(--preview-blockquote-default)) !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, var(--preview-text-default)) !important;
+      background: var(--preview-bg, var(--preview-bg-default)) !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, var(--preview-code-bg-default)) !important;
+      color: var(--preview-code, var(--preview-code-default)) !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, var(--preview-strong-default)) !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, var(--preview-em-default)) !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, var(--preview-hr-default)) !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: '#0d3b66',
+    h1: 'inherit',
+    h2: 'inherit',
+    h3: 'inherit',
+    strong: 'inherit',
+    em: 'inherit',
+    link: '#0d3b66',
+    code: '#0d3b66',
+    codeBg: 'rgba(244, 211, 94, 0.4)',
+    blockquote: '#5a7a9b',
+    hr: '#5a7a9b',
+    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: 'inherit',
+    h2: 'inherit',
+    h3: 'inherit',
+    strong: 'inherit',
+    em: 'inherit',
+    link: '#9fcfec',
+    code: '#c5dde8',
+    codeBg: '#1a232b',
+    blockquote: '#9fcfec',
+    hr: '#c5dde8',
+    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}-default: ${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
     }
   };
 }