draftly 1.0.7 → 2.0.0

package/dist/{chunk-N3WL3XPB.js → chunk-L2XSK57Y.js}

@@ -1,13 +1,16 @@
-import { DraftlyPlugin, DecorationPlugin } from './chunk-CG4M4TC7.js';
-import { createTheme, toggleMarkdownStyle } from './chunk-DFQYXFOP.js';
+import { DraftlyPlugin, DecorationPlugin } from './chunk-ZUI3GI3W.js';
+import { createWrapSelectionInputHandler } from './chunk-JF3WXXMJ.js';
+import { PreviewRenderer } from './chunk-I563H35S.js';
+import { createTheme, toggleMarkdownStyle } from './chunk-EEHILRG5.js';
 import { Decoration, WidgetType } from '@codemirror/view';
-import { syntaxTree } from '@codemirror/language';
-import { tags, highlightCode, classHighlighter } from '@lezer/highlight';
+import { syntaxTree, LanguageDescription } from '@codemirror/language';
+import { tags, highlightCode } from '@lezer/highlight';
 import DOMPurify from 'dompurify';
 import katex from 'katex';
 import katexCss from 'katex/dist/katex.min.css?raw';
 import mermaid from 'mermaid';
 import { languages } from '@codemirror/language-data';
+import * as emoji from 'node-emoji';
 
 // src/plugins/paragraph-plugin.ts
 var ParagraphPlugin = class extends DraftlyPlugin {
@@ -292,6 +295,17 @@ var InlinePlugin = class extends DecorationPlugin {
       }
     ];
   }
+  /**
+   * Intercepts inline marker typing to wrap selected text.
+   *
+   * If user types inline markers while text is selected, wraps each selected
+   * range with the appropriate marker:
+   * - * _ ~ ^ -> marker + selected + marker
+   * - = -> ==selected==
+   */
+  getExtensions() {
+    return [createWrapSelectionInputHandler({ "*": "*", _: "_", "~": "~", "^": "^", "=": "==" })];
+  }
   /**
    * Return markdown parser extensions for highlight syntax (==text==)
    */
@@ -1110,6 +1124,653 @@ var theme5 = createTheme({
     }
   }
 });
