overtype 2.0.4 → 2.0.6

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. ~92KB minified with all features.
+A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~93KB 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** - ~92KB minified
+- 🚀 **Lightweight** - ~93KB 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** | ~92KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
+| **Size** | ~93KB | 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 |
@@ -740,7 +740,7 @@ Special thanks to:
 - [kbhomes](https://github.com/kbhomes) - Fixed text selection desynchronization during overscroll ([#17](https://github.com/panphora/overtype/pull/17))
 - [Kristián Kostecký](https://github.com/kristiankostecky) - Fixed toolbar option being ignored in reinit() ([#62](https://github.com/panphora/overtype/pull/62))
 - [Lyric Wai](https://github.com/lyricat) - Fixed double-escaping of links ([#64](https://github.com/panphora/overtype/pull/64)), reported code block alignment issues ([#65](https://github.com/panphora/overtype/issues/65))
-- [kozi](https://github.com/kozi) - Reported link tooltip issues in Firefox ([#68](https://github.com/panphora/overtype/issues/68)) and toolbar positioning ([#69](https://github.com/panphora/overtype/issues/69))
+- [kozi](https://github.com/kozi) - Reported link tooltip issues in Firefox ([#68](https://github.com/panphora/overtype/issues/68)), toolbar positioning ([#69](https://github.com/panphora/overtype/issues/69)), theme synchronization issues ([#70](https://github.com/panphora/overtype/issues/70), [#71](https://github.com/panphora/overtype/issues/71))
 
 ### TypeScript & Framework Support
 - [merlinz01](https://github.com/merlinz01) - Initial TypeScript definitions implementation ([#20](https://github.com/panphora/overtype/pull/20))

package/dist/overtype-webcomponent.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.0.4
+ * OverType v2.0.6
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -91,7 +91,7 @@ var MarkdownParser = class {
    * @returns {string} Parsed bullet list item
    */
   static parseBulletList(html) {
-    return html.replace(/^((?: )*)([-*])\s(.+)$/, (match, indent, marker, content) => {
+    return html.replace(/^((?: )*)([-*+])\s(.+)$/, (match, indent, marker, content) => {
       return `${indent}<li class="bullet-list"><span class="syntax-marker">${marker} </span>${content}</li>`;
     });
   }
@@ -150,7 +150,7 @@ var MarkdownParser = class {
    * @returns {string} HTML with italic styling
    */
   static parseItalic(html) {
-    html = html.replace(new RegExp("(?<!\\*)\\*(?!\\*)(.+?)(?<!\\*)\\*(?!\\*)", "g"), '<em><span class="syntax-marker">*</span>$1<span class="syntax-marker">*</span></em>');
+    html = html.replace(new RegExp("(?<![\\*>])\\*(?!\\*)(.+?)(?<!\\*)\\*(?!\\*)", "g"), '<em><span class="syntax-marker">*</span>$1<span class="syntax-marker">*</span></em>');
     html = html.replace(new RegExp("(?<=^|\\s)_(?!_)(.+?)(?<!_)_(?!_)(?=\\s|$)", "g"), '<em><span class="syntax-marker">_</span>$1<span class="syntax-marker">_</span></em>');
     return html;
   }
@@ -1660,16 +1660,22 @@ var solar = {
     // White - editor background
     text: "#0d3b66",
     // Yale Blue - main text
+    textPrimary: "#0d3b66",
+    // Yale Blue - primary text (same as text)
+    textSecondary: "#5a7a9b",
+    // Muted blue - secondary text
     h1: "#f95738",
     // Tomato - h1 headers
     h2: "#ee964b",
-    // Sandy Brown - h2 headers  
+    // Sandy Brown - h2 headers
     h3: "#3d8a51",
     // Forest green - h3 headers
     strong: "#ee964b",
     // Sandy Brown - bold text
     em: "#f95738",
     // Tomato - italic text
+    del: "#ee964b",
+    // Sandy Brown - deleted text (same as strong)
     link: "#0d3b66",
     // Yale Blue - links
     code: "#0d3b66",
@@ -1682,17 +1688,25 @@ var solar = {
     // Muted blue - horizontal rules
     syntaxMarker: "rgba(13, 59, 102, 0.52)",
     // Yale Blue with transparency
+    syntax: "#999999",
+    // Gray - syntax highlighting fallback
     cursor: "#f95738",
     // Tomato - cursor
     selection: "rgba(244, 211, 94, 0.4)",
     // Naples Yellow with transparency
     listMarker: "#ee964b",
     // Sandy Brown - list markers
+    rawLine: "#5a7a9b",
+    // Muted blue - raw line indicators
+    border: "#e0e0e0",
+    // Light gray - borders
+    hoverBg: "#f0f0f0",
+    // Very light gray - hover backgrounds
+    primary: "#0d3b66",
+    // Yale Blue - primary accent
     // Toolbar colors
     toolbarBg: "#ffffff",
     // White - toolbar background
-    toolbarBorder: "rgba(13, 59, 102, 0.15)",
-    // Yale Blue border
     toolbarIcon: "#0d3b66",
     // Yale Blue - icon color
     toolbarHover: "#f5f5f5",
@@ -1710,6 +1724,10 @@ var cave = {
     // Darker charcoal - editor background
     text: "#c5dde8",
     // Light blue-gray - main text
+    textPrimary: "#c5dde8",
+    // Light blue-gray - primary text (same as text)
+    textSecondary: "#9fcfec",
+    // Brighter blue - secondary text
     h1: "#d4a5ff",
     // Rich lavender - h1 headers
     h2: "#f6ae2d",
@@ -1720,6 +1738,8 @@ var cave = {
     // Hunyadi Yellow - bold text
     em: "#9fcfec",
     // Brighter blue - italic text
+    del: "#f6ae2d",
+    // Hunyadi Yellow - deleted text (same as strong)
     link: "#9fcfec",
     // Brighter blue - links
     code: "#c5dde8",
@@ -1732,17 +1752,25 @@ var cave = {
     // Light blue-gray - horizontal rules
     syntaxMarker: "rgba(159, 207, 236, 0.73)",
     // Brighter blue semi-transparent
+    syntax: "#7a8c98",
+    // Muted gray-blue - syntax highlighting fallback
     cursor: "#f26419",
     // Orange Pantone - cursor
     selection: "rgba(51, 101, 138, 0.4)",
     // Lapis Lazuli with transparency
     listMarker: "#f6ae2d",
     // Hunyadi Yellow - list markers
+    rawLine: "#9fcfec",
+    // Brighter blue - raw line indicators
+    border: "#2a3f52",
+    // Dark blue-gray - borders
+    hoverBg: "#243546",
+    // Slightly lighter charcoal - hover backgrounds
+    primary: "#9fcfec",
+    // Brighter blue - primary accent
     // Toolbar colors for dark theme
     toolbarBg: "#1D2D3E",
     // Darker charcoal - toolbar background
-    toolbarBorder: "rgba(197, 221, 232, 0.1)",
-    // Light blue-gray border
     toolbarIcon: "#c5dde8",
     // Light blue-gray - icon color
     toolbarHover: "#243546",
@@ -2262,6 +2290,7 @@ function generateStyles(options = {}) {
       gap: 4px !important;
       padding: 8px !important; /* Override reset */
       background: var(--toolbar-bg, var(--bg-primary, #f8f9fa)) !important; /* Override reset */
+      border-bottom: 1px solid var(--toolbar-border, transparent) !important; /* Override reset */
       overflow-x: auto !important; /* Allow horizontal scrolling */
       overflow-y: hidden !important; /* Hide vertical overflow */
       -webkit-overflow-scrolling: touch !important;
@@ -2733,6 +2762,28 @@ var Toolbar = class {
     button.addEventListener("click", button._clickHandler);
     return button;
   }
+  /**
+   * Handle button action programmatically (used by keyboard shortcuts)
+   * @param {Object} buttonConfig - Button configuration object with action function
+   */
+  async handleAction(buttonConfig) {
+    this.editor.textarea.focus();
+    try {
+      if (buttonConfig.action) {
+        await buttonConfig.action({
+          editor: this.editor,
+          getValue: () => this.editor.getValue(),
+          setValue: (value) => this.editor.setValue(value),
+          event: null
+        });
+      }
+    } catch (error) {
+      console.error(`Action "${buttonConfig.name}" error:`, error);
+      this.editor.wrapper.dispatchEvent(new CustomEvent("button-error", {
+        detail: { buttonName: buttonConfig.name, error }
+      }));
+    }
+  }
   /**
    * Sanitize SVG to prevent XSS
    */
@@ -3671,10 +3722,13 @@ var _OverType = class _OverType {
    */
   handleKeydown(event) {
     if (event.key === "Tab") {
-      event.preventDefault();
       const start = this.textarea.selectionStart;
       const end = this.textarea.selectionEnd;
       const value = this.textarea.value;
+      if (event.shiftKey && start === end) {
+        return;
+      }
+      event.preventDefault();
       if (start !== end && event.shiftKey) {
         const before = value.substring(0, start);
         const selection = value.substring(start, end);
@@ -4511,6 +4565,9 @@ var OverTypeEditor = class extends HTMLElement {
         break;
       case "theme":
         this._reinjectStyles();
+        if (this._editor && this._editor.setTheme) {
+          this._editor.setTheme(value || "solar");
+        }
         break;
       case "placeholder":
         if (this._editor.textarea) {