draftly 1.0.7 → 2.1.0

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

@@ -1,13 +1,18 @@
-import { DraftlyPlugin, DecorationPlugin } from './chunk-CG4M4TC7.js';
-import { createTheme, toggleMarkdownStyle } from './chunk-DFQYXFOP.js';
-import { Decoration, WidgetType } from '@codemirror/view';
-import { syntaxTree } from '@codemirror/language';
-import { tags, highlightCode, classHighlighter } from '@lezer/highlight';
+import { DraftlyPlugin, DecorationPlugin } from './chunk-UCHBDJ4R.js';
+import { createWrapSelectionInputHandler } from './chunk-JF3WXXMJ.js';
+import { PreviewRenderer } from './chunk-I563H35S.js';
+import { createTheme, toggleMarkdownStyle } from './chunk-TD3L5C45.js';
+import { Decoration, BlockWrapper, keymap, EditorView, WidgetType } from '@codemirror/view';
+import { syntaxTree, LanguageDescription } from '@codemirror/language';
+import { tags, highlightCode } from '@lezer/highlight';
+import { Annotation, Prec, RangeSet } from '@codemirror/state';
+import { Table } from '@lezer/markdown';
 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 +297,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,132 +1126,1493 @@ var theme5 = createTheme({
     }
   }
 });