+function parseAlignment(cell) {
+  const trimmed = cell.trim();
+  const left = trimmed.startsWith(":");
+  const right = trimmed.endsWith(":");
+  if (left && right) return "center";
+  if (right) return "right";
+  return "left";
+}
+function parseTableMarkdown(markdown) {
+  const lines = markdown.split("\n").filter((l) => l.trim().length > 0);
+  if (lines.length < 2) return null;
+  const parseCells = (line) => {
+    let trimmed = line.trim();
+    if (trimmed.startsWith("|")) trimmed = trimmed.slice(1);
+    if (trimmed.endsWith("|")) trimmed = trimmed.slice(0, -1);
+    return trimmed.split("|").map((c) => c.trim());
+  };
+  const headers = parseCells(lines[0]);
+  const delimiterCells = parseCells(lines[1]);
+  const isDelimiter = delimiterCells.every((c) => /^:?-+:?$/.test(c.trim()));
+  if (!isDelimiter) return null;
+  const alignments = delimiterCells.map(parseAlignment);
+  const rows = [];
+  for (let i = 2; i < lines.length; i++) {
+    rows.push(parseCells(lines[i]));
+  }
+  return { headers, alignments, rows };
+}
+function isRowEmpty(rowText) {
+  const trimmed = rowText.trim();
+  if (!trimmed.startsWith("|")) return false;
+  let inner = trimmed;
+  if (inner.startsWith("|")) inner = inner.slice(1);
+  if (inner.endsWith("|")) inner = inner.slice(0, -1);
+  return inner.split("|").every((cell) => cell.trim() === "");
+}
+async function renderCellWithPreviewRenderer(text, config) {
+  if (!text.trim()) {
+    return "&nbsp;";
+  }
+  const renderer = new PreviewRenderer(
+    text,
+    config?.plugins || [],
+    config?.markdown || [],
+    config?.theme || "auto" /* AUTO */,
+    true
+  );
+  const html = await renderer.render();
+  const paragraphMatch = html.match(/^\s*<p>([\s\S]*)<\/p>\s*$/i);
+  if (paragraphMatch && paragraphMatch[1] !== void 0) {
+    return paragraphMatch[1];
+  }
+  return html;
+}
+function getColumnAlignment(alignments, index) {
+  return alignments[index] || "left";
+}
+function getColumnCount(headers, row) {
+  return Math.max(headers.length, row.length);
+}
+async function renderTableToHtml(parsed, config) {
+  const { headers, alignments, rows } = parsed;
+  let html = '<div class="cm-draftly-table-widget">';
+  html += '<table class="cm-draftly-table">';
+  html += "<thead><tr>";
+  for (let i = 0; i < headers.length; i++) {
+    const cell = headers[i] || "";
+    const align = getColumnAlignment(alignments, i);
+    const rendered = await renderCellWithPreviewRenderer(cell, config);
+    html += `<th style="text-align: ${align}">${rendered}</th>`;
+  }
+  html += "</tr></thead>";
+  html += "<tbody>";
+  for (const row of rows) {
+    html += "<tr>";
+    const colCount = getColumnCount(headers, row);
+    for (let i = 0; i < colCount; i++) {
+      const align = getColumnAlignment(alignments, i);
+      const cell = row[i] || "";
+      const rendered = await renderCellWithPreviewRenderer(cell, config);
+      html += `<td style="text-align: ${align}">${rendered}</td>`;
+    }
+    html += "</tr>";
+  }
+  html += "</tbody>";
+  html += "</table></div>";
+  return html;
+}
+var TableWidget = class extends WidgetType {
+  constructor(tableMarkdown, from, to, config) {
+    super();
+    this.tableMarkdown = tableMarkdown;
+    this.from = from;
+    this.to = to;
+    this.config = config;
+  }
+  eq(other) {
+    return other.tableMarkdown === this.tableMarkdown && other.from === this.from && other.to === this.to && other.config === this.config;
+  }
+  toDOM(view) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "cm-draftly-table-widget";
+    const parsed = parseTableMarkdown(this.tableMarkdown);
+    if (!parsed) {
+      wrapper.textContent = "[Invalid table]";
+      return wrapper;
+    }
+    const { headers, alignments, rows } = parsed;
+    const table = document.createElement("table");
+    table.className = "cm-draftly-table";
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    headers.forEach((h, i) => {
+      const th = document.createElement("th");
+      th.innerHTML = "&nbsp;";
+      this.renderCellAsync(h, th);
+      const align = alignments[i];
+      if (align) th.style.textAlign = align;
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+    const tbody = document.createElement("tbody");
+    rows.forEach((row) => {
+      const tr = document.createElement("tr");
+      const colCount = getColumnCount(headers, row);
+      for (let i = 0; i < colCount; i++) {
+        const td = document.createElement("td");
+        td.innerHTML = "&nbsp;";
+        this.renderCellAsync(row[i] || "", td);
+        const align = getColumnAlignment(alignments, i);
+        td.style.textAlign = align;
+        tr.appendChild(td);
+      }
+      tbody.appendChild(tr);
+    });
+    table.appendChild(tbody);
+    wrapper.appendChild(table);
+    wrapper.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      view.dispatch({
+        selection: { anchor: this.from },
+        scrollIntoView: true
+      });
+      view.focus();
+    });
+    return wrapper;
+  }
+  /**
+   * Render cell content asynchronously using PreviewRenderer
+   */
+  async renderCellAsync(text, element) {
+    if (!text.trim()) {
+      element.innerHTML = "&nbsp;";
+      return;
+    }
+    try {
+      element.innerHTML = await renderCellWithPreviewRenderer(text, this.config);
+    } catch (error) {
+      console.error("Failed to render table cell:", error);
+      element.textContent = text;
+    }
+  }
+  ignoreEvent(event) {
+    return event.type !== "click";
+  }
+};
+var tableMarkDecorations = {
+  "table-line": Decoration.line({ class: "cm-draftly-table-line" }),
+  "table-line-start": Decoration.line({ class: "cm-draftly-table-line-start" }),
+  "table-line-end": Decoration.line({ class: "cm-draftly-table-line-end" }),
+  "table-delimiter": Decoration.line({ class: "cm-draftly-table-delimiter-line" }),
+  "table-rendered": Decoration.line({ class: "cm-draftly-table-rendered" }),
+  // "table-hidden": Decoration.mark({ class: "cm-draftly-table-hidden" }),
+  "table-hidden": Decoration.replace({})
+};
+var TablePlugin = class extends DecorationPlugin {
+  name = "table";
+  version = "1.0.0";
+  decorationPriority = 20;
+  requiredNodes = ["Table", "TableHeader", "TableDelimiter", "TableRow", "TableCell"];
+  /** Configuration stored from onRegister */
+  draftlyConfig;
+  onRegister(context) {
+    super.onRegister(context);
+    this.draftlyConfig = context.config;
+  }
+  get theme() {
+    return theme6;
+  }
+  // ============================================
+  // Keymaps
+  // ============================================
+  getKeymap() {
+    return [
+      {
+        key: "Mod-Shift-t",
+        run: (view) => this.insertTable(view),
+        preventDefault: true
+      },
+      {
+        key: "Mod-Enter",
+        run: (view) => this.addRow(view),
+        preventDefault: true
+      },
+      {
+        key: "Mod-Shift-Enter",
+        run: (view) => this.addColumn(view),
+        preventDefault: true
+      },
+      {
+        key: "Enter",
+        run: (view) => this.handleEnter(view)
+      },
+      {
+        key: "Tab",
+        run: (view) => this.handleTab(view, false)
+      },
+      {
+        key: "Shift-Tab",
+        run: (view) => this.handleTab(view, true)
+      }
+    ];
+  }
+  // ============================================
+  // Decorations
+  // ============================================
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+      enter: (node) => {
+        if (node.name !== "Table") return;
+        const { from, to } = node;
+        const nodeLineStart = view.state.doc.lineAt(from);
+        const nodeLineEnd = view.state.doc.lineAt(to);
+        const cursorInRange = ctx.selectionOverlapsRange(nodeLineStart.from, nodeLineEnd.to);
+        if (cursorInRange) {
+          for (let i = nodeLineStart.number; i <= nodeLineEnd.number; i++) {
+            const line = view.state.doc.line(i);
+            decorations.push(tableMarkDecorations["table-line"].range(line.from));
+            if (i === nodeLineStart.number) {
+              decorations.push(tableMarkDecorations["table-line-start"].range(line.from));
+            }
+            if (i === nodeLineEnd.number) {
+              decorations.push(tableMarkDecorations["table-line-end"].range(line.from));
+            }
+            if (i === nodeLineStart.number + 1) {
+              decorations.push(tableMarkDecorations["table-delimiter"].range(line.from));
+            }
+          }
+        } else {
+          const tableContent = view.state.sliceDoc(from, to);
+          for (let i = nodeLineStart.number; i <= nodeLineEnd.number; i++) {
+            const line = view.state.doc.line(i);
+            decorations.push(tableMarkDecorations["table-rendered"].range(line.from));
+            decorations.push(tableMarkDecorations["table-hidden"].range(line.from, line.to));
+          }
+          decorations.push(
+            Decoration.widget({
+              widget: new TableWidget(tableContent, from, to, this.draftlyConfig),
+              side: 1,
+              block: false
+            }).range(to)
+          );
+        }
+      }
+    });
+  }
+  // ============================================
+  // Keymap Handlers
+  // ============================================
+  /**
+   * Insert a new 3×3 table at cursor position
+   */
+  insertTable(view) {
+    const { state } = view;
+    const cursor = state.selection.main.head;
+    const line = state.doc.lineAt(cursor);
+    const insertPos = line.text.trim() ? line.to : line.from;
+    const template = [
+      "| Header 1 | Header 2 | Header 3 |",
+      "| -------- | -------- | -------- |",
+      "|          |          |          |"
+    ].join("\n");
+    const prefix = line.text.trim() ? "\n" : "";
+    const suffix = "\n";
+    view.dispatch({
+      changes: {
+        from: insertPos,
+        insert: prefix + template + suffix
+      },
+      selection: {
+        anchor: insertPos + prefix.length + 2
+        // Position cursor in first header cell
+      }
+    });
+    return true;
+  }
+  /**
+   * Add a new row below the current row (Mod-Enter)
+   */
+  addRow(view) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) return false;
+    const { state } = view;
+    const cursor = state.selection.main.head;
+    const currentLine = state.doc.lineAt(cursor);
+    const parsed = parseTableMarkdown(state.sliceDoc(tableInfo.from, tableInfo.to));
+    if (!parsed) return false;
+    const colCount = parsed.headers.length;
+    const emptyRow = "| " + Array.from({ length: colCount }, () => "  ").join(" | ") + " |";
+    view.dispatch({
+      changes: {
+        from: currentLine.to,
+        insert: "\n" + emptyRow
+      },
+      selection: {
+        anchor: currentLine.to + 3
+        // Position in first cell of new row
+      }
+    });
+    return true;
+  }
+  /**
+   * Add a new column after the current column (Mod-Shift-Enter)
+   */
+  addColumn(view) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) return false;
+    const { state } = view;
+    const cursor = state.selection.main.head;
+    const currentLine = state.doc.lineAt(cursor);
+    const lineText = currentLine.text;
+    const cursorInLine = cursor - currentLine.from;
+    let colIndex = -1;
+    for (let i = 0; i < cursorInLine; i++) {
+      if (lineText[i] === "|") colIndex++;
+    }
+    colIndex = Math.max(0, colIndex);
+    const tableText = state.sliceDoc(tableInfo.from, tableInfo.to);
+    const lines = tableText.split("\n");
+    const newLines = lines.map((line, lineIdx) => {
+      const cells = this.splitLineToCells(line);
+      const insertAfter = Math.min(colIndex, cells.length - 1);
+      if (lineIdx === 1) {
+        cells.splice(insertAfter + 1, 0, " -------- ");
+      } else {
+        cells.splice(insertAfter + 1, 0, "          ");
+      }
+      return "|" + cells.join("|") + "|";
+    });
+    view.dispatch({
+      changes: {
+        from: tableInfo.from,
+        to: tableInfo.to,
+        insert: newLines.join("\n")
+      }
+    });
+    return true;
+  }
+  /**
+   * Handle Enter key inside a table.
+   * - Last cell of last row: create a new row
+   * - Empty last row: remove it and move cursor after table
+   */
+  handleEnter(view) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) return false;
+    const { state } = view;
+    const cursor = state.selection.main.head;
+    const cursorLine = state.doc.lineAt(cursor);
+    const tableEndLine = state.doc.lineAt(tableInfo.to);
+    if (cursorLine.number !== tableEndLine.number) return false;
+    const lineText = cursorLine.text;
+    const cursorOffset = cursor - cursorLine.from;
+    const pipes = [];
+    for (let i = 0; i < lineText.length; i++) {
+      if (lineText[i] === "|") pipes.push(i);
+    }
+    if (pipes.length < 2) return false;
+    const lastCellStart = pipes[pipes.length - 2];
+    if (cursorOffset < lastCellStart) return false;
+    if (isRowEmpty(lineText)) {
+      const removeFrom = cursorLine.from - 1;
+      const removeTo = cursorLine.to;
+      view.dispatch({
+        changes: { from: Math.max(0, removeFrom), to: removeTo },
+        selection: {
+          anchor: Math.min(Math.max(0, removeFrom) + 1, view.state.doc.length)
+        }
+      });
+      return true;
+    }
+    const parsed = parseTableMarkdown(state.sliceDoc(tableInfo.from, tableInfo.to));
+    if (!parsed) return false;
+    const colCount = parsed.headers.length;
+    const emptyRow = "| " + Array.from({ length: colCount }, () => "  ").join(" | ") + " |";
+    view.dispatch({
+      changes: {
+        from: cursorLine.to,
+        insert: "\n" + emptyRow
+      },
+      selection: {
+        anchor: cursorLine.to + 3
+        // Position in first cell of new row
+      }
+    });
+    return true;
+  }
+  /**
+   * Handle Tab key inside a table — move to next/previous cell
+   */
+  handleTab(view, backwards) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) return false;
+    const { state } = view;
+    const cursor = state.selection.main.head;
+    const tableText = state.sliceDoc(tableInfo.from, tableInfo.to);
+    const lines = tableText.split("\n");
+    const cellPositions = [];
+    for (let li = 0; li < lines.length; li++) {
+      if (li === 1) continue;
+      const line = lines[li];
+      const lineFrom = tableInfo.from + lines.slice(0, li).reduce((sum, l) => sum + l.length + 1, 0);
+      const pipes = [];
+      for (let i = 0; i < line.length; i++) {
+        if (line[i] === "|") pipes.push(i);
+      }
+      for (let p = 0; p < pipes.length - 1; p++) {
+        const cellStart = pipes[p] + 1;
+        const cellEnd = pipes[p + 1];
+        cellPositions.push({
+          lineFrom,
+          start: cellStart,
+          end: cellEnd
+        });
+      }
+    }
+    let currentCellIdx = -1;
+    for (let i = 0; i < cellPositions.length; i++) {
+      const cell = cellPositions[i];
+      const absStart = cell.lineFrom + cell.start;
+      const absEnd = cell.lineFrom + cell.end;
+      if (cursor >= absStart && cursor <= absEnd) {
+        currentCellIdx = i;
+        break;
+      }
+    }
+    if (currentCellIdx === -1) return false;
+    const nextIdx = backwards ? currentCellIdx - 1 : currentCellIdx + 1;
+    if (nextIdx < 0 || nextIdx >= cellPositions.length) return false;
+    const nextCell = cellPositions[nextIdx];
+    const cellText = state.sliceDoc(nextCell.lineFrom + nextCell.start, nextCell.lineFrom + nextCell.end);
+    const trimStart = cellText.length - cellText.trimStart().length;
+    const trimEnd = cellText.length - cellText.trimEnd().length;
+    const selectFrom = nextCell.lineFrom + nextCell.start + (trimStart > 0 ? 1 : 0);
+    const selectTo = nextCell.lineFrom + nextCell.end - (trimEnd > 0 ? 1 : 0);
+    view.dispatch({
+      selection: {
+        anchor: selectFrom,
+        head: selectTo
+      },
+      scrollIntoView: true
+    });
+    return true;
+  }
+  // ============================================
+  // Helpers
+  // ============================================
+  /**
+   * Find the Table node at the cursor position
+   */
+  getTableAtCursor(view) {
+    const tree = syntaxTree(view.state);
+    const cursor = view.state.selection.main.head;
+    let result = null;
+    tree.iterate({
+      enter: (node) => {
+        if (node.name === "Table" && cursor >= node.from && cursor <= node.to) {
+          result = { from: node.from, to: node.to };
+        }
+      }
+    });
+    return result;
+  }
+  /**
+   * Split a table line into cells (keeping the whitespace around content)
+   */
+  splitLineToCells(line) {
+    let trimmed = line.trim();
+    if (trimmed.startsWith("|")) trimmed = trimmed.slice(1);
+    if (trimmed.endsWith("|")) trimmed = trimmed.slice(0, -1);
+    return trimmed.split("|");
+  }
+  // ============================================
+  // Preview Rendering
+  // ============================================
+  async renderToHTML(node, _children, _ctx) {
+    if (node.name === "Table") {
+      const content = _ctx.sliceDoc(node.from, node.to);
+      const parsed = parseTableMarkdown(content);
+      if (!parsed) return null;
+      return await renderTableToHtml(parsed, this.draftlyConfig);
+    }
+    if (node.name === "TableHeader" || node.name === "TableDelimiter" || node.name === "TableRow" || node.name === "TableCell") {
+      return "";
+    }
+    return null;
+  }
+};
+var theme6 = createTheme({
+  default: {
+    // Raw table lines — monospace when cursor is inside
+    ".cm-draftly-table-line": {
+      "--radius": "0.375rem",
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.9rem",
+      backgroundColor: "rgba(0, 0, 0, 0.02)",
+      padding: "0 0.75rem !important",
+      lineHeight: "1.6",
+      borderLeft: "1px solid var(--color-border, #e2e8f0)",
+      borderRight: "1px solid var(--color-border, #e2e8f0)"
+    },
+    ".cm-draftly-table-line-start": {
+      borderTopLeftRadius: "var(--radius)",
+      borderTopRightRadius: "var(--radius)",
+      borderTop: "1px solid var(--color-border, #e2e8f0)"
+    },
+    ".cm-draftly-table-line-end": {
+      borderBottomLeftRadius: "var(--radius)",
+      borderBottomRightRadius: "var(--radius)",
+      borderBottom: "1px solid var(--color-border, #e2e8f0)"
+    },
+    ".cm-draftly-table-delimiter-line": {
+      opacity: "0.5"
+    },
+    // Hidden table text (when cursor is not in range)
+    ".cm-draftly-table-hidden": {
+      display: "none"
+    },
+    // Line decoration for rendered state — hide line breaks
+    ".cm-draftly-table-rendered": {
+      padding: "0 !important"
+    },
+    ".cm-draftly-table-rendered br": {
+      display: "none"
+    },
+    // Rendered table widget container
+    ".cm-draftly-table-widget": {
+      cursor: "pointer",
+      overflow: "auto",
+      padding: "0.5rem 0"
+    },
+    // Table element
+    ".cm-draftly-table": {
+      width: "100%",
+      borderCollapse: "separate",
+      borderSpacing: "0",
+      borderRadius: "0.5rem",
+      overflow: "hidden",
+      border: "1px solid var(--color-border, #e2e8f0)",
+      fontFamily: "var(--font-sans, sans-serif)",
+      fontSize: "0.9375rem",
+      lineHeight: "1.5"
+    },
+    // Table header
+    ".cm-draftly-table thead th": {
+      padding: "0rem 0.875rem",
+      fontWeight: "600",
+      borderBottom: "2px solid var(--color-border, #e2e8f0)",
+      backgroundColor: "rgba(0, 0, 0, 0.03)"
+    },
+    // Table cells
+    ".cm-draftly-table td": {
+      padding: "0rem 0.875rem",
+      borderBottom: "1px solid var(--color-border, #e2e8f0)",
+      borderRight: "1px solid var(--color-border, #e2e8f0)"
+    },
+    // Remove right border on last cell
+    ".cm-draftly-table td:last-child, .cm-draftly-table th:last-child": {
+      borderRight: "none"
+    },
+    // Remove bottom border on last row
+    ".cm-draftly-table tbody tr:last-child td": {
+      borderBottom: "none"
+    },
+    // Alternate row colors
+    ".cm-draftly-table tbody tr:nth-child(even)": {
+      backgroundColor: "rgba(0, 0, 0, 0.02)"
+    },
+    // Header cells right border
+    ".cm-draftly-table thead th:not(:last-child)": {
+      borderRight: "1px solid var(--color-border, #e2e8f0)"
+    },
+    // Hover effect on rows
+    ".cm-draftly-table tbody tr:hover": {
+      backgroundColor: "rgba(0, 0, 0, 0.04)"
+    },
+    // Inline code in table cells
+    ".cm-draftly-table-inline-code": {
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.85em",
+      padding: "0.1em 0.35em",
+      borderRadius: "0.25rem",
+      backgroundColor: "rgba(0, 0, 0, 0.06)"
+    },
+    // Links in table cells
+    ".cm-draftly-table-link": {
+      color: "var(--color-link, #0969da)",
+      textDecoration: "none"
+    },
+    ".cm-draftly-table-link:hover": {
+      textDecoration: "underline"
+    },
+    // Math in table cells
+    ".cm-draftly-table-math": {
+      fontFamily: "var(--font-jetbrains-mono, monospace)",
+      fontSize: "0.9em",
+      color: "#6a737d"
+    }
+  },
+  dark: {
+    ".cm-draftly-table-line": {
+      backgroundColor: "rgba(255, 255, 255, 0.03)"
+    },
+    ".cm-draftly-table thead th": {
+      backgroundColor: "rgba(255, 255, 255, 0.05)"
+    },
+    ".cm-draftly-table tbody tr:nth-child(even)": {
+      backgroundColor: "rgba(255, 255, 255, 0.02)"
+    },
+    ".cm-draftly-table tbody tr:hover": {
+      backgroundColor: "rgba(255, 255, 255, 0.05)"
+    },
+    ".cm-draftly-table-inline-code": {
+      backgroundColor: "rgba(255, 255, 255, 0.08)"
+    },
+    ".cm-draftly-table-link": {
+      color: "var(--color-link, #58a6ff)"
+    },
+    ".cm-draftly-table-math": {
+      color: "#8b949e"
+    }
+  }
+});
 var htmlMarkDecorations = {
   "html-tag": Decoration.mark({ class: "cm-draftly-html-tag" }),
   "html-comment": Decoration.mark({ class: "cm-draftly-html-comment" })
@@ -1176,7 +1837,7 @@ var HTMLPlugin = class extends DecorationPlugin {
    * Plugin theme
    */
   get theme() {
-    return theme6;
+    return theme7;
   }
   buildDecorations(ctx) {
     const { view, decorations } = ctx;
@@ -1316,7 +1977,7 @@ var HTMLPlugin = class extends DecorationPlugin {
     }
   }
 };
-var theme6 = createTheme({
+var theme7 = createTheme({
   default: {
     ".cm-draftly-html-tag": {
       color: "#6a737d",
@@ -1446,7 +2107,7 @@ var ImagePlugin = class extends DecorationPlugin {
    * Plugin theme
    */
   get theme() {
-    return theme7;
+    return theme8;
   }
   /**
    * Keyboard shortcuts for image formatting
@@ -1601,7 +2262,7 @@ var ImagePlugin = class extends DecorationPlugin {
     return html;
   }
 };
-var theme7 = createTheme({
+var theme8 = createTheme({
   default: {
     ".cm-draftly-image-block br": {
       display: "none"
@@ -1850,7 +2511,16 @@ var MathPlugin = class extends DecorationPlugin {
    * Plugin theme
    */
   get theme() {
-    return theme8;
+    return theme9;
+  }
+  /**
+   * Intercepts dollar typing to wrap selected text as inline math.
+   *
+   * If user types '$' while text is selected, wraps each selected range
+   * with single dollars (selected -> $selected$).
+   */
+  getExtensions() {
+    return [createWrapSelectionInputHandler({ "$": "$" })];
   }
   /**
    * Return markdown parser extensions for math syntax
@@ -1958,7 +2628,7 @@ var MathPlugin = class extends DecorationPlugin {
     return null;
   }
 };
-var theme8 = createTheme({
+var theme9 = createTheme({
   default: {
     ".cm-draftly-math-block": {
       fontFamily: "var(--font-jetbrains-mono, monospace)"
@@ -2157,7 +2827,7 @@ var MermaidPlugin = class extends DecorationPlugin {
    * Plugin theme
    */
   get theme() {
-    return theme9;
+    return theme10;
   }
   /**
    * Return markdown parser extensions for mermaid syntax
@@ -2265,7 +2935,7 @@ var MermaidPlugin = class extends DecorationPlugin {
     return null;
   }
 };
-var theme9 = createTheme({
+var theme10 = createTheme({
   default: {
     // Raw mermaid block lines (monospace)
     ".cm-draftly-mermaid-block:not(.cm-draftly-mermaid-block-rendered)": {
@@ -2369,22 +3039,395 @@ var theme9 = createTheme({
     }
   }
 });
-var COPY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
-var CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
-var COPY_RESET_DELAY = 2e3;
-var codeMarkDecorations = {
-  // Inline code
-  "inline-code": Decoration.mark({ class: "cm-draftly-code-inline" }),
-  "inline-mark": Decoration.replace({}),
-  // Fenced code block
-  "code-block-line": Decoration.line({ class: "cm-draftly-code-block-line" }),
-  "code-block-line-start": Decoration.line({ class: "cm-draftly-code-block-line-start" }),
+
+// src/plugins/code-plugin.theme.ts
+var codePluginTheme = 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",
+          "&:hover": {
+            backgroundColor: "rgba(0, 0, 0, 0.1)",
+            color: "var(--color-text, inherit)"
+          },
+          "&.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",
+      "& 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",
+      "&::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"
+      }
+    },
+    ".cm-draftly-code-line-numbered-diff": {
+      paddingLeft: "calc(var(--line-num-old-width, 2ch) + var(--line-num-new-width, 2ch) + 2.75rem) !important",
+      position: "relative",
+      "&::before": {
+        content: "attr(data-line-num-old)",
+        position: "absolute",
+        left: "0.5rem",
+        top: "0.2rem",
+        width: "var(--line-num-old-width, 2ch)",
+        textAlign: "right",
+        color: "#6a737d",
+        opacity: "0.6",
+        fontFamily: "var(--font-jetbrains-mono, monospace)",
+        fontSize: "0.85rem",
+        userSelect: "none"
+      },
+      "&::after": {
+        content: 'attr(data-line-num-new) " " attr(data-diff-marker)',
+        position: "absolute",
+        left: "calc(0.5rem + var(--line-num-old-width, 2ch) + 0.75rem)",
+        top: "0.2rem",
+        width: "calc(var(--line-num-new-width, 2ch) + 2ch)",
+        textAlign: "right",
+        color: "#6a737d",
+        opacity: "0.6",
+        fontFamily: "var(--font-jetbrains-mono, monospace)",
+        fontSize: "0.85rem",
+        userSelect: "none"
+      },
+      "&.cm-draftly-code-line-diff-gutter": {
+        paddingLeft: "calc(var(--line-num-width, 2ch) + 2rem) !important",
+        "&::after": {
+          content: "attr(data-diff-marker)",
+          position: "absolute",
+          left: "calc(0.5rem + var(--line-num-width, 2ch) + 0.35rem)",
+          top: "0.1rem",
+          width: "1ch",
+          textAlign: "right",
+          fontFamily: "var(--font-jetbrains-mono, monospace)",
+          fontSize: "0.85rem",
+          fontWeight: "700",
+          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"
+    },
+    ".cm-draftly-code-line-diff-add": {
+      color: "inherit",
+      backgroundColor: "rgba(34, 197, 94, 0.12) !important",
+      borderLeft: "3px solid #22c55e !important",
+      "&.cm-draftly-code-line-diff-gutter::after": {
+        color: "#16a34a"
+      }
+    },
+    ".cm-draftly-code-line-diff-del": {
+      color: "inherit",
+      backgroundColor: "rgba(239, 68, 68, 0.12) !important",
+      borderLeft: "3px solid #ef4444 !important",
+      "&.cm-draftly-code-line-diff-gutter::after": {
+        color: "#dc2626"
+      }
+    },
+    ".cm-draftly-code-diff-sign-add": {
+      color: "#16a34a",
+      fontWeight: "700"
+    },
+    ".cm-draftly-code-diff-sign-del": {
+      color: "#dc2626",
+      fontWeight: "700"
+    },
+    ".cm-draftly-code-diff-mod-add": {
+      color: "inherit",
+      backgroundColor: "rgba(34, 197, 94, 0.25)",
+      borderRadius: "2px",
+      padding: "0.1rem 0"
+    },
+    ".cm-draftly-code-diff-mod-del": {
+      color: "inherit",
+      backgroundColor: "rgba(239, 68, 68, 0.25)",
+      borderRadius: "2px",
+      padding: "0.1rem 0"
+    },
+    // Text highlight
+    ".cm-draftly-code-text-highlight": {
+      color: "inherit",
+      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)",
+      ".cm-draftly-code-header": {
+        borderRadius: "0",
+        border: "none",
+        borderBottom: "1px solid var(--color-border)"
+      },
+      ".cm-draftly-code-block": {
+        margin: "0",
+        borderRadius: "0",
+        border: "none",
+        whiteSpace: "pre-wrap"
+      },
+      ".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)",
+      "&.cm-draftly-code-block-has-header": {
+        borderTopLeftRadius: "0",
+        borderTopRightRadius: "0",
+        borderTop: "none",
+        margin: "0",
+        paddingTop: "0.5rem !important"
+      },
+      "&.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",
+        "&: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-numbered-diff": {
+      "&::before": {
+        color: "#8b949e"
+      },
+      "&::after": {
+        color: "#8b949e"
+      }
+    },
+    ".cm-draftly-code-line-diff-gutter": {
+      "&::after": {
+        color: "#8b949e"
+      }
+    },
+    ".cm-draftly-code-line-highlight": {
+      backgroundColor: "rgba(255, 220, 100, 0.15) !important",
+      borderLeft: "3px solid #d9a520 !important"
+    },
+    ".cm-draftly-code-line-diff-add": {
+      backgroundColor: "rgba(34, 197, 94, 0.15) !important",
+      borderLeft: "3px solid #22c55e !important",
+      "&.cm-draftly-code-line-diff-gutter::after": {
+        color: "#4ade80"
+      }
+    },
+    ".cm-draftly-code-line-diff-del": {
+      backgroundColor: "rgba(239, 68, 68, 0.15) !important",
+      borderLeft: "3px solid #ef4444 !important",
+      "&.cm-draftly-code-line-diff-gutter::after": {
+        color: "#f87171"
+      }
+    },
+    ".cm-draftly-code-diff-sign-add": {
+      color: "#4ade80"
+    },
+    ".cm-draftly-code-diff-sign-del": {
+      color: "#f87171"
+    },
+    ".cm-draftly-code-diff-mod-add": {
+      backgroundColor: "rgba(34, 197, 94, 0.3)"
+    },
+    ".cm-draftly-code-diff-mod-del": {
+      backgroundColor: "rgba(239, 68, 68, 0.3)"
+    },
+    ".cm-draftly-code-text-highlight": {
+      backgroundColor: "rgba(255, 220, 100, 0.3)"
+    }
+  }
+});
+
+// src/plugins/code-plugin.ts
+var COPY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
+var CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+var COPY_RESET_DELAY = 2e3;
+var CODE_FENCE = "```";
+var QUOTED_INFO_PATTERN = /(\w+)="([^"]*)"/g;
+var TEXT_HIGHLIGHT_PATTERN = /\/([^/]+)\/(?:(\d+(?:-\d+)?(?:,\d+(?:-\d+)?)*))?/g;
+var codeMarkDecorations = {
+  // Inline code
+  "inline-code": Decoration.mark({ class: "cm-draftly-code-inline" }),
+  "inline-mark": Decoration.replace({}),
+  // Fenced code block
+  "code-block-line": Decoration.line({ class: "cm-draftly-code-block-line" }),
+  "code-block-line-start": Decoration.line({ class: "cm-draftly-code-block-line-start" }),
   "code-block-line-end": Decoration.line({ class: "cm-draftly-code-block-line-end" }),
   "code-fence": Decoration.mark({ class: "cm-draftly-code-fence" }),
   "code-hidden": Decoration.replace({}),
   // Highlights
   "code-line-highlight": Decoration.line({ class: "cm-draftly-code-line-highlight" }),
-  "code-text-highlight": Decoration.mark({ class: "cm-draftly-code-text-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({})
 };
 var CodeBlockHeaderWidget = class extends WidgetType {
   constructor(props, codeContent) {
@@ -2470,11 +3513,12 @@ var CodePlugin = class extends DecorationPlugin {
   version = "1.0.0";
   decorationPriority = 25;
   requiredNodes = ["InlineCode", "FencedCode", "CodeMark", "CodeInfo", "CodeText"];
+  parserCache = /* @__PURE__ */ new Map();
   /**
    * Plugin theme
    */
   get theme() {
-    return theme10;
+    return codePluginTheme;
   }
   /**
    * Keyboard shortcuts for code formatting
@@ -2493,6 +3537,15 @@ var CodePlugin = class 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`).
+   */
+  getExtensions() {
+    return [createWrapSelectionInputHandler({ "`": "`" })];
+  }
   /**
    * Toggle code block on current line or selected lines
    */
@@ -2505,7 +3558,7 @@ var CodePlugin = class extends DecorationPlugin {
     const nextLineNum = endLine.number < state.doc.lines ? endLine.number + 1 : endLine.number;
     const prevLine = state.doc.line(prevLineNum);
     const nextLine = state.doc.line(nextLineNum);
-    const isWrapped = prevLine.text.trim().startsWith("```") && nextLine.text.trim() === "```" && prevLineNum !== startLine.number && nextLineNum !== endLine.number;
+    const isWrapped = prevLine.text.trim().startsWith(CODE_FENCE) && nextLine.text.trim() === CODE_FENCE && prevLineNum !== startLine.number && nextLineNum !== endLine.number;
     if (isWrapped) {
       view.dispatch({
         changes: [
@@ -2516,8 +3569,10 @@ var CodePlugin = class extends DecorationPlugin {
         ]
       });
     } else {
-      const openFence = "```\n";
-      const closeFence = "\n```";
+      const openFence = `${CODE_FENCE}
+`;
+      const closeFence = `
+${CODE_FENCE}`;
       view.dispatch({
         changes: [
           { from: startLine.from, insert: openFence },
@@ -2546,6 +3601,7 @@ var CodePlugin = class extends DecorationPlugin {
    *   lineNumbers: 5,
    *   title: "hello.tsx",
    *   copy: true,
+   *   diff: false,
    *   highlightLines: [2,3,4,5],
    *   highlightText: [{ pattern: "Hello", instances: [3,4,5] }]
    * }
@@ -2557,14 +3613,21 @@ var CodePlugin = class extends DecorationPlugin {
       return props;
     }
     let remaining = codeInfo.trim();
-    const langMatch = remaining.match(/^(\w+)/);
-    if (langMatch && langMatch[1]) {
-      props.language = langMatch[1];
-      remaining = remaining.slice(langMatch[0].length).trim();
+    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();
+      }
     }
-    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];
       if (key === "title" && value !== void 0) {
@@ -2573,13 +3636,13 @@ var CodePlugin = class extends DecorationPlugin {
         props.caption = value;
       }
     }
-    remaining = remaining.replace(quotedPattern, "").trim();
-    const lineNumbersMatch = remaining.match(/line-numbers(?:\{(\d+)\})?/);
+    remaining = remaining.replace(QUOTED_INFO_PATTERN, "").trim();
+    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();
     }
@@ -2587,52 +3650,27 @@ var CodePlugin = class extends DecorationPlugin {
       props.copy = true;
       remaining = remaining.replace(/\bcopy\b/, "").trim();
     }
+    if (/\bdiff\b/.test(remaining)) {
+      props.diff = true;
+      remaining = remaining.replace(/\bdiff\b/, "").trim();
+    }
     const lineHighlightMatch = remaining.match(/\{([^}]+)\}/);
     if (lineHighlightMatch && lineHighlightMatch[1]) {
-      const highlightLines = [];
-      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]) {
-          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)) {
-          highlightLines.push(parseInt(trimmed, 10));
-        }
-      }
+      const highlightLines = this.parseNumberList(lineHighlightMatch[1]);
       if (highlightLines.length > 0) {
         props.highlightLines = highlightLines;
       }
       remaining = remaining.replace(lineHighlightMatch[0], "").trim();
     }
-    const textHighlightPattern = /\/([^/]+)\/(?:(\d+(?:-\d+)?(?:,\d+(?:-\d+)?)*))?/g;
     let textMatch;
     const highlightText = [];
-    while ((textMatch = textHighlightPattern.exec(remaining)) !== null) {
+    while ((textMatch = TEXT_HIGHLIGHT_PATTERN.exec(remaining)) !== null) {
       if (!textMatch[1]) continue;
       const highlight = {
         pattern: textMatch[1]
       };
       if (textMatch[2]) {
-        const instanceStr = textMatch[2];
-        const instances = [];
-        const instanceParts = instanceStr.split(",");
-        for (const part of instanceParts) {
-          const rangeMatch = part.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++) {
-              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;
         }
@@ -2649,148 +3687,244 @@ var CodePlugin = class extends DecorationPlugin {
    * Handles line numbers, highlights, header/caption widgets, and fence visibility.
    */
   buildDecorations(ctx) {
-    const { view, decorations } = ctx;
-    const tree = syntaxTree(view.state);
+    const tree = syntaxTree(ctx.view.state);
     tree.iterate({
       enter: (node) => {
-        const { from, to, name } = node;
-        if (name === "InlineCode") {
-          decorations.push(codeMarkDecorations["inline-code"].range(from, to));
-          const cursorInRange = ctx.selectionOverlapsRange(from, to);
-          if (!cursorInRange) {
-            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;
         }
-        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);
-          let infoProps = { 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);
+        }
+      }
+    });
+  }
+  decorateInlineCode(node, ctx) {
+    const { from, to } = node;
+    ctx.decorations.push(codeMarkDecorations["inline-code"].range(from, to));
+    if (ctx.selectionOverlapsRange(from, to)) {
+      return;
+    }
+    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));
+      }
+    }
+  }
+  decorateFencedCode(node, ctx) {
+    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);
+    let infoProps = { language: "" };
+    let codeContent = "";
+    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 = [];
+    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`
             }
-          }
-          const totalCodeLines = nodeLineEnd.number - nodeLineStart.number - 1;
-          const startLineNum = typeof infoProps.lineNumbers === "number" ? infoProps.lineNumbers : 1;
-          const maxLineNum = startLineNum + totalCodeLines - 1;
-          const lineNumWidth = Math.max(String(maxLineNum).length, String(startLineNum).length);
-          let codeLineIndex = 0;
-          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;
-            }
-          }
-          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
-              }).range(nodeLineStart.from)
-            );
-          }
-          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;
-            decorations.push(codeMarkDecorations["code-block-line"].range(line.from));
-            if (i === 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 (i === 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.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)
-              );
-            }
-            if (!isFenceLine && infoProps.highlightLines) {
-              if (infoProps.highlightLines.includes(codeLineIndex + 1)) {
-                decorations.push(codeMarkDecorations["code-line-highlight"].range(line.from));
-              }
-            }
-            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++;
-                    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 {
-                }
-              }
-            }
-            if (!isFenceLine) {
-              codeLineIndex++;
-            }
-          }
-          for (let child = node.node.firstChild; child; child = child.nextSibling) {
-            if (child.name === "CodeMark" || child.name === "CodeInfo") {
-              if (cursorInRange) {
-                decorations.push(codeMarkDecorations["code-fence"].range(child.from, child.to));
-              } else {
-                decorations.push(codeMarkDecorations["code-hidden"].range(child.from, child.to));
-              }
+          }).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)
+      );
+    }
+  }
+  decorateFenceMarkers(node, cursorInRange, decorations) {
+    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
+          )
+        );
+      }
+    }
+  }
+  decorateDiffLine(line, codeLineIndex, diffStates, cursorInRange, showDiffMarkerGutter, decorations) {
+    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
           }
-          if (!cursorInRange && infoProps.caption) {
-            decorations.push(
-              Decoration.widget({
-                widget: new CodeBlockCaptionWidget(infoProps.caption),
-                block: false,
-                side: 1
-                // After the content
-              }).range(nodeLineEnd.to)
-            );
+        }).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)
+          );
+        }
+      }
+    }
+  }
+  decorateTextHighlights(lineFrom, lineText, highlights, instanceCounters, decorations) {
+    for (const [highlightIndex, textHighlight] of highlights.entries()) {
+      try {
+        const regex = new RegExp(textHighlight.pattern, "g");
+        let match;
+        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 {
       }
-    });
+    }
   }
   /**
    * Render code elements to HTML for static preview.
    * Applies syntax highlighting using @lezer/highlight.
    */
-  renderToHTML(node, children, ctx) {
+  async renderToHTML(node, _children, ctx) {
     if (node.name === "CodeMark") {
       return "";
     }
@@ -2800,7 +3934,7 @@ var CodePlugin = class 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>`;
     }
     if (node.name === "FencedCode") {
       const content = ctx.sliceDoc(node.from, node.to);
@@ -2818,9 +3952,9 @@ var CodePlugin = class 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) {
@@ -2833,32 +3967,83 @@ var CodePlugin = class extends DecorationPlugin {
         }
         html += `</div>`;
       }
-      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
+      );
       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>`;
       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] : void 0;
+        const diffLineNumbers = props.diff ? previewDiffLineNumbers[index] : void 0;
         const lineClasses = ["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");
         const lineAttrs = [`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"`);
         }
-        let lineContent = this.highlightCodeLine(line, props.language || "", ctx);
+        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(" ")}"`;
+          }
+        }
+        const highlightedLine = highlightedLines[index] ?? this.escapeHtml(previewContentLines[index] ?? line);
+        let lineContent = highlightedLine;
+        if (diffState) {
+          lineContent = this.renderDiffPreviewLine(diffState, highlightedLine);
+        }
         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>`;
       });
       html += `</code></pre>`;
       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>`;
       }
       html += `</div>`;
       return html;
