overtype 1.2.3 → 1.2.4

package/README.md

@@ -1,6 +1,16 @@
 # OverType
 
-A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~82KB minified with all features.
+A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~84KB minified with all features.
+
+## Live Examples
+
+🎮 **Try it out**: [Interactive demos on overtype.dev](https://overtype.dev)
+- [Basic Editor](https://overtype.dev/#basic-editor)
+- [With Toolbar](https://overtype.dev/#toolbar)
+- [Multiple Instances](https://overtype.dev/#multiple-instances)
+- [View Modes](https://overtype.dev/#view-modes)
+- [Custom Themes](https://overtype.dev/#custom-themes)
+- [All Markdown Features](https://overtype.dev/#markdown-features)
 
 ## Features
 
@@ -9,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** - ~82KB minified
+- 🚀 **Lightweight** - ~84KB 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
@@ -25,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** | ~82KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
+| **Size** | ~84KB | 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 |
@@ -212,20 +222,26 @@ const [editor] = new OverType('#editor', {
 const markdown = editor.getValue();
 // Returns: "# Title\n\n**Bold** text with [links](https://example.com)"
 
-// Get rendered HTML for display
+// Get rendered HTML with syntax markers (for debugging/inspection)
 const html = editor.getRenderedHTML();
-// Returns basic HTML with markdown elements
+// Returns HTML with <span class="syntax-marker"> elements visible
 
-// Get HTML with post-processing (consolidated lists/code blocks)
-const processedHTML = editor.getRenderedHTML(true);
-// Returns HTML optimized for preview mode
+// Get clean HTML for export (no OverType-specific markup)
+const cleanHTML = editor.getRenderedHTML({ cleanHTML: true });
+// Returns clean HTML suitable for saving/exporting
 
-// Get the current preview element's HTML
+// Convenience method for clean HTML
+const exportHTML = editor.getCleanHTML();
+// Same as getRenderedHTML({ cleanHTML: true })
+
+// Get the current preview element's HTML (actual DOM content)
 const previewHTML = editor.getPreviewHTML();
 // Returns exactly what's shown in the editor's preview layer
 
-// Example: Create external preview
-document.getElementById('external-preview').innerHTML = editor.getRenderedHTML(true);
+// Example: Export clean HTML to server
+const htmlToSave = editor.getCleanHTML();  // No syntax markers
+// Example: Clone exact preview appearance
+document.getElementById('clone').innerHTML = editor.getPreviewHTML();
 ```
 
 ### Stats Bar
@@ -371,11 +387,12 @@ editor.getValue()
 editor.setValue(markdown)
 
 // Get rendered HTML of the current content
-editor.getRenderedHTML()           // Basic HTML rendering
-editor.getRenderedHTML(true)       // With post-processing (consolidated lists/code blocks)
+editor.getRenderedHTML()                    // With syntax markers (for debugging)
+editor.getRenderedHTML({ cleanHTML: true }) // Clean HTML without OverType markup
+editor.getCleanHTML()                       // Alias for getRenderedHTML({ cleanHTML: true })
 
 // Get the current preview element's HTML
-editor.getPreviewHTML()            // Returns exactly what's displayed in the preview
+editor.getPreviewHTML()            // Actual DOM content from preview layer
 
 // Change theme
 editor.setTheme('cave')  // Built-in theme name
@@ -566,7 +583,7 @@ MIT
 - **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** - ~82KB minified (vs OverType's ~78KB)
+- **Smaller footprint** - ~84KB minified (vs OverType's ~78KB)
 
 Key components extracted from OverType to Synesthesia:
 - The transparent textarea overlay technique for perfect WYSIWYG alignment
@@ -581,3 +598,7 @@ If you need a markdown editor with toolbar and formatting features, use OverType
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
+---
+
+Ready for another radical idea?  
+[Let's remove every layer of the web application stack.](https://hyperclay.com)

package/dist/overtype.cjs

@@ -1,5 +1,5 @@
 /**
- * OverType v1.2.2
+ * OverType v1.2.4
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author Demo User
@@ -155,6 +155,17 @@ var MarkdownParser = class {
     html = html.replace(new RegExp("(?<!_)_(?!_)(.+?)(?<!_)_(?!_)", "g"), '<em><span class="syntax-marker">_</span>$1<span class="syntax-marker">_</span></em>');
     return html;
   }
+  /**
+   * Parse strikethrough text
+   * Supports both single (~) and double (~~) tildes, but rejects 3+ tildes
+   * @param {string} html - HTML with potential strikethrough markdown
+   * @returns {string} HTML with strikethrough styling
+   */
+  static parseStrikethrough(html) {
+    html = html.replace(new RegExp("(?<!~)~~(?!~)(.+?)(?<!~)~~(?!~)", "g"), '<del><span class="syntax-marker">~~</span>$1<span class="syntax-marker">~~</span></del>');
+    html = html.replace(new RegExp("(?<!~)~(?!~)(.+?)(?<!~)~(?!~)", "g"), '<del><span class="syntax-marker">~</span>$1<span class="syntax-marker">~</span></del>');
+    return html;
+  }
   /**
    * Parse inline code
    * @param {string} html - HTML with potential code markdown
@@ -217,6 +228,7 @@ var MarkdownParser = class {
       sanctuaries.set(placeholder, match);
       return placeholder;
     });
+    html = this.parseStrikethrough(html);
     html = this.parseBold(html);
     html = this.parseItalic(html);
     sanctuaries.forEach((content, placeholder) => {
@@ -351,6 +363,17 @@ var MarkdownParser = class {
           container.insertBefore(currentList, child);
           listType = newType;
         }
+        const indentationNodes = [];
+        for (const node of child.childNodes) {
+          if (node.nodeType === 3 && node.textContent.match(/^\u00A0+$/)) {
+            indentationNodes.push(node.cloneNode(true));
+          } else if (node === listItem) {
+            break;
+          }
+        }
+        indentationNodes.forEach((node) => {
+          listItem.insertBefore(node, listItem.firstChild);
+        });
         currentList.appendChild(listItem);
         child.remove();
       } else {
@@ -368,15 +391,35 @@ var MarkdownParser = class {
   static postProcessHTMLManual(html) {
     let processed = html;
     processed = processed.replace(/((?:<div>(?:&nbsp;)*<li class="bullet-list">.*?<\/li><\/div>\s*)+)/gs, (match) => {
-      const items = match.match(/<li class="bullet-list">.*?<\/li>/gs) || [];
-      if (items.length > 0) {
+      const divs = match.match(/<div>(?:&nbsp;)*<li class="bullet-list">.*?<\/li><\/div>/gs) || [];
+      if (divs.length > 0) {
+        const items = divs.map((div) => {
+          const indentMatch = div.match(/<div>((?:&nbsp;)*)<li/);
+          const listItemMatch = div.match(/<li class="bullet-list">.*?<\/li>/);
+          if (indentMatch && listItemMatch) {
+            const indentation = indentMatch[1];
+            const listItem = listItemMatch[0];
+            return listItem.replace(/<li class="bullet-list">/, `<li class="bullet-list">${indentation}`);
+          }
+          return listItemMatch ? listItemMatch[0] : "";
+        }).filter(Boolean);
         return "<ul>" + items.join("") + "</ul>";
       }
       return match;
     });
     processed = processed.replace(/((?:<div>(?:&nbsp;)*<li class="ordered-list">.*?<\/li><\/div>\s*)+)/gs, (match) => {
-      const items = match.match(/<li class="ordered-list">.*?<\/li>/gs) || [];
-      if (items.length > 0) {
+      const divs = match.match(/<div>(?:&nbsp;)*<li class="ordered-list">.*?<\/li><\/div>/gs) || [];
+      if (divs.length > 0) {
+        const items = divs.map((div) => {
+          const indentMatch = div.match(/<div>((?:&nbsp;)*)<li/);
+          const listItemMatch = div.match(/<li class="ordered-list">.*?<\/li>/);
+          if (indentMatch && listItemMatch) {
+            const indentation = indentMatch[1];
+            const listItem = listItemMatch[0];
+            return listItem.replace(/<li class="ordered-list">/, `<li class="ordered-list">${indentation}`);
+          }
+          return listItemMatch ? listItemMatch[0] : "";
+        }).filter(Boolean);
         return "<ol>" + items.join("") + "</ol>";
       }
       return match;
@@ -1918,6 +1961,14 @@ function generateStyles(options = {}) {
       font-style: italic !important;
     }
 
+    /* Strikethrough text */
+    .overtype-wrapper .overtype-preview del {
+      color: var(--del, #ee964b) !important;
+      text-decoration: line-through !important;
+      text-decoration-color: var(--del, #ee964b) !important;
+      text-decoration-thickness: 1px !important;
+    }
+
     /* Inline code */
     .overtype-wrapper .overtype-preview code {
       background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
@@ -2061,10 +2112,10 @@ function generateStyles(options = {}) {
       height: 8px !important;
       background: #4caf50 !important;
       border-radius: 50% !important;
-      animation: pulse 2s infinite !important;
+      animation: overtype-pulse 2s infinite !important;
     }
     
-    @keyframes pulse {
+    @keyframes overtype-pulse {
       0%, 100% { opacity: 1; transform: scale(1); }
       50% { opacity: 0.6; transform: scale(1.2); }
     }
@@ -2072,19 +2123,19 @@ function generateStyles(options = {}) {
 
     /* Toolbar Styles */
     .overtype-toolbar {
-      display: flex;
-      align-items: center;
-      gap: 4px;
+      display: flex !important;
+      align-items: center !important;
+      gap: 4px !important;
       padding: 8px !important; /* Override reset */
       background: var(--toolbar-bg, var(--bg-primary, #f8f9fa)) !important; /* Override reset */
       overflow-x: auto !important; /* Allow horizontal scrolling */
       overflow-y: hidden !important; /* Hide vertical overflow */
-      -webkit-overflow-scrolling: touch;
-      flex-shrink: 0;
+      -webkit-overflow-scrolling: touch !important;
+      flex-shrink: 0 !important;
       height: auto !important;
       grid-row: 1 !important; /* Always first row in grid */
       position: relative !important; /* Override reset */
-      z-index: 100; /* Ensure toolbar is above wrapper */
+      z-index: 100 !important; /* Ensure toolbar is above wrapper */
       scrollbar-width: thin; /* Thin scrollbar on Firefox */
     }
     
@@ -2466,20 +2517,67 @@ var eyeIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke
 
 // src/toolbar.js
 var Toolbar = class {
-  constructor(editor) {
+  constructor(editor, buttonConfig = null) {
     this.editor = editor;
     this.container = null;
     this.buttons = {};
+    this.buttonConfig = buttonConfig;
+  }
+  /**
+   * Check if cursor/selection is inside a markdown link
+   * @param {HTMLTextAreaElement} textarea - The textarea element
+   * @returns {boolean} True if inside a link
+   */
+  isInsideLink(textarea) {
+    const value = textarea.value;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    let insideLink = false;
+    let openBracket = -1;
+    let closeBracket = -1;
+    for (let i = start - 1; i >= 0; i--) {
+      if (value[i] === "[") {
+        openBracket = i;
+        break;
+      }
+      if (value[i] === "\n") {
+        break;
+      }
+    }
+    if (openBracket >= 0) {
+      for (let i = end; i < value.length - 1; i++) {
+        if (value[i] === "]" && value[i + 1] === "(") {
+          closeBracket = i;
+          break;
+        }
+        if (value[i] === "\n") {
+          break;
+        }
+      }
+    }
+    if (openBracket >= 0 && closeBracket >= 0) {
+      for (let i = closeBracket + 2; i < value.length; i++) {
+        if (value[i] === ")") {
+          insideLink = true;
+          break;
+        }
+        if (value[i] === "\n" || value[i] === " ") {
+          break;
+        }
+      }
+    }
+    return insideLink;
   }
   /**
    * Create and attach toolbar to editor
    */
   create() {
+    var _a;
     this.container = document.createElement("div");
     this.container.className = "overtype-toolbar";
     this.container.setAttribute("role", "toolbar");
     this.container.setAttribute("aria-label", "Text formatting");
-    const buttonConfig = [
+    const buttonConfig = (_a = this.buttonConfig) != null ? _a : [
       { name: "bold", icon: boldIcon, title: "Bold (Ctrl+B)", action: "toggleBold" },
       { name: "italic", icon: italicIcon, title: "Italic (Ctrl+I)", action: "toggleItalic" },
       { separator: true },
@@ -2573,6 +2671,9 @@ var Toolbar = class {
           insertLink(textarea);
           break;
         case "toggleCode":
+          if (this.isInsideLink(textarea)) {
+            return;
+          }
           toggleCode(textarea);
           break;
         case "toggleBulletList":
@@ -2788,29 +2889,29 @@ var LinkTooltip = class {
           position: absolute;
           position-anchor: var(--target-anchor, --link-0);
           position-area: block-end center;
-          margin-top: 8px;
+          margin-top: 8px !important;
           
-          background: #333;
-          color: white;
-          padding: 6px 10px;
-          border-radius: 16px;
-          font-size: 12px;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-          display: none;
-          z-index: 10000;
-          cursor: pointer;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-          max-width: 300px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
+          background: #333 !important;
+          color: white !important;
+          padding: 6px 10px !important;
+          border-radius: 16px !important;
+          font-size: 12px !important;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+          display: none !important;
+          z-index: 10000 !important;
+          cursor: pointer !important;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
+          max-width: 300px !important;
+          white-space: nowrap !important;
+          overflow: hidden !important;
+          text-overflow: ellipsis !important;
           
           position-try: most-width block-end inline-end, flip-inline, block-start center;
           position-visibility: anchors-visible;
         }
         
         .overtype-link-tooltip.visible {
-          display: flex;
+          display: flex !important;
         }
       }
     `;
@@ -2958,7 +3059,8 @@ var _OverType = class _OverType {
     this.shortcuts = new ShortcutsManager(this);
     this.linkTooltip = new LinkTooltip(this);
     if (this.options.toolbar) {
-      this.toolbar = new Toolbar(this);
+      const toolbarButtons = typeof this.options.toolbar === "object" ? this.options.toolbar.buttons : null;
+      this.toolbar = new Toolbar(this, toolbarButtons);
       this.toolbar.create();
       this.textarea.addEventListener("selectionchange", () => {
         this.toolbar.updateButtonStates();
@@ -3440,24 +3542,36 @@ var _OverType = class _OverType {
   }
   /**
    * Get the rendered HTML of the current content
-   * @param {boolean} processForPreview - If true, post-processes HTML for preview mode (consolidates lists/code blocks)
+   * @param {Object} options - Rendering options
+   * @param {boolean} options.cleanHTML - If true, removes syntax markers and OverType-specific classes
    * @returns {string} Rendered HTML
    */
-  getRenderedHTML(processForPreview = false) {
+  getRenderedHTML(options = {}) {
     const markdown = this.getValue();
     let html = MarkdownParser.parse(markdown);
-    if (processForPreview) {
-      html = MarkdownParser.postProcessHTML(html);
+    if (options.cleanHTML) {
+      html = html.replace(/<span class="syntax-marker[^"]*">.*?<\/span>/g, "");
+      html = html.replace(/\sclass="(bullet-list|ordered-list|code-fence|hr-marker|blockquote|url-part)"/g, "");
+      html = html.replace(/\sclass=""/g, "");
     }
     return html;
   }
   /**
    * Get the current preview element's HTML
+   * This includes all syntax markers and OverType styling
    * @returns {string} Current preview HTML (as displayed)
    */
   getPreviewHTML() {
     return this.preview.innerHTML;
   }
+  /**
+   * Get clean HTML without any OverType-specific markup
+   * Useful for exporting to other formats or storage
+   * @returns {string} Clean HTML suitable for export
+   */
+  getCleanHTML() {
+    return this.getRenderedHTML({ cleanHTML: true });
+  }
   /**
    * Focus the editor
    */
@@ -3776,9 +3890,6 @@ OverType.ShortcutsManager = ShortcutsManager;
 OverType.themes = { solar, cave: getTheme("cave") };
 OverType.getTheme = getTheme;
 OverType.currentTheme = solar;
-if (typeof window !== "undefined" && typeof window.document !== "undefined") {
-  window.OverType = OverType;
-}
 var overtype_default = OverType;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {