draftly 2.0.0 → 2.1.0

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

@@ -1,10 +1,12 @@
-import { DraftlyPlugin, DecorationPlugin } from './chunk-ZUI3GI3W.js';
+import { DraftlyPlugin, DecorationPlugin } from './chunk-UCHBDJ4R.js';
 import { createWrapSelectionInputHandler } from './chunk-JF3WXXMJ.js';
 import { PreviewRenderer } from './chunk-I563H35S.js';
-import { createTheme, toggleMarkdownStyle } from './chunk-EEHILRG5.js';
-import { Decoration, WidgetType } from '@codemirror/view';
+import { 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';
@@ -1124,6 +1126,130 @@ var theme5 = createTheme({
     }
   }
 });
+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 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 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 TableControlsWidget = class extends WidgetType {
+  constructor(onAddRow, onAddColumn) {
+    super();
+    this.onAddRow = onAddRow;
+    this.onAddColumn = onAddColumn;
+  }
+  /** Forces the control widget to be recreated so handlers stay current. */
+  eq() {
+    return false;
+  }
+  /** 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 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(":");
@@ -1132,642 +1258,1232 @@ function parseAlignment(cell) {
   if (right) return "right";
   return "left";
 }
-function parseTableMarkdown(markdown) {
-  const lines = markdown.split("\n").filter((l) => l.trim().length > 0);
-  if (lines.length < 2) return null;
-  const parseCells = (line) => {
-    let trimmed = line.trim();
-    if (trimmed.startsWith("|")) trimmed = trimmed.slice(1);
-    if (trimmed.endsWith("|")) trimmed = trimmed.slice(0, -1);
-    return trimmed.split("|").map((c) => c.trim());
+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 {
+    tableMarkdown: lines.slice(0, endIndex + 1).join("\n"),
+    trailingMarkdown: lines.slice(endIndex + 1).join("\n")
   };
-  const headers = parseCells(lines[0]);
-  const delimiterCells = parseCells(lines[1]);
-  const isDelimiter = delimiterCells.every((c) => /^:?-+:?$/.test(c.trim()));
-  if (!isDelimiter) return null;
-  const alignments = delimiterCells.map(parseAlignment);
-  const rows = [];
-  for (let i = 2; i < lines.length; i++) {
-    rows.push(parseCells(lines[i]));
+}
+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;
   }
-  return { headers, alignments, rows };
+  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 isRowEmpty(rowText) {
-  const trimmed = rowText.trim();
-  if (!trimmed.startsWith("|")) return false;
-  let inner = trimmed;
-  if (inner.startsWith("|")) inner = inner.slice(1);
-  if (inner.endsWith("|")) inner = inner.slice(0, -1);
-  return inner.split("|").every((cell) => cell.trim() === "");
+function renderWidth(text) {
+  return canonicalizeBreakTags(text).replace(BREAK_TAG, " ").replace(/\\\|/g, "|").length;
 }
-async function renderCellWithPreviewRenderer(text, config) {
-  if (!text.trim()) {
-    return "&nbsp;";
+function padCell(text, width, alignment) {
+  const safeWidth = Math.max(width, renderWidth(text));
+  const difference = safeWidth - renderWidth(text);
+  if (difference <= 0) {
+    return text;
   }
-  const renderer = new PreviewRenderer(
-    text,
-    config?.plugins || [],
-    config?.markdown || [],
-    config?.theme || "auto" /* AUTO */,
-    true
-  );
-  const html = await renderer.render();
-  const paragraphMatch = html.match(/^\s*<p>([\s\S]*)<\/p>\s*$/i);
-  if (paragraphMatch && paragraphMatch[1] !== void 0) {
-    return paragraphMatch[1];
+  if (alignment === "right") {
+    return " ".repeat(difference) + text;
   }
-  return html;
+  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 getColumnAlignment(alignments, index) {
-  return alignments[index] || "left";
+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;
 }
-function getColumnCount(headers, row) {
-  return Math.max(headers.length, row.length);
+async function renderCellToHtml(text, config) {
+  if (!text.trim()) {
+    return "&nbsp;";
+  }
+  return stripSingleParagraph(await createPreviewRenderer(text, config).render());
 }
 async function renderTableToHtml(parsed, config) {
-  const { headers, alignments, rows } = parsed;
-  let html = '<div class="cm-draftly-table-widget">';
-  html += '<table class="cm-draftly-table">';
-  html += "<thead><tr>";
-  for (let i = 0; i < headers.length; i++) {
-    const cell = headers[i] || "";
-    const align = getColumnAlignment(alignments, i);
-    const rendered = await renderCellWithPreviewRenderer(cell, config);
-    html += `<th style="text-align: ${align}">${rendered}</th>`;
-  }
-  html += "</tr></thead>";
-  html += "<tbody>";
-  for (const row of rows) {
-    html += "<tr>";
-    const colCount = getColumnCount(headers, row);
-    for (let i = 0; i < colCount; i++) {
-      const align = getColumnAlignment(alignments, i);
-      const cell = row[i] || "";
-      const rendered = await renderCellWithPreviewRenderer(cell, config);
-      html += `<td style="text-align: ${align}">${rendered}</td>`;
+  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>";
-  html += "</table></div>";
+  html += "</tbody></table></div>";
   return html;
 }
-var TableWidget = class extends WidgetType {
-  constructor(tableMarkdown, from, to, config) {
-    super();
-    this.tableMarkdown = tableMarkdown;
-    this.from = from;
-    this.to = to;
-    this.config = config;
+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)
+    };
   }
-  eq(other) {
-    return other.tableMarkdown === this.tableMarkdown && other.from === this.from && other.to === this.to && other.config === this.config;
+  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;
   }
-  toDOM(view) {
-    const wrapper = document.createElement("div");
-    wrapper.className = "cm-draftly-table-widget";
-    const parsed = parseTableMarkdown(this.tableMarkdown);
-    if (!parsed) {
-      wrapper.textContent = "[Invalid table]";
-      return wrapper;
-    }
-    const { headers, alignments, rows } = parsed;
-    const table = document.createElement("table");
-    table.className = "cm-draftly-table";
-    const thead = document.createElement("thead");
-    const headerRow = document.createElement("tr");
-    headers.forEach((h, i) => {
-      const th = document.createElement("th");
-      th.innerHTML = "&nbsp;";
-      this.renderCellAsync(h, th);
-      const align = alignments[i];
-      if (align) th.style.textAlign = align;
-      headerRow.appendChild(th);
-    });
-    thead.appendChild(headerRow);
-    table.appendChild(thead);
-    const tbody = document.createElement("tbody");
-    rows.forEach((row) => {
-      const tr = document.createElement("tr");
-      const colCount = getColumnCount(headers, row);
-      for (let i = 0; i < colCount; i++) {
-        const td = document.createElement("td");
-        td.innerHTML = "&nbsp;";
-        this.renderCellAsync(row[i] || "", td);
-        const align = getColumnAlignment(alignments, i);
-        td.style.textAlign = align;
-        tr.appendChild(td);
-      }
-      tbody.appendChild(tr);
-    });
-    table.appendChild(tbody);
-    wrapper.appendChild(table);
-    wrapper.addEventListener("click", (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      view.dispatch({
-        selection: { anchor: this.from },
-        scrollIntoView: true
+  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
       });
-      view.focus();
-    });
-    return wrapper;
+    }
+    cellsByRow.push(cells);
   }
-  /**
-   * Render cell content asynchronously using PreviewRenderer
-   */
-  async renderCellAsync(text, element) {
-    if (!text.trim()) {
-      element.innerHTML = "&nbsp;";
-      return;
+  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;
+      }
     }
-    try {
-      element.innerHTML = await renderCellWithPreviewRenderer(text, this.config);
-    } catch (error) {
-      console.error("Failed to render table cell:", error);
-      element.textContent = text;
+  });
+  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;
+      }
     }
   }
