overtype 1.2.7 → 2.0.0

package/src/parser.js

@@ -10,6 +10,9 @@ export class MarkdownParser {
   // Track link index for anchor naming
   static linkIndex = 0;
 
+  // Global code highlighter function
+  static codeHighlighter = null;
+
   /**
    * Reset link index (call before parsing a new document)
    */
@@ -17,6 +20,14 @@ export class MarkdownParser {
     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
@@ -91,6 +102,25 @@ export class MarkdownParser {
     });
   }
 
+  /**
+   * 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(/^((?: )*)-\s+\[([ xX])\]\s+(.+)$/, (match, indent, checked, content) => {
+      if (isPreviewMode) {
+        // Preview mode: render actual checkbox
+        const isChecked = checked.toLowerCase() === 'x';
+        return `${indent}<li class="task-list"><input type="checkbox" disabled ${isChecked ? 'checked' : ''}> ${content}</li>`;
+      } else {
+        // Normal mode: keep syntax visible for alignment
+        return `${indent}<li class="task-list"><span class="syntax-marker">- [${checked}] </span>${content}</li>`;
+      }
+    });
+  }
+
   /**
    * Parse numbered lists
    * @param {string} html - HTML line to parse
@@ -355,7 +385,7 @@ export class MarkdownParser {
         // URL should NOT be processed for markdown - use it as-is
         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);
@@ -390,7 +420,7 @@ export class MarkdownParser {
    * @param {string} line - Raw markdown line
    * @returns {string} Parsed HTML line
    */
