overtype 2.2.0 → 2.3.0

package/README.md

@@ -776,20 +776,30 @@ Special thanks to:
 - [Lyric Wai](https://github.com/lyricat) - Fixed double-escaping of links ([#64](https://github.com/panphora/overtype/pull/64)), shared code block alignment fix ([#65](https://github.com/panphora/overtype/issues/65))
 - [kozi](https://github.com/kozi) - Reported Firefox link tooltip bug ([#68](https://github.com/panphora/overtype/issues/68)), toolbar positioning ([#69](https://github.com/panphora/overtype/issues/69)), theme CSS variable issues ([#70](https://github.com/panphora/overtype/issues/70), [#71](https://github.com/panphora/overtype/issues/71))
 - [1951FDG](https://github.com/1951FDG) - Reported unordered list rendering bug ([#74](https://github.com/panphora/overtype/issues/74)), suggested showStats() API improvement ([#77](https://github.com/panphora/overtype/issues/77))
-- [nodesocket](https://github.com/nodesocket) - Reported toolbarButtons export issues ([#73](https://github.com/panphora/overtype/issues/73), [#78](https://github.com/panphora/overtype/issues/78))
+- [nodesocket](https://github.com/nodesocket) - Reported toolbarButtons export issues ([#73](https://github.com/panphora/overtype/issues/73), [#78](https://github.com/panphora/overtype/issues/78)), suggested image toolbar button ([#89](https://github.com/panphora/overtype/issues/89))
 - [Travis Bell](https://github.com/travisbell) - Reported keyboard shortcuts bug in ESM build ([#80](https://github.com/panphora/overtype/issues/80))
+- [fab2713](https://github.com/fab2713) - Reported italic rendering in lists ([#81](https://github.com/panphora/overtype/issues/81)), reinit maxHeight ([#82](https://github.com/panphora/overtype/issues/82)), placeholder visibility ([#83](https://github.com/panphora/overtype/issues/83)), suggested auto theme ([#84](https://github.com/panphora/overtype/issues/84)), relative URL prefix ([#85](https://github.com/panphora/overtype/issues/85)), minification improvements ([#94](https://github.com/panphora/overtype/issues/94))
+- [oooo-ps](https://github.com/oooo-ps) - Reported remote script loading issue ([#86](https://github.com/panphora/overtype/issues/86))
+- [ddarfantasy](https://github.com/ddarfantasy) - Reported text misalignment on longer lines ([#91](https://github.com/panphora/overtype/issues/91))
+- [milen-yordanov](https://github.com/milen-yordanov) - Reported code block colors ignoring theme in preview mode ([#97](https://github.com/panphora/overtype/issues/97))
+- [asalimian](https://github.com/asalimian) - Reported spellcheck being disabled ([#98](https://github.com/panphora/overtype/issues/98))
 
 ### TypeScript & Framework Support
 - [merlinz01](https://github.com/merlinz01) - Contributed TypeScript declaration file ([#20](https://github.com/panphora/overtype/pull/20))
 - [ChasLui](https://github.com/ChasLui) - Web component implementation ([#40](https://github.com/panphora/overtype/pull/40))
+- [pscanf](https://github.com/pscanf) - Added performAction type definition ([#99](https://github.com/panphora/overtype/pull/99))
 
 ### New Features & Enhancements
 - [davidlazar](https://github.com/davidlazar) - Suggested view mode feature ([#24](https://github.com/panphora/overtype/issues/24))
 - [Yukai Huang](https://github.com/Yukaii) - Contributed syntax highlighting implementation ([#35](https://github.com/panphora/overtype/pull/35))
 - [Rognoni](https://github.com/rognoni) - Suggested custom toolbar button API ([#61](https://github.com/panphora/overtype/issues/61))
-- [Deyan Gigov](https://github.com/dido739) - Reported checkbox rendering bug in preview mode ([#60](https://github.com/panphora/overtype/issues/60))
-- [GregJohnStewart](https://github.com/GregJohnStewart) - Suggested data attribute configuration ([#76](https://github.com/panphora/overtype/issues/76))
+- [Deyan Gigov](https://github.com/dido739) - Reported checkbox rendering bug in preview mode ([#60](https://github.com/panphora/overtype/issues/60)), contributed auto theme implementation ([#100](https://github.com/panphora/overtype/pull/100))
+- [GregJohnStewart](https://github.com/GregJohnStewart) - Suggested data attribute configuration ([#76](https://github.com/panphora/overtype/issues/76)), reported initFromData array nesting bug ([#93](https://github.com/panphora/overtype/issues/93)), suggested DOM element init ([#92](https://github.com/panphora/overtype/issues/92))
 - [boris-glumpler](https://github.com/boris-glumpler) - Suggested custom syntax highlighting API ([#79](https://github.com/panphora/overtype/issues/79))
+- [sorokya](https://github.com/sorokya) - Contributed file upload support ([#87](https://github.com/panphora/overtype/pull/87))
+- [aaronmyatt](https://github.com/aaronmyatt) - Contributed show/hide toolbar methods ([#95](https://github.com/panphora/overtype/pull/95))
+- [rouilj](https://github.com/rouilj) - Suggested progressive textarea enhancement ([#90](https://github.com/panphora/overtype/issues/90))
+- [inklesspen](https://github.com/inklesspen) - Suggested autocompletion popups ([#96](https://github.com/panphora/overtype/issues/96))
 
 ### Developer Experience
 - [Ned Twigg](https://github.com/nedtwigg) - Built gitcasso browser extension using OverType ([#59](https://github.com/panphora/overtype/issues/59))

package/dist/overtype-webcomponent.esm.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
@@ -856,6 +856,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 = {
@@ -922,6 +936,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 = {
@@ -945,20 +973,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
     }
   };
 }
@@ -985,7 +1023,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 */
     
@@ -1657,27 +1695,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 */
@@ -1727,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(--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;
@@ -1763,7 +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(--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;
@@ -1774,14 +1815,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;
     }
@@ -1789,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: 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;
     }
@@ -5462,7 +5505,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();
@@ -5474,7 +5517,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();
   }