-  ignoreEvent(event) {
-    return event.type !== "click";
+  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 tableMarkDecorations = {
-  "table-line": Decoration.line({ class: "cm-draftly-table-line" }),
-  "table-line-start": Decoration.line({ class: "cm-draftly-table-line-start" }),
-  "table-line-end": Decoration.line({ class: "cm-draftly-table-line-end" }),
-  "table-delimiter": Decoration.line({ class: "cm-draftly-table-delimiter-line" }),
-  "table-rendered": Decoration.line({ class: "cm-draftly-table-rendered" }),
-  // "table-hidden": Decoration.mark({ class: "cm-draftly-table-hidden" }),
-  "table-hidden": Decoration.replace({})
+var 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 = "1.0.0";
+  version = "2.0.0";
   decorationPriority = 20;
   requiredNodes = ["Table", "TableHeader", "TableDelimiter", "TableRow", "TableCell"];
-  /** Configuration stored from onRegister */
   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;
   }
-  // ============================================
-  // Keymaps
-  // ============================================
+  /** 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-Enter",
-        run: (view) => this.addRow(view),
-        preventDefault: true
-      },
-      {
-        key: "Mod-Shift-Enter",
-        run: (view) => this.addColumn(view),
-        preventDefault: true
-      },
-      {
-        key: "Enter",
-        run: (view) => this.handleEnter(view)
-      },
-      {
-        key: "Tab",
-        run: (view) => this.handleTab(view, false)
-      },
-      {
-        key: "Shift-Tab",
-        run: (view) => this.handleTab(view, true)
-      }
+      { 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) }
     ];
   }
-  // ============================================
-  // Decorations
-  // ============================================
+  /** 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);
-    tree.iterate({
+    syntaxTree(view.state).iterate({
       enter: (node) => {
-        if (node.name !== "Table") return;
-        const { from, to } = node;
-        const nodeLineStart = view.state.doc.lineAt(from);
-        const nodeLineEnd = view.state.doc.lineAt(to);
-        const cursorInRange = ctx.selectionOverlapsRange(nodeLineStart.from, nodeLineEnd.to);
-        if (cursorInRange) {
-          for (let i = nodeLineStart.number; i <= nodeLineEnd.number; i++) {
-            const line = view.state.doc.line(i);
-            decorations.push(tableMarkDecorations["table-line"].range(line.from));
-            if (i === nodeLineStart.number) {
-              decorations.push(tableMarkDecorations["table-line-start"].range(line.from));
-            }
-            if (i === nodeLineEnd.number) {
-              decorations.push(tableMarkDecorations["table-line-end"].range(line.from));
-            }
-            if (i === nodeLineStart.number + 1) {
-              decorations.push(tableMarkDecorations["table-delimiter"].range(line.from));
-            }
-          }
-        } else {
-          const tableContent = view.state.sliceDoc(from, to);
-          for (let i = nodeLineStart.number; i <= nodeLineEnd.number; i++) {
-            const line = view.state.doc.line(i);
-            decorations.push(tableMarkDecorations["table-rendered"].range(line.from));
-            decorations.push(tableMarkDecorations["table-hidden"].range(line.from, line.to));
-          }
-          decorations.push(
-            Decoration.widget({
-              widget: new TableWidget(tableContent, from, to, this.draftlyConfig),
-              side: 1,
-              block: false
-            }).range(to)
-          );
+        if (node.name !== "Table") {
+          return;
+        }
+        const tableInfo = readTableInfo(view.state, node.from, node.to);
+        if (tableInfo) {
+          this.decorateTable(view, decorations, tableInfo);
         }
       }
     });
   }
-  // ============================================
-  // Keymap Handlers
-  // ============================================
-  /**
-   * Insert a new 3×3 table at cursor position
-   */
-  insertTable(view) {
-    const { state } = view;
-    const cursor = state.selection.main.head;
-    const line = state.doc.lineAt(cursor);
-    const insertPos = line.text.trim() ? line.to : line.from;
-    const template = [
-      "| Header 1 | Header 2 | Header 3 |",
-      "| -------- | -------- | -------- |",
-      "|          |          |          |"
-    ].join("\n");
-    const prefix = line.text.trim() ? "\n" : "";
-    const suffix = "\n";
-    view.dispatch({
-      changes: {
-        from: insertPos,
-        insert: prefix + template + suffix
-      },
-      selection: {
-        anchor: insertPos + prefix.length + 2
-        // Position cursor in first header cell
+  /** 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 true;
+    return BlockWrapper.set(wrappers, true);
   }
-  /**
-   * Add a new row below the current row (Mod-Enter)
-   */
-  addRow(view) {
-    const tableInfo = this.getTableAtCursor(view);
-    if (!tableInfo) return false;
-    const { state } = view;
-    const cursor = state.selection.main.head;
-    const currentLine = state.doc.lineAt(cursor);
-    const parsed = parseTableMarkdown(state.sliceDoc(tableInfo.from, tableInfo.to));
-    if (!parsed) return false;
-    const colCount = parsed.headers.length;
-    const emptyRow = "| " + Array.from({ length: colCount }, () => "  ").join(" | ") + " |";
-    view.dispatch({
-      changes: {
-        from: currentLine.to,
-        insert: "\n" + emptyRow
-      },
-      selection: {
-        anchor: currentLine.to + 3
-        // Position in first cell of new row
+  /** 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
+                )
+              );
+            }
+          }
+        }
       }
     });
-    return true;
+    return RangeSet.of(ranges, true);
   }
-  /**
-   * Add a new column after the current column (Mod-Shift-Enter)
-   */
-  addColumn(view) {
-    const tableInfo = this.getTableAtCursor(view);
-    if (!tableInfo) return false;
-    const { state } = view;
-    const cursor = state.selection.main.head;
-    const currentLine = state.doc.lineAt(cursor);
-    const lineText = currentLine.text;
-    const cursorInLine = cursor - currentLine.from;
-    let colIndex = -1;
-    for (let i = 0; i < cursorInLine; i++) {
-      if (lineText[i] === "|") colIndex++;
-    }
-    colIndex = Math.max(0, colIndex);
-    const tableText = state.sliceDoc(tableInfo.from, tableInfo.to);
-    const lines = tableText.split("\n");
-    const newLines = lines.map((line, lineIdx) => {
-      const cells = this.splitLineToCells(line);
-      const insertAfter = Math.min(colIndex, cells.length - 1);
-      if (lineIdx === 1) {
-        cells.splice(insertAfter + 1, 0, " -------- ");
+  /** 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 {
-        cells.splice(insertAfter + 1, 0, "          ");
+        decorations.push(lineDecorations.body.range(line.from));
       }
-      return "|" + cells.join("|") + "|";
-    });
-    view.dispatch({
-      changes: {
-        from: tableInfo.from,
-        to: tableInfo.to,
-        insert: newLines.join("\n")
+      if (isLastBody) {
+        decorations.push(lineDecorations.last.range(line.from));
       }
-    });
-    return true;
+      if (isDelimiter) {
+        decorations.push(delimiterReplace.range(line.from, line.to));
+        continue;
+      }
+      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)
+    );
   }
-  /**
-   * Handle Enter key inside a table.
-   * - Last cell of last row: create a new row
-   * - Empty last row: remove it and move cursor after table
-   */
-  handleEnter(view) {
-    const tableInfo = this.getTableAtCursor(view);
-    if (!tableInfo) return false;
-    const { state } = view;
-    const cursor = state.selection.main.head;
-    const cursorLine = state.doc.lineAt(cursor);
-    const tableEndLine = state.doc.lineAt(tableInfo.to);
-    if (cursorLine.number !== tableEndLine.number) return false;
-    const lineText = cursorLine.text;
-    const cursorOffset = cursor - cursorLine.from;
-    const pipes = [];
-    for (let i = 0; i < lineText.length; i++) {
-      if (lineText[i] === "|") pipes.push(i);
-    }
-    if (pipes.length < 2) return false;
-    const lastCellStart = pipes[pipes.length - 2];
-    if (cursorOffset < lastCellStart) return false;
-    if (isRowEmpty(lineText)) {
-      const removeFrom = cursorLine.from - 1;
-      const removeTo = cursorLine.to;
+  /** 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: { from: Math.max(0, removeFrom), to: removeTo },
-        selection: {
-          anchor: Math.min(Math.max(0, removeFrom) + 1, view.state.doc.length)
+        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)
       });
-      return true;
     }
-    const parsed = parseTableMarkdown(state.sliceDoc(tableInfo.from, tableInfo.to));
-    if (!parsed) return false;
-    const colCount = parsed.headers.length;
-    const emptyRow = "| " + Array.from({ length: colCount }, () => "  ").join(" | ") + " |";
+  }
+  /** 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({
-      changes: {
-        from: cursorLine.to,
-        insert: "\n" + emptyRow
-      },
-      selection: {
-        anchor: cursorLine.to + 3
-        // Position in first cell of new row
+      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;
   }
-  /**
-   * Handle Tab key inside a table — move to next/previous cell
-   */
+  /** 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 { state } = view;
-    const cursor = state.selection.main.head;
-    const tableText = state.sliceDoc(tableInfo.from, tableInfo.to);
-    const lines = tableText.split("\n");
-    const cellPositions = [];
-    for (let li = 0; li < lines.length; li++) {
-      if (li === 1) continue;
-      const line = lines[li];
-      const lineFrom = tableInfo.from + lines.slice(0, li).reduce((sum, l) => sum + l.length + 1, 0);
-      const pipes = [];
-      for (let i = 0; i < line.length; i++) {
-        if (line[i] === "|") pipes.push(i);
-      }
-      for (let p = 0; p < pipes.length - 1; p++) {
-        const cellStart = pipes[p] + 1;
-        const cellEnd = pipes[p + 1];
-        cellPositions.push({
-          lineFrom,
-          start: cellStart,
-          end: cellEnd
+    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;
       }
     }
-    let currentCellIdx = -1;
-    for (let i = 0; i < cellPositions.length; i++) {
-      const cell = cellPositions[i];
-      const absStart = cell.lineFrom + cell.start;
-      const absEnd = cell.lineFrom + cell.end;
-      if (cursor >= absStart && cursor <= absEnd) {
-        currentCellIdx = i;
-        break;
-      }
+    if (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;
     }
-    if (currentCellIdx === -1) return false;
-    const nextIdx = backwards ? currentCellIdx - 1 : currentCellIdx + 1;
-    if (nextIdx < 0 || nextIdx >= cellPositions.length) return false;
-    const nextCell = cellPositions[nextIdx];
-    const cellText = state.sliceDoc(nextCell.lineFrom + nextCell.start, nextCell.lineFrom + nextCell.end);
-    const trimStart = cellText.length - cellText.trimStart().length;
-    const trimEnd = cellText.length - cellText.trimEnd().length;
-    const selectFrom = nextCell.lineFrom + nextCell.start + (trimStart > 0 ? 1 : 0);
-    const selectTo = nextCell.lineFrom + nextCell.end - (trimEnd > 0 ? 1 : 0);
+    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({
-      selection: {
-        anchor: selectFrom,
-        head: selectTo
-      },
-      scrollIntoView: true
+      changes: { from: selection.from, to: selection.to, insert: BREAK_TAG },
+      selection: { anchor: selection.from + BREAK_TAG.length }
     });
     return true;
   }
-  // ============================================
-  // Helpers
-  // ============================================
-  /**
-   * Find the Table node at the cursor position
-   */
-  getTableAtCursor(view) {
-    const tree = syntaxTree(view.state);
-    const cursor = view.state.selection.main.head;
-    let result = null;
-    tree.iterate({
-      enter: (node) => {
-        if (node.name === "Table" && cursor >= node.from && cursor <= node.to) {
-          result = { from: node.from, to: node.to };
-        }
+  /** 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
     });
-    return result;
   }
-  /**
-   * Split a table line into cells (keeping the whitespace around content)
-   */
-  splitLineToCells(line) {
-    let trimmed = line.trim();
-    if (trimmed.startsWith("|")) trimmed = trimmed.slice(1);
-    if (trimmed.endsWith("|")) trimmed = trimmed.slice(0, -1);
-    return trimmed.split("|");
-  }
-  // ============================================
-  // Preview Rendering
-  // ============================================
-  async renderToHTML(node, _children, _ctx) {
-    if (node.name === "Table") {
-      const content = _ctx.sliceDoc(node.from, node.to);
-      const parsed = parseTableMarkdown(content);
-      if (!parsed) return null;
-      return await renderTableToHtml(parsed, this.draftlyConfig);
-    }
-    if (node.name === "TableHeader" || node.name === "TableDelimiter" || node.name === "TableRow" || node.name === "TableCell") {
-      return "";
-    }
-    return null;
+  /** 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: {
-    // Raw table lines — monospace when cursor is inside
-    ".cm-draftly-table-line": {
-      "--radius": "0.375rem",
-      fontFamily: "var(--font-jetbrains-mono, monospace)",
-      fontSize: "0.9rem",
-      backgroundColor: "rgba(0, 0, 0, 0.02)",
-      padding: "0 0.75rem !important",
-      lineHeight: "1.6",
-      borderLeft: "1px solid var(--color-border, #e2e8f0)",
-      borderRight: "1px solid var(--color-border, #e2e8f0)"
-    },
-    ".cm-draftly-table-line-start": {
-      borderTopLeftRadius: "var(--radius)",
-      borderTopRightRadius: "var(--radius)",
-      borderTop: "1px solid var(--color-border, #e2e8f0)"
-    },
-    ".cm-draftly-table-line-end": {
-      borderBottomLeftRadius: "var(--radius)",
-      borderBottomRightRadius: "var(--radius)",
-      borderBottom: "1px solid var(--color-border, #e2e8f0)"
-    },
-    ".cm-draftly-table-delimiter-line": {
-      opacity: "0.5"
-    },
-    // Hidden table text (when cursor is not in range)
-    ".cm-draftly-table-hidden": {
-      display: "none"
-    },
-    // Line decoration for rendered state — hide line breaks
-    ".cm-draftly-table-rendered": {
-      padding: "0 !important"
-    },
-    ".cm-draftly-table-rendered br": {
-      display: "none"
-    },
-    // Rendered table widget container
-    ".cm-draftly-table-widget": {
-      cursor: "pointer",
-      overflow: "auto",
-      padding: "0.5rem 0"
-    },
-    // Table element
-    ".cm-draftly-table": {
+    ".cm-draftly-table-wrapper, .cm-draftly-table-widget": {
+      display: "table",
       width: "100%",
       borderCollapse: "separate",
       borderSpacing: "0",
-      borderRadius: "0.5rem",
-      overflow: "hidden",
-      border: "1px solid var(--color-border, #e2e8f0)",
-      fontFamily: "var(--font-sans, sans-serif)",
-      fontSize: "0.9375rem",
-      lineHeight: "1.5"
-    },
-    // Table header
-    ".cm-draftly-table thead th": {
-      padding: "0rem 0.875rem",
-      fontWeight: "600",
-      borderBottom: "2px solid var(--color-border, #e2e8f0)",
-      backgroundColor: "rgba(0, 0, 0, 0.03)"
-    },
-    // Table cells
-    ".cm-draftly-table td": {
-      padding: "0rem 0.875rem",
-      borderBottom: "1px solid var(--color-border, #e2e8f0)",
-      borderRight: "1px solid var(--color-border, #e2e8f0)"
-    },
-    // Remove right border on last cell
-    ".cm-draftly-table td:last-child, .cm-draftly-table th:last-child": {
-      borderRight: "none"
-    },
-    // Remove bottom border on last row
-    ".cm-draftly-table tbody tr:last-child td": {
-      borderBottom: "none"
-    },
-    // Alternate row colors
-    ".cm-draftly-table tbody tr:nth-child(even)": {
-      backgroundColor: "rgba(0, 0, 0, 0.02)"
-    },
-    // Header cells right border
-    ".cm-draftly-table thead th:not(:last-child)": {
-      borderRight: "1px solid var(--color-border, #e2e8f0)"
-    },
-    // Hover effect on rows
-    ".cm-draftly-table tbody tr:hover": {
-      backgroundColor: "rgba(0, 0, 0, 0.04)"
-    },
-    // Inline code in table cells
-    ".cm-draftly-table-inline-code": {
-      fontFamily: "var(--font-jetbrains-mono, monospace)",
-      fontSize: "0.85em",
-      padding: "0.1em 0.35em",
-      borderRadius: "0.25rem",
-      backgroundColor: "rgba(0, 0, 0, 0.06)"
-    },
-    // Links in table cells
-    ".cm-draftly-table-link": {
-      color: "var(--color-link, #0969da)",
-      textDecoration: "none"
-    },
-    ".cm-draftly-table-link:hover": {
-      textDecoration: "underline"
-    },
-    // Math in table cells
-    ".cm-draftly-table-math": {
-      fontFamily: "var(--font-jetbrains-mono, monospace)",
-      fontSize: "0.9em",
-      color: "#6a737d"
+      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-line": {
-      backgroundColor: "rgba(255, 255, 255, 0.03)"
-    },
-    ".cm-draftly-table thead th": {
-      backgroundColor: "rgba(255, 255, 255, 0.05)"
-    },
-    ".cm-draftly-table tbody tr:nth-child(even)": {
-      backgroundColor: "rgba(255, 255, 255, 0.02)"
-    },
-    ".cm-draftly-table tbody tr:hover": {
-      backgroundColor: "rgba(255, 255, 255, 0.05)"
-    },
-    ".cm-draftly-table-inline-code": {
-      backgroundColor: "rgba(255, 255, 255, 0.08)"
-    },
-    ".cm-draftly-table-link": {
-      color: "var(--color-link, #58a6ff)"
-    },
-    ".cm-draftly-table-math": {
-      color: "#8b949e"
+    ".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)"
+      }
     }
   }
 });
@@ -4639,5 +5355,5 @@ var essentialPlugins = [
 var allPlugins = [...essentialPlugins];
 
 export { CodePlugin, EmojiPlugin, HRPlugin, HTMLPlugin, HeadingPlugin, ImagePlugin, InlinePlugin, LinkPlugin, ListPlugin, MathPlugin, MermaidPlugin, ParagraphPlugin, QuotePlugin, TablePlugin, allPlugins, essentialPlugins };
-//# sourceMappingURL=chunk-L2XSK57Y.js.map
-//# sourceMappingURL=chunk-L2XSK57Y.js.map
+//# sourceMappingURL=chunk-NRPI5O6Y.js.map
+//# sourceMappingURL=chunk-NRPI5O6Y.js.map