overtype 2.0.5 → 2.1.0

package/dist/overtype-webcomponent.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.0.5
+ * OverType v2.0.6
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -50,6 +50,24 @@ var OverTypeEditor = (() => {
     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
@@ -114,7 +132,7 @@ var OverTypeEditor = (() => {
      * @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>`;
       });
     }
@@ -173,7 +191,7 @@ var OverTypeEditor = (() => {
      * @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;
     }
@@ -388,14 +406,14 @@ var OverTypeEditor = (() => {
         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);
@@ -727,6 +745,8 @@ var OverTypeEditor = (() => {
   __publicField(MarkdownParser, "linkIndex", 0);
   // Global code highlighter function
   __publicField(MarkdownParser, "codeHighlighter", null);
+  // Custom syntax processor function
+  __publicField(MarkdownParser, "customSyntax", null);
   /**
    * List pattern definitions
    */
@@ -2785,6 +2805,28 @@ ${blockSuffix}` : suffix;
       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
      */
@@ -3723,10 +3765,13 @@ ${blockSuffix}` : suffix;
      */
     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);
@@ -4082,6 +4127,8 @@ ${blockSuffix}` : suffix;
         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;
@@ -4150,6 +4197,44 @@ ${blockSuffix}` : suffix;
     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
@@ -4250,6 +4335,32 @@ ${blockSuffix}` : suffix;
         }
       });
     }
+    /**
+     * 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
      */