draftly 1.0.7 → 2.1.0

package/src/plugins/code-plugin.ts

@@ -1,11 +1,13 @@
 import { Decoration, EditorView, KeyBinding, WidgetType } from "@codemirror/view";
-import { syntaxTree } from "@codemirror/language";
+import { Extension } from "@codemirror/state";
+import { LanguageDescription, syntaxTree } from "@codemirror/language";
 import { DecorationContext, DecorationPlugin } from "../editor/plugin";
-import { createTheme, toggleMarkdownStyle } from "../editor";
-import { SyntaxNode } from "@lezer/common";
-import { highlightCode } from "@lezer/highlight";
+import { toggleMarkdownStyle } from "../editor";
+import { Parser, SyntaxNode } from "@lezer/common";
+import { Highlighter, highlightCode } from "@lezer/highlight";
 import { languages } from "@codemirror/language-data";
-import { classHighlighter } from "@lezer/highlight";
+import { createWrapSelectionInputHandler } from "../lib";
+import { codePluginTheme as theme } from "./code-plugin.theme";
 
 // ============================================================================
 // Constants
@@ -20,6 +22,21 @@ const CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="1
 /** Delay before resetting copy button state (ms) */
 const COPY_RESET_DELAY = 2000;
 
+/** Code fence marker in markdown blocks */
+const CODE_FENCE = "```";
+
+/** Regex for quoted code info values like title="file.ts" */
+const QUOTED_INFO_PATTERN = /(\w+)="([^"]*)"/g;
+
+/** Regex for /pattern/ with optional instance selectors (/pattern/1-3,5) */
+const TEXT_HIGHLIGHT_PATTERN = /\/([^/]+)\/(?:(\d+(?:-\d+)?(?:,\d+(?:-\d+)?)*))?/g;
+
+interface PreviewRenderContext {
+  sliceDoc(from: number, to: number): string;
+  sanitize(html: string): string;
+  syntaxHighlighters?: readonly Highlighter[];
+}
+
 // ============================================================================
 // Decorations
 // ============================================================================
@@ -40,6 +57,15 @@ const codeMarkDecorations = {
   // Highlights
   "code-line-highlight": Decoration.line({ class: "cm-draftly-code-line-highlight" }),
   "code-text-highlight": Decoration.mark({ class: "cm-draftly-code-text-highlight" }),
+
+  // Diff preview
+  "diff-line-add": Decoration.line({ class: "cm-draftly-code-line-diff-add" }),
+  "diff-line-del": Decoration.line({ class: "cm-draftly-code-line-diff-del" }),
+  "diff-sign-add": Decoration.mark({ class: "cm-draftly-code-diff-sign-add" }),
+  "diff-sign-del": Decoration.mark({ class: "cm-draftly-code-diff-sign-del" }),
+  "diff-mod-add": Decoration.mark({ class: "cm-draftly-code-diff-mod-add" }),
+  "diff-mod-del": Decoration.mark({ class: "cm-draftly-code-diff-mod-del" }),
+  "diff-escape-hidden": Decoration.replace({}),
 };
 
 /**
@@ -62,19 +88,36 @@ export interface CodeBlockProperties {
   /** Language identifier (first token) */
   language: string;
   /** Show line numbers, optionally starting from a specific number */
-  lineNumbers?: number | boolean;
+  showLineNumbers?: number | boolean;
   /** Title to display */
   title?: string;
   /** Caption to display */
   caption?: string;
   /** Show copy button */
   copy?: boolean;
+  /** Enable diff preview mode */
+  diff?: boolean;
   /** Lines to highlight (e.g., [2,3,4,5,9]) */
   highlightLines?: number[];
   /** Text patterns to highlight with optional instance selection */
   highlightText?: TextHighlight[];
 }
 
+type DiffLineKind = "normal" | "addition" | "deletion";
+
+interface DiffLineState {
+  kind: DiffLineKind;
+  content: string;
+  contentOffset: number;
+  escapedMarker: boolean;
+  modificationRanges?: Array<[number, number]>;
+}
+
+interface DiffDisplayLineNumbers {
+  oldLine: number | null;
+  newLine: number | null;
+}
+
 // ============================================================================
 // Widgets
 // ============================================================================
