overtype 2.0.6 → 2.1.0

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. ~93KB minified with all features.
+A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~94KB 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** - ~93KB minified
+- 🚀 **Lightweight** - ~94KB 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** | ~93KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
+| **Size** | ~94KB | 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 |
@@ -537,11 +537,22 @@ OverType.setTheme('solar', { h1: '#custom' })  // Override specific colors
 OverType.setCodeHighlighter((code, lang) => highlightedHTML)
 OverType.setCodeHighlighter(null)  // Disable global highlighting
 
+// Extend parsing with custom syntax (footnotes, directives, etc.)
+// IMPORTANT: You must maintain 1-to-1 character alignment - wrap text, don't change it
+// See: https://panphora.github.io/overtype/examples/custom-syntax.html
+OverType.setCustomSyntax((html) => {
+  return html.replace(/\[\^(\w+)\]/g, '<span class="footnote">$&</span>');
+})
+
 // Note: Instance methods override global settings
 
 // Initialize multiple editors (same as constructor)
 OverType.init(target, options)
 
+// Initialize with per-element config via data-ot-* attributes
+// Uses kebab-case: data-ot-show-stats="true" → showStats: true
+OverType.initFromData('.editor', { /* defaults */ })
+
 // Get instance from element
 OverType.getInstance(element)
 
@@ -731,6 +742,26 @@ OverType uses a unique invisible textarea overlay approach:
    - Textarea content drives everything
    - One-way data flow: textarea → parser → preview
 
+## Data Attribute Configuration
+
+Use `OverType.initFromData()` to configure multiple editors via HTML data attributes:
+
+```html
+<div class="editor" data-ot-toolbar="true" data-ot-theme="cave"></div>
+<div class="editor" data-ot-auto-resize="true" data-ot-min-height="200px"></div>
+<div class="editor" data-ot-show-stats="true" data-ot-placeholder="Write here..."></div>
+
+<script>
+  OverType.initFromData('.editor', { fontSize: '14px' }); // defaults
+</script>
+```
+
+Uses kebab-case attributes that convert to camelCase options (e.g., `data-ot-show-stats` → `showStats`).
+
+**Supported:** `toolbar`, `theme`, `value`, `placeholder`, `autofocus`, `auto-resize`, `min-height`, `max-height`, `font-size`, `line-height`, `show-stats`, `smart-lists`, `show-active-line-raw`
+
+**Not supported (use JS):** `toolbarButtons`, `textareaProps`, `onChange`, `onKeydown`, `statsFormatter`, `codeHighlighter`, `colors`, `mobile`
+
 ## Contributors
 
 Special thanks to:

package/dist/overtype-webcomponent.esm.js

@@ -27,6 +27,24 @@ var MarkdownParser = class {
   static setCodeHighlighter(highlighter) {
     this.codeHighlighter = highlighter;
   }
+  /**
+   * Set custom syntax processor function
+   * @param {Function|null} processor - Function that takes (html) and returns modified HTML
+   */
+  static setCustomSyntax(processor) {
+    this.customSyntax = processor;
+  }
+  /**
+   * Apply custom syntax processor to parsed HTML
+   * @param {string} html - Parsed HTML line
+   * @returns {string} HTML with custom syntax applied
+   */
+  static applyCustomSyntax(html) {
+    if (this.customSyntax) {
+      return this.customSyntax(html);
+    }
+    return html;
+  }
   /**
    * Escape HTML special characters
    * @param {string} text - Raw text to escape
@@ -365,14 +383,14 @@ var MarkdownParser = class {
       const codeFenceRegex = /^```[^`]*$/;
       if (codeFenceRegex.test(line)) {
         inCodeBlock = !inCodeBlock;
-        return this.parseLine(line, isPreviewMode);
+        return this.applyCustomSyntax(this.parseLine(line, isPreviewMode));
       }
       if (inCodeBlock) {
         const escaped = this.escapeHtml(line);
         const indented = this.preserveIndentation(escaped, line);
         return `<div>${indented || "&nbsp;"}</div>`;
       }
-      return this.parseLine(line, isPreviewMode);
+      return this.applyCustomSyntax(this.parseLine(line, isPreviewMode));
     });
     const html = parsedLines.join("");
     return this.postProcessHTML(html, instanceHighlighter);
@@ -704,6 +722,8 @@ var MarkdownParser = class {
 __publicField(MarkdownParser, "linkIndex", 0);
 // Global code highlighter function
 __publicField(MarkdownParser, "codeHighlighter", null);
+// Custom syntax processor function
+__publicField(MarkdownParser, "customSyntax", null);
 /**
  * List pattern definitions
  */
@@ -4084,6 +4104,8 @@ var _OverType = class _OverType {
       this.statsBar.className = "overtype-stats";
       this.container.appendChild(this.statsBar);
       this._updateStats();
+    } else if (show && this.statsBar) {
+      this._updateStats();
     } else if (!show && this.statsBar) {
       this.statsBar.remove();
       this.statsBar = null;
@@ -4152,6 +4174,44 @@ var _OverType = class _OverType {
   static init(target, options = {}) {
     return new _OverType(target, options);
   }
+  /**
+   * Initialize editors with options from data-ot-* attributes
+   * @param {string} selector - CSS selector for target elements
+   * @param {Object} defaults - Default options (data attrs override these)
+   * @returns {Array<OverType>} Array of OverType instances
+   * @example
+   * // HTML: <div class="editor" data-ot-toolbar="true" data-ot-theme="cave"></div>
+   * OverType.initFromData('.editor', { fontSize: '14px' });
+   */
+  static initFromData(selector, defaults = {}) {
+    const elements = document.querySelectorAll(selector);
+    return Array.from(elements).map((el) => {
+      const options = { ...defaults };
+      for (const attr of el.attributes) {
+        if (attr.name.startsWith("data-ot-")) {
+          const kebab = attr.name.slice(8);
+          const key = kebab.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+          options[key] = _OverType._parseDataValue(attr.value);
+        }
+      }
+      return new _OverType(el, options);
+    });
+  }
+  /**
+   * Parse a data attribute value to the appropriate type
+   * @private
+   */
+  static _parseDataValue(value) {
+    if (value === "true")
+      return true;
+    if (value === "false")
+      return false;
+    if (value === "null")
+      return null;
+    if (value !== "" && !isNaN(Number(value)))
+      return Number(value);
+    return value;
+  }
   /**
    * Get instance from element
    * @param {Element} element - DOM element
@@ -4252,6 +4312,32 @@ var _OverType = class _OverType {
       }
     });
   }
+  /**
+   * Set custom syntax processor for extending markdown parsing
+   * @param {Function|null} processor - Function that takes (html) and returns modified HTML
+   * @example
+   * OverType.setCustomSyntax((html) => {
+   *   // Highlight footnote references [^1]
+   *   return html.replace(/\[\^(\w+)\]/g, '<span class="footnote-ref">$&</span>');
+   * });
+   */
+  static setCustomSyntax(processor) {
+    MarkdownParser.setCustomSyntax(processor);
+    document.querySelectorAll(".overtype-wrapper").forEach((wrapper) => {
+      const instance = wrapper._instance;
+      if (instance && instance.updatePreview) {
+        instance.updatePreview();
+      }
+    });
+    document.querySelectorAll("overtype-editor").forEach((webComponent) => {
+      if (typeof webComponent.getEditor === "function") {
+        const instance = webComponent.getEditor();
+        if (instance && instance.updatePreview) {
+          instance.updatePreview();
+        }
+      }
+    });
+  }
   /**
    * Initialize global event listeners
    */