overtype 2.3.0 → 2.3.1

package/README.md

@@ -1,6 +1,6 @@
 # OverType
 
-A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~116KB minified with all features.
+A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~117KB minified with all features.
 
 ## Live Examples
 
@@ -19,7 +19,7 @@ A lightweight markdown editor library with perfect WYSIWYG alignment using an in
 - ⌨️ **Keyboard shortcuts** - Common markdown shortcuts (Cmd/Ctrl+B for bold, etc.)
 - 📱 **Mobile optimized** - Responsive design with mobile-specific styles
 - 🔄 **DOM persistence aware** - Recovers from existing DOM (perfect for HyperClay and similar platforms)
-- 🚀 **Lightweight** - ~116KB minified
+- 🚀 **Lightweight** - ~117KB minified
 - 🎯 **Optional toolbar** - Clean, minimal toolbar with all essential formatting
 - ✨ **Smart shortcuts** - Keyboard shortcuts with selection preservation
 - 📝 **Smart list continuation** - GitHub-style automatic list continuation on Enter
@@ -35,7 +35,7 @@ We overlap an invisible textarea on top of styled output, giving the illusion of
 
 | Feature | OverType | HyperMD | Milkdown | TUI Editor | EasyMDE |
 |---------|----------|---------|----------|------------|---------|
-| **Size** | ~116KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
+| **Size** | ~117KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
 | **Dependencies** | Bundled | CodeMirror | ProseMirror + plugins | Multiple libs | CodeMirror |
 | **Setup** | Single file | Complex config | Build step required | Complex config | Moderate |
 | **Approach** | Invisible textarea | ContentEditable | ContentEditable | ContentEditable | CodeMirror |

package/dist/overtype-webcomponent.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.3.0
+ * OverType v2.3.1
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -858,17 +858,17 @@ var solar = {
     // Gray - placeholder text
   },
   previewColors: {
-    text: "#1a1a1a",
-    h1: "#1a1a1a",
-    h2: "#2a2a2a",
-    h3: "#3a3a3a",
+    text: "#0d3b66",
+    h1: "inherit",
+    h2: "inherit",
+    h3: "inherit",
     strong: "inherit",
     em: "inherit",
-    link: "#0066cc",
-    code: "#1a1a1a",
-    codeBg: "rgba(135, 131, 120, 0.15)",
-    blockquote: "#555",
-    hr: "#ddd",
+    link: "#0d3b66",
+    code: "#0d3b66",
+    codeBg: "rgba(244, 211, 94, 0.4)",
+    blockquote: "#5a7a9b",
+    hr: "#5a7a9b",
     bg: "transparent"
   }
 };
@@ -939,16 +939,16 @@ var cave = {
   },
   previewColors: {
     text: "#c5dde8",
-    h1: "#e0e0e0",
-    h2: "#d0d0d0",
-    h3: "#c0c0c0",
+    h1: "inherit",
+    h2: "inherit",
+    h3: "inherit",
     strong: "inherit",
     em: "inherit",
-    link: "#6cb6e0",
+    link: "#9fcfec",
     code: "#c5dde8",
-    codeBg: "rgba(255, 255, 255, 0.08)",
-    blockquote: "#9aa8b4",
-    hr: "rgba(255, 255, 255, 0.15)",
+    codeBg: "#1a232b",
+    blockquote: "#9fcfec",
+    hr: "#c5dde8",
     bg: "transparent"
   }
 };
@@ -982,7 +982,7 @@ function themeToCSSVars(colors, previewColors) {
   if (previewColors) {
     for (const [key, value] of Object.entries(previewColors)) {
       const varName = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-      vars.push(`--preview-${varName}: ${value};`);
+      vars.push(`--preview-${varName}-default: ${value};`);
     }
   }
   return vars.join("\n");
@@ -1707,17 +1707,17 @@ function generateStyles(options = {}) {
 
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 {
       font-size: 2em !important;
-      color: var(--preview-h1, #222) !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;
-      color: var(--preview-h2, #333) !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;
-      color: var(--preview-h3, #444) !important;
+      color: var(--preview-h3, var(--preview-h3-default)) !important;
     }
 
     /* Lists - restore list styling in preview mode */
@@ -1767,14 +1767,14 @@ function generateStyles(options = {}) {
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview a {
       pointer-events: auto !important;
       cursor: pointer !important;
-      color: var(--preview-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(--preview-code-bg, rgba(135, 131, 120, 0.15)) !important;
-      color: var(--preview-code, #333) !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;
@@ -1803,8 +1803,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(--preview-blockquote, #666) !important;
-      color: var(--preview-blockquote, #666) !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;
@@ -1815,16 +1815,16 @@ function generateStyles(options = {}) {
       font-family: Georgia, 'Times New Roman', serif !important;
       font-size: 16px !important;
       line-height: 1.8 !important;
-      color: var(--preview-text, #333) !important;
-      background: var(--preview-bg, transparent) !important;
+      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: var(--preview-code-bg, rgba(135, 131, 120, 0.15)) !important;
-      color: var(--preview-code, #333) !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;
     }
@@ -1832,18 +1832,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: var(--preview-strong, inherit) !important;
+      color: var(--preview-strong, var(--preview-strong-default)) !important;
     }
 
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview em {
       font-style: italic !important;
-      color: var(--preview-em, inherit) !important;
+      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(--preview-hr, #ddd) !important;
+      border-top: 2px solid var(--preview-hr, var(--preview-hr-default)) !important;
       text-indent: -9999px !important;
       height: 2px !important;
     }