-var htmlMarkDecorations = {
-  "html-tag": Decoration.mark({ class: "cm-draftly-html-tag" }),
-  "html-comment": Decoration.mark({ class: "cm-draftly-html-comment" })
-};
-var htmlLineDecorations = {
-  "html-block": Decoration.line({ class: "cm-draftly-line-html-block" }),
-  "hidden-line": Decoration.line({ class: "cm-draftly-hidden-line" })
+var BREAK_TAG = "<br />";
+var BREAK_TAG_REGEX = /<br\s*\/?>/gi;
+var DELIMITER_CELL_PATTERN = /^:?-{3,}:?$/;
+var TABLE_SUB_NODE_NAMES = /* @__PURE__ */ new Set(["TableHeader", "TableDelimiter", "TableRow", "TableCell"]);
+var TABLE_TEMPLATE = {
+  headers: ["Header 1", "Header 2", "Header 3"],
+  alignments: ["left", "left", "left"],
+  rows: [["", "", ""]]
 };
-var HTMLPreviewWidget = class extends WidgetType {
-  constructor(html) {
-    super();
-    this.html = html;
-  }
-  eq(other) {
-    return other.html === this.html;
+var normalizeAnnotation = Annotation.define();
+var repairSelectionAnnotation = Annotation.define();
+var pipeReplace = Decoration.replace({});
+var delimiterReplace = Decoration.replace({});
+var tableBlockWrapper = BlockWrapper.create({
+  tagName: "div",
+  attributes: { class: "cm-draftly-table-wrapper" }
+});
+var TableBreakWidget = class extends WidgetType {
+  /** Reuses the same widget instance for identical break markers. */
+  eq() {
+    return true;
   }
+  /** Renders an inline `<br />` placeholder inside a table cell. */
   toDOM() {
-    const div = document.createElement("div");
-    div.className = "cm-draftly-html-preview";
-    div.innerHTML = DOMPurify.sanitize(this.html);
-    return div;
+    const span = document.createElement("span");
+    span.className = "cm-draftly-table-break";
+    span.setAttribute("aria-label", "line break");
+    span.appendChild(document.createElement("br"));
+    return span;
   }
+  /** Allows the editor to observe events on the rendered break widget. */
   ignoreEvent() {
     return false;
   }
 };
-var InlineHTMLPreviewWidget = class extends WidgetType {
-  constructor(html) {
+var TableControlsWidget = class extends WidgetType {
+  constructor(onAddRow, onAddColumn) {
     super();
-    this.html = html;
+    this.onAddRow = onAddRow;
+    this.onAddColumn = onAddColumn;
   }
-  eq(other) {
-    return other.html === this.html;
+  /** Forces the control widget to be recreated so handlers stay current. */
+  eq() {
+    return false;
   }
-  toDOM() {
-    const span = document.createElement("span");
-    span.className = "cm-draftly-inline-html-preview";
-    span.innerHTML = DOMPurify.sanitize(this.html);
-    return span;
+  /** Renders the hover controls used to append rows and columns. */
+  toDOM(view) {
+    const anchor = document.createElement("span");
+    anchor.className = "cm-draftly-table-controls-anchor";
+    anchor.setAttribute("aria-hidden", "true");
+    const rightButton = this.createButton("Add column", "cm-draftly-table-control cm-draftly-table-control-column");
+    rightButton.addEventListener("mousedown", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.onAddColumn(view);
+    });
+    const bottomButton = this.createButton("Add row", "cm-draftly-table-control cm-draftly-table-control-row");
+    bottomButton.addEventListener("mousedown", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.onAddRow(view);
+    });
+    anchor.append(rightButton, bottomButton);
+    return anchor;
   }
+  /** Lets button events bubble through the widget. */
   ignoreEvent() {
     return false;
   }
+  /** Builds a single control button with the provided label and class. */
+  createButton(label, className) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = className;
+    button.setAttribute("tabindex", "-1");
+    button.setAttribute("aria-label", label);
+    button.textContent = "+";
+    return button;
+  }
 };
-function parseHTMLTag(content) {
-  const match = content.match(/^<\s*(\/?)([a-zA-Z][a-zA-Z0-9-]*)[^>]*(\/?)>$/);
-  if (!match) return null;
+function isEscaped(text, index) {
+  let slashCount = 0;
+  for (let i = index - 1; i >= 0 && text[i] === "\\"; i--) {
+    slashCount++;
+  }
+  return slashCount % 2 === 1;
+}
+function getPipePositions(lineText) {
+  const positions = [];
+  for (let index = 0; index < lineText.length; index++) {
+    if (lineText[index] === "|" && !isEscaped(lineText, index)) {
+      positions.push(index);
+    }
+  }
+  return positions;
+}
+function splitTableLine(lineText) {
+  const cells = [];
+  const trimmed = lineText.trim();
+  if (!trimmed.includes("|")) {
+    return [trimmed];
+  }
+  let current = "";
+  for (let index = 0; index < trimmed.length; index++) {
+    const char = trimmed[index];
+    if (char === "|" && !isEscaped(trimmed, index)) {
+      cells.push(current);
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  cells.push(current);
+  if (trimmed.startsWith("|")) {
+    cells.shift();
+  }
+  if (trimmed.endsWith("|")) {
+    cells.pop();
+  }
+  return cells;
+}
+function isTableRowLine(lineText) {
+  return getPipePositions(lineText.trim()).length > 0;
+}
+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 parseDelimiterAlignments(lineText) {
+  const cells = splitTableLine(lineText).map((cell) => cell.trim());
+  if (cells.length === 0 || !cells.every((cell) => DELIMITER_CELL_PATTERN.test(cell))) {
+    return null;
+  }
+  return cells.map(parseAlignment);
+}
+function splitTableAndTrailingMarkdown(markdown) {
+  const lines = markdown.split("\n");
+  if (lines.length < 2) {
+    return { tableMarkdown: markdown, trailingMarkdown: "" };
+  }
+  const headerLine = lines[0] || "";
+  const delimiterLine = lines[1] || "";
+  if (!isTableRowLine(headerLine) || !parseDelimiterAlignments(delimiterLine)) {
+    return { tableMarkdown: markdown, trailingMarkdown: "" };
+  }
+  let endIndex = 1;
+  for (let index = 2; index < lines.length; index++) {
+    if (!isTableRowLine(lines[index] || "")) {
+      break;
+    }
+    endIndex = index;
+  }
   return {
-    tagName: match[2].toLowerCase(),
-    isClosing: match[1] === "/",
-    isSelfClosing: match[3] === "/" || ["br", "hr", "img", "input", "meta", "link", "area", "base", "col", "embed", "source", "track", "wbr"].includes(
-      match[2].toLowerCase()
-    )
+    tableMarkdown: lines.slice(0, endIndex + 1).join("\n"),
+    trailingMarkdown: lines.slice(endIndex + 1).join("\n")
   };
 }
-var HTMLPlugin = class extends DecorationPlugin {
-  name = "html";
-  version = "1.0.0";
-  decorationPriority = 30;
-  constructor() {
-    super();
+function canonicalizeBreakTags(text) {
+  return text.replace(BREAK_TAG_REGEX, BREAK_TAG);
+}
+function escapeUnescapedPipes(text) {
+  let result = "";
+  for (let index = 0; index < text.length; index++) {
+    const char = text[index];
+    if (char === "|" && !isEscaped(text, index)) {
+      result += "\\|";
+      continue;
+    }
+    result += char;
   }
-  /**
-   * Plugin theme
-   */
+  return result;
+}
+function normalizeCellContent(text) {
+  const normalizedBreaks = canonicalizeBreakTags(text.trim());
+  if (!normalizedBreaks) {
+    return "";
+  }
+  const parts = normalizedBreaks.split(BREAK_TAG_REGEX).map((part) => escapeUnescapedPipes(part.trim()));
+  if (parts.length === 1) {
+    return parts[0] || "";
+  }
+  return parts.join(` ${BREAK_TAG} `).trim();
+}
+function renderWidth(text) {
+  return canonicalizeBreakTags(text).replace(BREAK_TAG, " ").replace(/\\\|/g, "|").length;
+}
+function padCell(text, width, alignment) {
+  const safeWidth = Math.max(width, renderWidth(text));
+  const difference = safeWidth - renderWidth(text);
+  if (difference <= 0) {
+    return text;
+  }
+  if (alignment === "right") {
+    return " ".repeat(difference) + text;
+  }
+  if (alignment === "center") {
+    const left = Math.floor(difference / 2);
+    const right = difference - left;
+    return " ".repeat(left) + text + " ".repeat(right);
+  }
+  return text + " ".repeat(difference);
+}
+function delimiterCell(width, alignment) {
+  const hyphenCount = Math.max(width, 3);
+  if (alignment === "center") {
+    return ":" + "-".repeat(Math.max(1, hyphenCount - 2)) + ":";
+  }
+  if (alignment === "right") {
+    return "-".repeat(Math.max(2, hyphenCount - 1)) + ":";
+  }
+  return "-".repeat(hyphenCount);
+}
+function parseTableMarkdown(markdown) {
+  const { tableMarkdown } = splitTableAndTrailingMarkdown(markdown);
+  const lines = tableMarkdown.split("\n");
+  if (lines.length < 2) {
+    return null;
+  }
+  const headers = splitTableLine(lines[0] || "").map((cell) => cell.trim());
+  const alignments = parseDelimiterAlignments(lines[1] || "");
+  if (!alignments) {
+    return null;
+  }
+  const rows = lines.slice(2).filter((line) => isTableRowLine(line)).map((line) => splitTableLine(line).map((cell) => cell.trim()));
+  return { headers, alignments, rows };
+}
+function normalizeParsedTable(parsed) {
+  const columnCount = Math.max(
+    parsed.headers.length,
+    parsed.alignments.length,
+    ...parsed.rows.map((row) => row.length),
+    1
+  );
+  const headers = Array.from({ length: columnCount }, (_, index) => normalizeCellContent(parsed.headers[index] || ""));
+  const alignments = Array.from({ length: columnCount }, (_, index) => parsed.alignments[index] || "left");
+  const rows = parsed.rows.map(
+    (row) => Array.from({ length: columnCount }, (_, index) => normalizeCellContent(row[index] || ""))
+  );
+  return { headers, alignments, rows };
+}
+function formatTableMarkdown(parsed) {
+  const normalized = normalizeParsedTable(parsed);
+  const widths = normalized.headers.map(
+    (header, index) => Math.max(renderWidth(header), ...normalized.rows.map((row) => renderWidth(row[index] || "")), 3)
+  );
+  const formatRow = (cells) => `| ${cells.map((cell, index) => padCell(cell, widths[index] || 3, normalized.alignments[index] || "left")).join(" | ")} |`;
+  const headerLine = formatRow(normalized.headers);
+  const delimiterLine = `| ${normalized.alignments.map((alignment, index) => delimiterCell(widths[index] || 3, alignment)).join(" | ")} |`;
+  const bodyLines = normalized.rows.map((row) => formatRow(row));
+  return [headerLine, delimiterLine, ...bodyLines].join("\n");
+}
+function buildEmptyRow(columnCount) {
+  return Array.from({ length: columnCount }, () => "");
+}
+function createPreviewRenderer(markdown, config) {
+  const plugins = (config?.plugins || []).filter((plugin) => plugin.name !== "paragraph");
+  return new PreviewRenderer(markdown, plugins, config?.markdown || [], config?.theme || "auto" /* AUTO */, true);
+}
+function stripSingleParagraph(html) {
+  const trimmed = html.trim();
+  const match = trimmed.match(/^<p\b[^>]*>([\s\S]*)<\/p>$/i);
+  return match?.[1] || trimmed;
+}
+async function renderCellToHtml(text, config) {
+  if (!text.trim()) {
+    return "&nbsp;";
+  }
+  return stripSingleParagraph(await createPreviewRenderer(text, config).render());
+}
+async function renderTableToHtml(parsed, config) {
+  const normalized = normalizeParsedTable(parsed);
+  let html = '<div class="cm-draftly-table-widget"><table class="cm-draftly-table cm-draftly-table-preview">';
+  html += '<thead><tr class="cm-draftly-table-row cm-draftly-table-header-row">';
+  for (let index = 0; index < normalized.headers.length; index++) {
+    const alignment = normalized.alignments[index] || "left";
+    const content = await renderCellToHtml(normalized.headers[index] || "", config);
+    html += `<th class="cm-draftly-table-cell cm-draftly-table-th${alignment === "center" ? " cm-draftly-table-cell-center" : alignment === "right" ? " cm-draftly-table-cell-right" : ""}${index === normalized.headers.length - 1 ? " cm-draftly-table-cell-last" : ""}">${content}</th>`;
+  }
+  html += "</tr></thead><tbody>";
+  for (let rowIndex = 0; rowIndex < normalized.rows.length; rowIndex++) {
+    const row = normalized.rows[rowIndex] || [];
+    html += `<tr class="cm-draftly-table-row cm-draftly-table-body-row${rowIndex % 2 === 1 ? " cm-draftly-table-row-even" : ""}${rowIndex === normalized.rows.length - 1 ? " cm-draftly-table-row-last" : ""}">`;
+    for (let index = 0; index < normalized.headers.length; index++) {
+      const alignment = normalized.alignments[index] || "left";
+      const content = await renderCellToHtml(row[index] || "", config);
+      html += `<td class="cm-draftly-table-cell${alignment === "center" ? " cm-draftly-table-cell-center" : alignment === "right" ? " cm-draftly-table-cell-right" : ""}${index === normalized.headers.length - 1 ? " cm-draftly-table-cell-last" : ""}">${content}</td>`;
+    }
+    html += "</tr>";
+  }
+  html += "</tbody></table></div>";
+  return html;
+}
+function getVisibleBounds(rawCellText) {
+  const leading = rawCellText.length - rawCellText.trimStart().length;
+  const trailing = rawCellText.length - rawCellText.trimEnd().length;
+  const trimmedLength = rawCellText.trim().length;
+  if (trimmedLength === 0) {
+    const placeholderOffset = Math.min(Math.floor(rawCellText.length / 2), Math.max(rawCellText.length - 1, 0));
+    return {
+      startOffset: placeholderOffset,
+      endOffset: Math.min(placeholderOffset + 1, rawCellText.length)
+    };
+  }
+  return {
+    startOffset: leading,
+    endOffset: rawCellText.length - trailing
+  };
+}
+function isBodyRowEmpty(row) {
+  return row.every((cell) => normalizeCellContent(cell.rawText) === "");
+}
+function buildTableFromInfo(tableInfo) {
+  return {
+    headers: tableInfo.headerCells.map((cell) => normalizeCellContent(cell.rawText)),
+    alignments: [...tableInfo.alignments],
+    rows: tableInfo.bodyCells.map((row) => row.map((cell) => normalizeCellContent(cell.rawText)))
+  };
+}
+function getRowLineIndex(rowIndex) {
+  return rowIndex === 0 ? 0 : rowIndex + 1;
+}
+function getCellAnchorInFormattedTable(formattedTable, rowIndex, columnIndex, offset = 0) {
+  const lines = formattedTable.split("\n");
+  const lineIndex = getRowLineIndex(rowIndex);
+  const lineText = lines[lineIndex] || "";
+  const pipes = getPipePositions(lineText);
+  if (pipes.length < columnIndex + 2) {
+    return formattedTable.length;
+  }
+  const rawFrom = pipes[columnIndex] + 1;
+  const rawTo = pipes[columnIndex + 1];
+  const visible = getVisibleBounds(lineText.slice(rawFrom, rawTo));
+  const lineOffset = lines.slice(0, lineIndex).reduce((sum, line) => sum + line.length + 1, 0);
+  return lineOffset + Math.min(rawFrom + visible.startOffset + offset, rawFrom + Math.max(visible.endOffset - 1, visible.startOffset));
+}
+function createTableInsert(state, from, to, tableMarkdown) {
+  let insert = tableMarkdown;
+  let prefixLength = 0;
+  const startLine = state.doc.lineAt(from);
+  if (startLine.number === 1 || state.doc.line(startLine.number - 1).text.trim() !== "") {
+    insert = "\n" + insert;
+    prefixLength = 1;
+  }
+  const endLine = state.doc.lineAt(Math.max(from, to));
+  if (endLine.number === state.doc.lines || state.doc.line(endLine.number + 1).text.trim() !== "") {
+    insert += "\n";
+  }
+  return { from, to, insert, prefixLength };
+}
+function readTableInfo(state, nodeFrom, nodeTo) {
+  const startLine = state.doc.lineAt(nodeFrom);
+  const endLine = state.doc.lineAt(nodeTo);
+  const delimiterLineNumber = startLine.number + 1;
+  if (delimiterLineNumber > endLine.number) {
+    return null;
+  }
+  const delimiterLine = state.doc.line(delimiterLineNumber);
+  const alignments = parseDelimiterAlignments(delimiterLine.text);
+  if (!alignments) {
+    return null;
+  }
+  let effectiveEndLineNumber = delimiterLineNumber;
+  for (let lineNumber = delimiterLineNumber + 1; lineNumber <= endLine.number; lineNumber++) {
+    const line = state.doc.line(lineNumber);
+    if (!isTableRowLine(line.text)) {
+      break;
+    }
+    effectiveEndLineNumber = lineNumber;
+  }
+  const cellsByRow = [];
+  for (let lineNumber = startLine.number; lineNumber <= effectiveEndLineNumber; lineNumber++) {
+    if (lineNumber === delimiterLineNumber) {
+      continue;
+    }
+    const line = state.doc.line(lineNumber);
+    const pipes = getPipePositions(line.text);
+    if (pipes.length < 2) {
+      return null;
+    }
+    const isHeader = lineNumber === startLine.number;
+    const rowIndex = isHeader ? 0 : cellsByRow.length;
+    const cells = [];
+    for (let columnIndex = 0; columnIndex < pipes.length - 1; columnIndex++) {
+      const from = line.from + pipes[columnIndex] + 1;
+      const to = line.from + pipes[columnIndex + 1];
+      const rawText = line.text.slice(pipes[columnIndex] + 1, pipes[columnIndex + 1]);
+      const visible = getVisibleBounds(rawText);
+      cells.push({
+        rowKind: isHeader ? "header" : "body",
+        rowIndex,
+        columnIndex,
+        from,
+        to,
+        contentFrom: from + visible.startOffset,
+        contentTo: from + visible.endOffset,
+        lineFrom: line.from,
+        lineNumber,
+        rawText
+      });
+    }
+    cellsByRow.push(cells);
+  }
+  if (cellsByRow.length === 0) {
+    return null;
+  }
+  return {
+    from: startLine.from,
+    to: state.doc.line(effectiveEndLineNumber).to,
+    startLineNumber: startLine.number,
+    delimiterLineNumber,
+    endLineNumber: effectiveEndLineNumber,
+    columnCount: cellsByRow[0].length,
+    alignments: Array.from({ length: cellsByRow[0].length }, (_, index) => alignments[index] || "left"),
+    cellsByRow,
+    headerCells: cellsByRow[0],
+    bodyCells: cellsByRow.slice(1)
+  };
+}
+function getTableInfoAtPosition(state, position) {
+  let resolved = null;
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (resolved || node.name !== "Table") {
+        return;
+      }
+      const info = readTableInfo(state, node.from, node.to);
+      if (info && position >= info.from && position <= info.to) {
+        resolved = info;
+      }
+    }
+  });
+  return resolved;
+}
+function findCellAtPosition(tableInfo, position) {
+  for (const row of tableInfo.cellsByRow) {
+    for (const cell of row) {
+      if (position >= cell.from && position <= cell.to) {
+        return cell;
+      }
+    }
+  }
+  for (const row of tableInfo.cellsByRow) {
+    for (const cell of row) {
+      if (position >= cell.from - 1 && position <= cell.to + 1) {
+        return cell;
+      }
+    }
+  }
+  let nearestCell = null;
+  let nearestDistance = Number.POSITIVE_INFINITY;
+  for (const row of tableInfo.cellsByRow) {
+    for (const cell of row) {
+      const distance = Math.min(Math.abs(position - cell.from), Math.abs(position - cell.to));
+      if (distance < nearestDistance) {
+        nearestCell = cell;
+        nearestDistance = distance;
+      }
+    }
+  }
+  return nearestCell;
+}
+function clampCellPosition(cell, position) {
+  const cellEnd = Math.max(cell.contentFrom, cell.contentTo);
+  return Math.max(cell.contentFrom, Math.min(position, cellEnd));
+}
+function collectBreakRanges(tableInfo) {
+  const ranges = [];
+  for (const row of tableInfo.cellsByRow) {
+    for (const cell of row) {
+      let match;
+      const regex = new RegExp(BREAK_TAG_REGEX);
+      while ((match = regex.exec(cell.rawText)) !== null) {
+        ranges.push({
+          from: cell.from + match.index,
+          to: cell.from + match.index + match[0].length
+        });
+      }
+    }
+  }
+  return ranges;
+}
+var lineDecorations = {
+  header: Decoration.line({ class: "cm-draftly-table-row cm-draftly-table-header-row" }),
+  delimiter: Decoration.line({ class: "cm-draftly-table-row cm-draftly-table-delimiter-row" }),
+  body: Decoration.line({ class: "cm-draftly-table-row cm-draftly-table-body-row" }),
+  even: Decoration.line({ class: "cm-draftly-table-row cm-draftly-table-body-row cm-draftly-table-row-even" }),
+  last: Decoration.line({ class: "cm-draftly-table-row-last" })
+};
+var cellDecorations = {
+  "th-left": Decoration.mark({ class: "cm-draftly-table-cell cm-draftly-table-th" }),
+  "th-center": Decoration.mark({ class: "cm-draftly-table-cell cm-draftly-table-th cm-draftly-table-cell-center" }),
+  "th-right": Decoration.mark({ class: "cm-draftly-table-cell cm-draftly-table-th cm-draftly-table-cell-right" }),
+  "th-left-last": Decoration.mark({ class: "cm-draftly-table-cell cm-draftly-table-th cm-draftly-table-cell-last" }),
+  "th-center-last": Decoration.mark({
+    class: "cm-draftly-table-cell cm-draftly-table-th cm-draftly-table-cell-center cm-draftly-table-cell-last"
+  }),
+  "th-right-last": Decoration.mark({
+    class: "cm-draftly-table-cell cm-draftly-table-th cm-draftly-table-cell-right cm-draftly-table-cell-last"
+  }),
+  "td-left": Decoration.mark({ class: "cm-draftly-table-cell" }),
+  "td-center": Decoration.mark({ class: "cm-draftly-table-cell cm-draftly-table-cell-center" }),
+  "td-right": Decoration.mark({ class: "cm-draftly-table-cell cm-draftly-table-cell-right" }),
+  "td-left-last": Decoration.mark({ class: "cm-draftly-table-cell cm-draftly-table-cell-last" }),
+  "td-center-last": Decoration.mark({
+    class: "cm-draftly-table-cell cm-draftly-table-cell-center cm-draftly-table-cell-last"
+  }),
+  "td-right-last": Decoration.mark({
+    class: "cm-draftly-table-cell cm-draftly-table-cell-right cm-draftly-table-cell-last"
+  })
+};
+function getCellDecoration(isHeader, alignment, isLastCell) {
+  const key = `${isHeader ? "th" : "td"}-${alignment}${isLastCell ? "-last" : ""}`;
+  return cellDecorations[key];
+}
+var TablePlugin = class extends DecorationPlugin {
+  name = "table";
+  version = "2.0.0";
+  decorationPriority = 20;
+  requiredNodes = ["Table", "TableHeader", "TableDelimiter", "TableRow", "TableCell"];
+  draftlyConfig;
+  pendingNormalizationView = null;
+  pendingPaddingView = null;
+  pendingSelectionRepairView = null;
+  /** Stores the editor config for preview rendering and shared behavior. */
+  onRegister(context) {
+    super.onRegister(context);
+    this.draftlyConfig = context.config;
+  }
+  /** Exposes the plugin theme used for editor and preview styling. */
   get theme() {
     return theme6;
   }
+  /** Enables GFM table parsing for the editor and preview renderer. */
+  getMarkdownConfig() {
+    return Table;
+  }
+  /** Registers block wrappers and atomic ranges for the table UI. */
+  getExtensions() {
+    return [
+      Prec.highest(keymap.of(this.buildTableKeymap())),
+      EditorView.blockWrappers.of((view) => this.computeBlockWrappers(view)),
+      EditorView.atomicRanges.of((view) => this.computeAtomicRanges(view)),
+      EditorView.domEventHandlers({
+        keydown: (event, view) => this.handleDomKeydown(view, event)
+      })
+    ];
+  }
+  /** Provides the table-specific keyboard shortcuts and navigation. */
+  getKeymap() {
+    return [];
+  }
+  /** Builds the high-priority key bindings used inside tables. */
+  buildTableKeymap() {
+    return [
+      { key: "Mod-Shift-t", run: (view) => this.insertTable(view), preventDefault: true },
+      { key: "Mod-Alt-ArrowDown", run: (view) => this.addRow(view), preventDefault: true },
+      { key: "Mod-Alt-ArrowRight", run: (view) => this.addColumn(view), preventDefault: true },
+      { key: "Mod-Alt-Backspace", run: (view) => this.removeRow(view), preventDefault: true },
+      { key: "Mod-Alt-Delete", run: (view) => this.removeColumn(view), preventDefault: true },
+      { key: "Tab", run: (view) => this.handleTab(view, false) },
+      { key: "Shift-Tab", run: (view) => this.handleTab(view, true) },
+      { key: "ArrowLeft", run: (view) => this.handleArrowHorizontal(view, false) },
+      { key: "ArrowRight", run: (view) => this.handleArrowHorizontal(view, true) },
+      { key: "ArrowUp", run: (view) => this.handleArrowVertical(view, false) },
+      { key: "ArrowDown", run: (view) => this.handleArrowVertical(view, true) },
+      { key: "Enter", run: (view) => this.handleEnter(view) },
+      { key: "Shift-Enter", run: (view) => this.insertBreakTag(view), preventDefault: true },
+      { key: "Backspace", run: (view) => this.handleBreakDeletion(view, false) },
+      { key: "Delete", run: (view) => this.handleBreakDeletion(view, true) }
+    ];
+  }
+  /** Schedules an initial normalization pass once the view is ready. */
+  onViewReady(view) {
+    this.scheduleNormalization(view);
+  }
+  /** Re-schedules normalization after user-driven document changes. */
+  onViewUpdate(update) {
+    if (update.docChanged && !update.transactions.some((transaction) => transaction.annotation(normalizeAnnotation))) {
+      this.schedulePadding(update.view);
+    }
+    if (update.selectionSet && !update.transactions.some((transaction) => transaction.annotation(repairSelectionAnnotation))) {
+      this.scheduleSelectionRepair(update.view);
+    }
+  }
+  /** Intercepts table-specific DOM key handling before browser defaults run. */
+  handleDomKeydown(view, event) {
+    if (event.defaultPrevented || event.isComposing || event.altKey || event.metaKey || event.ctrlKey) {
+      return false;
+    }
+    let handled = false;
+    if (event.key === "Tab") {
+      handled = this.handleTab(view, event.shiftKey);
+    } else if (event.key === "Enter" && event.shiftKey) {
+      handled = this.insertBreakTag(view);
+    } else if (event.key === "Enter") {
+      handled = this.handleEnter(view);
+    } else if (event.key === "ArrowLeft") {
+      handled = this.handleArrowHorizontal(view, false);
+    } else if (event.key === "ArrowRight") {
+      handled = this.handleArrowHorizontal(view, true);
+    } else if (event.key === "ArrowUp") {
+      handled = this.handleArrowVertical(view, false);
+    } else if (event.key === "ArrowDown") {
+      handled = this.handleArrowVertical(view, true);
+    } else if (event.key === "Backspace") {
+      handled = this.handleBreakDeletion(view, false);
+    } else if (event.key === "Delete") {
+      handled = this.handleBreakDeletion(view, true);
+    }
+    if (handled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    return handled;
+  }
+  /** Builds the visual table decorations for every parsed table block. */
   buildDecorations(ctx) {
     const { view, decorations } = ctx;
-    const tree = syntaxTree(view.state);
-    const htmlGroups = [];
-    const htmlTags = [];
-    tree.iterate({
+    syntaxTree(view.state).iterate({
       enter: (node) => {
-        const { from, to, name } = node;
-        if (name === "Comment") {
-          decorations.push(htmlMarkDecorations["html-comment"].range(from, to));
+        if (node.name !== "Table") {
           return;
         }
-        if (name === "HTMLTag") {
-          const content = view.state.sliceDoc(from, to);
-          const parsed = parseHTMLTag(content);
-          if (parsed) {
-            htmlTags.push({
-              from,
-              to,
-              tagName: parsed.tagName,
-              isClosing: parsed.isClosing,
-              isSelfClosing: parsed.isSelfClosing
-            });
-          }
+        const tableInfo = readTableInfo(view.state, node.from, node.to);
+        if (tableInfo) {
+          this.decorateTable(view, decorations, tableInfo);
         }
-        if (name === "HTMLBlock") {
-          const last = htmlGroups[htmlGroups.length - 1];
-          if (last) {
-            const gap = view.state.sliceDoc(last.to, from);
-            if (!gap.trim()) {
-              last.to = to;
-              return;
+      }
+    });
+  }
+  /** Renders the full table node to semantic preview HTML. */
+  async renderToHTML(node, _children, ctx) {
+    if (node.name === "Table") {
+      const content = ctx.sliceDoc(node.from, node.to);
+      const { tableMarkdown, trailingMarkdown } = splitTableAndTrailingMarkdown(content);
+      const parsed = parseTableMarkdown(tableMarkdown);
+      if (!parsed) {
+        return null;
+      }
+      const tableHtml = await renderTableToHtml(parsed, this.draftlyConfig);
+      if (!trailingMarkdown.trim()) {
+        return tableHtml;
+      }
+      return tableHtml + await createPreviewRenderer(trailingMarkdown, this.draftlyConfig).render();
+    }
+    if (TABLE_SUB_NODE_NAMES.has(node.name)) {
+      return "";
+    }
+    return null;
+  }
+  /** Computes the block wrapper ranges used to group table lines. */
+  computeBlockWrappers(view) {
+    const wrappers = [];
+    syntaxTree(view.state).iterate({
+      enter: (node) => {
+        if (node.name !== "Table") {
+          return;
+        }
+        const tableInfo = readTableInfo(view.state, node.from, node.to);
+        if (tableInfo) {
+          wrappers.push(tableBlockWrapper.range(tableInfo.from, tableInfo.to));
+        }
+      }
+    });
+    return BlockWrapper.set(wrappers, true);
+  }
+  /** Computes atomic ranges for delimiters and inline break tags. */
+  computeAtomicRanges(view) {
+    const ranges = [];
+    syntaxTree(view.state).iterate({
+      enter: (node) => {
+        if (node.name !== "Table") {
+          return;
+        }
+        const tableInfo = readTableInfo(view.state, node.from, node.to);
+        if (!tableInfo) {
+          return;
+        }
+        for (let lineNumber = tableInfo.startLineNumber; lineNumber <= tableInfo.endLineNumber; lineNumber++) {
+          const line = view.state.doc.line(lineNumber);
+          if (lineNumber === tableInfo.delimiterLineNumber) {
+            ranges.push(delimiterReplace.range(line.from, line.to));
+            continue;
+          }
+          const pipes = getPipePositions(line.text);
+          for (const pipe of pipes) {
+            ranges.push(pipeReplace.range(line.from + pipe, line.from + pipe + 1));
+          }
+          for (let columnIndex = 0; columnIndex < pipes.length - 1; columnIndex++) {
+            const rawFrom = pipes[columnIndex] + 1;
+            const rawTo = pipes[columnIndex + 1];
+            const rawText = line.text.slice(rawFrom, rawTo);
+            const visible = getVisibleBounds(rawText);
+            if (visible.startOffset > 0) {
+              ranges.push(pipeReplace.range(line.from + rawFrom, line.from + rawFrom + visible.startOffset));
+            }
+            if (visible.endOffset < rawText.length) {
+              ranges.push(pipeReplace.range(line.from + rawFrom + visible.endOffset, line.from + rawTo));
+            }
+            let match;
+            const regex = new RegExp(BREAK_TAG_REGEX);
+            while ((match = regex.exec(rawText)) !== null) {
+              ranges.push(
+                Decoration.replace({ widget: new TableBreakWidget() }).range(
+                  line.from + rawFrom + match.index,
+                  line.from + rawFrom + match.index + match[0].length
+                )
+              );
             }
           }
-          htmlGroups.push({ from, to });
         }
       }
     });
-    const inlineElements = [];
-    const usedTags = /* @__PURE__ */ new Set();
-    for (let i = 0; i < htmlTags.length; i++) {
-      if (usedTags.has(i)) continue;
-      const openTag = htmlTags[i];
-      if (openTag.isClosing) continue;
-      if (openTag.isSelfClosing) {
-        inlineElements.push({
-          from: openTag.from,
-          to: openTag.to,
-          content: view.state.sliceDoc(openTag.from, openTag.to)
-        });
-        usedTags.add(i);
+    return RangeSet.of(ranges, true);
+  }
+  /** Applies row, cell, and control decorations for a single table. */
+  decorateTable(view, decorations, tableInfo) {
+    for (let lineNumber = tableInfo.startLineNumber; lineNumber <= tableInfo.endLineNumber; lineNumber++) {
+      const line = view.state.doc.line(lineNumber);
+      const isHeader = lineNumber === tableInfo.startLineNumber;
+      const isDelimiter = lineNumber === tableInfo.delimiterLineNumber;
+      const isLastBody = !isHeader && !isDelimiter && lineNumber === tableInfo.endLineNumber;
+      const bodyIndex = isHeader || isDelimiter ? -1 : lineNumber - tableInfo.delimiterLineNumber - 1;
+      if (isHeader) {
+        decorations.push(lineDecorations.header.range(line.from));
+      } else if (isDelimiter) {
+        decorations.push(lineDecorations.delimiter.range(line.from));
+      } else if (bodyIndex % 2 === 1) {
+        decorations.push(lineDecorations.even.range(line.from));
+      } else {
+        decorations.push(lineDecorations.body.range(line.from));
+      }
+      if (isLastBody) {
+        decorations.push(lineDecorations.last.range(line.from));
+      }
+      if (isDelimiter) {
+        decorations.push(delimiterReplace.range(line.from, line.to));
         continue;
       }
-      const openLine = view.state.doc.lineAt(openTag.from);
-      let depth = 1;
-      let closeTagIndex = null;
-      for (let j = i + 1; j < htmlTags.length && depth > 0; j++) {
-        const tag = htmlTags[j];
+      this.decorateLine(decorations, line.from, line.text, tableInfo.alignments, isHeader);
+    }
+    decorations.push(
+      Decoration.widget({
+        widget: new TableControlsWidget(
+          (view2) => {
+            const liveTable = getTableInfoAtPosition(view2.state, tableInfo.from);
+            if (liveTable) {
+              this.appendRow(view2, liveTable, liveTable.columnCount - 1);
+            }
+          },
+          (view2) => {
+            const liveTable = getTableInfoAtPosition(view2.state, tableInfo.from);
+            if (liveTable) {
+              this.appendColumn(view2, liveTable);
+            }
+          }
+        ),
+        side: 1
+      }).range(tableInfo.to)
+    );
+  }
+  /** Applies the visual cell decorations for a single table row line. */
+  decorateLine(decorations, lineFrom, lineText, alignments, isHeader) {
+    const pipes = getPipePositions(lineText);
+    if (pipes.length < 2) {
+      return;
+    }
+    for (const pipe of pipes) {
+      decorations.push(pipeReplace.range(lineFrom + pipe, lineFrom + pipe + 1));
+    }
+    for (let columnIndex = 0; columnIndex < pipes.length - 1; columnIndex++) {
+      const rawFrom = pipes[columnIndex] + 1;
+      const rawTo = pipes[columnIndex + 1];
+      const rawText = lineText.slice(rawFrom, rawTo);
+      const visible = getVisibleBounds(rawText);
+      const absoluteFrom = lineFrom + rawFrom;
+      const absoluteTo = lineFrom + rawTo;
+      if (visible.startOffset > 0) {
+        decorations.push(pipeReplace.range(absoluteFrom, absoluteFrom + visible.startOffset));
+      }
+      if (visible.endOffset < rawText.length) {
+        decorations.push(pipeReplace.range(absoluteFrom + visible.endOffset, absoluteTo));
+      }
+      decorations.push(
+        getCellDecoration(isHeader, alignments[columnIndex] || "left", columnIndex === pipes.length - 2).range(
+          absoluteFrom,
+          absoluteTo
+        )
+      );
+      let match;
+      const regex = new RegExp(BREAK_TAG_REGEX);
+      while ((match = regex.exec(rawText)) !== null) {
+        decorations.push(
+          Decoration.replace({ widget: new TableBreakWidget() }).range(
+            absoluteFrom + match.index,
+            absoluteFrom + match.index + match[0].length
+          )
+        );
+      }
+    }
+  }
+  /** Normalizes every parsed table block back into canonical markdown. */
+  normalizeTables(view) {
+    const changes = [];
+    syntaxTree(view.state).iterate({
+      enter: (node) => {
+        if (node.name !== "Table") {
+          return;
+        }
+        const content = view.state.sliceDoc(node.from, node.to);
+        const { tableMarkdown } = splitTableAndTrailingMarkdown(content);
+        const parsed = parseTableMarkdown(tableMarkdown);
+        if (!parsed) {
+          return;
+        }
+        const formatted = formatTableMarkdown(parsed);
+        const change = createTableInsert(view.state, node.from, node.from + tableMarkdown.length, formatted);
+        if (change.insert !== tableMarkdown || change.from !== node.from || change.to !== node.from + tableMarkdown.length) {
+          changes.push({
+            from: change.from,
+            to: change.to,
+            insert: change.insert
+          });
+        }
+      }
+    });
+    if (changes.length > 0) {
+      view.dispatch({
+        changes: changes.sort((left, right) => right.from - left.from),
+        annotations: normalizeAnnotation.of(true)
+      });
+    }
+  }
+  /** Defers table normalization until the current update cycle is finished. */
+  scheduleNormalization(view) {
+    if (this.pendingNormalizationView === view) {
+      return;
+    }
+    this.pendingNormalizationView = view;
+    queueMicrotask(() => {
+      if (this.pendingNormalizationView !== view) {
+        return;
+      }
+      this.pendingNormalizationView = null;
+      this.normalizeTables(view);
+    });
+  }
+  /** Adds missing spacer lines above and below tables after edits. */
+  ensureTablePadding(view) {
+    const changes = [];
+    syntaxTree(view.state).iterate({
+      enter: (node) => {
+        if (node.name !== "Table") {
+          return;
+        }
+        const tableInfo = readTableInfo(view.state, node.from, node.to);
+        if (!tableInfo) {
+          return;
+        }
+        const startLine = view.state.doc.lineAt(tableInfo.from);
+        if (startLine.number === 1) {
+          changes.push({ from: startLine.from, to: startLine.from, insert: "\n" });
+        } else {
+          const previousLine = view.state.doc.line(startLine.number - 1);
+          if (previousLine.text.trim() !== "") {
+            changes.push({ from: startLine.from, to: startLine.from, insert: "\n" });
+          }
+        }
+        const endLine = view.state.doc.lineAt(tableInfo.to);
+        if (endLine.number === view.state.doc.lines) {
+          changes.push({ from: endLine.to, to: endLine.to, insert: "\n" });
+        } else {
+          const nextLine = view.state.doc.line(endLine.number + 1);
+          if (nextLine.text.trim() !== "") {
+            changes.push({ from: endLine.to, to: endLine.to, insert: "\n" });
+          }
+        }
+      }
+    });
+    if (changes.length > 0) {
+      view.dispatch({
+        changes: changes.sort((left, right) => right.from - left.from),
+        annotations: normalizeAnnotation.of(true)
+      });
+    }
+  }
+  /** Schedules a padding-only pass after the current update cycle finishes. */
+  schedulePadding(view) {
+    if (this.pendingPaddingView === view) {
+      return;
+    }
+    this.pendingPaddingView = view;
+    queueMicrotask(() => {
+      if (this.pendingPaddingView !== view) {
+        return;
+      }
+      this.pendingPaddingView = null;
+      this.ensureTablePadding(view);
+    });
+  }
+  /** Repairs carets that land in hidden table markup instead of editable cell content. */
+  ensureTableSelection(view) {
+    const selection = view.state.selection.main;
+    if (!selection.empty) {
+      return;
+    }
+    const tableInfo = getTableInfoAtPosition(view.state, selection.head);
+    if (!tableInfo) {
+      return;
+    }
+    const cell = findCellAtPosition(tableInfo, selection.head);
+    if (!cell) {
+      return;
+    }
+    const anchor = clampCellPosition(cell, selection.head);
+    if (anchor === selection.head) {
+      return;
+    }
+    view.dispatch({
+      selection: { anchor },
+      annotations: repairSelectionAnnotation.of(true),
+      scrollIntoView: true
+    });
+  }
+  /** Schedules table selection repair after the current update finishes. */
+  scheduleSelectionRepair(view) {
+    if (this.pendingSelectionRepairView === view) {
+      return;
+    }
+    this.pendingSelectionRepairView = view;
+    queueMicrotask(() => {
+      if (this.pendingSelectionRepairView !== view) {
+        return;
+      }
+      this.pendingSelectionRepairView = null;
+      this.ensureTableSelection(view);
+    });
+  }
+  /** Rewrites a table block and restores the caret to a target cell position. */
+  replaceTable(view, tableInfo, parsed, targetRowIndex, targetColumnIndex, offset = 0) {
+    const formatted = formatTableMarkdown(parsed);
+    const change = createTableInsert(view.state, tableInfo.from, tableInfo.to, formatted);
+    const selection = change.from + change.prefixLength + getCellAnchorInFormattedTable(
+      formatted,
+      Math.max(0, targetRowIndex),
+      Math.max(0, Math.min(targetColumnIndex, Math.max(parsed.headers.length - 1, 0))),
+      Math.max(0, offset)
+    );
+    view.dispatch({
+      changes: { from: change.from, to: change.to, insert: change.insert },
+      selection: { anchor: selection }
+    });
+  }
+  /** Inserts an empty body row below the given logical row index. */
+  insertRowBelow(view, tableInfo, afterRowIndex, targetColumn) {
+    const parsed = normalizeParsedTable(buildTableFromInfo(tableInfo));
+    const insertBodyIndex = Math.max(0, Math.min(afterRowIndex, parsed.rows.length));
+    parsed.rows.splice(insertBodyIndex, 0, buildEmptyRow(tableInfo.columnCount));
+    this.replaceTable(view, tableInfo, parsed, insertBodyIndex + 1, targetColumn);
+  }
+  /** Inserts a starter table near the current cursor line. */
+  insertTable(view) {
+    const { state } = view;
+    const cursor = state.selection.main.head;
+    const line = state.doc.lineAt(cursor);
+    const insertAt = line.text.trim() ? line.to : line.from;
+    const formatted = formatTableMarkdown(TABLE_TEMPLATE);
+    const change = createTableInsert(state, insertAt, insertAt, formatted);
+    const selection = change.from + change.prefixLength + getCellAnchorInFormattedTable(formatted, 0, 0);
+    view.dispatch({
+      changes: { from: change.from, to: change.to, insert: change.insert },
+      selection: { anchor: selection }
+    });
+    return true;
+  }
+  /** Adds a new empty body row to the active table. */
+  addRow(view) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) {
+      return false;
+    }
+    const cell = this.getCurrentCell(view, tableInfo);
+    this.appendRow(view, tableInfo, cell?.columnIndex || 0);
+    return true;
+  }
+  /** Appends a row and keeps the caret in the requested column. */
+  appendRow(view, tableInfo, targetColumn) {
+    this.insertRowBelow(view, tableInfo, tableInfo.bodyCells.length, targetColumn);
+  }
+  /** Inserts a new column after the current column. */
+  addColumn(view) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) {
+      return false;
+    }
+    const cell = this.getCurrentCell(view, tableInfo);
+    const insertAfter = cell?.columnIndex ?? tableInfo.columnCount - 1;
+    const parsed = normalizeParsedTable(buildTableFromInfo(tableInfo));
+    parsed.headers.splice(insertAfter + 1, 0, "");
+    parsed.alignments.splice(insertAfter + 1, 0, "left");
+    for (const row of parsed.rows) {
+      row.splice(insertAfter + 1, 0, "");
+    }
+    this.replaceTable(view, tableInfo, parsed, cell?.rowIndex || 0, insertAfter + 1);
+    return true;
+  }
+  /** Appends a new column at the far right of the table. */
+  appendColumn(view, tableInfo) {
+    const parsed = normalizeParsedTable(buildTableFromInfo(tableInfo));
+    parsed.headers.push("");
+    parsed.alignments.push("left");
+    for (const row of parsed.rows) {
+      row.push("");
+    }
+    this.replaceTable(view, tableInfo, parsed, 0, parsed.headers.length - 1);
+  }
+  /** Removes the current body row or clears the last remaining row. */
+  removeRow(view) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) {
+      return false;
+    }
+    const cell = this.getCurrentCell(view, tableInfo);
+    if (!cell || cell.rowKind !== "body") {
+      return false;
+    }
+    const parsed = normalizeParsedTable(buildTableFromInfo(tableInfo));
+    const bodyIndex = cell.rowIndex - 1;
+    if (bodyIndex < 0 || bodyIndex >= parsed.rows.length) {
+      return false;
+    }
+    if (parsed.rows.length === 1) {
+      parsed.rows[0] = buildEmptyRow(tableInfo.columnCount);
+    } else {
+      parsed.rows.splice(bodyIndex, 1);
+    }
+    const nextRowIndex = Math.max(1, Math.min(cell.rowIndex, parsed.rows.length));
+    this.replaceTable(view, tableInfo, parsed, nextRowIndex, Math.min(cell.columnIndex, tableInfo.columnCount - 1));
+    return true;
+  }
+  /** Removes the current column when the table has more than one column. */
+  removeColumn(view) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo || tableInfo.columnCount <= 1) {
+      return false;
+    }
+    const cell = this.getCurrentCell(view, tableInfo);
+    const removeAt = cell?.columnIndex ?? tableInfo.columnCount - 1;
+    const parsed = normalizeParsedTable(buildTableFromInfo(tableInfo));
+    parsed.headers.splice(removeAt, 1);
+    parsed.alignments.splice(removeAt, 1);
+    for (const row of parsed.rows) {
+      row.splice(removeAt, 1);
+    }
+    this.replaceTable(view, tableInfo, parsed, cell?.rowIndex || 0, Math.min(removeAt, parsed.headers.length - 1));
+    return true;
+  }
+  /** Moves to the next or previous logical cell with Tab navigation. */
+  handleTab(view, backwards) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) {
+      return false;
+    }
+    const cell = this.getCurrentCell(view, tableInfo);
+    if (!cell) {
+      return false;
+    }
+    const cells = tableInfo.cellsByRow.flat();
+    const currentIndex = cells.findIndex((candidate) => candidate.from === cell.from && candidate.to === cell.to);
+    if (currentIndex < 0) {
+      return false;
+    }
+    const nextIndex = backwards ? currentIndex - 1 : currentIndex + 1;
+    if (nextIndex < 0) {
+      return true;
+    }
+    if (nextIndex >= cells.length) {
+      this.appendRow(view, tableInfo, 0);
+      return true;
+    }
+    this.moveSelectionToCell(view, cells[nextIndex]);
+    return true;
+  }
+  /** Moves horizontally between adjacent cells when the caret hits an edge. */
+  handleArrowHorizontal(view, forward) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) {
+      return false;
+    }
+    const cell = this.getCurrentCell(view, tableInfo);
+    if (!cell) {
+      return false;
+    }
+    const cursor = view.state.selection.main.head;
+    const rightEdge = Math.max(cell.contentFrom, cell.contentTo);
+    if (forward && cursor < rightEdge) {
+      return false;
+    }
+    if (!forward && cursor > cell.contentFrom) {
+      return false;
+    }
+    const row = tableInfo.cellsByRow[cell.rowIndex] || [];
+    const nextCell = row[cell.columnIndex + (forward ? 1 : -1)];
+    if (!nextCell) {
+      return false;
+    }
+    this.moveSelectionToCell(view, nextCell);
+    return true;
+  }
+  /** Moves vertically between rows while keeping the current column. */
+  handleArrowVertical(view, forward) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) {
+      return false;
+    }
+    const cell = this.getCurrentCell(view, tableInfo);
+    if (!cell) {
+      return false;
+    }
+    const nextRow = tableInfo.cellsByRow[cell.rowIndex + (forward ? 1 : -1)];
+    if (!nextRow) {
+      return false;
+    }
+    const nextCell = nextRow[cell.columnIndex];
+    if (!nextCell) {
+      return false;
+    }
+    this.moveSelectionToCell(view, nextCell);
+    return true;
+  }
+  /** Advances downward on Enter and manages the trailing empty row behavior. */
+  handleEnter(view) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) {
+      return false;
+    }
+    const cell = this.getCurrentCell(view, tableInfo);
+    if (!cell) {
+      return false;
+    }
+    if (cell.rowKind === "body") {
+      const currentRow = tableInfo.bodyCells[cell.rowIndex - 1];
+      if (currentRow && isBodyRowEmpty(currentRow)) {
+        const parsed = normalizeParsedTable(buildTableFromInfo(tableInfo));
+        parsed.rows.splice(cell.rowIndex - 1, 1);
+        const formatted = formatTableMarkdown(parsed);
+        const change = createTableInsert(view.state, tableInfo.from, tableInfo.to, formatted);
+        const anchor = Math.min(change.from + change.insert.length, view.state.doc.length + change.insert.length);
+        view.dispatch({
+          changes: { from: change.from, to: change.to, insert: change.insert },
+          selection: { anchor }
+        });
+        return true;
+      }
+    }
+    if (cell.rowKind === "body" && cell.rowIndex === tableInfo.cellsByRow.length - 1) {
+      const parsed = normalizeParsedTable(buildTableFromInfo(tableInfo));
+      parsed.rows.push(buildEmptyRow(tableInfo.columnCount));
+      this.replaceTable(view, tableInfo, parsed, parsed.rows.length, cell.columnIndex);
+      return true;
+    }
+    this.insertRowBelow(view, tableInfo, cell.rowIndex, cell.columnIndex);
+    return true;
+  }
+  /** Inserts a canonical `<br />` token inside the current table cell. */
+  insertBreakTag(view) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) {
+      return false;
+    }
+    const selection = view.state.selection.main;
+    view.dispatch({
+      changes: { from: selection.from, to: selection.to, insert: BREAK_TAG },
+      selection: { anchor: selection.from + BREAK_TAG.length }
+    });
+    return true;
+  }
+  /** Deletes a whole `<br />` token when backspace or delete hits it. */
+  handleBreakDeletion(view, forward) {
+    const tableInfo = this.getTableAtCursor(view);
+    if (!tableInfo) {
+      return false;
+    }
+    const selection = view.state.selection.main;
+    const cursor = selection.head;
+    for (const range of collectBreakRanges(tableInfo)) {
+      const within = cursor > range.from && cursor < range.to;
+      const matchesBackspace = !forward && cursor === range.to;
+      const matchesDelete = forward && cursor === range.from;
+      const overlapsSelection = !selection.empty && selection.from <= range.from && selection.to >= range.to;
+      if (within || matchesBackspace || matchesDelete || overlapsSelection) {
+        view.dispatch({
+          changes: { from: range.from, to: range.to, insert: "" },
+          selection: { anchor: range.from }
+        });
+        return true;
+      }
+    }
+    return false;
+  }
+  /** Moves the current selection anchor into a target cell. */
+  moveSelectionToCell(view, cell, offset = 0) {
+    const end = Math.max(cell.contentFrom, cell.contentTo);
+    view.dispatch({
+      selection: { anchor: Math.min(cell.contentFrom + offset, end) },
+      scrollIntoView: true
+    });
+  }
+  /** Returns the table currently containing the editor cursor. */
+  getTableAtCursor(view) {
+    return getTableInfoAtPosition(view.state, view.state.selection.main.head);
+  }
+  /** Returns the active cell under the current selection head. */
+  getCurrentCell(view, tableInfo) {
+    return findCellAtPosition(tableInfo, view.state.selection.main.head);
+  }
+};
+var theme6 = createTheme({
+  default: {
+    ".cm-draftly-table-wrapper, .cm-draftly-table-widget": {
+      display: "table",
+      width: "100%",
+      borderCollapse: "separate",
+      borderSpacing: "0",
+      position: "relative",
+      overflow: "visible",
+      border: "1px solid var(--color-border, #d7dee7)",
+      borderRadius: "0.75rem",
+      backgroundColor: "var(--color-background, #ffffff)",
+      "& .cm-draftly-table": {
+        width: "100%",
+        borderCollapse: "separate",
+        borderSpacing: "0",
+        tableLayout: "auto"
+      },
+      "& .cm-draftly-table-row": {
+        display: "table-row !important"
+      },
+      "& .cm-draftly-table-header-row": {
+        backgroundColor: "rgba(15, 23, 42, 0.04)"
+      },
+      "& .cm-draftly-table-row-even": {
+        backgroundColor: "rgba(15, 23, 42, 0.02)"
+      },
+      "& .cm-draftly-table-delimiter-row": {
+        display: "none !important"
+      },
+      "& .cm-draftly-table-cell": {
+        display: "table-cell",
+        minWidth: "4rem",
+        minHeight: "2.5rem",
+        height: "2.75rem",
+        padding: "0.5rem 0.875rem",
+        verticalAlign: "top",
+        borderRight: "1px solid var(--color-border, #d7dee7)",
+        borderBottom: "1px solid var(--color-border, #d7dee7)",
+        whiteSpace: "normal",
+        overflowWrap: "break-word",
+        wordBreak: "normal",
+        lineHeight: "1.6"
+      },
+      "& .cm-draftly-table-body-row": {
+        minHeight: "2.75rem"
+      },
+      "& .cm-draftly-table-cell .cm-draftly-code-inline": {
+        whiteSpace: "normal",
+        overflowWrap: "anywhere"
+      },
+      "& .cm-draftly-table-th": {
+        fontWeight: "600",
+        borderBottomWidth: "2px"
+      },
+      "& .cm-draftly-table-cell-last": {
+        borderRight: "none"
+      },
+      "& .cm-draftly-table-row-last .cm-draftly-table-cell": {
+        borderBottom: "none"
+      },
+      "& .cm-draftly-table-cell-center": {
+        textAlign: "center"
+      },
+      "& .cm-draftly-table-cell-right": {
+        textAlign: "right"
+      },
+      "& .cm-draftly-table-break": {
+        display: "inline"
+      },
+      "& .cm-draftly-table-controls-anchor": {
+        position: "absolute",
+        inset: "0",
+        pointerEvents: "none"
+      },
+      "& .cm-draftly-table-control": {
+        position: "absolute",
+        width: "1.75rem",
+        height: "1.75rem",
+        border: "1px solid var(--color-border, #d7dee7)",
+        borderRadius: "999px",
+        backgroundColor: "var(--color-background, #ffffff)",
+        color: "var(--color-text, #0f172a)",
+        boxShadow: "0 10px 24px rgba(15, 23, 42, 0.12)",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: "0",
+        pointerEvents: "auto",
+        transition: "opacity 120ms ease, transform 120ms ease, background-color 120ms ease"
+      },
+      "& .cm-draftly-table-control:hover": {
+        backgroundColor: "rgba(15, 23, 42, 0.05)"
+      },
+      "& .cm-draftly-table-control-column": {
+        top: "50%",
+        right: "-0.95rem",
+        transform: "translate(0.35rem, -50%)"
+      },
+      "& .cm-draftly-table-control-row": {
+        left: "50%",
+        bottom: "-0.95rem",
+        transform: "translate(-50%, 0.35rem)"
+      },
+      "&:hover .cm-draftly-table-control, &:focus-within .cm-draftly-table-control": {
+        opacity: "1"
+      },
+      "&:hover .cm-draftly-table-control-column, &:focus-within .cm-draftly-table-control-column": {
+        transform: "translate(0, -50%)"
+      },
+      "&:hover .cm-draftly-table-control-row, &:focus-within .cm-draftly-table-control-row": {
+        transform: "translate(-50%, 0)"
+      }
+    }
+  },
+  dark: {
+    ".cm-draftly-table-wrapper, .cm-draftly-table-widget": {
+      borderColor: "var(--color-border, #30363d)",
+      backgroundColor: "var(--color-background, #0d1117)",
+      "& .cm-draftly-table-header-row": {
+        backgroundColor: "rgba(255, 255, 255, 0.05)"
+      },
+      "& .cm-draftly-table-row-even": {
+        backgroundColor: "rgba(255, 255, 255, 0.025)"
+      },
+      "& .cm-draftly-table-cell": {
+        borderColor: "var(--color-border, #30363d)"
+      },
+      "& .cm-draftly-table-control": {
+        borderColor: "var(--color-border, #30363d)",
+        backgroundColor: "var(--color-background, #161b22)",
+        color: "var(--color-text, #e6edf3)",
+        boxShadow: "0 12px 28px rgba(0, 0, 0, 0.35)"
+      },
+      "& .cm-draftly-table-control:hover": {
+        backgroundColor: "rgba(255, 255, 255, 0.08)"
+      }
+    }
+  }
+});
+var htmlMarkDecorations = {
+  "html-tag": Decoration.mark({ class: "cm-draftly-html-tag" }),
+  "html-comment": Decoration.mark({ class: "cm-draftly-html-comment" })
+};
+var htmlLineDecorations = {
+  "html-block": Decoration.line({ class: "cm-draftly-line-html-block" }),
+  "hidden-line": Decoration.line({ class: "cm-draftly-hidden-line" })
+};
+var HTMLPreviewWidget = class extends WidgetType {
+  constructor(html) {
+    super();
+    this.html = html;
+  }
+  eq(other) {
+    return other.html === this.html;
+  }
+  toDOM() {
+    const div = document.createElement("div");
+    div.className = "cm-draftly-html-preview";
+    div.innerHTML = DOMPurify.sanitize(this.html);
+    return div;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+var InlineHTMLPreviewWidget = class extends WidgetType {
+  constructor(html) {
+    super();
+    this.html = html;
+  }
+  eq(other) {
+    return other.html === this.html;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-draftly-inline-html-preview";
+    span.innerHTML = DOMPurify.sanitize(this.html);
+    return span;
+  }
+  ignoreEvent() {
+    return false;
+  }
+};
+function parseHTMLTag(content) {
+  const match = content.match(/^<\s*(\/?)([a-zA-Z][a-zA-Z0-9-]*)[^>]*(\/?)>$/);
+  if (!match) return null;
+  return {
+    tagName: match[2].toLowerCase(),
+    isClosing: match[1] === "/",
+    isSelfClosing: match[3] === "/" || ["br", "hr", "img", "input", "meta", "link", "area", "base", "col", "embed", "source", "track", "wbr"].includes(
+      match[2].toLowerCase()
+    )
+  };
+}
+var HTMLPlugin = class extends DecorationPlugin {
+  name = "html";
+  version = "1.0.0";
+  decorationPriority = 30;
+  constructor() {
+    super();
+  }
+  /**
+   * Plugin theme
+   */
+  get theme() {
+    return theme7;
+  }
+  buildDecorations(ctx) {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+    const htmlGroups = [];
+    const htmlTags = [];
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        if (name === "Comment") {
+          decorations.push(htmlMarkDecorations["html-comment"].range(from, to));
+          return;
+        }
+        if (name === "HTMLTag") {
+          const content = view.state.sliceDoc(from, to);
+          const parsed = parseHTMLTag(content);
+          if (parsed) {
+            htmlTags.push({
+              from,
+              to,
+              tagName: parsed.tagName,
+              isClosing: parsed.isClosing,
+              isSelfClosing: parsed.isSelfClosing
+            });
+          }
+        }
+        if (name === "HTMLBlock") {
+          const last = htmlGroups[htmlGroups.length - 1];
+          if (last) {
+            const gap = view.state.sliceDoc(last.to, from);
+            if (!gap.trim()) {
+              last.to = to;
+              return;
+            }
+          }
+          htmlGroups.push({ from, to });
+        }
+      }
+    });
+    const inlineElements = [];
+    const usedTags = /* @__PURE__ */ new Set();
+    for (let i = 0; i < htmlTags.length; i++) {
+      if (usedTags.has(i)) continue;
+      const openTag = htmlTags[i];
+      if (openTag.isClosing) continue;
+      if (openTag.isSelfClosing) {
+        inlineElements.push({
+          from: openTag.from,
+          to: openTag.to,
+          content: view.state.sliceDoc(openTag.from, openTag.to)
+        });
+        usedTags.add(i);
+        continue;
+      }
+      const openLine = view.state.doc.lineAt(openTag.from);
+      let depth = 1;
+      let closeTagIndex = null;
+      for (let j = i + 1; j < htmlTags.length && depth > 0; j++) {
+        const tag = htmlTags[j];
         if (tag.from > openLine.to) break;
         if (tag.tagName === openTag.tagName) {
           if (tag.isClosing) {
@@ -1316,7 +2693,7 @@ var HTMLPlugin = class extends DecorationPlugin {
     }
   }
 };
-var theme6 = createTheme({
+var theme7 = createTheme({
   default: {
     ".cm-draftly-html-tag": {
       color: "#6a737d",
@@ -1446,7 +2823,7 @@ var ImagePlugin = class extends DecorationPlugin {
    * Plugin theme
    */
   get theme() {
-    return theme7;
+    return theme8;
   }
   /**
    * Keyboard shortcuts for image formatting
@@ -1601,7 +2978,7 @@ var ImagePlugin = class extends DecorationPlugin {
     return html;
   }
 };
-var theme7 = createTheme({
+var theme8 = createTheme({
   default: {
     ".cm-draftly-image-block br": {
       display: "none"
@@ -1850,7 +3227,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 +3344,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 +3543,7 @@ var MermaidPlugin = class extends DecorationPlugin {
    * Plugin theme
    */
   get theme() {
-    return theme9;
+    return theme10;
   }
   /**
    * Return markdown parser extensions for mermaid syntax
@@ -2265,7 +3651,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)": {
@@ -2313,65 +3699,430 @@ var theme9 = createTheme({
       color: "#6a737d",
       fontFamily: "var(--font-jetbrains-mono, monospace)"
     },
-    // Hidden mermaid syntax (when cursor is not in range)
-    ".cm-draftly-mermaid-hidden": {
-      display: "none"
+    // Hidden mermaid syntax (when cursor is not in range)
+    ".cm-draftly-mermaid-hidden": {
+      display: "none"
+    },
+    // Rendered mermaid container
+    ".cm-draftly-mermaid-rendered": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "1em 0",
+      borderRadius: "4px",
+      overflow: "auto"
+    },
+    // SVG inside rendered container
+    ".cm-draftly-mermaid-rendered svg": {
+      maxWidth: "100%",
+      height: "auto",
+      aspectRatio: "auto"
+    },
+    // Loading state
+    ".cm-draftly-mermaid-loading": {
+      display: "inline-block",
+      padding: "0.5em 1em",
+      color: "#6a737d",
+      fontSize: "0.875em",
+      fontStyle: "italic",
+      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    },
+    // Error styling
+    ".cm-draftly-mermaid-error": {
+      display: "inline-block",
+      padding: "0.25em 0.5em",
+      backgroundColor: "rgba(255, 0, 0, 0.1)",
+      color: "#d73a49",
+      borderRadius: "4px",
+      fontSize: "0.875em",
+      fontStyle: "italic",
+      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    }
+  },
+  dark: {
+    ".cm-draftly-mermaid-block:not(.cm-draftly-mermaid-block-rendered)": {
+      backgroundColor: "rgba(255, 255, 255, 0.03)"
+    },
+    ".cm-draftly-mermaid-marker": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-mermaid-loading": {
+      color: "#8b949e"
+    },
+    ".cm-draftly-mermaid-error": {
+      backgroundColor: "rgba(255, 0, 0, 0.15)",
+      color: "#f85149"
+    }
+  }
+});
+
+// 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"
+      }
     },
-    // Rendered mermaid container
-    ".cm-draftly-mermaid-rendered": {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      padding: "1em 0",
-      borderRadius: "4px",
-      overflow: "auto"
+    ".cm-draftly-code-line-highlight": {
+      backgroundColor: "rgba(255, 220, 100, 0.15) !important",
+      borderLeft: "3px solid #d9a520 !important"
     },
-    // SVG inside rendered container
-    ".cm-draftly-mermaid-rendered svg": {
-      maxWidth: "100%",
-      height: "auto",
-      aspectRatio: "auto"
+    ".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"
+      }
     },
-    // Loading state
-    ".cm-draftly-mermaid-loading": {
-      display: "inline-block",
-      padding: "0.5em 1em",
-      color: "#6a737d",
-      fontSize: "0.875em",
-      fontStyle: "italic",
-      fontFamily: "var(--font-jetbrains-mono, monospace)"
+    ".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"
+      }
     },
-    // Error styling
-    ".cm-draftly-mermaid-error": {
-      display: "inline-block",
-      padding: "0.25em 0.5em",
-      backgroundColor: "rgba(255, 0, 0, 0.1)",
-      color: "#d73a49",
-      borderRadius: "4px",
-      fontSize: "0.875em",
-      fontStyle: "italic",
-      fontFamily: "var(--font-jetbrains-mono, monospace)"
-    }
-  },
-  dark: {
-    ".cm-draftly-mermaid-block:not(.cm-draftly-mermaid-block-rendered)": {
-      backgroundColor: "rgba(255, 255, 255, 0.03)"
+    ".cm-draftly-code-diff-sign-add": {
+      color: "#4ade80"
     },
-    ".cm-draftly-mermaid-marker": {
-      color: "#8b949e"
+    ".cm-draftly-code-diff-sign-del": {
+      color: "#f87171"
     },
-    ".cm-draftly-mermaid-loading": {
-      color: "#8b949e"
+    ".cm-draftly-code-diff-mod-add": {
+      backgroundColor: "rgba(34, 197, 94, 0.3)"
     },
-    ".cm-draftly-mermaid-error": {
-      backgroundColor: "rgba(255, 0, 0, 0.15)",
-      color: "#f85149"
+    ".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" }),
@@ -2384,7 +4135,15 @@ var codeMarkDecorations = {
   "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 +4229,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 +4253,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 +4274,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 +4285,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 +4317,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 +4329,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 +4352,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 +4366,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 +4403,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;
-            }
-          }
-          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++;
+        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`
             }
-          }
-          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 +4650,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 +4668,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 +4683,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 +4769,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 +5061,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 +5237,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 +5342,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-NRPI5O6Y.js.map
+//# sourceMappingURL=chunk-NRPI5O6Y.js.map