overtype 1.2.7 → 2.0.0

package/dist/overtype.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v1.2.7
+ * OverType v2.0.0
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author Demo User
@@ -20,6 +20,13 @@ var MarkdownParser = class {
   static resetLinkIndex() {
     this.linkIndex = 0;
   }
+  /**
+   * Set global code highlighter function
+   * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
+   */
+  static setCodeHighlighter(highlighter) {
+    this.codeHighlighter = highlighter;
+  }
   /**
    * Escape HTML special characters
    * @param {string} text - Raw text to escape
@@ -88,6 +95,22 @@ var MarkdownParser = class {
       return `${indent}<li class="bullet-list"><span class="syntax-marker">${marker} </span>${content}</li>`;
     });
   }
+  /**
+   * Parse task lists (GitHub Flavored Markdown checkboxes)
+   * @param {string} html - HTML line to parse
+   * @param {boolean} isPreviewMode - Whether to render actual checkboxes (preview) or keep syntax visible (normal)
+   * @returns {string} Parsed task list item
+   */
+  static parseTaskList(html, isPreviewMode = false) {
+    return html.replace(/^((?:&nbsp;)*)-\s+\[([ xX])\]\s+(.+)$/, (match, indent, checked, content) => {
+      if (isPreviewMode) {
+        const isChecked = checked.toLowerCase() === "x";
+        return `${indent}<li class="task-list"><input type="checkbox" disabled ${isChecked ? "checked" : ""}> ${content}</li>`;
+      } else {
+        return `${indent}<li class="task-list"><span class="syntax-marker">- [${checked}] </span>${content}</li>`;
+      }
+    });
+  }
   /**
    * Parse numbered lists
    * @param {string} html - HTML line to parse
@@ -277,7 +300,7 @@ var MarkdownParser = class {
         processedLinkText = this.parseItalic(processedLinkText);
         const anchorName = `--link-${this.linkIndex++}`;
         const safeUrl = this.sanitizeUrl(sanctuary.url);
-        replacement = `<a href="${safeUrl}" style="anchor-name: ${anchorName}"><span class="syntax-marker">[</span>${processedLinkText}<span class="syntax-marker url-part">](${this.escapeHtml(sanctuary.url)})</span></a>`;
+        replacement = `<a href="${safeUrl}" style="anchor-name: ${anchorName}"><span class="syntax-marker">[</span>${processedLinkText}<span class="syntax-marker url-part">](${sanctuary.url})</span></a>`;
       }
       html = html.replace(placeholder, replacement);
     });
@@ -302,7 +325,7 @@ var MarkdownParser = class {
    * @param {string} line - Raw markdown line
    * @returns {string} Parsed HTML line
    */
-  static parseLine(line) {
+  static parseLine(line, isPreviewMode = false) {
     let html = this.escapeHtml(line);
     html = this.preserveIndentation(html, line);
     const horizontalRule = this.parseHorizontalRule(html);
@@ -313,6 +336,7 @@ var MarkdownParser = class {
       return codeBlock;
     html = this.parseHeader(html);
     html = this.parseBlockquote(html);
+    html = this.parseTaskList(html, isPreviewMode);
     html = this.parseBulletList(html);
     html = this.parseNumberedList(html);
     html = this.parseInlineElements(html);
@@ -326,9 +350,10 @@ var MarkdownParser = class {
    * @param {string} text - Full markdown text
    * @param {number} activeLine - Currently active line index (optional)
    * @param {boolean} showActiveLineRaw - Show raw markdown on active line
+   * @param {Function} instanceHighlighter - Instance-specific code highlighter (optional, overrides global if provided)
    * @returns {string} Parsed HTML
    */
-  static parse(text, activeLine = -1, showActiveLineRaw = false) {
+  static parse(text, activeLine = -1, showActiveLineRaw = false, instanceHighlighter, isPreviewMode = false) {
     this.resetLinkIndex();
     const lines = text.split("\n");
     let inCodeBlock = false;
@@ -340,26 +365,27 @@ var MarkdownParser = class {
       const codeFenceRegex = /^```[^`]*$/;
       if (codeFenceRegex.test(line)) {
         inCodeBlock = !inCodeBlock;
-        return this.parseLine(line);
+        return 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);
+      return this.parseLine(line, isPreviewMode);
     });
     const html = parsedLines.join("");
-    return this.postProcessHTML(html);
+    return this.postProcessHTML(html, instanceHighlighter);
   }
   /**
    * Post-process HTML to consolidate lists and code blocks
    * @param {string} html - HTML to post-process
+   * @param {Function} instanceHighlighter - Instance-specific code highlighter (optional, overrides global if provided)
    * @returns {string} Post-processed HTML with consolidated lists and code blocks
    */
-  static postProcessHTML(html) {
+  static postProcessHTML(html, instanceHighlighter) {
     if (typeof document === "undefined" || !document) {
-      return this.postProcessHTMLManual(html);
+      return this.postProcessHTMLManual(html, instanceHighlighter);
     }
     const container = document.createElement("div");
     container.innerHTML = html;
@@ -388,8 +414,28 @@ var MarkdownParser = class {
             }
             container.insertBefore(currentCodeBlock, child.nextSibling);
             currentCodeBlock._codeElement = codeElement;
+            currentCodeBlock._language = lang;
+            currentCodeBlock._codeContent = "";
             continue;
           } else {
+            const highlighter = instanceHighlighter || this.codeHighlighter;
+            if (currentCodeBlock && highlighter && currentCodeBlock._codeContent) {
+              try {
+                const result = highlighter(
+                  currentCodeBlock._codeContent,
+                  currentCodeBlock._language || ""
+                );
+                if (result && typeof result.then === "function") {
+                  console.warn("Async highlighters are not supported in parse() because it returns an HTML string. The caller creates new DOM elements from that string, breaking references to the elements we would update. Use synchronous highlighters only.");
+                } else {
+                  if (result && typeof result === "string" && result.trim()) {
+                    currentCodeBlock._codeElement.innerHTML = result;
+                  }
+                }
+              } catch (error) {
+                console.warn("Code highlighting failed:", error);
+              }
+            }
             inCodeBlock = false;
             currentCodeBlock = null;
             continue;
@@ -398,10 +444,14 @@ var MarkdownParser = class {
       }
       if (inCodeBlock && currentCodeBlock && child.tagName === "DIV" && !child.querySelector(".code-fence")) {
         const codeElement = currentCodeBlock._codeElement || currentCodeBlock.querySelector("code");
+        if (currentCodeBlock._codeContent.length > 0) {
+          currentCodeBlock._codeContent += "\n";
+        }
+        const lineText = child.textContent.replace(/\u00A0/g, " ");
+        currentCodeBlock._codeContent += lineText;
         if (codeElement.textContent.length > 0) {
           codeElement.textContent += "\n";
         }
-        const lineText = child.textContent.replace(/\u00A0/g, " ");
         codeElement.textContent += lineText;
         child.remove();
         continue;
@@ -447,9 +497,10 @@ var MarkdownParser = class {
   /**
    * Manual post-processing for Node.js environments (without DOM)
    * @param {string} html - HTML to post-process
+   * @param {Function} instanceHighlighter - Instance-specific code highlighter (optional, overrides global if provided)
    * @returns {string} Post-processed HTML
    */
-  static postProcessHTMLManual(html) {
+  static postProcessHTMLManual(html, instanceHighlighter) {
     let processed = html;
     processed = processed.replace(/((?:<div>(?:&nbsp;)*<li class="bullet-list">.*?<\/li><\/div>\s*)+)/gs, (match) => {
       const divs = match.match(/<div>(?:&nbsp;)*<li class="bullet-list">.*?<\/li><\/div>/gs) || [];
@@ -494,8 +545,25 @@ var MarkdownParser = class {
       }).join("\n");
       const lang = openFence.slice(3).trim();
       const langClass = lang ? ` class="language-${lang}"` : "";
+      let highlightedContent = codeContent;
+      const highlighter = instanceHighlighter || this.codeHighlighter;
+      if (highlighter) {
+        try {
+          const decodedCode = codeContent.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+          const result2 = highlighter(decodedCode, lang);
+          if (result2 && typeof result2.then === "function") {
+            console.warn("Async highlighters are not supported in Node.js (non-DOM) context. Use synchronous highlighters for server-side rendering.");
+          } else {
+            if (result2 && typeof result2 === "string" && result2.trim()) {
+              highlightedContent = result2;
+            }
+          }
+        } catch (error) {
+          console.warn("Code highlighting failed:", error);
+        }
+      }
       let result = `<div><span class="code-fence">${openFence}</span></div>`;
-      result += `<pre class="code-block"><code${langClass}>${codeContent}</code></pre>`;
+      result += `<pre class="code-block"><code${langClass}>${highlightedContent}</code></pre>`;
       result += `<div><span class="code-fence">${closeFence}</span></div>`;
       return result;
     });
@@ -634,6 +702,8 @@ var MarkdownParser = class {
 };
 // Track link index for anchor naming
 __publicField(MarkdownParser, "linkIndex", 0);
+// Global code highlighter function
+__publicField(MarkdownParser, "codeHighlighter", null);
 /**
  * List pattern definitions
  */
@@ -2053,12 +2123,14 @@ function generateStyles(options = {}) {
     /* Code block styling in normal mode - yellow background */
     .overtype-wrapper .overtype-preview pre.code-block {
       background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
+      white-space: break-spaces !important; /* Prevent horizontal scrollbar that breaks alignment */
     }
 
     /* Code inside pre blocks - remove background */
     .overtype-wrapper .overtype-preview pre code {
       background: transparent !important;
       color: var(--code, #0d3b66) !important;
+      font-family: ${fontFamily} !important; /* Match textarea font exactly for alignment */
     }
 
     /* Blockquotes */
@@ -2285,11 +2357,11 @@ function generateStyles(options = {}) {
     }
     
     /* Plain mode - hide preview and show textarea text */
-    .overtype-container.plain-mode .overtype-preview {
+    .overtype-container[data-mode="plain"] .overtype-preview {
       display: none !important;
     }
     
-    .overtype-container.plain-mode .overtype-input {
+    .overtype-container[data-mode="plain"] .overtype-input {
       color: var(--text, #0d3b66) !important;
       /* Use system font stack for better plain text readability */
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
@@ -2297,7 +2369,7 @@ function generateStyles(options = {}) {
     }
     
     /* Ensure textarea remains transparent in overlay mode */
-    .overtype-container:not(.plain-mode) .overtype-input {
+    .overtype-container:not([data-mode="plain"]) .overtype-input {
       color: transparent !important;
     }
 
@@ -2350,37 +2422,43 @@ function generateStyles(options = {}) {
       color: var(--h1, #007bff);
     }
 
+    .overtype-dropdown-icon {
+      width: 20px;
+      margin-right: 8px;
+      text-align: center;
+    }
+
     /* Preview mode styles */
-    .overtype-container.preview-mode .overtype-input {
+    .overtype-container[data-mode="preview"] .overtype-input {
       display: none !important;
     }
 
-    .overtype-container.preview-mode .overtype-preview {
+    .overtype-container[data-mode="preview"] .overtype-preview {
       pointer-events: auto !important;
       user-select: text !important;
       cursor: text !important;
     }
 
     /* Hide syntax markers in preview mode */
-    .overtype-container.preview-mode .syntax-marker {
+    .overtype-container[data-mode="preview"] .syntax-marker {
       display: none !important;
     }
     
     /* Hide URL part of links in preview mode - extra specificity */
-    .overtype-container.preview-mode .syntax-marker.url-part,
-    .overtype-container.preview-mode .url-part {
+    .overtype-container[data-mode="preview"] .syntax-marker.url-part,
+    .overtype-container[data-mode="preview"] .url-part {
       display: none !important;
     }
     
     /* Hide all syntax markers inside links too */
-    .overtype-container.preview-mode a .syntax-marker {
+    .overtype-container[data-mode="preview"] a .syntax-marker {
       display: none !important;
     }
 
     /* Headers - restore proper sizing in preview mode */
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview h1, 
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview h2, 
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview h3 {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1, 
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2, 
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
       font-weight: 600 !important;
       margin: 0 !important;
@@ -2389,41 +2467,63 @@ function generateStyles(options = {}) {
       line-height: 1 !important; /* Tight line height for headings */
     }
     
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview h1 { 
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 { 
       font-size: 2em !important; 
     }
     
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview h2 { 
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2 { 
       font-size: 1.5em !important; 
     }
     
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview h3 { 
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 { 
       font-size: 1.17em !important; 
     }
 
     /* Lists - restore list styling in preview mode */
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview ul {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview ul {
       display: block !important;
       list-style: disc !important;
       padding-left: 2em !important;
       margin: 1em 0 !important;
     }
 
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview ol {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview ol {
       display: block !important;
       list-style: decimal !important;
       padding-left: 2em !important;
       margin: 1em 0 !important;
     }
     
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview li {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview li {
       display: list-item !important;
       margin: 0 !important;
       padding: 0 !important;
     }
 
+    /* Task list checkboxes - only in preview mode */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview li.task-list {
+      list-style: none !important;
+      position: relative !important;
+    }
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview li.task-list input[type="checkbox"] {
+      margin-right: 0.5em !important;
+      cursor: default !important;
+      vertical-align: middle !important;
+    }
+
+    /* Task list in normal mode - keep syntax visible */
+    .overtype-container:not([data-mode="preview"]) .overtype-wrapper .overtype-preview li.task-list {
+      list-style: none !important;
+    }
+
+    .overtype-container:not([data-mode="preview"]) .overtype-wrapper .overtype-preview li.task-list .syntax-marker {
+      color: var(--syntax, #999999) !important;
+      font-weight: normal !important;
+    }
+
     /* Links - make clickable in preview mode */
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview a {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview a {
       pointer-events: auto !important;
       cursor: pointer !important;
       color: var(--link, #0066cc) !important;
@@ -2431,7 +2531,7 @@ function generateStyles(options = {}) {
     }
 
     /* Code blocks - proper pre/code styling in preview mode */
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview pre.code-block {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block {
       background: #2d2d2d !important;
       color: #f8f8f2 !important;
       padding: 1.2em !important;
@@ -2442,11 +2542,11 @@ function generateStyles(options = {}) {
     }
     
     /* Cave theme code block background in preview mode */
-    .overtype-container[data-theme="cave"].preview-mode .overtype-wrapper .overtype-preview pre.code-block {
+    .overtype-container[data-theme="cave"][data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block {
       background: #11171F !important;
     }
 
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview pre.code-block code {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block code {
       background: transparent !important;
       color: inherit !important;
       padding: 0 !important;
@@ -2456,16 +2556,16 @@ function generateStyles(options = {}) {
     }
 
     /* Hide old code block lines and fences in preview mode */
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview .code-block-line {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .code-block-line {
       display: none !important;
     }
 
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview .code-fence {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .code-fence {
       display: none !important;
     }
 
     /* Blockquotes - enhanced styling in preview mode */
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview .blockquote {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .blockquote {
       display: block !important;
       border-left: 4px solid var(--blockquote, #ddd) !important;
       padding-left: 1em !important;
@@ -2474,7 +2574,7 @@ function generateStyles(options = {}) {
     }
 
     /* Typography improvements in preview mode */
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview {
       font-family: Georgia, 'Times New Roman', serif !important;
       font-size: 16px !important;
       line-height: 1.8 !important;
@@ -2482,7 +2582,7 @@ function generateStyles(options = {}) {
     }
 
     /* Inline code in preview mode - keep monospace */
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview code {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview code {
       font-family: ${fontFamily} !important;
       font-size: 0.9em !important;
       background: rgba(135, 131, 120, 0.15) !important;
@@ -2491,236 +2591,243 @@ function generateStyles(options = {}) {
     }
 
     /* Strong and em elements in preview mode */
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview strong {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview strong {
       font-weight: 700 !important;
       color: inherit !important; /* Use parent text color */
     }
 
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview em {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview em {
       font-style: italic !important;
       color: inherit !important; /* Use parent text color */
     }
 
     /* HR in preview mode */
-    .overtype-container.preview-mode .overtype-wrapper .overtype-preview .hr-marker {
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .hr-marker {
       display: block !important;
       border-top: 2px solid var(--hr, #ddd) !important;
       text-indent: -9999px !important;
       height: 2px !important;
     }
 
+    /* Link Tooltip - CSS Anchor Positioning */
+    @supports (position-anchor: --x) and (position-area: center) {
+      .overtype-link-tooltip {
+        position: absolute;
+        position-anchor: var(--target-anchor, --link-0);
+        position-area: block-end center;
+        margin-top: 8px !important;
+
+        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 !important;
+      }
+    }
+
     ${mobileStyles}
   `;
 }
 
-// src/icons.js
-var boldIcon = `<svg viewBox="0 0 18 18">
-  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path>
-  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path>
-</svg>`;
-var italicIcon = `<svg viewBox="0 0 18 18">
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7" x2="13" y1="4" y2="4"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="11" y1="14" y2="14"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="10" y1="14" y2="4"></line>
-</svg>`;
-var h1Icon = `<svg viewBox="0 0 18 18">
-  <path fill="currentColor" d="M10,4V14a1,1,0,0,1-2,0V10H3v4a1,1,0,0,1-2,0V4A1,1,0,0,1,3,4V8H8V4a1,1,0,0,1,2,0Zm6.06787,9.209H14.98975V7.59863a.54085.54085,0,0,0-.605-.60547h-.62744a1.01119,1.01119,0,0,0-.748.29688L11.645,8.56641a.5435.5435,0,0,0-.022.8584l.28613.30762a.53861.53861,0,0,0,.84717.0332l.09912-.08789a1.2137,1.2137,0,0,0,.2417-.35254h.02246s-.01123.30859-.01123.60547V13.209H12.041a.54085.54085,0,0,0-.605.60547v.43945a.54085.54085,0,0,0,.605.60547h4.02686a.54085.54085,0,0,0,.605-.60547v-.43945A.54085.54085,0,0,0,16.06787,13.209Z"></path>
-</svg>`;
-var h2Icon = `<svg viewBox="0 0 18 18">
-  <path fill="currentColor" d="M16.73975,13.81445v.43945a.54085.54085,0,0,1-.605.60547H11.855a.58392.58392,0,0,1-.64893-.60547V14.0127c0-2.90527,3.39941-3.42187,3.39941-4.55469a.77675.77675,0,0,0-.84717-.78125,1.17684,1.17684,0,0,0-.83594.38477c-.2749.26367-.561.374-.85791.13184l-.4292-.34082c-.30811-.24219-.38525-.51758-.1543-.81445a2.97155,2.97155,0,0,1,2.45361-1.17676,2.45393,2.45393,0,0,1,2.68408,2.40918c0,2.45312-3.1792,2.92676-3.27832,3.93848h2.79443A.54085.54085,0,0,1,16.73975,13.81445ZM9,3A.99974.99974,0,0,0,8,4V8H3V4A1,1,0,0,0,1,4V14a1,1,0,0,0,2,0V10H8v4a1,1,0,0,0,2,0V4A.99974.99974,0,0,0,9,3Z"></path>
-</svg>`;
-var h3Icon = `<svg viewBox="0 0 18 18">
-  <path fill="currentColor" d="M16.65186,12.30664a2.6742,2.6742,0,0,1-2.915,2.68457,3.96592,3.96592,0,0,1-2.25537-.6709.56007.56007,0,0,1-.13232-.83594L11.64648,13c.209-.34082.48389-.36328.82471-.1543a2.32654,2.32654,0,0,0,1.12256.33008c.71484,0,1.12207-.35156,1.12207-.78125,0-.61523-.61621-.86816-1.46338-.86816H13.2085a.65159.65159,0,0,1-.68213-.41895l-.05518-.10937a.67114.67114,0,0,1,.14307-.78125l.71533-.86914a8.55289,8.55289,0,0,1,.68213-.7373V8.58887a3.93913,3.93913,0,0,1-.748.05469H11.9873a.54085.54085,0,0,1-.605-.60547V7.59863a.54085.54085,0,0,1,.605-.60547h3.75146a.53773.53773,0,0,1,.60547.59375v.17676a1.03723,1.03723,0,0,1-.27539.748L14.74854,10.0293A2.31132,2.31132,0,0,1,16.65186,12.30664ZM9,3A.99974.99974,0,0,0,8,4V8H3V4A1,1,0,0,0,1,4V14a1,1,0,0,0,2,0V10H8v4a1,1,0,0,0,2,0V4A.99974.99974,0,0,0,9,3Z"></path>
-</svg>`;
-var linkIcon = `<svg viewBox="0 0 18 18">
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7" x2="11" y1="7" y2="11"></line>
-  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z"></path>
-  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z"></path>
-</svg>`;
-var codeIcon = `<svg viewBox="0 0 18 18">
-  <polyline stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="5 7 3 9 5 11"></polyline>
-  <polyline stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="13 7 15 9 13 11"></polyline>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="10" x2="8" y1="5" y2="13"></line>
-</svg>`;
-var bulletListIcon = `<svg viewBox="0 0 18 18">
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="6" x2="15" y1="4" y2="4"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="6" x2="15" y1="9" y2="9"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="6" x2="15" y1="14" y2="14"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="3" x2="3" y1="4" y2="4"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="3" x2="3" y1="9" y2="9"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="3" x2="3" y1="14" y2="14"></line>
-</svg>`;
-var orderedListIcon = `<svg viewBox="0 0 18 18">
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7" x2="15" y1="4" y2="4"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7" x2="15" y1="9" y2="9"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7" x2="15" y1="14" y2="14"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line>
-  <path fill="currentColor" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"></path>
-  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"></path>
-  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"></path>
-</svg>`;
-var quoteIcon = `<svg viewBox="2 2 20 20">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 10.8182L9 10.8182C8.80222 10.8182 8.60888 10.7649 8.44443 10.665C8.27998 10.5651 8.15181 10.4231 8.07612 10.257C8.00043 10.0909 7.98063 9.90808 8.01922 9.73174C8.0578 9.55539 8.15304 9.39341 8.29289 9.26627C8.43275 9.13913 8.61093 9.05255 8.80491 9.01747C8.99889 8.98239 9.19996 9.00039 9.38268 9.0692C9.56541 9.13801 9.72159 9.25453 9.83147 9.40403C9.94135 9.55353 10 9.72929 10 9.90909L10 12.1818C10 12.664 9.78929 13.1265 9.41421 13.4675C9.03914 13.8084 8.53043 14 8 14"></path>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 10.8182L15 10.8182C14.8022 10.8182 14.6089 10.7649 14.4444 10.665C14.28 10.5651 14.1518 10.4231 14.0761 10.257C14.0004 10.0909 13.9806 9.90808 14.0192 9.73174C14.0578 9.55539 14.153 9.39341 14.2929 9.26627C14.4327 9.13913 14.6109 9.05255 14.8049 9.01747C14.9989 8.98239 15.2 9.00039 15.3827 9.0692C15.5654 9.13801 15.7216 9.25453 15.8315 9.40403C15.9414 9.55353 16 9.72929 16 9.90909L16 12.1818C16 12.664 15.7893 13.1265 15.4142 13.4675C15.0391 13.8084 14.5304 14 14 14"></path>
-</svg>`;
-var taskListIcon = `<svg viewBox="0 0 18 18">
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="16" y1="4" y2="4"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="16" y1="9" y2="9"></line>
-  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="16" y1="14" y2="14"></line>
-  <rect stroke="currentColor" fill="none" stroke-width="1.5" x="2" y="3" width="3" height="3" rx="0.5"></rect>
-  <rect stroke="currentColor" fill="none" stroke-width="1.5" x="2" y="13" width="3" height="3" rx="0.5"></rect>
-  <polyline stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="2.65 9.5 3.5 10.5 5 8.5"></polyline>
-</svg>`;
-var eyeIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" fill="none"></path>
-  <circle cx="12" cy="12" r="3" fill="none"></circle>
-</svg>`;
-
 // src/toolbar.js
 var Toolbar = class {
-  constructor(editor, buttonConfig = null) {
+  constructor(editor, options = {}) {
     this.editor = editor;
     this.container = null;
     this.buttons = {};
-    this.buttonConfig = buttonConfig;
+    this.toolbarButtons = options.toolbarButtons || [];
   }
   /**
-   * Create and attach toolbar to editor
+   * Create and render toolbar
    */
   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 = (_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 },
-      { name: "h1", icon: h1Icon, title: "Heading 1", action: "insertH1" },
-      { name: "h2", icon: h2Icon, title: "Heading 2", action: "insertH2" },
-      { name: "h3", icon: h3Icon, title: "Heading 3", action: "insertH3" },
-      { separator: true },
-      { name: "link", icon: linkIcon, title: "Insert Link (Ctrl+K)", action: "insertLink" },
-      { name: "code", icon: codeIcon, title: "Code (Ctrl+`)", action: "toggleCode" },
-      { separator: true },
-      { name: "quote", icon: quoteIcon, title: "Quote", action: "toggleQuote" },
-      { separator: true },
-      { name: "bulletList", icon: bulletListIcon, title: "Bullet List", action: "toggleBulletList" },
-      { name: "orderedList", icon: orderedListIcon, title: "Numbered List", action: "toggleNumberedList" },
-      { name: "taskList", icon: taskListIcon, title: "Task List", action: "toggleTaskList" },
-      { separator: true },
-      { name: "viewMode", icon: eyeIcon, title: "View mode", action: "toggle-view-menu", hasDropdown: true }
-    ];
-    buttonConfig.forEach((config) => {
-      if (config.separator) {
-        const separator = document.createElement("div");
-        separator.className = "overtype-toolbar-separator";
-        separator.setAttribute("role", "separator");
+    this.container.setAttribute("aria-label", "Formatting toolbar");
+    this.toolbarButtons.forEach((buttonConfig) => {
+      if (buttonConfig.name === "separator") {
+        const separator = this.createSeparator();
         this.container.appendChild(separator);
       } else {
-        const button = this.createButton(config);
-        this.buttons[config.name] = button;
+        const button = this.createButton(buttonConfig);
+        this.buttons[buttonConfig.name] = button;
         this.container.appendChild(button);
       }
     });
-    const container = this.editor.element.querySelector(".overtype-container");
-    const wrapper = this.editor.element.querySelector(".overtype-wrapper");
-    if (container && wrapper) {
-      container.insertBefore(this.container, wrapper);
-    }
-    return this.container;
+    this.editor.wrapper.insertBefore(this.container, this.editor.wrapper.firstChild);
   }
   /**
-   * Create individual toolbar button
+   * Create a toolbar separator
    */
-  createButton(config) {
+  createSeparator() {
+    const separator = document.createElement("div");
+    separator.className = "overtype-toolbar-separator";
+    separator.setAttribute("role", "separator");
+    return separator;
+  }
+  /**
+   * Create a toolbar button
+   */
+  createButton(buttonConfig) {
     const button = document.createElement("button");
     button.className = "overtype-toolbar-button";
     button.type = "button";
-    button.title = config.title;
-    button.setAttribute("aria-label", config.title);
-    button.setAttribute("data-action", config.action);
-    button.innerHTML = config.icon;
-    if (config.hasDropdown) {
+    button.setAttribute("data-button", buttonConfig.name);
+    button.title = buttonConfig.title || "";
+    button.setAttribute("aria-label", buttonConfig.title || buttonConfig.name);
+    button.innerHTML = this.sanitizeSVG(buttonConfig.icon || "");
+    if (buttonConfig.name === "viewMode") {
       button.classList.add("has-dropdown");
-      if (config.name === "viewMode") {
-        this.viewModeButton = button;
-      }
+      button.dataset.dropdown = "true";
+      button.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.toggleViewModeDropdown(button);
+      });
+      return button;
     }
-    button.addEventListener("click", (e) => {
+    button._clickHandler = async (e) => {
       e.preventDefault();
-      this.handleAction(config.action, button);
-    });
+      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: e
+          });
+        }
+      } catch (error) {
+        console.error(`Button "${buttonConfig.name}" error:`, error);
+        this.editor.wrapper.dispatchEvent(new CustomEvent("button-error", {
+          detail: { buttonName: buttonConfig.name, error }
+        }));
+        button.classList.add("button-error");
+        button.style.animation = "buttonError 0.3s";
+        setTimeout(() => {
+          button.classList.remove("button-error");
+          button.style.animation = "";
+        }, 300);
+      }
+    };
+    button.addEventListener("click", button._clickHandler);
     return button;
   }
   /**
-   * Handle toolbar button actions
+   * Sanitize SVG to prevent XSS
    */
-  async handleAction(action, button) {
-    const textarea = this.editor.textarea;
-    if (!textarea)
-      return;
-    if (action === "toggle-view-menu") {
-      this.toggleViewDropdown(button);
+  sanitizeSVG(svg) {
+    if (typeof svg !== "string")
+      return "";
+    const cleaned = svg.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "").replace(/\son\w+\s*=\s*["'][^"']*["']/gi, "").replace(/\son\w+\s*=\s*[^\s>]*/gi, "");
+    return cleaned;
+  }
+  /**
+   * Toggle view mode dropdown (internal implementation)
+   * Not exposed to users - viewMode button behavior is fixed
+   */
+  toggleViewModeDropdown(button) {
+    const existingDropdown = document.querySelector(".overtype-dropdown-menu");
+    if (existingDropdown) {
+      existingDropdown.remove();
+      button.classList.remove("dropdown-active");
       return;
     }
-    textarea.focus();
-    try {
-      switch (action) {
-        case "toggleBold":
-          toggleBold(textarea);
-          break;
-        case "toggleItalic":
-          toggleItalic(textarea);
-          break;
-        case "insertH1":
-          toggleH1(textarea);
-          break;
-        case "insertH2":
-          toggleH2(textarea);
-          break;
-        case "insertH3":
-          toggleH3(textarea);
-          break;
-        case "insertLink":
-          insertLink(textarea);
-          break;
-        case "toggleCode":
-          toggleCode(textarea);
-          break;
-        case "toggleBulletList":
-          toggleBulletList(textarea);
-          break;
-        case "toggleNumberedList":
-          toggleNumberedList(textarea);
-          break;
-        case "toggleQuote":
-          toggleQuote(textarea);
-          break;
-        case "toggleTaskList":
-          toggleTaskList(textarea);
-          break;
-        case "toggle-plain":
-          const isPlain = this.editor.container.classList.contains("plain-mode");
-          this.editor.showPlainTextarea(!isPlain);
-          break;
+    button.classList.add("dropdown-active");
+    const dropdown = this.createViewModeDropdown(button);
+    const rect = button.getBoundingClientRect();
+    dropdown.style.position = "absolute";
+    dropdown.style.top = `${rect.bottom + 5}px`;
+    dropdown.style.left = `${rect.left}px`;
+    document.body.appendChild(dropdown);
+    this.handleDocumentClick = (e) => {
+      if (!dropdown.contains(e.target) && !button.contains(e.target)) {
+        dropdown.remove();
+        button.classList.remove("dropdown-active");
+        document.removeEventListener("click", this.handleDocumentClick);
       }
-      textarea.dispatchEvent(new Event("input", { bubbles: true }));
-    } catch (error) {
-      console.error("Error loading markdown-actions:", error);
-    }
+    };
+    setTimeout(() => {
+      document.addEventListener("click", this.handleDocumentClick);
+    }, 0);
   }
   /**
-   * Update toolbar button states based on current selection
+   * Create view mode dropdown menu (internal implementation)
    */
-  async updateButtonStates() {
-    const textarea = this.editor.textarea;
-    if (!textarea)
-      return;
+  createViewModeDropdown(button) {
+    const dropdown = document.createElement("div");
+    dropdown.className = "overtype-dropdown-menu";
+    const items = [
+      { id: "normal", label: "Normal Edit", icon: "\u2713" },
+      { id: "plain", label: "Plain Textarea", icon: "\u2713" },
+      { id: "preview", label: "Preview Mode", icon: "\u2713" }
+    ];
+    const currentMode = this.editor.container.dataset.mode || "normal";
+    items.forEach((item) => {
+      const menuItem = document.createElement("button");
+      menuItem.className = "overtype-dropdown-item";
+      menuItem.type = "button";
+      menuItem.textContent = item.label;
+      if (item.id === currentMode) {
+        menuItem.classList.add("active");
+        menuItem.setAttribute("aria-current", "true");
+        const checkmark = document.createElement("span");
+        checkmark.className = "overtype-dropdown-icon";
+        checkmark.textContent = item.icon;
+        menuItem.prepend(checkmark);
+      }
+      menuItem.addEventListener("click", (e) => {
+        e.preventDefault();
+        switch (item.id) {
+          case "plain":
+            this.editor.showPlainTextarea();
+            break;
+          case "preview":
+            this.editor.showPreviewMode();
+            break;
+          case "normal":
+          default:
+            this.editor.showNormalEditMode();
+            break;
+        }
+        dropdown.remove();
+        button.classList.remove("dropdown-active");
+        document.removeEventListener("click", this.handleDocumentClick);
+      });
+      dropdown.appendChild(menuItem);
+    });
+    return dropdown;
+  }
+  /**
+   * Update active states of toolbar buttons
+   */
+  updateButtonStates() {
+    var _a;
     try {
-      const activeFormats = getActiveFormats2(textarea);
+      const activeFormats = ((_a = getActiveFormats2) == null ? void 0 : _a(
+        this.editor.textarea,
+        this.editor.textarea.selectionStart
+      )) || [];
       Object.entries(this.buttons).forEach(([name, button]) => {
+        if (name === "viewMode")
+          return;
         let isActive = false;
         switch (name) {
           case "bold":
@@ -2738,12 +2845,12 @@ var Toolbar = class {
           case "orderedList":
             isActive = activeFormats.includes("numbered-list");
             break;
-          case "quote":
-            isActive = activeFormats.includes("quote");
-            break;
           case "taskList":
             isActive = activeFormats.includes("task-list");
             break;
+          case "quote":
+            isActive = activeFormats.includes("quote");
+            break;
           case "h1":
             isActive = activeFormats.includes("header");
             break;
@@ -2753,9 +2860,6 @@ var Toolbar = class {
           case "h3":
             isActive = activeFormats.includes("header-3");
             break;
-          case "togglePlain":
-            isActive = !this.editor.container.classList.contains("plain-mode");
-            break;
         }
         button.classList.toggle("active", isActive);
         button.setAttribute("aria-pressed", isActive.toString());
@@ -2764,101 +2868,19 @@ var Toolbar = class {
     }
   }
   /**
-   * Toggle view mode dropdown menu
-   */
-  toggleViewDropdown(button) {
-    const existingDropdown = document.querySelector(".overtype-dropdown-menu");
-    if (existingDropdown) {
-      existingDropdown.remove();
-      button.classList.remove("dropdown-active");
-      document.removeEventListener("click", this.handleDocumentClick);
-      return;
-    }
-    const dropdown = this.createViewDropdown();
-    const rect = button.getBoundingClientRect();
-    dropdown.style.top = `${rect.bottom + 4}px`;
-    dropdown.style.left = `${rect.left}px`;
-    document.body.appendChild(dropdown);
-    button.classList.add("dropdown-active");
-    this.handleDocumentClick = (e) => {
-      if (!button.contains(e.target) && !dropdown.contains(e.target)) {
-        dropdown.remove();
-        button.classList.remove("dropdown-active");
-        document.removeEventListener("click", this.handleDocumentClick);
-      }
-    };
-    setTimeout(() => {
-      document.addEventListener("click", this.handleDocumentClick);
-    }, 0);
-  }
-  /**
-   * Create view mode dropdown menu
-   */
-  createViewDropdown() {
-    const dropdown = document.createElement("div");
-    dropdown.className = "overtype-dropdown-menu";
-    const isPlain = this.editor.container.classList.contains("plain-mode");
-    const isPreview = this.editor.container.classList.contains("preview-mode");
-    const currentMode = isPreview ? "preview" : isPlain ? "plain" : "normal";
-    const modes = [
-      { id: "normal", label: "Normal Edit", icon: "\u2713" },
-      { id: "plain", label: "Plain Textarea", icon: "\u2713" },
-      { id: "preview", label: "Preview Mode", icon: "\u2713" }
-    ];
-    modes.forEach((mode) => {
-      const item = document.createElement("button");
-      item.className = "overtype-dropdown-item";
-      item.type = "button";
-      const check = document.createElement("span");
-      check.className = "overtype-dropdown-check";
-      check.textContent = currentMode === mode.id ? mode.icon : "";
-      const label = document.createElement("span");
-      label.textContent = mode.label;
-      item.appendChild(check);
-      item.appendChild(label);
-      if (currentMode === mode.id) {
-        item.classList.add("active");
-      }
-      item.addEventListener("click", (e) => {
-        e.stopPropagation();
-        this.setViewMode(mode.id);
-        dropdown.remove();
-        this.viewModeButton.classList.remove("dropdown-active");
-        document.removeEventListener("click", this.handleDocumentClick);
-      });
-      dropdown.appendChild(item);
-    });
-    return dropdown;
-  }
-  /**
-   * Set view mode
-   */
-  setViewMode(mode) {
-    this.editor.container.classList.remove("plain-mode", "preview-mode");
-    switch (mode) {
-      case "plain":
-        this.editor.showPlainTextarea(true);
-        break;
-      case "preview":
-        this.editor.showPreviewMode(true);
-        break;
-      case "normal":
-      default:
-        this.editor.showPlainTextarea(false);
-        if (typeof this.editor.showPreviewMode === "function") {
-          this.editor.showPreviewMode(false);
-        }
-        break;
-    }
-  }
-  /**
-   * Destroy toolbar
+   * Destroy toolbar and cleanup
    */
   destroy() {
     if (this.container) {
       if (this.handleDocumentClick) {
         document.removeEventListener("click", this.handleDocumentClick);
       }
+      Object.values(this.buttons).forEach((button) => {
+        if (button._clickHandler) {
+          button.removeEventListener("click", button._clickHandler);
+          delete button._clickHandler;
+        }
+      });
       this.container.remove();
       this.container = null;
       this.buttons = {};
@@ -2873,13 +2895,10 @@ var LinkTooltip = class {
     this.tooltip = null;
     this.currentLink = null;
     this.hideTimeout = null;
+    this.visibilityChangeHandler = null;
     this.init();
   }
   init() {
-    const supportsAnchor = CSS.supports("position-anchor: --x") && CSS.supports("position-area: center");
-    if (!supportsAnchor) {
-      return;
-    }
     this.createTooltip();
     this.editor.textarea.addEventListener("selectionchange", () => this.checkCursorPosition());
     this.editor.textarea.addEventListener("keyup", (e) => {
@@ -2889,46 +2908,19 @@ var LinkTooltip = class {
     });
     this.editor.textarea.addEventListener("input", () => this.hide());
     this.editor.textarea.addEventListener("scroll", () => this.hide());
+    this.editor.textarea.addEventListener("blur", () => this.hide());
+    this.visibilityChangeHandler = () => {
+      if (document.hidden) {
+        this.hide();
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityChangeHandler);
     this.tooltip.addEventListener("mouseenter", () => this.cancelHide());
     this.tooltip.addEventListener("mouseleave", () => this.scheduleHide());
   }
   createTooltip() {
     this.tooltip = document.createElement("div");
     this.tooltip.className = "overtype-link-tooltip";
-    const tooltipStyles = document.createElement("style");
-    tooltipStyles.textContent = `
-      @supports (position-anchor: --x) and (position-area: center) {
-        .overtype-link-tooltip {
-          position: absolute;
-          position-anchor: var(--target-anchor, --link-0);
-          position-area: block-end center;
-          margin-top: 8px !important;
-          
-          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 !important;
-        }
-      }
-    `;
-    document.head.appendChild(tooltipStyles);
     this.tooltip.innerHTML = `
       <span style="display: flex; align-items: center; gap: 6px;">
         <svg width="12" height="12" viewBox="0 0 20 20" fill="currentColor" style="flex-shrink: 0;">
@@ -3004,6 +2996,10 @@ var LinkTooltip = class {
   }
   destroy() {
     this.cancelHide();
+    if (this.visibilityChangeHandler) {
+      document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+      this.visibilityChangeHandler = null;
+    }
     if (this.tooltip && this.tooltip.parentNode) {
       this.tooltip.parentNode.removeChild(this.tooltip);
     }
@@ -3012,6 +3008,204 @@ var LinkTooltip = class {
   }
 };
 
+// src/icons.js
+var boldIcon = `<svg viewBox="0 0 18 18">
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path>
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path>
+</svg>`;
+var italicIcon = `<svg viewBox="0 0 18 18">
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7" x2="13" y1="4" y2="4"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="5" x2="11" y1="14" y2="14"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="10" y1="14" y2="4"></line>
+</svg>`;
+var h1Icon = `<svg viewBox="0 0 18 18">
+  <path fill="currentColor" d="M10,4V14a1,1,0,0,1-2,0V10H3v4a1,1,0,0,1-2,0V4A1,1,0,0,1,3,4V8H8V4a1,1,0,0,1,2,0Zm6.06787,9.209H14.98975V7.59863a.54085.54085,0,0,0-.605-.60547h-.62744a1.01119,1.01119,0,0,0-.748.29688L11.645,8.56641a.5435.5435,0,0,0-.022.8584l.28613.30762a.53861.53861,0,0,0,.84717.0332l.09912-.08789a1.2137,1.2137,0,0,0,.2417-.35254h.02246s-.01123.30859-.01123.60547V13.209H12.041a.54085.54085,0,0,0-.605.60547v.43945a.54085.54085,0,0,0,.605.60547h4.02686a.54085.54085,0,0,0,.605-.60547v-.43945A.54085.54085,0,0,0,16.06787,13.209Z"></path>
+</svg>`;
+var h2Icon = `<svg viewBox="0 0 18 18">
+  <path fill="currentColor" d="M16.73975,13.81445v.43945a.54085.54085,0,0,1-.605.60547H11.855a.58392.58392,0,0,1-.64893-.60547V14.0127c0-2.90527,3.39941-3.42187,3.39941-4.55469a.77675.77675,0,0,0-.84717-.78125,1.17684,1.17684,0,0,0-.83594.38477c-.2749.26367-.561.374-.85791.13184l-.4292-.34082c-.30811-.24219-.38525-.51758-.1543-.81445a2.97155,2.97155,0,0,1,2.45361-1.17676,2.45393,2.45393,0,0,1,2.68408,2.40918c0,2.45312-3.1792,2.92676-3.27832,3.93848h2.79443A.54085.54085,0,0,1,16.73975,13.81445ZM9,3A.99974.99974,0,0,0,8,4V8H3V4A1,1,0,0,0,1,4V14a1,1,0,0,0,2,0V10H8v4a1,1,0,0,0,2,0V4A.99974.99974,0,0,0,9,3Z"></path>
+</svg>`;
+var h3Icon = `<svg viewBox="0 0 18 18">
+  <path fill="currentColor" d="M16.65186,12.30664a2.6742,2.6742,0,0,1-2.915,2.68457,3.96592,3.96592,0,0,1-2.25537-.6709.56007.56007,0,0,1-.13232-.83594L11.64648,13c.209-.34082.48389-.36328.82471-.1543a2.32654,2.32654,0,0,0,1.12256.33008c.71484,0,1.12207-.35156,1.12207-.78125,0-.61523-.61621-.86816-1.46338-.86816H13.2085a.65159.65159,0,0,1-.68213-.41895l-.05518-.10937a.67114.67114,0,0,1,.14307-.78125l.71533-.86914a8.55289,8.55289,0,0,1,.68213-.7373V8.58887a3.93913,3.93913,0,0,1-.748.05469H11.9873a.54085.54085,0,0,1-.605-.60547V7.59863a.54085.54085,0,0,1,.605-.60547h3.75146a.53773.53773,0,0,1,.60547.59375v.17676a1.03723,1.03723,0,0,1-.27539.748L14.74854,10.0293A2.31132,2.31132,0,0,1,16.65186,12.30664ZM9,3A.99974.99974,0,0,0,8,4V8H3V4A1,1,0,0,0,1,4V14a1,1,0,0,0,2,0V10H8v4a1,1,0,0,0,2,0V4A.99974.99974,0,0,0,9,3Z"></path>
+</svg>`;
+var linkIcon = `<svg viewBox="0 0 18 18">
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7" x2="11" y1="7" y2="11"></line>
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z"></path>
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z"></path>
+</svg>`;
+var codeIcon = `<svg viewBox="0 0 18 18">
+  <polyline stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="5 7 3 9 5 11"></polyline>
+  <polyline stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="13 7 15 9 13 11"></polyline>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="10" x2="8" y1="5" y2="13"></line>
+</svg>`;
+var bulletListIcon = `<svg viewBox="0 0 18 18">
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="6" x2="15" y1="4" y2="4"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="6" x2="15" y1="9" y2="9"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="6" x2="15" y1="14" y2="14"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="3" x2="3" y1="4" y2="4"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="3" x2="3" y1="9" y2="9"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="3" x2="3" y1="14" y2="14"></line>
+</svg>`;
+var orderedListIcon = `<svg viewBox="0 0 18 18">
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7" x2="15" y1="4" y2="4"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7" x2="15" y1="9" y2="9"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7" x2="15" y1="14" y2="14"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line>
+  <path fill="currentColor" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"></path>
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"></path>
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"></path>
+</svg>`;
+var quoteIcon = `<svg viewBox="2 2 20 20">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 10.8182L9 10.8182C8.80222 10.8182 8.60888 10.7649 8.44443 10.665C8.27998 10.5651 8.15181 10.4231 8.07612 10.257C8.00043 10.0909 7.98063 9.90808 8.01922 9.73174C8.0578 9.55539 8.15304 9.39341 8.29289 9.26627C8.43275 9.13913 8.61093 9.05255 8.80491 9.01747C8.99889 8.98239 9.19996 9.00039 9.38268 9.0692C9.56541 9.13801 9.72159 9.25453 9.83147 9.40403C9.94135 9.55353 10 9.72929 10 9.90909L10 12.1818C10 12.664 9.78929 13.1265 9.41421 13.4675C9.03914 13.8084 8.53043 14 8 14"></path>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 10.8182L15 10.8182C14.8022 10.8182 14.6089 10.7649 14.4444 10.665C14.28 10.5651 14.1518 10.4231 14.0761 10.257C14.0004 10.0909 13.9806 9.90808 14.0192 9.73174C14.0578 9.55539 14.153 9.39341 14.2929 9.26627C14.4327 9.13913 14.6109 9.05255 14.8049 9.01747C14.9989 8.98239 15.2 9.00039 15.3827 9.0692C15.5654 9.13801 15.7216 9.25453 15.8315 9.40403C15.9414 9.55353 16 9.72929 16 9.90909L16 12.1818C16 12.664 15.7893 13.1265 15.4142 13.4675C15.0391 13.8084 14.5304 14 14 14"></path>
+</svg>`;
+var taskListIcon = `<svg viewBox="0 0 18 18">
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="16" y1="4" y2="4"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="16" y1="9" y2="9"></line>
+  <line stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="8" x2="16" y1="14" y2="14"></line>
+  <rect stroke="currentColor" fill="none" stroke-width="1.5" x="2" y="3" width="3" height="3" rx="0.5"></rect>
+  <rect stroke="currentColor" fill="none" stroke-width="1.5" x="2" y="13" width="3" height="3" rx="0.5"></rect>
+  <polyline stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="2.65 9.5 3.5 10.5 5 8.5"></polyline>
+</svg>`;
+var eyeIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" fill="none"></path>
+  <circle cx="12" cy="12" r="3" fill="none"></circle>
+</svg>`;
+
+// src/toolbar-buttons.js
+var toolbarButtons = {
+  bold: {
+    name: "bold",
+    icon: boldIcon,
+    title: "Bold (Ctrl+B)",
+    action: ({ editor, event }) => {
+      toggleBold(editor.textarea);
+      editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  },
+  italic: {
+    name: "italic",
+    icon: italicIcon,
+    title: "Italic (Ctrl+I)",
+    action: ({ editor, event }) => {
+      toggleItalic(editor.textarea);
+      editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  },
+  code: {
+    name: "code",
+    icon: codeIcon,
+    title: "Inline Code",
+    action: ({ editor, event }) => {
+      toggleCode(editor.textarea);
+      editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  },
+  separator: {
+    name: "separator"
+    // No icon, title, or action - special separator element
+  },
+  link: {
+    name: "link",
+    icon: linkIcon,
+    title: "Insert Link",
+    action: ({ editor, event }) => {
+      insertLink(editor.textarea);
+      editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  },
+  h1: {
+    name: "h1",
+    icon: h1Icon,
+    title: "Heading 1",
+    action: ({ editor, event }) => {
+      toggleH1(editor.textarea);
+      editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  },
+  h2: {
+    name: "h2",
+    icon: h2Icon,
+    title: "Heading 2",
+    action: ({ editor, event }) => {
+      toggleH2(editor.textarea);
+      editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  },
+  h3: {
+    name: "h3",
+    icon: h3Icon,
+    title: "Heading 3",
+    action: ({ editor, event }) => {
+      toggleH3(editor.textarea);
+      editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  },
+  bulletList: {
+    name: "bulletList",
+    icon: bulletListIcon,
+    title: "Bullet List",
+    action: ({ editor, event }) => {
+      toggleBulletList(editor.textarea);
+      editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  },
+  orderedList: {
+    name: "orderedList",
+    icon: orderedListIcon,
+    title: "Numbered List",
+    action: ({ editor, event }) => {
+      toggleNumberedList(editor.textarea);
+      editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  },
+  taskList: {
+    name: "taskList",
+    icon: taskListIcon,
+    title: "Task List",
+    action: ({ editor, event }) => {
+      if (toggleTaskList) {
+        toggleTaskList(editor.textarea);
+        editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+    }
+  },
+  quote: {
+    name: "quote",
+    icon: quoteIcon,
+    title: "Quote",
+    action: ({ editor, event }) => {
+      toggleQuote(editor.textarea);
+      editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  },
+  viewMode: {
+    name: "viewMode",
+    icon: eyeIcon,
+    title: "View mode"
+    // Special: handled internally by Toolbar class as dropdown
+    // No action property - dropdown behavior is internal
+  }
+};
+var defaultToolbarButtons = [
+  toolbarButtons.bold,
+  toolbarButtons.italic,
+  toolbarButtons.code,
+  toolbarButtons.separator,
+  toolbarButtons.link,
+  toolbarButtons.separator,
+  toolbarButtons.h1,
+  toolbarButtons.h2,
+  toolbarButtons.h3,
+  toolbarButtons.separator,
+  toolbarButtons.bulletList,
+  toolbarButtons.orderedList,
+  toolbarButtons.taskList,
+  toolbarButtons.separator,
+  toolbarButtons.quote,
+  toolbarButtons.separator,
+  toolbarButtons.viewMode
+];
+
 // src/overtype.js
 var _OverType = class _OverType {
   /**
@@ -3071,17 +3265,6 @@ var _OverType = class _OverType {
     }
     this.shortcuts = new ShortcutsManager(this);
     this.linkTooltip = new LinkTooltip(this);
-    if (this.options.toolbar) {
-      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();
-      });
-      this.textarea.addEventListener("input", () => {
-        this.toolbar.updateButtonStates();
-      });
-    }
     this.initialized = true;
     if (this.options.onChange) {
       this.options.onChange(this.getValue(), this);
@@ -3125,9 +3308,13 @@ var _OverType = class _OverType {
       showActiveLineRaw: false,
       showStats: false,
       toolbar: false,
+      toolbarButtons: null,
+      // Defaults to defaultToolbarButtons if toolbar: true
       statsFormatter: null,
-      smartLists: true
+      smartLists: true,
       // Enable smart list continuation
+      codeHighlighter: null
+      // Per-instance code highlighter
     };
     const { theme, colors, ...cleanOptions } = options;
     return {
@@ -3303,6 +3490,41 @@ var _OverType = class _OverType {
     this.textarea.setAttribute("data-gramm_editor", "false");
     this.textarea.setAttribute("data-enable-grammarly", "false");
   }
+  /**
+   * Create and setup toolbar
+   * @private
+   */
+  _createToolbar() {
+    const toolbarButtons2 = this.options.toolbarButtons || defaultToolbarButtons;
+    this.toolbar = new Toolbar(this, { toolbarButtons: toolbarButtons2 });
+    this.toolbar.create();
+    this._toolbarSelectionListener = () => {
+      if (this.toolbar) {
+        this.toolbar.updateButtonStates();
+      }
+    };
+    this._toolbarInputListener = () => {
+      if (this.toolbar) {
+        this.toolbar.updateButtonStates();
+      }
+    };
+    this.textarea.addEventListener("selectionchange", this._toolbarSelectionListener);
+    this.textarea.addEventListener("input", this._toolbarInputListener);
+  }
+  /**
+   * Cleanup toolbar event listeners
+   * @private
+   */
+  _cleanupToolbarListeners() {
+    if (this._toolbarSelectionListener) {
+      this.textarea.removeEventListener("selectionchange", this._toolbarSelectionListener);
+      this._toolbarSelectionListener = null;
+    }
+    if (this._toolbarInputListener) {
+      this.textarea.removeEventListener("input", this._toolbarInputListener);
+      this._toolbarInputListener = null;
+    }
+  }
   /**
    * Apply options to the editor
    * @private
@@ -3318,6 +3540,13 @@ var _OverType = class _OverType {
     } else {
       this.container.classList.remove("overtype-auto-resize");
     }
+    if (this.options.toolbar && !this.toolbar) {
+      this._createToolbar();
+    } else if (!this.options.toolbar && this.toolbar) {
+      this._cleanupToolbarListeners();
+      this.toolbar.destroy();
+      this.toolbar = null;
+    }
     this.updatePreview();
   }
   /**
@@ -3327,7 +3556,8 @@ var _OverType = class _OverType {
     const text = this.textarea.value;
     const cursorPos = this.textarea.selectionStart;
     const activeLine = this._getCurrentLine(text, cursorPos);
-    const html = MarkdownParser.parse(text, activeLine, this.options.showActiveLineRaw);
+    const isPreviewMode = this.container.dataset.mode === "preview";
+    const html = MarkdownParser.parse(text, activeLine, this.options.showActiveLineRaw, this.options.codeHighlighter, isPreviewMode);
     this.preview.innerHTML = html || '<span style="color: #808080;">Start typing...</span>';
     this._applyCodeBlockBackgrounds();
     if (this.options.showStats && this.statsBar) {
@@ -3561,7 +3791,7 @@ var _OverType = class _OverType {
    */
   getRenderedHTML(options = {}) {
     const markdown = this.getValue();
-    let html = MarkdownParser.parse(markdown);
+    let html = MarkdownParser.parse(markdown, -1, false, this.options.codeHighlighter);
     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, "");
@@ -3613,6 +3843,33 @@ var _OverType = class _OverType {
     this._applyOptions();
     this.updatePreview();
   }
+  /**
+   * Set theme for this instance
+   * @param {string|Object} theme - Theme name or custom theme object
+   * @returns {this} Returns this for chaining
+   */
+  setTheme(theme) {
+    this.instanceTheme = theme;
+    const themeObj = typeof theme === "string" ? getTheme(theme) : theme;
+    const themeName = typeof themeObj === "string" ? themeObj : themeObj.name;
+    if (themeName) {
+      this.container.setAttribute("data-theme", themeName);
+    }
+    if (themeObj && themeObj.colors) {
+      const cssVars = themeToCSSVars(themeObj.colors);
+      this.container.style.cssText += cssVars;
+    }
+    this.updatePreview();
+    return this;
+  }
+  /**
+   * Set instance-specific code highlighter
+   * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
+   */
+  setCodeHighlighter(highlighter) {
+    this.options.codeHighlighter = highlighter;
+    this.updatePreview();
+  }
   /**
    * Update stats bar
    * @private
@@ -3715,37 +3972,39 @@ var _OverType = class _OverType {
     }
   }
   /**
-   * Show or hide the plain textarea (toggle overlay visibility)
-   * @param {boolean} show - true to show plain textarea (hide overlay), false to show overlay
-   * @returns {boolean} Current plain textarea state
+   * Show normal edit mode (overlay with markdown preview)
+   * @returns {this} Returns this for chaining
    */
-  showPlainTextarea(show) {
-    if (show) {
-      this.container.classList.add("plain-mode");
-    } else {
-      this.container.classList.remove("plain-mode");
-    }
+  showNormalEditMode() {
+    this.container.dataset.mode = "normal";
+    requestAnimationFrame(() => {
+      this.textarea.scrollTop = this.preview.scrollTop;
+      this.textarea.scrollLeft = this.preview.scrollLeft;
+    });
+    return this;
+  }
+  /**
+   * Show plain textarea mode (no overlay)
+   * @returns {this} Returns this for chaining
+   */
+  showPlainTextarea() {
+    this.container.dataset.mode = "plain";
     if (this.toolbar) {
       const toggleBtn = this.container.querySelector('[data-action="toggle-plain"]');
       if (toggleBtn) {
-        toggleBtn.classList.toggle("active", !show);
-        toggleBtn.title = show ? "Show markdown preview" : "Show plain textarea";
+        toggleBtn.classList.remove("active");
+        toggleBtn.title = "Show markdown preview";
       }
     }
-    return show;
+    return this;
   }
   /**
-   * Show/hide preview mode
-   * @param {boolean} show - Show preview mode if true, edit mode if false
-   * @returns {boolean} Current preview mode state
+   * Show preview mode (read-only view)
+   * @returns {this} Returns this for chaining
    */
-  showPreviewMode(show) {
-    if (show) {
-      this.container.classList.add("preview-mode");
-    } else {
-      this.container.classList.remove("preview-mode");
-    }
-    return show;
+  showPreviewMode() {
+    this.container.dataset.mode = "preview";
+    return this;
   }
   /**
    * Destroy the editor instance
@@ -3825,16 +4084,16 @@ var _OverType = class _OverType {
     _OverType.currentTheme = themeObj;
     _OverType.injectStyles(true);
     document.querySelectorAll(".overtype-container").forEach((container) => {
-      const themeName = typeof themeObj === "string" ? themeObj : themeObj.name;
-      if (themeName) {
-        container.setAttribute("data-theme", themeName);
+      const themeName2 = typeof themeObj === "string" ? themeObj : themeObj.name;
+      if (themeName2) {
+        container.setAttribute("data-theme", themeName2);
       }
     });
     document.querySelectorAll(".overtype-wrapper").forEach((wrapper) => {
       if (!wrapper.closest(".overtype-container")) {
-        const themeName = typeof themeObj === "string" ? themeObj : themeObj.name;
-        if (themeName) {
-          wrapper.setAttribute("data-theme", themeName);
+        const themeName2 = typeof themeObj === "string" ? themeObj : themeObj.name;
+        if (themeName2) {
+          wrapper.setAttribute("data-theme", themeName2);
         }
       }
       const instance = wrapper._instance;
@@ -3842,6 +4101,36 @@ var _OverType = class _OverType {
         instance.updatePreview();
       }
     });
+    const themeName = typeof themeObj === "string" ? themeObj : themeObj.name;
+    document.querySelectorAll("overtype-editor").forEach((webComponent) => {
+      if (themeName && typeof webComponent.setAttribute === "function") {
+        webComponent.setAttribute("theme", themeName);
+      }
+      if (typeof webComponent.refreshTheme === "function") {
+        webComponent.refreshTheme();
+      }
+    });
+  }
+  /**
+   * Set global code highlighter for all OverType instances
+   * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
+   */
+  static setCodeHighlighter(highlighter) {
+    MarkdownParser.setCodeHighlighter(highlighter);
+    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
@@ -3906,7 +4195,9 @@ OverType.currentTheme = solar;
 var overtype_default = OverType;
 export {
   OverType,
-  overtype_default as default
+  overtype_default as default,
+  defaultToolbarButtons,
+  toolbarButtons
 };
 /**
  * OverType - A lightweight markdown editor library with perfect WYSIWYG alignment