overtype 1.2.1 → 1.2.2

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. ~78KB minified with all features.
+A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~79KB minified with all features.
 
 ## Features
 
@@ -9,7 +9,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** - ~78KB minified
+- 🚀 **Lightweight** - ~79KB minified
 - 🎯 **Optional toolbar** - Clean, minimal toolbar with all essential formatting
 - ✨ **Smart shortcuts** - Keyboard shortcuts with selection preservation
 - 🔧 **Framework agnostic** - Works with React, Vue, vanilla JS, and more
@@ -24,7 +24,7 @@ We overlap an invisible textarea on top of styled output, giving the illusion of
 
 | Feature | OverType | HyperMD | Milkdown | TUI Editor | EasyMDE |
 |---------|----------|---------|----------|------------|---------|
-| **Size** | ~78KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
+| **Size** | ~79KB | 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 |
@@ -552,6 +552,26 @@ Special thanks to:
 
 MIT
 
+## Related Projects
+
+### Synesthesia
+
+[Synesthesia](https://github.com/panphora/synesthesia) is a lightweight syntax highlighting editor library that extracted and refined the core textarea overlay technique from OverType. While OverType is focused on markdown editing with toolbar features, Synesthesia provides a more generalized code editing solution with:
+
+- **Pluggable parser system** - Support for any programming language or syntax
+- **Parser registry** - Automatic language detection by file extension or MIME type  
+- **Cleaner separation** - Extracted the overlay technique without markdown-specific features
+- **Smaller footprint** - ~79KB minified (vs OverType's ~78KB)
+
+Key components extracted from OverType to Synesthesia:
+- The transparent textarea overlay technique for perfect WYSIWYG alignment
+- Theme system with CSS variable support
+- DOM persistence and recovery mechanisms  
+- Auto-resize functionality
+- Event delegation for efficient multi-instance support
+
+If you need a markdown editor with toolbar and formatting features, use OverType. If you need a lightweight code editor with custom syntax highlighting, check out Synesthesia.
+
 ## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/overtype.cjs

@@ -1,5 +1,5 @@
 /**
- * OverType v1.2.1
+ * OverType v1.2.2
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author Demo User
@@ -258,11 +258,22 @@ var MarkdownParser = class {
   static parse(text, activeLine = -1, showActiveLineRaw = false) {
     this.resetLinkIndex();
     const lines = text.split("\n");
+    let inCodeBlock = false;
     const parsedLines = lines.map((line, index) => {
       if (showActiveLineRaw && index === activeLine) {
         const content = this.escapeHtml(line) || " ";
         return `<div class="raw-line">${content}</div>`;
       }
+      const codeFenceRegex = /^```[^`]*$/;
+      if (codeFenceRegex.test(line)) {
+        inCodeBlock = !inCodeBlock;
+        return this.parseLine(line);
+      }
+      if (inCodeBlock) {
+        const escaped = this.escapeHtml(line);
+        const indented = this.preserveIndentation(escaped, line);
+        return `<div>${indented || "&nbsp;"}</div>`;
+      }
       return this.parseLine(line);
     });
     const html = parsedLines.join("");
@@ -302,23 +313,22 @@ var MarkdownParser = class {
             if (lang) {
               codeElement.className = `language-${lang}`;
             }
-            container.insertBefore(currentCodeBlock, child);
-            child.remove();
+            container.insertBefore(currentCodeBlock, child.nextSibling);
+            currentCodeBlock._codeElement = codeElement;
             continue;
           } else {
             inCodeBlock = false;
             currentCodeBlock = null;
-            child.remove();
             continue;
           }
         }
       }
       if (inCodeBlock && currentCodeBlock && child.tagName === "DIV" && !child.querySelector(".code-fence")) {
-        const codeElement = currentCodeBlock.querySelector("code");
+        const codeElement = currentCodeBlock._codeElement || currentCodeBlock.querySelector("code");
         if (codeElement.textContent.length > 0) {
           codeElement.textContent += "\n";
         }
-        const lineText = child.innerHTML.replace(/&nbsp;/g, " ").replace(/<[^>]*>/g, "");
+        const lineText = child.textContent.replace(/\u00A0/g, " ");
         codeElement.textContent += lineText;
         child.remove();
         continue;
@@ -371,15 +381,19 @@ var MarkdownParser = class {
       }
       return match;
     });
-    const codeBlockRegex = /<div><span class="code-fence">```([^<]*)<\/span><\/div>(.*?)<div><span class="code-fence">```<\/span><\/div>/gs;
-    processed = processed.replace(codeBlockRegex, (match, lang, content) => {
+    const codeBlockRegex = /<div><span class="code-fence">(```[^<]*)<\/span><\/div>(.*?)<div><span class="code-fence">(```)<\/span><\/div>/gs;
+    processed = processed.replace(codeBlockRegex, (match, openFence, content, closeFence) => {
       const lines = content.match(/<div>(.*?)<\/div>/gs) || [];
       const codeContent = lines.map((line) => {
-        const text = line.replace(/<div>(.*?)<\/div>/s, "$1").replace(/&nbsp;/g, " ").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&");
+        const text = line.replace(/<div>(.*?)<\/div>/s, "$1").replace(/&nbsp;/g, " ");
         return text;
       }).join("\n");
-      const langClass = lang ? ` class="language-${lang.trim()}"` : "";
-      return `<pre class="code-block"><code${langClass}>${this.escapeHtml(codeContent)}</code></pre>`;
+      const lang = openFence.slice(3).trim();
+      const langClass = lang ? ` class="language-${lang}"` : "";
+      let result = `<div><span class="code-fence">${openFence}</span></div>`;
+      result += `<pre class="code-block"><code${langClass}>${codeContent}</code></pre>`;
+      result += `<div><span class="code-fence">${closeFence}</span></div>`;
+      return result;
     });
     return processed;
   }
@@ -1520,11 +1534,17 @@ function generateStyles(options = {}) {
       position: relative !important; /* Override reset - needed for absolute children */
       overflow: visible !important; /* Allow dropdown to overflow container */
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+      text-align: left !important;
       ${themeVars ? `
       /* Theme Variables */
       ${themeVars}` : ""}
     }
     
+    /* Force left alignment for all elements in the editor */
+    .overtype-container .overtype-wrapper * {
+      text-align: left !important;
+    }
+    
     /* Auto-resize mode styles */
     .overtype-container.overtype-auto-resize {
       height: auto !important;
@@ -3079,17 +3099,6 @@ var _OverType = class _OverType {
       closeFence.style.display = "block";
       openParent.classList.add("code-block-line");
       closeParent.classList.add("code-block-line");
-      let currentDiv = openParent.nextElementSibling;
-      while (currentDiv && currentDiv !== closeParent) {
-        if (currentDiv.tagName === "DIV") {
-          currentDiv.classList.add("code-block-line");
-          const plainText = currentDiv.textContent;
-          currentDiv.textContent = plainText;
-        }
-        currentDiv = currentDiv.nextElementSibling;
-        if (!currentDiv)
-          break;
-      }
     }
   }
   /**