@@ -2868,54 +4053,290 @@ var CodePlugin = class extends DecorationPlugin {
     }
     return null;
   }
+  /** Parse comma-separated numbers and ranges (e.g. "1,3-5") into [1,3,4,5]. */
+  parseNumberList(value) {
+    const result = [];
+    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.
    */
-  highlightCodeLine(line, lang, ctx) {
-    if (!lang || !line) {
-      return ctx.sanitize(line);
+  async highlightCodeLines(code, lang, syntaxHighlighters) {
+    const rawLines = code.split("\n");
+    if (!lang || !code) {
+      return rawLines.map((line) => this.escapeHtml(line));
     }
-    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 = [""];
       highlightCode(
-        line,
+        code,
         tree,
-        classHighlighter,
+        syntaxHighlighters && syntaxHighlighters.length > 0 ? syntaxHighlighters : [],
         (text, classes2) => {
-          if (classes2) {
-            result += `<span class="${classes2}">${ctx.sanitize(text)}</span>`;
-          } else {
-            result += ctx.sanitize(text);
-          }
+          const chunk = classes2 ? `<span class="${this.escapeAttribute(classes2)}">${this.escapeHtml(text)}</span>` : this.escapeHtml(text);
+          highlightedLines[highlightedLines.length - 1] += chunk;
         },
         () => {
+          highlightedLines.push("");
         }
-        // No newlines for single line
       );
-      return result;
+      return rawLines.map((line, index) => highlightedLines[index] || this.escapeHtml(line));
     } catch {
-      return ctx.sanitize(line);
+      return rawLines.map((line) => this.escapeHtml(line));
     }
   }
+  async resolveLanguageParser(lang) {
+    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;
+  }
+  normalizeLanguage(lang) {
+    const normalized = lang.trim().toLowerCase();
+    if (!normalized) return "";
+    const normalizedMap = {
+      "c++": "cpp",
+      "c#": "csharp",
+      "f#": "fsharp",
+      py: "python",
+      js: "javascript",
+      ts: "typescript",
+      sh: "shell"
+    };
+    return normalizedMap[normalized] ?? normalized;
+  }
+  escapeHtml(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  escapeAttribute(value) {
+    return this.escapeHtml(value).replace(/`/g, "&#96;");
+  }
+  analyzeDiffLines(lines) {
+    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;
+  }
+  computeDiffDisplayLineNumbers(states, startLineNum) {
+    const numbers = [];
+    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;
+  }
+  parseDiffLineState(line) {
+    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
+    };
+  }
+  computeChangedRanges(oldText, newText) {
+    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 = [];
+    const newRanges = [];
+    if (oldSuffix > prefix) {
+      oldRanges.push([prefix, oldSuffix]);
+    }
+    if (newSuffix > prefix) {
+      newRanges.push([prefix, newSuffix]);
+    }
+    return { oldRanges, newRanges };
+  }
+  renderDiffPreviewLine(diffState, highlightedContent) {
+    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 || " ";
+  }
+  applyRangesToHighlightedHTML(htmlContent, ranges, className) {
+    const normalizedRanges = ranges.map(([start, end]) => [Math.max(0, start), Math.max(0, end)]).filter(([start, end]) => end > start).sort((a, b) => a[0] - b[0]);
+    if (normalizedRanges.length === 0 || !htmlContent) {
+      return htmlContent;
+    }
+    const isInsideRange = (position) => {
+      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.
    */
-  applyTextHighlights(htmlContent, highlights) {
+  applyTextHighlights(htmlContent, highlights, instanceCounters) {
     let result = htmlContent;
-    for (const highlight of highlights) {
+    for (const [highlightIndex, highlight] of highlights.entries()) {
       try {
         const regex = new RegExp(`(${highlight.pattern})`, "g");
-        let matchCount = 0;
+        let matchCount = instanceCounters?.[highlightIndex] ?? 0;
         result = result.replace(regex, (match) => {
           matchCount++;
           const shouldHighlight = !highlight.instances || highlight.instances.includes(matchCount);
@@ -2924,252 +4345,15 @@ var CodePlugin = class extends DecorationPlugin {
           }
           return match;
         });
+        if (instanceCounters) {
+          instanceCounters[highlightIndex] = matchCount;
+        }
       } catch {
       }
     }
     return result;
   }
 };
-var theme10 = 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)"
-    }
-  }
-});
 var quoteMarkDecorations = {
   /** Decoration for the > marker */
   "quote-mark": Decoration.replace({}),
@@ -3337,6 +4521,103 @@ var theme12 = createTheme({
     }
   }
 });
+function shortcodeToEmoji(raw) {
+  const rendered = emoji.emojify(raw);
+  return rendered !== raw ? rendered : null;
+}
+var EmojiWidget = class extends WidgetType {
+  constructor(rendered) {
+    super();
+    this.rendered = rendered;
+  }
+  eq(other) {
+    return other.rendered === this.rendered;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-draftly-emoji";
+    span.textContent = this.rendered;
+    return span;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+var emojiMarkDecorations = {
+  "emoji-source": Decoration.mark({ class: "cm-draftly-emoji-source" })
+};
+var EmojiPlugin = class extends DecorationPlugin {
+  name = "emoji";
+  version = "1.0.0";
+  decorationPriority = 20;
+  requiredNodes = ["Emoji", "EmojiMark"];
+  constructor() {
+    super();
+  }
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme13;
+  }
+  /**
+   * Build emoji decorations by iterating the syntax tree
+   */
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        if (name !== "Emoji") {
+          return;
+        }
+        const raw = view.state.sliceDoc(from, to);
+        const rendered = shortcodeToEmoji(raw);
+        if (!rendered) {
+          return;
+        }
+        const cursorInNode = ctx.selectionOverlapsRange(from, to);
+        if (cursorInNode) {
+          decorations.push(emojiMarkDecorations["emoji-source"].range(from, to));
+          return;
+        }
+        decorations.push(
+          Decoration.replace({
+            widget: new EmojiWidget(rendered)
+          }).range(from, to)
+        );
+      }
+    });
+  }
+  renderToHTML(node, children, ctx) {
+    if (node.name === "EmojiMark") {
+      return "";
+    }
+    if (node.name !== "Emoji") {
+      return null;
+    }
+    const raw = ctx.sliceDoc(node.from, node.to);
+    const rendered = shortcodeToEmoji(raw);
+    if (!rendered) {
+      return `<span class="cm-draftly-emoji-source">${children}</span>`;
+    }
+    return `<span class="cm-draftly-emoji">${rendered}</span>`;
+  }
+};
+var theme13 = createTheme({
+  default: {
+    ".cm-draftly-emoji": {
+      fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif',
+      fontVariantEmoji: "emoji",
+      lineHeight: "1.2"
+    },
+    ".cm-draftly-emoji-source": {
+      fontFamily: "inherit",
+      lineHeight: "inherit"
+    }
+  }
+});
 
 // src/plugins/index.ts
 var essentialPlugins = [
@@ -3345,16 +4626,18 @@ var essentialPlugins = [
   new InlinePlugin(),
   new LinkPlugin(),
   new ListPlugin(),
+  new TablePlugin(),
   new HTMLPlugin(),
   new ImagePlugin(),
   new MathPlugin(),
   new MermaidPlugin(),
   new CodePlugin(),
   new QuotePlugin(),
-  new HRPlugin()
+  new HRPlugin(),
+  new EmojiPlugin()
 ];
 var allPlugins = [...essentialPlugins];
 
-export { CodePlugin, HRPlugin, HTMLPlugin, HeadingPlugin, ImagePlugin, InlinePlugin, LinkPlugin, ListPlugin, MathPlugin, MermaidPlugin, ParagraphPlugin, QuotePlugin, allPlugins, essentialPlugins };
-//# sourceMappingURL=chunk-N3WL3XPB.js.map
-//# sourceMappingURL=chunk-N3WL3XPB.js.map
+export { CodePlugin, EmojiPlugin, HRPlugin, HTMLPlugin, HeadingPlugin, ImagePlugin, InlinePlugin, LinkPlugin, ListPlugin, MathPlugin, MermaidPlugin, ParagraphPlugin, QuotePlugin, TablePlugin, allPlugins, essentialPlugins };
+//# sourceMappingURL=chunk-L2XSK57Y.js.map
+//# sourceMappingURL=chunk-L2XSK57Y.js.map