@@ -213,6 +256,7 @@ export class CodePlugin extends DecorationPlugin {
   readonly version = "1.0.0";
   override decorationPriority = 25;
   override readonly requiredNodes = ["InlineCode", "FencedCode", "CodeMark", "CodeInfo", "CodeText"] as const;
+  private readonly parserCache = new Map<string, Promise<Parser | null>>();
 
   /**
    * Plugin theme
@@ -239,6 +283,16 @@ export class CodePlugin extends DecorationPlugin {
     ];
   }
 
+  /**
+   * Intercepts backtick typing to wrap selected text as inline code.
+   *
+   * If user types '`' while text is selected, wraps each selected range
+   * with backticks (selected -> `selected`).
+   */
+  override getExtensions(): Extension[] {
+    return [createWrapSelectionInputHandler({ "`": "`" })];
+  }
+
   /**
    * Toggle code block on current line or selected lines
    */
@@ -258,8 +312,8 @@ export class CodePlugin extends DecorationPlugin {
     const nextLine = state.doc.line(nextLineNum);
 
     const isWrapped =
-      prevLine.text.trim().startsWith("```") &&
-      nextLine.text.trim() === "```" &&
+      prevLine.text.trim().startsWith(CODE_FENCE) &&
+      nextLine.text.trim() === CODE_FENCE &&
       prevLineNum !== startLine.number &&
       nextLineNum !== endLine.number;
 
@@ -273,8 +327,8 @@ export class CodePlugin extends DecorationPlugin {
       });
     } else {
       // Wrap with code fence
-      const openFence = "```\n";
-      const closeFence = "\n```";
+      const openFence = `${CODE_FENCE}\n`;
+      const closeFence = `\n${CODE_FENCE}`;
 
       view.dispatch({
         changes: [
@@ -306,6 +360,7 @@ export class CodePlugin extends DecorationPlugin {
    *   lineNumbers: 5,
    *   title: "hello.tsx",
    *   copy: true,
+   *   diff: false,
    *   highlightLines: [2,3,4,5],
    *   highlightText: [{ pattern: "Hello", instances: [3,4,5] }]
    * }
@@ -320,17 +375,30 @@ export class CodePlugin extends DecorationPlugin {
 
     let remaining = codeInfo.trim();
 
-    // Extract language (first word before any special tokens)
-    const langMatch = remaining.match(/^(\w+)/);
-    if (langMatch && langMatch[1]) {
-      props.language = langMatch[1];
-      remaining = remaining.slice(langMatch[0].length).trim();
+    // Extract language (first token), but only when it isn't a known directive.
+    const firstTokenMatch = remaining.match(/^([^\s]+)/);
+    if (firstTokenMatch && firstTokenMatch[1]) {
+      const firstToken = firstTokenMatch[1];
+      const normalizedToken = firstToken.toLowerCase();
+      const isLineNumberDirective = /^(?:line-numbers|linenumbers|showlinenumbers)(?:\{\d+\})?$/.test(
+        normalizedToken
+      );
+      const isKnownDirective =
+        isLineNumberDirective ||
+        normalizedToken === "copy" ||
+        normalizedToken === "diff" ||
+        normalizedToken.startsWith("{") ||
+        normalizedToken.startsWith("/");
+
+      if (!isKnownDirective) {
+        props.language = firstToken;
+        remaining = remaining.slice(firstToken.length).trim();
+      }
     }
 
     // Extract quoted values (title="..." caption="...")
-    const quotedPattern = /(\w+)="([^"]*)"/g;
     let quotedMatch;
-    while ((quotedMatch = quotedPattern.exec(remaining)) !== null) {
+    while ((quotedMatch = QUOTED_INFO_PATTERN.exec(remaining)) !== null) {
       const key = quotedMatch[1]?.toLowerCase();
       const value = quotedMatch[2];
 
@@ -341,15 +409,16 @@ export class CodePlugin extends DecorationPlugin {
       }
     }
     // Remove matched quoted values
-    remaining = remaining.replace(quotedPattern, "").trim();
+    remaining = remaining.replace(QUOTED_INFO_PATTERN, "").trim();
 
-    // Check for line-numbers with optional start value
-    const lineNumbersMatch = remaining.match(/line-numbers(?:\{(\d+)\})?/);
+    // Check for line numbers with optional start value.
+    // Supports both `line-numbers` and legacy `showLineNumbers` tokens.
+    const lineNumbersMatch = remaining.match(/\b(?:line-numbers|lineNumbers|showLineNumbers)(?:\{(\d+)\})?/i);
     if (lineNumbersMatch) {
       if (lineNumbersMatch[1]) {
-        props.lineNumbers = parseInt(lineNumbersMatch[1], 10);
+        props.showLineNumbers = parseInt(lineNumbersMatch[1], 10);
       } else {
-        props.lineNumbers = true;
+        props.showLineNumbers = true;
       }
       remaining = remaining.replace(lineNumbersMatch[0], "").trim();
     }
@@ -360,28 +429,16 @@ export class CodePlugin extends DecorationPlugin {
       remaining = remaining.replace(/\bcopy\b/, "").trim();
     }
 
+    // Check for diff flag
+    if (/\bdiff\b/.test(remaining)) {
+      props.diff = true;
+      remaining = remaining.replace(/\bdiff\b/, "").trim();
+    }
+
     // Extract line highlights {2-4,5,9}
     const lineHighlightMatch = remaining.match(/\{([^}]+)\}/);
     if (lineHighlightMatch && lineHighlightMatch[1]) {
-      const highlightLines: number[] = [];
-      const parts = lineHighlightMatch[1].split(",");
-
-      for (const part of parts) {
-        const trimmed = part.trim();
-        const rangeMatch = trimmed.match(/^(\d+)-(\d+)$/);
-
-        if (rangeMatch && rangeMatch[1] && rangeMatch[2]) {
-          // Range: 2-4 -> [2,3,4]
-          const start = parseInt(rangeMatch[1], 10);
-          const end = parseInt(rangeMatch[2], 10);
-          for (let i = start; i <= end; i++) {
-            highlightLines.push(i);
-          }
-        } else if (/^\d+$/.test(trimmed)) {
-          // Individual number
-          highlightLines.push(parseInt(trimmed, 10));
-        }
-      }
+      const highlightLines = this.parseNumberList(lineHighlightMatch[1]);
 
       if (highlightLines.length > 0) {
         props.highlightLines = highlightLines;
@@ -390,11 +447,10 @@ export class CodePlugin extends DecorationPlugin {
     }
 
     // Extract text/regex highlights /pattern/ or /pattern/3-5 or /pattern/3,5
-    const textHighlightPattern = /\/([^/]+)\/(?:(\d+(?:-\d+)?(?:,\d+(?:-\d+)?)*))?/g;
     let textMatch;
     const highlightText: TextHighlight[] = [];
 
-    while ((textMatch = textHighlightPattern.exec(remaining)) !== null) {
+    while ((textMatch = TEXT_HIGHLIGHT_PATTERN.exec(remaining)) !== null) {
       if (!textMatch[1]) continue;
       const highlight: TextHighlight = {
         pattern: textMatch[1],
@@ -402,23 +458,7 @@ export class CodePlugin extends DecorationPlugin {
 
       // Parse instance selection if present
       if (textMatch[2]) {
-        const instanceStr = textMatch[2];
-        const instances: number[] = [];
-        const instanceParts = instanceStr.split(",");
-
-        for (const part of instanceParts) {
-          const rangeMatch = part.match(/^(\d+)-(\d+)$/);
-          if (rangeMatch && rangeMatch[1] && rangeMatch[2]) {
-            // Range: 3-5 -> [3,4,5]
-            const start = parseInt(rangeMatch[1], 10);
-            const end = parseInt(rangeMatch[2], 10);
-            for (let i = start; i <= end; i++) {
-              instances.push(i);
-            }
-          } else if (/^\d+$/.test(part)) {
-            instances.push(parseInt(part, 10));
-          }
-        }
+        const instances = this.parseNumberList(textMatch[2]);
 
         if (instances.length > 0) {
           highlight.instances = instances;
@@ -440,200 +480,311 @@ export class CodePlugin extends DecorationPlugin {
    * Handles line numbers, highlights, header/caption widgets, and fence visibility.
    */
   buildDecorations(ctx: DecorationContext): void {
-    const { view, decorations } = ctx;
-    const tree = syntaxTree(view.state);
+    const tree = syntaxTree(ctx.view.state);
 
     tree.iterate({
       enter: (node) => {
-        const { from, to, name } = node;
-
-        // Handle inline code
-        if (name === "InlineCode") {
-          // Add inline code styling
-          decorations.push(codeMarkDecorations["inline-code"].range(from, to));
-
-          // Hide backticks when cursor is not in range
-          const cursorInRange = ctx.selectionOverlapsRange(from, to);
-          if (!cursorInRange) {
-            // Find the CodeMark children (backticks)
-            for (let child = node.node.firstChild; child; child = child.nextSibling) {
-              if (child.name === "CodeMark") {
-                decorations.push(codeMarkDecorations["inline-mark"].range(child.from, child.to));
-              }
-            }
-          }
+        if (node.name === "InlineCode") {
+          this.decorateInlineCode(node, ctx);
+          return;
         }
 
-        // Handle fenced code blocks
-        if (name === "FencedCode") {
-          const nodeLineStart = view.state.doc.lineAt(from);
-          const nodeLineEnd = view.state.doc.lineAt(to);
-          const cursorInRange = ctx.selectionOverlapsRange(nodeLineStart.from, nodeLineEnd.to);
-
-          // Extract properties from CodeInfo
-          let infoProps: CodeBlockProperties = { language: "" };
-          for (let child = node.node.firstChild; child; child = child.nextSibling) {
-            if (child.name === "CodeInfo") {
-              infoProps = this.parseCodeInfo(view.state.sliceDoc(child.from, child.to).trim());
-              break;
-            }
-          }
+        if (node.name === "FencedCode") {
+          this.decorateFencedCode(node, ctx);
+        }
+      },
+    });
+  }
 
-          // Calculate line number width for styling (if line numbers enabled)
-          const totalCodeLines = nodeLineEnd.number - nodeLineStart.number - 1; // Exclude fence lines
-          const startLineNum = typeof infoProps.lineNumbers === "number" ? infoProps.lineNumbers : 1;
-          const maxLineNum = startLineNum + totalCodeLines - 1;
-          const lineNumWidth = Math.max(String(maxLineNum).length, String(startLineNum).length);
-
-          // Track code line index (excluding fence lines)
-          let codeLineIndex = 0;
-
-          // Extract code content for copy button
-          let codeContent = "";
-          for (let child = node.node.firstChild; child; child = child.nextSibling) {
-            if (child.name === "CodeText") {
-              codeContent = view.state.sliceDoc(child.from, child.to);
-              break;
-            }
-          }
+  private decorateInlineCode(node: { from: number; to: number; node: SyntaxNode }, ctx: DecorationContext): void {
+    const { from, to } = node;
+    ctx.decorations.push(codeMarkDecorations["inline-code"].range(from, to));
 
-          const shouldShowHeader = !cursorInRange && (infoProps.title || infoProps.copy || infoProps.language);
-          const shouldShowCaption = !cursorInRange && infoProps.caption;
+    if (ctx.selectionOverlapsRange(from, to)) {
+      return;
+    }
 
-          // Add header widget when cursor not in range and (title, copy, or language is set)
-          if (shouldShowHeader) {
-            decorations.push(
-              Decoration.widget({
-                widget: new CodeBlockHeaderWidget(infoProps, codeContent),
-                block: false,
-              }).range(nodeLineStart.from)
-            );
-          }
+    for (let child = node.node.firstChild; child; child = child.nextSibling) {
+      if (child.name === "CodeMark") {
+        ctx.decorations.push(codeMarkDecorations["inline-mark"].range(child.from, child.to));
+      }
+    }
+  }
 
-          // Add line decorations for all lines in the block
-          for (let i = nodeLineStart.number; i <= nodeLineEnd.number; i++) {
-            const line = view.state.doc.line(i);
-            const isFenceLine = i === nodeLineStart.number || i === nodeLineEnd.number;
-            const relativeLineNum = startLineNum + codeLineIndex;
-
-            // Base line decoration
-            decorations.push(codeMarkDecorations["code-block-line"].range(line.from));
-
-            // Add start/end line decorations
-            if (i === nodeLineStart.number) {
-              decorations.push(codeMarkDecorations["code-block-line-start"].range(line.from));
-              // Add class for header presence
-              if (shouldShowHeader) {
-                decorations.push(
-                  Decoration.line({
-                    class: "cm-draftly-code-block-has-header",
-                  }).range(line.from)
-                );
-              }
-            }
-            if (i === nodeLineEnd.number) {
-              decorations.push(codeMarkDecorations["code-block-line-end"].range(line.from));
-              // Add class for caption presence
-              if (shouldShowCaption) {
-                decorations.push(
-                  Decoration.line({
-                    class: "cm-draftly-code-block-has-caption",
-                  }).range(line.from)
-                );
-              }
-            }
-
-            // Line numbers (only for code lines, not fence lines)
-            if (!isFenceLine && infoProps.lineNumbers) {
-              decorations.push(
-                Decoration.line({
-                  class: "cm-draftly-code-line-numbered",
-                  attributes: {
-                    "data-line-num": String(relativeLineNum),
-                    style: `--line-num-width: ${lineNumWidth}ch`,
-                  },
-                }).range(line.from)
-              );
-            }
-
-            // Line highlight (check if this line should be highlighted)
-            if (!isFenceLine && infoProps.highlightLines) {
-              if (infoProps.highlightLines.includes(codeLineIndex + 1)) {
-                decorations.push(codeMarkDecorations["code-line-highlight"].range(line.from));
-              }
-            }
-
-            // Text highlights
-            if (!isFenceLine && infoProps.highlightText && infoProps.highlightText.length > 0) {
-              const lineText = view.state.sliceDoc(line.from, line.to);
-
-              for (const textHighlight of infoProps.highlightText) {
-                try {
-                  const regex = new RegExp(textHighlight.pattern, "g");
-                  let match;
-                  let matchIndex = 0;
-
-                  while ((match = regex.exec(lineText)) !== null) {
-                    matchIndex++;
-
-                    // Check if this instance should be highlighted
-                    const shouldHighlight = !textHighlight.instances || textHighlight.instances.includes(matchIndex);
-
-                    if (shouldHighlight) {
-                      const matchFrom = line.from + match.index;
-                      const matchTo = matchFrom + match[0].length;
-                      decorations.push(codeMarkDecorations["code-text-highlight"].range(matchFrom, matchTo));
-                    }
-                  }
-                } catch {
-                  // Invalid regex, skip
-                }
-              }
-            }
-
-            // Increment code line index (only for non-fence lines)
-            if (!isFenceLine) {
-              codeLineIndex++;
-            }
-          }
+  private decorateFencedCode(node: { from: number; to: number; node: SyntaxNode }, ctx: DecorationContext): void {
+    const { view, decorations } = ctx;
+    const nodeLineStart = view.state.doc.lineAt(node.from);
+    const nodeLineEnd = view.state.doc.lineAt(node.to);
+    const cursorInRange = ctx.selectionOverlapsRange(nodeLineStart.from, nodeLineEnd.to);
 
-          // Find CodeMark and CodeInfo children
-          for (let child = node.node.firstChild; child; child = child.nextSibling) {
-            if (child.name === "CodeMark" || child.name === "CodeInfo") {
-              if (cursorInRange) {
-                // Show fence markers with styling when cursor is in range
-                decorations.push(codeMarkDecorations["code-fence"].range(child.from, child.to));
-              } else {
-                // Hide fence markers when cursor is not in range
-                decorations.push(codeMarkDecorations["code-hidden"].range(child.from, child.to));
-              }
-            }
-          }
+    let infoProps: CodeBlockProperties = { language: "" };
+    let codeContent = "";
 
-          // Add caption widget when cursor not in range and caption is set
-          if (!cursorInRange && infoProps.caption) {
-            decorations.push(
-              Decoration.widget({
-                widget: new CodeBlockCaptionWidget(infoProps.caption),
-                block: false,
-                side: 1, // After the content
-              }).range(nodeLineEnd.to)
-            );
+    for (let child = node.node.firstChild; child; child = child.nextSibling) {
+      if (child.name === "CodeInfo") {
+        infoProps = this.parseCodeInfo(view.state.sliceDoc(child.from, child.to).trim());
+      }
+      if (child.name === "CodeText") {
+        codeContent = view.state.sliceDoc(child.from, child.to);
+      }
+    }
+
+    const codeLines: string[] = [];
+    for (let i = nodeLineStart.number + 1; i <= nodeLineEnd.number - 1; i++) {
+      const codeLine = view.state.doc.line(i);
+      codeLines.push(view.state.sliceDoc(codeLine.from, codeLine.to));
+    }
+
+    const totalCodeLines = nodeLineEnd.number - nodeLineStart.number - 1;
+    const startLineNum = typeof infoProps.showLineNumbers === "number" ? infoProps.showLineNumbers : 1;
+    const maxLineNum = startLineNum + totalCodeLines - 1;
+    const lineNumWidth = Math.max(String(maxLineNum).length, String(startLineNum).length);
+    const highlightInstanceCounters = new Array(infoProps.highlightText?.length ?? 0).fill(0);
+
+    const diffStates = infoProps.diff ? this.analyzeDiffLines(codeLines) : [];
+    const diffDisplayLineNumbers = infoProps.diff ? this.computeDiffDisplayLineNumbers(diffStates, startLineNum) : [];
+    const displayLineNumbers = infoProps.diff
+      ? diffDisplayLineNumbers.map((numbers, index) => numbers.newLine ?? numbers.oldLine ?? startLineNum + index)
+      : codeLines.map((_, index) => startLineNum + index);
+    const diffHighlightLineNumbers = infoProps.diff
+      ? this.computeDiffDisplayLineNumbers(diffStates, startLineNum).map(
+          (numbers, index) => numbers.newLine ?? numbers.oldLine ?? startLineNum + index
+        )
+      : [];
+    const maxOldDiffLineNum = diffDisplayLineNumbers.reduce((max, numbers) => {
+      const oldLine = numbers.oldLine ?? 0;
+      return oldLine > max ? oldLine : max;
+    }, startLineNum);
+    const maxNewDiffLineNum = diffDisplayLineNumbers.reduce((max, numbers) => {
+      const newLine = numbers.newLine ?? 0;
+      return newLine > max ? newLine : max;
+    }, startLineNum);
+    const diffOldLineNumWidth = Math.max(String(startLineNum).length, String(maxOldDiffLineNum).length);
+    const diffNewLineNumWidth = Math.max(String(startLineNum).length, String(maxNewDiffLineNum).length);
+
+    const shouldShowHeader = !cursorInRange && (infoProps.title || infoProps.copy || infoProps.language);
+    const shouldShowCaption = !cursorInRange && !!infoProps.caption;
+
+    if (shouldShowHeader) {
+      decorations.push(
+        Decoration.widget({
+          widget: new CodeBlockHeaderWidget(infoProps, codeContent),
+          block: false,
+          side: -1,
+        }).range(nodeLineStart.from)
+      );
+    }
+
+    let codeLineIndex = 0;
+    for (let lineNumber = nodeLineStart.number; lineNumber <= nodeLineEnd.number; lineNumber++) {
+      const line = view.state.doc.line(lineNumber);
+      const isFenceLine = lineNumber === nodeLineStart.number || lineNumber === nodeLineEnd.number;
+      const relativeLineNum = displayLineNumbers[codeLineIndex] ?? startLineNum + codeLineIndex;
+
+      decorations.push(codeMarkDecorations["code-block-line"].range(line.from));
+
+      if (lineNumber === nodeLineStart.number) {
+        decorations.push(codeMarkDecorations["code-block-line-start"].range(line.from));
+        if (shouldShowHeader) {
+          decorations.push(Decoration.line({ class: "cm-draftly-code-block-has-header" }).range(line.from));
+        }
+      }
+
+      if (lineNumber === nodeLineEnd.number) {
+        decorations.push(codeMarkDecorations["code-block-line-end"].range(line.from));
+        if (shouldShowCaption) {
+          decorations.push(Decoration.line({ class: "cm-draftly-code-block-has-caption" }).range(line.from));
+        }
+      }
+
+      if (!isFenceLine && infoProps.showLineNumbers && !infoProps.diff) {
+        decorations.push(
+          Decoration.line({
+            class: "cm-draftly-code-line-numbered",
+            attributes: {
+              "data-line-num": String(relativeLineNum),
+              style: `--line-num-width: ${lineNumWidth}ch`,
+            },
+          }).range(line.from)
+        );
+      }
+
+      if (!isFenceLine && infoProps.showLineNumbers && infoProps.diff) {
+        const diffLineNumbers = diffDisplayLineNumbers[codeLineIndex];
+        const diffState = diffStates[codeLineIndex];
+        const diffMarker = diffState?.kind === "addition" ? "+" : diffState?.kind === "deletion" ? "-" : " ";
+        decorations.push(
+          Decoration.line({
+            class: "cm-draftly-code-line-numbered-diff",
+            attributes: {
+              "data-line-num-old": diffLineNumbers?.oldLine != null ? String(diffLineNumbers.oldLine) : "",
+              "data-line-num-new": diffLineNumbers?.newLine != null ? String(diffLineNumbers.newLine) : "",
+              "data-diff-marker": diffMarker,
+              style: `--line-num-old-width: ${diffOldLineNumWidth}ch; --line-num-new-width: ${diffNewLineNumWidth}ch`,
+            },
+          }).range(line.from)
+        );
+      }
+
+      if (!isFenceLine && infoProps.diff) {
+        this.decorateDiffLine(
+          line,
+          codeLineIndex,
+          diffStates,
+          cursorInRange,
+          !infoProps.showLineNumbers,
+          decorations
+        );
+      }
+
+      if (!isFenceLine && infoProps.highlightLines) {
+        const highlightLineNumber = infoProps.diff
+          ? (diffHighlightLineNumbers[codeLineIndex] ?? codeLineIndex + 1)
+          : startLineNum + codeLineIndex;
+        if (infoProps.highlightLines.includes(highlightLineNumber)) {
+          decorations.push(codeMarkDecorations["code-line-highlight"].range(line.from));
+        }
+      }
+
+      if (!isFenceLine && infoProps.highlightText?.length) {
+        this.decorateTextHighlights(
+          line.from,
+          view.state.sliceDoc(line.from, line.to),
+          infoProps.highlightText,
+          highlightInstanceCounters,
+          decorations
+        );
+      }
+
+      if (!isFenceLine) {
+        codeLineIndex++;
+      }
+    }
+
+    this.decorateFenceMarkers(node.node, cursorInRange, decorations);
+
+    if (!cursorInRange && infoProps.caption) {
+      decorations.push(
+        Decoration.widget({
+          widget: new CodeBlockCaptionWidget(infoProps.caption),
+          block: false,
+          side: 1,
+        }).range(nodeLineEnd.to)
+      );
+    }
+  }
+
+  private decorateFenceMarkers(
+    node: SyntaxNode,
+    cursorInRange: boolean,
+    decorations: DecorationContext["decorations"]
+  ): void {
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+      if (child.name === "CodeMark" || child.name === "CodeInfo") {
+        decorations.push(
+          (cursorInRange ? codeMarkDecorations["code-fence"] : codeMarkDecorations["code-hidden"]).range(
+            child.from,
+            child.to
+          )
+        );
+      }
+    }
+  }
+
+  private decorateDiffLine(
+    line: { from: number; to: number },
+    codeLineIndex: number,
+    diffStates: DiffLineState[],
+    cursorInRange: boolean,
+    showDiffMarkerGutter: boolean,
+    decorations: DecorationContext["decorations"]
+  ): void {
+    const diffState = diffStates[codeLineIndex];
+    const diffMarker = diffState?.kind === "addition" ? "+" : diffState?.kind === "deletion" ? "-" : " ";
+
+    if (showDiffMarkerGutter) {
+      decorations.push(
+        Decoration.line({
+          class: "cm-draftly-code-line-diff-gutter",
+          attributes: {
+            "data-diff-marker": diffMarker,
+          },
+        }).range(line.from)
+      );
+    }
+
+    if (diffState?.kind === "addition") {
+      decorations.push(codeMarkDecorations["diff-line-add"].range(line.from));
+      if (cursorInRange && line.to > line.from) {
+        decorations.push(codeMarkDecorations["diff-sign-add"].range(line.from, line.from + 1));
+      }
+    }
+
+    if (diffState?.kind === "deletion") {
+      decorations.push(codeMarkDecorations["diff-line-del"].range(line.from));
+      if (cursorInRange && line.to > line.from) {
+        decorations.push(codeMarkDecorations["diff-sign-del"].range(line.from, line.from + 1));
+      }
+    }
+
+    if (
+      !cursorInRange &&
+      line.to > line.from &&
+      (diffState?.escapedMarker || diffState?.kind === "addition" || diffState?.kind === "deletion")
+    ) {
+      decorations.push(codeMarkDecorations["diff-escape-hidden"].range(line.from, line.from + 1));
+    }
+
+    if (diffState?.modificationRanges?.length) {
+      for (const [start, end] of diffState.modificationRanges) {
+        const rangeFrom = line.from + diffState.contentOffset + start;
+        const rangeTo = line.from + diffState.contentOffset + end;
+        if (rangeTo > rangeFrom) {
+          decorations.push(
+            (diffState.kind === "addition"
+              ? codeMarkDecorations["diff-mod-add"]
+              : codeMarkDecorations["diff-mod-del"]
+            ).range(rangeFrom, rangeTo)
+          );
+        }
+      }
+    }
+  }
+
+  private decorateTextHighlights(
+    lineFrom: number,
+    lineText: string,
+    highlights: TextHighlight[],
+    instanceCounters: number[],
+    decorations: DecorationContext["decorations"]
+  ): void {
+    for (const [highlightIndex, textHighlight] of highlights.entries()) {
+      try {
+        const regex = new RegExp(textHighlight.pattern, "g");
+        let match: RegExpExecArray | null;
+
+        while ((match = regex.exec(lineText)) !== null) {
+          instanceCounters[highlightIndex] = (instanceCounters[highlightIndex] ?? 0) + 1;
+          const globalMatchIndex = instanceCounters[highlightIndex];
+          const shouldHighlight = !textHighlight.instances || textHighlight.instances.includes(globalMatchIndex);
+
+          if (shouldHighlight) {
+            const matchFrom = lineFrom + match.index;
+            const matchTo = matchFrom + match[0].length;
+            decorations.push(codeMarkDecorations["code-text-highlight"].range(matchFrom, matchTo));
           }
         }
-      },
-    });
+      } catch {
+        // Invalid regex; ignore this highlight pattern.
+      }
+    }
   }
 
   /**
    * Render code elements to HTML for static preview.
    * Applies syntax highlighting using @lezer/highlight.
    */
-  override renderToHTML(
-    node: SyntaxNode,
-    children: string,
-    ctx: { sliceDoc(from: number, to: number): string; sanitize(html: string): string }
-  ): string | null {
+  override async renderToHTML(node: SyntaxNode, _children: string, ctx: PreviewRenderContext): Promise<string | null> {
     // Hide CodeMark (backticks)
     if (node.name === "CodeMark") {
       return "";
@@ -648,7 +799,7 @@ export class CodePlugin extends DecorationPlugin {
       if (match && match[1]) {
         content = match[1];
       }
-      return `<code class="cm-draftly-code-inline" style="padding: 0.1rem 0.25rem">${ctx.sanitize(content)}</code>`;
+      return `<code class="cm-draftly-code-inline" style="padding: 0.1rem 0.25rem">${this.escapeHtml(content)}</code>`;
     }
 
     // Fenced code block
@@ -680,9 +831,9 @@ export class CodePlugin extends DecorationPlugin {
         html += `<div class="cm-draftly-code-header">`;
         html += `<div class="cm-draftly-code-header-left">`;
         if (props.title) {
-          html += `<span class="cm-draftly-code-header-title">${ctx.sanitize(props.title)}</span>`;
+          html += `<span class="cm-draftly-code-header-title">${this.escapeHtml(props.title)}</span>`;
         } else if (props.language) {
-          html += `<span class="cm-draftly-code-header-lang">${ctx.sanitize(props.language)}</span>`;
+          html += `<span class="cm-draftly-code-header-lang">${this.escapeHtml(props.language)}</span>`;
         }
         html += `</div>`;
         if (props.copy !== false) {
@@ -699,38 +850,96 @@ export class CodePlugin extends DecorationPlugin {
       }
 
       // Calculate line number info
-      const startLineNum = typeof props.lineNumbers === "number" ? props.lineNumbers : 1;
-      const lineNumWidth = String(startLineNum + codeLines.length - 1).length;
+      const startLineNum = typeof props.showLineNumbers === "number" ? props.showLineNumbers : 1;
+      const previewHighlightCounters = new Array(props.highlightText?.length ?? 0).fill(0);
+      const diffStates = props.diff ? this.analyzeDiffLines(codeLines) : [];
+      const previewDiffLineNumbers = props.diff ? this.computeDiffDisplayLineNumbers(diffStates, startLineNum) : [];
+      const previewLineNumbers = props.diff
+        ? previewDiffLineNumbers.map((numbers, index) => numbers.newLine ?? numbers.oldLine ?? startLineNum + index)
+        : codeLines.map((_, index) => startLineNum + index);
+      const previewHighlightLineNumbers = props.diff
+        ? this.computeDiffDisplayLineNumbers(diffStates, startLineNum).map(
+            (numbers, index) => numbers.newLine ?? numbers.oldLine ?? startLineNum + index
+          )
+        : [];
+      const lineNumWidth = String(Math.max(...previewLineNumbers, startLineNum)).length;
+      const previewOldLineNumWidth = String(
+        Math.max(
+          ...previewDiffLineNumbers.map((numbers) => numbers.oldLine ?? 0),
+          startLineNum
+        )
+      ).length;
+      const previewNewLineNumWidth = String(
+        Math.max(
+          ...previewDiffLineNumbers.map((numbers) => numbers.newLine ?? 0),
+          startLineNum
+        )
+      ).length;
+      const previewContentLines = props.diff ? diffStates.map((state) => state.content) : codeLines;
+      const highlightedLines = await this.highlightCodeLines(
+        previewContentLines.join("\n"),
+        props.language || "",
+        ctx.syntaxHighlighters
+      );
 
       // Code block with line processing
       const hasHeader = showHeader ? " cm-draftly-code-block-has-header" : "";
       const hasCaption = props.caption ? " cm-draftly-code-block-has-caption" : "";
-      html += `<pre class="cm-draftly-code-block${hasHeader}${hasCaption}"${props.language ? ` data-lang="${ctx.sanitize(props.language)}"` : ""}>`;
+      html += `<pre class="cm-draftly-code-block${hasHeader}${hasCaption}"${props.language ? ` data-lang="${this.escapeAttribute(props.language)}"` : ""}>`;
       html += `<code>`;
 
       // Process each line
       codeLines.forEach((line, index) => {
-        const lineNum = startLineNum + index;
-        const isHighlighted = props.highlightLines?.includes(index + 1);
+        const lineNum = previewLineNumbers[index] ?? startLineNum + index;
+        const highlightLineNumber = props.diff
+          ? (previewHighlightLineNumbers[index] ?? startLineNum + index)
+          : startLineNum + index;
+        const isHighlighted = props.highlightLines?.includes(highlightLineNumber);
+        const diffState = props.diff ? diffStates[index] : undefined;
+        const diffLineNumbers = props.diff ? previewDiffLineNumbers[index] : undefined;
 
         // Line classes
         const lineClasses: string[] = ["cm-draftly-code-line"];
         if (isHighlighted) lineClasses.push("cm-draftly-code-line-highlight");
-        if (props.lineNumbers) lineClasses.push("cm-draftly-code-line-numbered");
+        if (props.showLineNumbers) {
+          lineClasses.push(props.diff ? "cm-draftly-code-line-numbered-diff" : "cm-draftly-code-line-numbered");
+        }
+        if (diffState?.kind === "addition") lineClasses.push("cm-draftly-code-line-diff-add");
+        if (diffState?.kind === "deletion") lineClasses.push("cm-draftly-code-line-diff-del");
 
         // Line attributes
         const lineAttrs: string[] = [`class="${lineClasses.join(" ")}"`];
-        if (props.lineNumbers) {
+        if (props.showLineNumbers && !props.diff) {
           lineAttrs.push(`data-line-num="${lineNum}"`);
           lineAttrs.push(`style="--line-num-width: ${lineNumWidth}ch"`);
         }
+        if (props.diff) {
+          const diffMarker = diffState?.kind === "addition" ? "+" : diffState?.kind === "deletion" ? "-" : " ";
+          if (props.showLineNumbers) {
+            lineAttrs.push(`data-line-num-old="${diffLineNumbers?.oldLine != null ? diffLineNumbers.oldLine : ""}"`);
+            lineAttrs.push(`data-line-num-new="${diffLineNumbers?.newLine != null ? diffLineNumbers.newLine : ""}"`);
+            lineAttrs.push(`data-diff-marker="${diffMarker}"`);
+            lineAttrs.push(
+              `style="--line-num-old-width: ${previewOldLineNumWidth}ch; --line-num-new-width: ${previewNewLineNumWidth}ch"`
+            );
+          } else {
+            lineAttrs.push(`data-diff-marker="${diffMarker}"`);
+            lineClasses.push("cm-draftly-code-line-diff-gutter");
+            lineAttrs[0] = `class="${lineClasses.join(" ")}"`;
+          }
+        }
 
         // Highlight text content
-        let lineContent = this.highlightCodeLine(line, props.language || "", ctx);
+        const highlightedLine = highlightedLines[index] ?? this.escapeHtml(previewContentLines[index] ?? line);
+        let lineContent = highlightedLine;
+
+        if (diffState) {
+          lineContent = this.renderDiffPreviewLine(diffState, highlightedLine);
+        }
 
         // Apply text highlights
         if (props.highlightText && props.highlightText.length > 0) {
-          lineContent = this.applyTextHighlights(lineContent, props.highlightText);
+          lineContent = this.applyTextHighlights(lineContent, props.highlightText, previewHighlightCounters);
         }
 
         html += `<span ${lineAttrs.join(" ")}>${lineContent || " "}</span>`;
@@ -740,7 +949,7 @@ export class CodePlugin extends DecorationPlugin {
 
       // Caption
       if (props.caption) {
-        html += `<div class="cm-draftly-code-caption">${ctx.sanitize(props.caption)}</div>`;
+        html += `<div class="cm-draftly-code-caption">${this.escapeHtml(props.caption)}</div>`;
       }
 
       // Close wrapper container
@@ -757,62 +966,384 @@ export class CodePlugin extends DecorationPlugin {
     return null;
   }
 
+  /** Parse comma-separated numbers and ranges (e.g. "1,3-5") into [1,3,4,5]. */
+  private parseNumberList(value: string): number[] {
+    const result: number[] = [];
+
+    for (const part of value.split(",")) {
+      const trimmed = part.trim();
+      const rangeMatch = trimmed.match(/^(\d+)-(\d+)$/);
+
+      if (rangeMatch && rangeMatch[1] && rangeMatch[2]) {
+        const start = parseInt(rangeMatch[1], 10);
+        const end = parseInt(rangeMatch[2], 10);
+        for (let i = start; i <= end; i++) {
+          result.push(i);
+        }
+        continue;
+      }
+
+      if (/^\d+$/.test(trimmed)) {
+        result.push(parseInt(trimmed, 10));
+      }
+    }
+
+    return result;
+  }
+
   /**
    * Highlight a single line of code using the language's Lezer parser.
    * Falls back to sanitized plain text if the language is not supported.
    */
-  private highlightCodeLine(line: string, lang: string, ctx: { sanitize(html: string): string }): string {
-    if (!lang || !line) {
-      return ctx.sanitize(line);
+  private async highlightCodeLines(
+    code: string,
+    lang: string,
+    syntaxHighlighters?: readonly Highlighter[]
+  ): Promise<string[]> {
+    const rawLines = code.split("\n");
+    if (!lang || !code) {
+      return rawLines.map((line) => this.escapeHtml(line));
     }
 
-    // Find the language description
-    const langDesc = languages.find(
-      (l) => l.name.toLowerCase() === lang.toLowerCase() || (l.alias && l.alias.includes(lang.toLowerCase()))
-    );
-
-    if (!langDesc || !langDesc.support) {
-      return ctx.sanitize(line);
+    const parser = await this.resolveLanguageParser(lang);
+    if (!parser) {
+      return rawLines.map((line) => this.escapeHtml(line));
     }
 
     try {
-      const parser = langDesc.support.language.parser;
-      const tree = parser.parse(line);
-
-      let result = "";
+      const tree = parser.parse(code);
+      const highlightedLines: string[] = [""];
 
       highlightCode(
-        line,
+        code,
         tree,
-        classHighlighter,
+        syntaxHighlighters && syntaxHighlighters.length > 0 ? syntaxHighlighters : [],
         (text, classes) => {
-          if (classes) {
-            result += `<span class="${classes}">${ctx.sanitize(text)}</span>`;
-          } else {
-            result += ctx.sanitize(text);
-          }
+          const chunk = classes
+            ? `<span class="${this.escapeAttribute(classes)}">${this.escapeHtml(text)}</span>`
+            : this.escapeHtml(text);
+          highlightedLines[highlightedLines.length - 1] += chunk;
         },
-        () => {} // No newlines for single line
+        () => {
+          highlightedLines.push("");
+        }
       );
 
-      return result;
+      return rawLines.map((line, index) => highlightedLines[index] || this.escapeHtml(line));
     } catch {
-      return ctx.sanitize(line);
+      return rawLines.map((line) => this.escapeHtml(line));
+    }
+  }
+
+  private async resolveLanguageParser(lang: string): Promise<Parser | null> {
+    const normalizedLang = this.normalizeLanguage(lang);
+    if (!normalizedLang) return null;
+
+    const cached = this.parserCache.get(normalizedLang);
+    if (cached) return cached;
+
+    const parserPromise = (async () => {
+      const langDesc = LanguageDescription.matchLanguageName(languages, normalizedLang, true);
+
+      if (!langDesc) return null;
+
+      if (langDesc.support) {
+        return langDesc.support.language.parser;
+      }
+
+      if (typeof langDesc.load === "function") {
+        try {
+          const support = await langDesc.load();
+          return support.language.parser;
+        } catch {
+          return null;
+        }
+      }
+
+      return null;
+    })();
+
+    this.parserCache.set(normalizedLang, parserPromise);
+    return parserPromise;
+  }
+
+  private normalizeLanguage(lang: string): string {
+    const normalized = lang.trim().toLowerCase();
+    if (!normalized) return "";
+
+    const normalizedMap: Record<string, string> = {
+      "c++": "cpp",
+      "c#": "csharp",
+      "f#": "fsharp",
+      py: "python",
+      js: "javascript",
+      ts: "typescript",
+      sh: "shell",
+    };
+
+    return normalizedMap[normalized] ?? normalized;
+  }
+
+  private escapeHtml(value: string): string {
+    return value
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;");
+  }
+
+  private escapeAttribute(value: string): string {
+    return this.escapeHtml(value).replace(/`/g, "&#96;");
+  }
+
+  private analyzeDiffLines(lines: string[]): DiffLineState[] {
+    const states = lines.map((line) => this.parseDiffLineState(line));
+
+    let index = 0;
+    while (index < states.length) {
+      if (states[index]?.kind !== "deletion") {
+        index++;
+        continue;
+      }
+
+      const deletionStart = index;
+      while (index < states.length && states[index]?.kind === "deletion") {
+        index++;
+      }
+      const deletionEnd = index;
+
+      const additionStart = index;
+      while (index < states.length && states[index]?.kind === "addition") {
+        index++;
+      }
+      const additionEnd = index;
+
+      if (additionStart === additionEnd) {
+        continue;
+      }
+
+      const pairCount = Math.min(deletionEnd - deletionStart, additionEnd - additionStart);
+      for (let pairIndex = 0; pairIndex < pairCount; pairIndex++) {
+        const deletionState = states[deletionStart + pairIndex];
+        const additionState = states[additionStart + pairIndex];
+
+        if (!deletionState || !additionState) {
+          continue;
+        }
+
+        const ranges = this.computeChangedRanges(deletionState.content, additionState.content);
+        if (ranges.oldRanges.length > 0) {
+          deletionState.modificationRanges = ranges.oldRanges;
+        }
+        if (ranges.newRanges.length > 0) {
+          additionState.modificationRanges = ranges.newRanges;
+        }
+      }
+    }
+
+    return states;
+  }
+
+  private computeDiffDisplayLineNumbers(states: DiffLineState[], startLineNum: number): DiffDisplayLineNumbers[] {
+    const numbers: DiffDisplayLineNumbers[] = [];
+    let oldLineNumber = startLineNum;
+    let newLineNumber = startLineNum;
+
+    for (const state of states) {
+      if (state.kind === "deletion") {
+        numbers.push({ oldLine: oldLineNumber, newLine: null });
+        oldLineNumber++;
+        continue;
+      }
+
+      if (state.kind === "addition") {
+        numbers.push({ oldLine: null, newLine: newLineNumber });
+        newLineNumber++;
+        continue;
+      }
+
+      numbers.push({ oldLine: oldLineNumber, newLine: newLineNumber });
+      oldLineNumber++;
+      newLineNumber++;
+    }
+
+    return numbers;
+  }
+
+  private parseDiffLineState(line: string): DiffLineState {
+    const escapedMarker = line.startsWith("\\+") || line.startsWith("\\-");
+
+    if (escapedMarker) {
+      return {
+        kind: "normal",
+        content: line.slice(1),
+        contentOffset: 1,
+        escapedMarker: true,
+      };
+    }
+
+    if (line.startsWith("+")) {
+      return {
+        kind: "addition",
+        content: line.slice(1),
+        contentOffset: 1,
+        escapedMarker: false,
+      };
+    }
+
+    if (line.startsWith("-")) {
+      return {
+        kind: "deletion",
+        content: line.slice(1),
+        contentOffset: 1,
+        escapedMarker: false,
+      };
     }
+
+    return {
+      kind: "normal",
+      content: line,
+      contentOffset: 0,
+      escapedMarker: false,
+    };
+  }
+
+  private computeChangedRanges(
+    oldText: string,
+    newText: string
+  ): { oldRanges: Array<[number, number]>; newRanges: Array<[number, number]> } {
+    let prefix = 0;
+    while (prefix < oldText.length && prefix < newText.length && oldText[prefix] === newText[prefix]) {
+      prefix++;
+    }
+
+    let oldSuffix = oldText.length;
+    let newSuffix = newText.length;
+    while (oldSuffix > prefix && newSuffix > prefix && oldText[oldSuffix - 1] === newText[newSuffix - 1]) {
+      oldSuffix--;
+      newSuffix--;
+    }
+
+    const oldRanges: Array<[number, number]> = [];
+    const newRanges: Array<[number, number]> = [];
+
+    if (oldSuffix > prefix) {
+      oldRanges.push([prefix, oldSuffix]);
+    }
+    if (newSuffix > prefix) {
+      newRanges.push([prefix, newSuffix]);
+    }
+
+    return { oldRanges, newRanges };
+  }
+
+  private renderDiffPreviewLine(diffState: DiffLineState, highlightedContent: string): string {
+    const modClass =
+      diffState.kind === "addition"
+        ? "cm-draftly-code-diff-mod-add"
+        : diffState.kind === "deletion"
+          ? "cm-draftly-code-diff-mod-del"
+          : "";
+
+    const baseHighlightedContent = highlightedContent || this.escapeHtml(diffState.content);
+
+    const contentHtml =
+      diffState.modificationRanges && modClass
+        ? this.applyRangesToHighlightedHTML(baseHighlightedContent, diffState.modificationRanges, modClass)
+        : baseHighlightedContent;
+
+    return contentHtml || " ";
+  }
+
+  private applyRangesToHighlightedHTML(
+    htmlContent: string,
+    ranges: Array<[number, number]>,
+    className: string
+  ): string {
+    const normalizedRanges = ranges
+      .map(([start, end]) => [Math.max(0, start), Math.max(0, end)] as [number, number])
+      .filter(([start, end]) => end > start)
+      .sort((a, b) => a[0] - b[0]);
+
+    if (normalizedRanges.length === 0 || !htmlContent) {
+      return htmlContent;
+    }
+
+    const isInsideRange = (position: number) => {
+      for (const [start, end] of normalizedRanges) {
+        if (position >= start && position < end) return true;
+        if (position < start) return false;
+      }
+      return false;
+    };
+
+    let result = "";
+    let htmlIndex = 0;
+    let textPosition = 0;
+    let markOpen = false;
+
+    while (htmlIndex < htmlContent.length) {
+      const char = htmlContent[htmlIndex];
+
+      if (char === "<") {
+        const tagEnd = htmlContent.indexOf(">", htmlIndex);
+        if (tagEnd === -1) {
+          result += htmlContent.slice(htmlIndex);
+          break;
+        }
+        result += htmlContent.slice(htmlIndex, tagEnd + 1);
+        htmlIndex = tagEnd + 1;
+        continue;
+      }
+
+      let token = char;
+      if (char === "&") {
+        const entityEnd = htmlContent.indexOf(";", htmlIndex);
+        if (entityEnd !== -1) {
+          token = htmlContent.slice(htmlIndex, entityEnd + 1);
+          htmlIndex = entityEnd + 1;
+        } else {
+          htmlIndex += 1;
+        }
+      } else {
+        htmlIndex += 1;
+      }
+
+      const shouldMark = isInsideRange(textPosition);
+
+      if (shouldMark && !markOpen) {
+        result += `<mark class="${className}">`;
+        markOpen = true;
+      }
+      if (!shouldMark && markOpen) {
+        result += "</mark>";
+        markOpen = false;
+      }
+
+      result += token;
+      textPosition += 1;
+    }
+
+    if (markOpen) {
+      result += "</mark>";
+    }
+
+    return result;
   }
 
   /**
    * Apply text highlights (regex patterns) to already syntax-highlighted HTML.
    * Wraps matched patterns in `<mark>` elements.
    */
-  private applyTextHighlights(htmlContent: string, highlights: TextHighlight[]): string {
+  private applyTextHighlights(htmlContent: string, highlights: TextHighlight[], instanceCounters?: number[]): string {
     let result = htmlContent;
 
-    for (const highlight of highlights) {
+    for (const [highlightIndex, highlight] of highlights.entries()) {
       try {
         // Create regex from pattern
         const regex = new RegExp(`(${highlight.pattern})`, "g");
-        let matchCount = 0;
+        let matchCount = instanceCounters?.[highlightIndex] ?? 0;
 
         result = result.replace(regex, (match) => {
           matchCount++;
@@ -823,6 +1354,10 @@ export class CodePlugin extends DecorationPlugin {
           }
           return match;
         });
+
+        if (instanceCounters) {
+          instanceCounters[highlightIndex] = matchCount;
+        }
       } catch {
         // Invalid regex, skip
       }
@@ -831,289 +1366,3 @@ export class CodePlugin extends DecorationPlugin {
     return result;
   }
 }
-
-// ============================================================================
-// Theme
-// ============================================================================
-
-/** Theme styles for code elements (light and dark modes) */
-const theme = createTheme({
-  default: {
-    // Inline code
-    ".cm-draftly-code-inline": {
-      fontFamily: "var(--font-jetbrains-mono, monospace)",
-      fontSize: "0.9rem",
-      backgroundColor: "rgba(0, 0, 0, 0.05)",
-      padding: "0.1rem 0.25rem",
-      border: "1px solid var(--color-border)",
-      borderRadius: "3px",
-    },
-
-    // Fenced code block lines
-    ".cm-draftly-code-block-line": {
-      "--radius": "0.375rem",
-
-      fontFamily: "var(--font-jetbrains-mono, monospace)",
-      fontSize: "0.9rem",
-      backgroundColor: "rgba(0, 0, 0, 0.03)",
-      padding: "0 1rem !important",
-      lineHeight: "1.5",
-      borderLeft: "1px solid var(--color-border)",
-      borderRight: "1px solid var(--color-border)",
-    },
-
-    // First line of code block
-    ".cm-draftly-code-block-line-start": {
-      borderTopLeftRadius: "var(--radius)",
-      borderTopRightRadius: "var(--radius)",
-      position: "relative",
-      overflow: "hidden",
-      borderTop: "1px solid var(--color-border)",
-      paddingBottom: "0.5rem !important",
-    },
-
-    // Remove top radius when header is present
-    ".cm-draftly-code-block-has-header": {
-      padding: "0 !important",
-      paddingBottom: "0.5rem !important",
-    },
-
-    // Code block header widget
-    ".cm-draftly-code-header": {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      padding: "0.25rem 1rem",
-      backgroundColor: "rgba(0, 0, 0, 0.06)",
-      fontFamily: "var(--font-jetbrains-mono, monospace)",
-      fontSize: "0.85rem",
-    },
-
-    ".cm-draftly-code-header-left": {
-      display: "flex",
-      alignItems: "center",
-      gap: "0.5rem",
-    },
-
-    ".cm-draftly-code-header-title": {
-      color: "var(--color-text, inherit)",
-      fontWeight: "500",
-    },
-
-    ".cm-draftly-code-header-lang": {
-      color: "#6a737d",
-      opacity: "0.8",
-    },
-
-    ".cm-draftly-code-header-right": {
-      display: "flex",
-      alignItems: "center",
-      gap: "0.5rem",
-    },
-
-    ".cm-draftly-code-copy-btn": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: "0.25rem",
-      backgroundColor: "transparent",
-      border: "none",
-      borderRadius: "4px",
-      cursor: "pointer",
-      color: "#6a737d",
-      transition: "color 0.2s, background-color 0.2s",
-    },
-
-    ".cm-draftly-code-copy-btn:hover": {
-      backgroundColor: "rgba(0, 0, 0, 0.1)",
-      color: "var(--color-text, inherit)",
-    },
-
-    ".cm-draftly-code-copy-btn.copied": {
-      color: "#22c55e",
-    },
-
-    // Caption (below code block)
-    ".cm-draftly-code-block-has-caption": {
-      padding: "0 !important",
-      paddingTop: "0.5rem !important",
-    },
-
-    ".cm-draftly-code-caption": {
-      textAlign: "center",
-      fontSize: "0.85rem",
-      color: "#6a737d",
-      fontStyle: "italic",
-      padding: "0.25rem 1rem",
-      backgroundColor: "rgba(0, 0, 0, 0.06)",
-    },
-
-    // Last line of code block
-    ".cm-draftly-code-block-line-end": {
-      borderBottomLeftRadius: "var(--radius)",
-      borderBottomRightRadius: "var(--radius)",
-      borderBottom: "1px solid var(--color-border)",
-      paddingTop: "0.5rem !important",
-    },
-
-    ".cm-draftly-code-block-line-end br": {
-      display: "none",
-    },
-
-    // Fence markers (```)
-    ".cm-draftly-code-fence": {
-      color: "#6a737d",
-      fontFamily: "var(--font-jetbrains-mono, monospace)",
-    },
-
-    // Line numbers
-    ".cm-draftly-code-line-numbered": {
-      paddingLeft: "calc(var(--line-num-width, 2ch) + 1rem) !important",
-      position: "relative",
-    },
-
-    ".cm-draftly-code-line-numbered::before": {
-      content: "attr(data-line-num)",
-      position: "absolute",
-      left: "0.5rem",
-      top: "0.2rem",
-      width: "var(--line-num-width, 2ch)",
-      textAlign: "right",
-      color: "#6a737d",
-      opacity: "0.6",
-      fontFamily: "var(--font-jetbrains-mono, monospace)",
-      fontSize: "0.85rem",
-      userSelect: "none",
-    },
-
-    // Preview: code lines (need block display for full-width highlights)
-    ".cm-draftly-code-line": {
-      display: "block",
-      position: "relative",
-      paddingLeft: "1rem",
-      paddingRight: "1rem",
-      lineHeight: "1.5",
-      borderLeft: "3px solid transparent",
-    },
-
-    // Line highlight
-    ".cm-draftly-code-line-highlight": {
-      backgroundColor: "rgba(255, 220, 100, 0.2) !important",
-      borderLeft: "3px solid #f0b429 !important",
-    },
-
-    // Text highlight
-    ".cm-draftly-code-text-highlight": {
-      backgroundColor: "rgba(255, 220, 100, 0.4)",
-      borderRadius: "2px",
-      padding: "0.1rem 0",
-    },
-    // Preview: container wrapper
-    ".cm-draftly-code-container": {
-      margin: "1rem 0",
-      borderRadius: "var(--radius)",
-      overflow: "hidden",
-      border: "1px solid var(--color-border)",
-    },
-
-    // Preview: header inside container
-    ".cm-draftly-code-container .cm-draftly-code-header": {
-      borderRadius: "0",
-      border: "none",
-      borderBottom: "1px solid var(--color-border)",
-    },
-
-    // Preview: code block inside container
-    ".cm-draftly-code-container .cm-draftly-code-block": {
-      margin: "0",
-      borderRadius: "0",
-      border: "none",
-      whiteSpace: "pre-wrap",
-    },
-
-    // Preview: caption inside container
-    ".cm-draftly-code-container .cm-draftly-code-caption": {
-      borderTop: "1px solid var(--color-border)",
-    },
-
-    // Preview: standalone code block (not in container)
-    ".cm-draftly-code-block": {
-      fontFamily: "var(--font-jetbrains-mono, monospace)",
-      fontSize: "0.9rem",
-      backgroundColor: "rgba(0, 0, 0, 0.03)",
-      padding: "1rem",
-      overflow: "auto",
-      position: "relative",
-      borderRadius: "var(--radius)",
-      border: "1px solid var(--color-border)",
-    },
-
-    // Preview: code block with header (remove top radius)
-    ".cm-draftly-code-block.cm-draftly-code-block-has-header": {
-      borderTopLeftRadius: "0",
-      borderTopRightRadius: "0",
-      borderTop: "none",
-      margin: "0",
-      paddingTop: "0.5rem !important",
-    },
-
-    // Preview: code block with caption (remove bottom radius)
-    ".cm-draftly-code-block.cm-draftly-code-block-has-caption": {
-      borderBottomLeftRadius: "0",
-      borderBottomRightRadius: "0",
-      borderBottom: "none",
-      paddingBottom: "0.5rem !important",
-    },
-  },
-
-  dark: {
-    ".cm-draftly-code-inline": {
-      backgroundColor: "rgba(255, 255, 255, 0.1)",
-    },
-
-    ".cm-draftly-code-block-line": {
-      backgroundColor: "rgba(255, 255, 255, 0.05)",
-    },
-
-    ".cm-draftly-code-fence": {
-      color: "#8b949e",
-    },
-
-    ".cm-draftly-code-block": {
-      backgroundColor: "rgba(255, 255, 255, 0.05)",
-    },
-
-    ".cm-draftly-code-header": {
-      backgroundColor: "rgba(255, 255, 255, 0.08)",
-    },
-
-    ".cm-draftly-code-header-lang": {
-      color: "#8b949e",
-    },
-
-    ".cm-draftly-code-copy-btn": {
-      color: "#8b949e",
-    },
-
-    ".cm-draftly-code-copy-btn:hover": {
-      backgroundColor: "rgba(255, 255, 255, 0.1)",
-    },
-
-    ".cm-draftly-code-caption": {
-      backgroundColor: "rgba(255, 255, 255, 0.05)",
-    },
-
-    ".cm-draftly-code-line-numbered::before": {
-      color: "#8b949e",
-    },
-
-    ".cm-draftly-code-line-highlight": {
-      backgroundColor: "rgba(255, 220, 100, 0.15) !important",
-      borderLeft: "3px solid #d9a520 !important",
-    },
-
-    ".cm-draftly-code-text-highlight": {
-      backgroundColor: "rgba(255, 220, 100, 0.3)",
-    },
-  },
-});