-  static parseLine(line) {
+  static parseLine(line, isPreviewMode = false) {
     let html = this.escapeHtml(line);
 
     // Preserve indentation
@@ -406,6 +436,7 @@ export class MarkdownParser {
     // Parse block elements
     html = this.parseHeader(html);
     html = this.parseBlockquote(html);
+    html = this.parseTaskList(html, isPreviewMode);  // Check task lists before regular bullet lists
     html = this.parseBulletList(html);
     html = this.parseNumberedList(html);
 
@@ -427,9 +458,10 @@ export class MarkdownParser {
    * @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) {
     // Reset link counter for each parse
     this.resetLinkIndex();
 
@@ -448,7 +480,7 @@ export class MarkdownParser {
       if (codeFenceRegex.test(line)) {
         inCodeBlock = !inCodeBlock;
         // Parse fence markers normally to get styled output
-        return this.parseLine(line);
+        return this.parseLine(line, isPreviewMode);
       }
 
       // If we're inside a code block, don't parse as markdown
@@ -459,26 +491,27 @@ export class MarkdownParser {
       }
 
       // Otherwise, parse the markdown normally
-      return this.parseLine(line);
+      return this.parseLine(line, isPreviewMode);
     });
 
     // Join without newlines to prevent extra spacing
     const html = parsedLines.join('');
 
     // Apply post-processing for list consolidation
-    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) {
     // Check if we're in a browser environment
     if (typeof document === 'undefined' || !document) {
       // In Node.js environment - do manual post-processing
-      return this.postProcessHTMLManual(html);
+      return this.postProcessHTMLManual(html, instanceHighlighter);
     }
 
     // Parse HTML string into DOM
@@ -525,9 +558,38 @@ export class MarkdownParser {
 
             // Store reference to the code element for adding content
             currentCodeBlock._codeElement = codeElement;
+            currentCodeBlock._language = lang;
+            currentCodeBlock._codeContent = '';
             continue;
           } else {
-            // End of code block - fence stays visible
+            // End of code block - apply highlighting if needed
+            // Use instance highlighter if provided, otherwise fall back to global highlighter
+            const highlighter = instanceHighlighter || this.codeHighlighter;
+            if (currentCodeBlock && highlighter && currentCodeBlock._codeContent) {
+              try {
+                const result = highlighter(
+                  currentCodeBlock._codeContent,
+                  currentCodeBlock._language || ''
+                );
+
+                // Check if result is a Promise (async highlighter)
+                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.');
+                  // Keep the plain text fallback that was already set
+                } else {
+                  // Synchronous highlighter
+                  // Verify highlighter returned non-empty string
+                  if (result && typeof result === 'string' && result.trim()) {
+                    currentCodeBlock._codeElement.innerHTML = result;
+                  }
+                  // else: keep the plain text fallback that was already set
+                }
+              } catch (error) {
+                console.warn('Code highlighting failed:', error);
+                // Keep the plain text content as fallback
+              }
+            }
+
             inCodeBlock = false;
             currentCodeBlock = null;
             continue;
@@ -538,14 +600,18 @@ export class MarkdownParser {
       // Check if we're in a code block - any div that's not a code fence
       if (inCodeBlock && currentCodeBlock && child.tagName === 'DIV' && !child.querySelector('.code-fence')) {
         const codeElement = currentCodeBlock._codeElement || currentCodeBlock.querySelector('code');
-        // Add the line content to the code block
-        if (codeElement.textContent.length > 0) {
-          codeElement.textContent += '\n';
+        // Add the line content to the code block content (for highlighting)
+        if (currentCodeBlock._codeContent.length > 0) {
+          currentCodeBlock._codeContent += '\n';
         }
         // Get the actual text content, preserving spaces
-        // Use textContent instead of innerHTML to avoid double-escaping
-        // textContent automatically decodes HTML entities
         const lineText = child.textContent.replace(/\u00A0/g, ' '); // \u00A0 is nbsp
+        currentCodeBlock._codeContent += lineText;
+
+        // Also add to the code element (fallback if no highlighter)
+        if (codeElement.textContent.length > 0) {
+          codeElement.textContent += '\n';
+        }
         codeElement.textContent += lineText;
         child.remove();
         continue;
@@ -611,9 +677,10 @@ export class MarkdownParser {
   /**
    * 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;
 
     // Process unordered lists
@@ -678,10 +745,46 @@ export class MarkdownParser {
       const lang = openFence.slice(3).trim();
       const langClass = lang ? ` class="language-${lang}"` : '';
 
+      // Apply code highlighting if available
+      let highlightedContent = codeContent;
+      // Use instance highlighter if provided, otherwise fall back to global highlighter
+      const highlighter = instanceHighlighter || this.codeHighlighter;
+      if (highlighter) {
+        try {
+          // CRITICAL: Decode HTML entities before passing to highlighter
+          // In the DOM path, textContent automatically decodes entities.
+          // In the manual path, we need to decode explicitly to avoid double-escaping.
+          const decodedCode = codeContent
+            .replace(/&quot;/g, '"')
+            .replace(/&#39;/g, "'")
+            .replace(/&lt;/g, '<')
+            .replace(/&gt;/g, '>')
+            .replace(/&amp;/g, '&');  // Must be last to avoid double-decoding
+
+          const result = highlighter(decodedCode, lang);
+
+          // Check if result is a Promise (async highlighter)
+          // Note: In Node.js context, we can't easily defer rendering, so we warn
+          if (result && typeof result.then === 'function') {
+            console.warn('Async highlighters are not supported in Node.js (non-DOM) context. Use synchronous highlighters for server-side rendering.');
+            // Fall back to escaped content
+          } else {
+            // Synchronous highlighter - verify returned non-empty string
+            if (result && typeof result === 'string' && result.trim()) {
+              highlightedContent = result;
+            }
+            // else: keep the escaped codeContent as fallback
+          }
+        } catch (error) {
+          console.warn('Code highlighting failed:', error);
+          // Fall back to original content
+        }
+      }
+
       // Keep fence markers visible as separate divs, with pre/code block between them
       let result = `<div><span class="code-fence">${openFence}</span></div>`;
-      // Content is already escaped, don't double-escape
-      result += `<pre class="code-block"><code${langClass}>${codeContent}</code></pre>`;
+      // Use highlighted content if available, otherwise use escaped content
+      result += `<pre class="code-block"><code${langClass}>${highlightedContent}</code></pre>`;
       result += `<div><span class="code-fence">${closeFence}</span></div>`;
 
       return result;

package/src/styles.js

@@ -356,12 +356,14 @@ export 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 */
@@ -588,11 +590,11 @@ export 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, 
@@ -600,7 +602,7 @@ export 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;
     }
 
@@ -653,37 +655,43 @@ export 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;
@@ -692,41 +700,63 @@ export 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;
@@ -734,7 +764,7 @@ export 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;
@@ -745,11 +775,11 @@ export 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;
@@ -759,16 +789,16 @@ export 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;
@@ -777,7 +807,7 @@ export 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;
@@ -785,7 +815,7 @@ export 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;
@@ -794,24 +824,56 @@ export 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}
   `;
 }