@zuilib/text-editor 0.9.0 → 0.10.1

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/EditorRoot.tsx
 import {
   useCallback as useCallback2,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useMemo as useMemo2,
   useRef as useRef5,
   useState as useState4
@@ -15,7 +15,7 @@ import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPl
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
 import { CHECK_LIST, CODE as CODE2, TRANSFORMERS as TRANSFORMERS2 } from "@lexical/markdown";
-import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
+import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import { CodeHighlightNode, CodeNode as CodeNode2 } from "@lexical/code";
@@ -1607,6 +1607,348 @@ function MarkdownSyncPlugin({
   return null;
 }
 
+// src/plugins/TableRowShortcutsPlugin.tsx
+import { useEffect as useEffect5 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
+import { $getSelection as $getSelection4, $isRangeSelection as $isRangeSelection4, COMMAND_PRIORITY_HIGH, KEY_DOWN_COMMAND } from "lexical";
+
+// src/transformers/tableSettings.ts
+import {
+  $getNodeByKey as $getNodeByKey2,
+  $getSelection as $getSelection2,
+  $isRangeSelection as $isRangeSelection2
+} from "lexical";
+import { $findMatchingParent } from "@lexical/utils";
+import { $isTableNode, $isTableSelection } from "@lexical/table";
+var DEFAULT_TABLE_SETTINGS = {
+  width: "full",
+  density: "comfortable"
+};
+var BLOCK_BLEED_PROPERTY = "--zui-text-editor-block-bleed";
+var OPTION_DECLARATIONS = {
+  width: {
+    full: {},
+    content: { width: "auto", "table-layout": "auto", [BLOCK_BLEED_PROPERTY]: "0px" },
+    text: { [BLOCK_BLEED_PROPERTY]: "0px" }
+  },
+  density: {
+    comfortable: {},
+    compact: {
+      "--zui-table-cell-padding": "0.25rem 0.5rem",
+      "--zui-table-font-size": "0.8125rem"
+    },
+    spacious: {
+      "--zui-table-cell-padding": "0.875rem 1rem",
+      "--zui-table-font-size": "0.9375rem"
+    }
+  }
+};
+var SETTING_KEYS = Object.keys(OPTION_DECLARATIONS);
+var EXPLICIT_WIDTH_PROPERTY = "--zui-table-width";
+function parseStyle(style) {
+  const declarations = /* @__PURE__ */ new Map();
+  for (const part of style.split(";")) {
+    const index = part.indexOf(":");
+    if (index === -1) continue;
+    const key = part.slice(0, index).trim();
+    const value = part.slice(index + 1).trim();
+    if (key && value) declarations.set(key, value);
+  }
+  return declarations;
+}
+function serializeStyle(declarations) {
+  return [...declarations].map(([key, value]) => `${key}: ${value}`).join("; ");
+}
+function optionsOf(setting) {
+  return Object.entries(OPTION_DECLARATIONS[setting]);
+}
+function readSetting(declarations, setting) {
+  for (const [option, decls] of optionsOf(setting)) {
+    const entries = Object.entries(decls);
+    if (entries.length === 0) continue;
+    if (entries.every(([key, value]) => declarations.get(key) === value)) {
+      return option;
+    }
+  }
+  return DEFAULT_TABLE_SETTINGS[setting];
+}
+function writeSetting(declarations, setting, option) {
+  for (const [, decls] of optionsOf(setting)) {
+    for (const key of Object.keys(decls)) declarations.delete(key);
+  }
+  for (const [key, value] of Object.entries(OPTION_DECLARATIONS[setting][option])) {
+    declarations.set(key, value);
+  }
+}
+function $getTableSettings(table) {
+  const declarations = parseStyle(table.getStyle());
+  return {
+    width: readSetting(declarations, "width"),
+    density: readSetting(declarations, "density")
+  };
+}
+function $setTableSettings(table, settings, options = {}) {
+  const declarations = parseStyle(table.getStyle());
+  for (const key of SETTING_KEYS) {
+    const option = settings[key];
+    if (option !== void 0) writeSetting(declarations, key, option);
+  }
+  if (settings.width !== void 0) {
+    if (options.explicitWidth) declarations.set(EXPLICIT_WIDTH_PROPERTY, settings.width);
+    else declarations.delete(EXPLICIT_WIDTH_PROPERTY);
+  }
+  table.setStyle(serializeStyle(declarations));
+}
+function $isTableWidthExplicit(table) {
+  const declarations = parseStyle(table.getStyle());
+  return declarations.get(EXPLICIT_WIDTH_PROPERTY) === readSetting(declarations, "width");
+}
+function $getTableWidth(table) {
+  return $getTableSettings(table).width;
+}
+function $setTableWidth(table, width) {
+  $setTableSettings(table, { width });
+}
+function $getTableDensity(table) {
+  return $getTableSettings(table).density;
+}
+function $setTableDensity(table, density) {
+  $setTableSettings(table, { density });
+}
+function $getSelectedTable() {
+  const selection = $getSelection2();
+  if ($isTableSelection(selection)) {
+    const node = $getNodeByKey2(selection.tableKey);
+    return $isTableNode(node) ? node : null;
+  }
+  if (!$isRangeSelection2(selection)) return null;
+  const table = $findMatchingParent(
+    selection.anchor.getNode(),
+    (node) => $isTableNode(node)
+  );
+  return $isTableNode(table) ? table : null;
+}
+var MARKER_REG_EXP = /^<!--\s*([a-z]+\s*:\s*[a-z]+(?:\s*;\s*[a-z]+\s*:\s*[a-z]+)*)\s*;?\s*-->\s*$/;
+function isOption(setting, value) {
+  return value in OPTION_DECLARATIONS[setting];
+}
+var TABLE_WIDTH_MARKER = "<!-- width: content -->";
+function parseTableSettingsMarker(text) {
+  const match = MARKER_REG_EXP.exec(text);
+  if (!match) return null;
+  const settings = {};
+  let recognised = false;
+  for (const pair of match[1].split(";")) {
+    const [key, value] = pair.split(":").map((s) => s.trim());
+    if (key !== "width" && key !== "density") continue;
+    recognised = true;
+    if (key === "width" && isOption("width", value)) settings.width = value;
+    if (key === "density" && isOption("density", value)) settings.density = value;
+  }
+  return recognised ? settings : null;
+}
+function formatTableSettingsMarker(settings, options = {}) {
+  const pairs = SETTING_KEYS.filter(
+    (key) => settings[key] !== DEFAULT_TABLE_SETTINGS[key] || key === "width" && options.explicitWidth
+  ).map((key) => `${key}: ${settings[key]}`);
+  return pairs.length > 0 ? `<!-- ${pairs.join("; ")} -->` : null;
+}
+
+// src/transformers/tableGrid.ts
+import {
+  $createParagraphNode as $createParagraphNode2,
+  $getNodeByKey as $getNodeByKey3,
+  $getSelection as $getSelection3,
+  $isRangeSelection as $isRangeSelection3
+} from "lexical";
+import { $findMatchingParent as $findMatchingParent2 } from "@lexical/utils";
+import {
+  $createTableCellNode,
+  $createTableRowNode,
+  $isTableCellNode,
+  $isTableNode as $isTableNode2,
+  $isTableRowNode,
+  $isTableSelection as $isTableSelection2,
+  TableCellHeaderStates
+} from "@lexical/table";
+function $rows(table) {
+  return table.getChildren().filter($isTableRowNode);
+}
+function $cells(row) {
+  return row.getChildren().filter($isTableCellNode);
+}
+function $isHeaderRow(row) {
+  const cells = row ? $cells(row) : [];
+  return cells.length > 0 && cells.every((cell) => cell.hasHeaderState(TableCellHeaderStates.ROW));
+}
+function $columnCount(table) {
+  const first = $rows(table)[0];
+  return first ? $cells(first).length : 0;
+}
+function $emptyCell(headerState) {
+  return $createTableCellNode(headerState).append($createParagraphNode2());
+}
+function $selectCellAt(table, row, column) {
+  const rows = $rows(table);
+  const target = rows[Math.max(0, Math.min(row, rows.length - 1))];
+  const cells = target ? $cells(target) : [];
+  cells[Math.max(0, Math.min(column, cells.length - 1))]?.selectStart();
+}
+function $getSelectedTableCell() {
+  const selection = $getSelection3();
+  let node = null;
+  if ($isTableSelection2(selection)) node = $getNodeByKey3(selection.anchor.key);
+  else if ($isRangeSelection3(selection)) node = selection.anchor.getNode();
+  if (!node) return null;
+  const cell = $findMatchingParent2(node, (n2) => $isTableCellNode(n2));
+  return $isTableCellNode(cell) ? cell : null;
+}
+function $getTableCellPosition() {
+  const cell = $getSelectedTableCell();
+  const row = cell?.getParent();
+  const table = row?.getParent();
+  if (!cell || !$isTableRowNode(row) || !$isTableNode2(table)) return null;
+  const rows = $rows(table);
+  return {
+    row: rows.indexOf(row),
+    column: $cells(row).indexOf(cell),
+    rows: rows.length,
+    columns: $columnCount(table),
+    hasHeader: $isHeaderRow(rows[0])
+  };
+}
+function insertableRowIndices(position) {
+  const indices = [];
+  for (let i = position.hasHeader ? 1 : 0; i <= position.rows; i++) indices.push(i);
+  return indices;
+}
+function canDeleteRow(position) {
+  return position.rows > 1;
+}
+function $insertTableRowAt(table, index, column = 0) {
+  const rows = $rows(table);
+  const minIndex = $isHeaderRow(rows[0]) ? 1 : 0;
+  const at = Math.max(minIndex, Math.min(index, rows.length));
+  const reference = rows[Math.max(0, at - 1)] ?? rows[0];
+  const referenceCells = reference ? $cells(reference) : [];
+  const row = $createTableRowNode();
+  for (const cell of referenceCells) {
+    row.append(
+      $emptyCell(
+        cell.hasHeaderState(TableCellHeaderStates.COLUMN) ? TableCellHeaderStates.COLUMN : TableCellHeaderStates.NO_STATUS
+      )
+    );
+  }
+  if (referenceCells.length === 0) row.append($emptyCell(TableCellHeaderStates.NO_STATUS));
+  if (at >= rows.length) table.append(row);
+  else rows[at].insertBefore(row);
+  $selectCellAt(table, at, column);
+  return row;
+}
+function $deleteTableRowAt(table, index, column = 0) {
+  const rows = $rows(table);
+  const row = rows[index];
+  if (!row || rows.length < 2) return false;
+  const wasHeader = index === 0 && $isHeaderRow(row);
+  row.remove();
+  const remaining = $rows(table);
+  if (wasHeader) {
+    for (const cell of $cells(remaining[0])) {
+      cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+    }
+  }
+  $selectCellAt(table, index, column);
+  return true;
+}
+function $insertTableRowNear(table, position) {
+  const at = $getTableCellPosition();
+  if (!at) return null;
+  return $insertTableRowAt(table, position === "below" ? at.row + 1 : at.row, at.column);
+}
+function $deleteSelectedTableRow(table) {
+  const at = $getTableCellPosition();
+  if (!at || !canDeleteRow(at)) return false;
+  return $deleteTableRowAt(table, at.row, at.column);
+}
+function insertableColumnIndices(position) {
+  const indices = [];
+  for (let i = 0; i <= position.columns; i++) indices.push(i);
+  return indices;
+}
+function canDeleteColumn(position) {
+  return position.columns > 1;
+}
+function $insertTableColumnAt(table, index, row = 0) {
+  const at = Math.max(0, Math.min(index, $columnCount(table)));
+  for (const tableRow of $rows(table)) {
+    const cells = $cells(tableRow);
+    const cell = $emptyCell(
+      $isHeaderRow(tableRow) ? TableCellHeaderStates.ROW : TableCellHeaderStates.NO_STATUS
+    );
+    if (at < cells.length) cells[at].insertBefore(cell);
+    else tableRow.append(cell);
+  }
+  $selectCellAt(table, row, at);
+}
+function $deleteTableColumnAt(table, index, row = 0) {
+  const columns = $columnCount(table);
+  if (index < 0 || index >= columns || columns < 2) return false;
+  for (const tableRow of $rows(table)) $cells(tableRow)[index]?.remove();
+  $selectCellAt(table, row, index);
+  return true;
+}
+function $insertTableColumnNear(table, position) {
+  const at = $getTableCellPosition();
+  if (!at) return false;
+  $insertTableColumnAt(table, position === "after" ? at.column + 1 : at.column, at.row);
+  return true;
+}
+function $deleteSelectedTableColumn(table) {
+  const at = $getTableCellPosition();
+  if (!at || !canDeleteColumn(at)) return false;
+  return $deleteTableColumnAt(table, at.column, at.row);
+}
+
+// src/plugins/TableRowShortcutsPlugin.tsx
+function shortcutFor(event) {
+  const mod = event.metaKey || event.ctrlKey;
+  if (event.altKey) return null;
+  if (event.key === "Enter" && mod) return event.shiftKey ? "insert-above" : "insert-below";
+  if (event.key === "Backspace" && mod && event.shiftKey) return "delete";
+  if (event.key === "Tab" && !mod && !event.shiftKey) return "tab";
+  return null;
+}
+function TableRowShortcutsPlugin() {
+  const [editor] = useLexicalComposerContext5();
+  useEffect5(
+    () => editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        const shortcut = shortcutFor(event);
+        if (!shortcut) return false;
+        const table = $getSelectedTable();
+        const position = $getTableCellPosition();
+        if (!table || !position) return false;
+        if (shortcut === "tab") {
+          const selection = $getSelection4();
+          const isLastCell = position.row === position.rows - 1 && position.column === position.columns - 1;
+          if (!isLastCell || !$isRangeSelection4(selection) || !selection.isCollapsed()) return false;
+          event.preventDefault();
+          $insertTableRowAt(table, position.rows);
+          return true;
+        }
+        event.preventDefault();
+        if (shortcut === "delete") $deleteSelectedTableRow(table);
+        else $insertTableRowNear(table, shortcut === "insert-above" ? "above" : "below");
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH
+    ),
+    [editor]
+  );
+  return null;
+}
+
 // src/nodes/FrontmatterNode.ts
 import {
   $applyNodeReplacement,
@@ -1696,14 +2038,14 @@ import {
 // src/drawing/canvas/DrawingCanvas.tsx
 import {
   useCallback,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useMemo,
   useRef as useRef4,
   useState as useState3,
   useContext as useContext2
 } from "react";
-import { $getNodeByKey as $getNodeByKey2 } from "lexical";
-import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
+import { $getNodeByKey as $getNodeByKey4 } from "lexical";
+import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 
 // src/editorContext.ts
@@ -4501,7 +4843,7 @@ function HitArea({
 
 // src/drawing/canvas/TextEditOverlay.tsx
 import {
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useRef as useRef2,
   useState
 } from "react";
@@ -4517,7 +4859,7 @@ function TextEditOverlay({
   const ref = useRef2(null);
   const valueRef = useRef2(value);
   valueRef.current = value;
-  useEffect5(() => {
+  useEffect6(() => {
     const el = ref.current;
     if (!el) return;
     el.focus();
@@ -4625,7 +4967,7 @@ function TextEditOverlay({
 }
 
 // src/drawing/canvas/Toolbar.tsx
-import { useEffect as useEffect6, useRef as useRef3, useState as useState2 } from "react";
+import { useEffect as useEffect7, useRef as useRef3, useState as useState2 } from "react";
 
 // src/components/blockWidthOptions.tsx
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -4710,7 +5052,7 @@ function DrawingToolbar({
   const [lastMore, setLastMore] = useState2("note");
   const [copied, setCopied] = useState2(false);
   const moreRef = useRef3(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!moreOpen) return;
     const close = (e) => {
       if (!moreRef.current?.contains(e.target)) setMoreOpen(false);
@@ -4832,7 +5174,7 @@ function computePaths(shapes) {
   return paths;
 }
 function DrawingCanvas({ nodeKey, data }) {
-  const [editor] = useLexicalComposerContext5();
+  const [editor] = useLexicalComposerContext6();
   const isEditable = useLexicalEditable();
   const [shapes, setShapes] = useState3(data.shapes);
   const [canvasHeight, setCanvasHeight] = useState3(data.canvasHeight);
@@ -4864,7 +5206,7 @@ function DrawingCanvas({ nodeKey, data }) {
   const paths = useMemo(() => computePaths(shapes), [shapes]);
   const canvasWidth = data.canvasWidth;
   const logicalWidth = canvasWidth ?? (width === "content" ? contentWidth(shapes, paths) : null);
-  useEffect7(() => {
+  useEffect8(() => {
     const incoming = serializeDrawingData(data);
     if (incoming !== lastCommittedRef.current) {
       lastCommittedRef.current = incoming;
@@ -4875,7 +5217,7 @@ function DrawingCanvas({ nodeKey, data }) {
       setEditingText(null);
     }
   }, [data]);
-  useEffect7(() => {
+  useEffect8(() => {
     const svg = svgRef.current;
     if (!logicalWidth || !svg || typeof ResizeObserver === "undefined") {
       setScale(1);
@@ -4905,7 +5247,7 @@ function DrawingCanvas({ nodeKey, data }) {
       if (json2 === lastCommittedRef.current) return;
       lastCommittedRef.current = json2;
       editor.update(() => {
-        const node = $getNodeByKey2(nodeKey);
+        const node = $getNodeByKey4(nodeKey);
         if ($isDrawingNode(node)) node.setData(payload);
       });
     },
@@ -5165,7 +5507,7 @@ function DrawingCanvas({ nodeKey, data }) {
   }, [updateShapes]);
   const editingRef = useRef4(editingText);
   editingRef.current = editingText;
-  useEffect7(() => {
+  useEffect8(() => {
     const root = rootRef.current;
     if (!root || !isEditable) return;
     const onKeyDown = (e) => {
@@ -5612,161 +5954,17 @@ import {
   TRANSFORMERS
 } from "@lexical/markdown";
 import {
-  $createTableCellNode,
+  $createTableCellNode as $createTableCellNode2,
   $createTableNode,
-  $createTableRowNode,
-  $isTableCellNode,
-  $isTableNode as $isTableNode2,
-  $isTableRowNode,
-  TableCellHeaderStates,
+  $createTableRowNode as $createTableRowNode2,
+  $isTableCellNode as $isTableCellNode2,
+  $isTableNode as $isTableNode3,
+  $isTableRowNode as $isTableRowNode2,
+  TableCellHeaderStates as TableCellHeaderStates2,
   TableCellNode,
   TableNode,
   TableRowNode
 } from "@lexical/table";
-
-// src/transformers/tableSettings.ts
-import {
-  $getNodeByKey as $getNodeByKey3,
-  $getSelection as $getSelection2,
-  $isRangeSelection as $isRangeSelection2
-} from "lexical";
-import { $findMatchingParent } from "@lexical/utils";
-import { $isTableNode, $isTableSelection } from "@lexical/table";
-var DEFAULT_TABLE_SETTINGS = {
-  width: "full",
-  density: "comfortable"
-};
-var BLOCK_BLEED_PROPERTY = "--zui-text-editor-block-bleed";
-var OPTION_DECLARATIONS = {
-  width: {
-    full: {},
-    content: { width: "auto", "table-layout": "auto", [BLOCK_BLEED_PROPERTY]: "0px" },
-    text: { [BLOCK_BLEED_PROPERTY]: "0px" }
-  },
-  density: {
-    comfortable: {},
-    compact: {
-      "--zui-table-cell-padding": "0.25rem 0.5rem",
-      "--zui-table-font-size": "0.8125rem"
-    },
-    spacious: {
-      "--zui-table-cell-padding": "0.875rem 1rem",
-      "--zui-table-font-size": "0.9375rem"
-    }
-  }
-};
-var SETTING_KEYS = Object.keys(OPTION_DECLARATIONS);
-var EXPLICIT_WIDTH_PROPERTY = "--zui-table-width";
-function parseStyle(style) {
-  const declarations = /* @__PURE__ */ new Map();
-  for (const part of style.split(";")) {
-    const index = part.indexOf(":");
-    if (index === -1) continue;
-    const key = part.slice(0, index).trim();
-    const value = part.slice(index + 1).trim();
-    if (key && value) declarations.set(key, value);
-  }
-  return declarations;
-}
-function serializeStyle(declarations) {
-  return [...declarations].map(([key, value]) => `${key}: ${value}`).join("; ");
-}
-function optionsOf(setting) {
-  return Object.entries(OPTION_DECLARATIONS[setting]);
-}
-function readSetting(declarations, setting) {
-  for (const [option, decls] of optionsOf(setting)) {
-    const entries = Object.entries(decls);
-    if (entries.length === 0) continue;
-    if (entries.every(([key, value]) => declarations.get(key) === value)) {
-      return option;
-    }
-  }
-  return DEFAULT_TABLE_SETTINGS[setting];
-}
-function writeSetting(declarations, setting, option) {
-  for (const [, decls] of optionsOf(setting)) {
-    for (const key of Object.keys(decls)) declarations.delete(key);
-  }
-  for (const [key, value] of Object.entries(OPTION_DECLARATIONS[setting][option])) {
-    declarations.set(key, value);
-  }
-}
-function $getTableSettings(table) {
-  const declarations = parseStyle(table.getStyle());
-  return {
-    width: readSetting(declarations, "width"),
-    density: readSetting(declarations, "density")
-  };
-}
-function $setTableSettings(table, settings, options = {}) {
-  const declarations = parseStyle(table.getStyle());
-  for (const key of SETTING_KEYS) {
-    const option = settings[key];
-    if (option !== void 0) writeSetting(declarations, key, option);
-  }
-  if (settings.width !== void 0) {
-    if (options.explicitWidth) declarations.set(EXPLICIT_WIDTH_PROPERTY, settings.width);
-    else declarations.delete(EXPLICIT_WIDTH_PROPERTY);
-  }
-  table.setStyle(serializeStyle(declarations));
-}
-function $isTableWidthExplicit(table) {
-  const declarations = parseStyle(table.getStyle());
-  return declarations.get(EXPLICIT_WIDTH_PROPERTY) === readSetting(declarations, "width");
-}
-function $getTableWidth(table) {
-  return $getTableSettings(table).width;
-}
-function $setTableWidth(table, width) {
-  $setTableSettings(table, { width });
-}
-function $getTableDensity(table) {
-  return $getTableSettings(table).density;
-}
-function $setTableDensity(table, density) {
-  $setTableSettings(table, { density });
-}
-function $getSelectedTable() {
-  const selection = $getSelection2();
-  if ($isTableSelection(selection)) {
-    const node = $getNodeByKey3(selection.tableKey);
-    return $isTableNode(node) ? node : null;
-  }
-  if (!$isRangeSelection2(selection)) return null;
-  const table = $findMatchingParent(
-    selection.anchor.getNode(),
-    (node) => $isTableNode(node)
-  );
-  return $isTableNode(table) ? table : null;
-}
-var MARKER_REG_EXP = /^<!--\s*([a-z]+\s*:\s*[a-z]+(?:\s*;\s*[a-z]+\s*:\s*[a-z]+)*)\s*;?\s*-->\s*$/;
-function isOption(setting, value) {
-  return value in OPTION_DECLARATIONS[setting];
-}
-var TABLE_WIDTH_MARKER = "<!-- width: content -->";
-function parseTableSettingsMarker(text) {
-  const match = MARKER_REG_EXP.exec(text);
-  if (!match) return null;
-  const settings = {};
-  let recognised = false;
-  for (const pair of match[1].split(";")) {
-    const [key, value] = pair.split(":").map((s) => s.trim());
-    if (key !== "width" && key !== "density") continue;
-    recognised = true;
-    if (key === "width" && isOption("width", value)) settings.width = value;
-    if (key === "density" && isOption("density", value)) settings.density = value;
-  }
-  return recognised ? settings : null;
-}
-function formatTableSettingsMarker(settings, options = {}) {
-  const pairs = SETTING_KEYS.filter(
-    (key) => settings[key] !== DEFAULT_TABLE_SETTINGS[key] || key === "width" && options.explicitWidth
-  ).map((key) => `${key}: ${settings[key]}`);
-  return pairs.length > 0 ? `<!-- ${pairs.join("; ")} -->` : null;
-}
-
-// src/transformers/tableTransformer.ts
 var TABLE_ROW_REG_EXP = /^\|(.+)\|\s?$/;
 var TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
 function $getMarkerSettings(node) {
@@ -5776,11 +5974,11 @@ function $getMarkerSettings(node) {
 }
 function getTableColumnsSize(table) {
   const row = table.getFirstChild();
-  return $isTableRowNode(row) ? row.getChildrenSize() : 0;
+  return $isTableRowNode2(row) ? row.getChildrenSize() : 0;
 }
 function createTableCell(textContent) {
   const unescaped = textContent.replace(/\\n/g, "\n");
-  const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+  const cell = $createTableCellNode2(TableCellHeaderStates2.NO_STATUS);
   $convertFromMarkdownString2(unescaped, TRANSFORMERS, cell);
   return cell;
 }
@@ -5792,22 +5990,22 @@ function mapToTableCells(textContent) {
 var TABLE = {
   dependencies: [TableNode, TableRowNode, TableCellNode],
   export: (node) => {
-    if (!$isTableNode2(node)) return null;
+    if (!$isTableNode3(node)) return null;
     const output = [];
     const marker = formatTableSettingsMarker($getTableSettings(node), {
       explicitWidth: $isTableWidthExplicit(node)
     });
     if (marker) output.push(marker);
     for (const row of node.getChildren()) {
-      if (!$isTableRowNode(row)) continue;
+      if (!$isTableRowNode2(row)) continue;
       const rowOutput = [];
       let isHeaderRow = false;
       for (const cell of row.getChildren()) {
-        if (!$isTableCellNode(cell)) continue;
+        if (!$isTableCellNode2(cell)) continue;
         rowOutput.push(
           $convertToMarkdownString2(TRANSFORMERS, cell).replace(/\n/g, "\\n")
         );
-        if (cell.__headerState === TableCellHeaderStates.ROW) {
+        if (cell.__headerState === TableCellHeaderStates2.ROW) {
           isHeaderRow = true;
         }
       }
@@ -5822,12 +6020,12 @@ var TABLE = {
   replace: (parentNode, _children, match) => {
     if (TABLE_ROW_DIVIDER_REG_EXP.test(match[0])) {
       const table2 = parentNode.getPreviousSibling();
-      if (!table2 || !$isTableNode2(table2)) return;
+      if (!table2 || !$isTableNode3(table2)) return;
       const lastRow = table2.getLastChild();
-      if (!lastRow || !$isTableRowNode(lastRow)) return;
+      if (!lastRow || !$isTableRowNode2(lastRow)) return;
       lastRow.getChildren().forEach((cell) => {
-        if ($isTableCellNode(cell)) {
-          cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+        if ($isTableCellNode2(cell)) {
+          cell.setHeaderStyles(TableCellHeaderStates2.ROW, TableCellHeaderStates2.ROW);
         }
       });
       parentNode.remove();
@@ -5852,14 +6050,14 @@ var TABLE = {
     }
     const table = $createTableNode();
     for (const cells of rows) {
-      const tableRow = $createTableRowNode();
+      const tableRow = $createTableRowNode2();
       table.append(tableRow);
       for (let i = 0; i < maxCells; i++) {
         tableRow.append(i < cells.length ? cells[i] : createTableCell(""));
       }
     }
     const previousSibling = parentNode.getPreviousSibling();
-    if ($isTableNode2(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
+    if ($isTableNode3(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
       previousSibling.append(...table.getChildren());
       parentNode.remove();
     } else {
@@ -5970,8 +6168,8 @@ var editorNodes = [
   DrawingNode
 ];
 function ReadOnlyPlugin({ readOnly }) {
-  const [editor] = useLexicalComposerContext6();
-  useEffect8(() => {
+  const [editor] = useLexicalComposerContext7();
+  useEffect9(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   return null;
@@ -5983,7 +6181,7 @@ function EditorRoot({
   className,
   mode = "edit-md",
   autoFocus = false,
-  measure,
+  measure: measure2,
   defaultBlockWidth = NO_DEFAULT_BLOCK_WIDTH,
   drawingStyle = "clean",
   children
@@ -5991,7 +6189,7 @@ function EditorRoot({
   const latestValueRef = useRef5(value ?? "");
   const [mountKey, setMountKey] = useState4(0);
   const [capturedMarkdown, setCapturedMarkdown] = useState4(value ?? "");
-  useEffect8(() => {
+  useEffect9(() => {
     if (value !== void 0) {
       latestValueRef.current = value;
     }
@@ -6004,7 +6202,7 @@ function EditorRoot({
     [onChange]
   );
   const prevModeRef = useRef5(mode);
-  useEffect8(() => {
+  useEffect9(() => {
     if (prevModeRef.current === "edit-raw" && mode !== "edit-raw") {
       setCapturedMarkdown(latestValueRef.current);
       setMountKey((k) => k + 1);
@@ -6034,8 +6232,8 @@ function EditorRoot({
   );
   const isRaw = mode === "edit-raw";
   const rootStyle = useMemo2(
-    () => measure !== void 0 ? { "--zui-text-editor-measure": measure } : void 0,
-    [measure]
+    () => measure2 !== void 0 ? { "--zui-text-editor-measure": measure2 } : void 0,
+    [measure2]
   );
   return /* @__PURE__ */ jsx12(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx12(EditorContext.Provider, { value: context, children: /* @__PURE__ */ jsxs10("div", { className: `zui-text-editor ${className ?? ""}`, style: rootStyle, children: [
     children,
@@ -6055,6 +6253,7 @@ function EditorRoot({
       /* @__PURE__ */ jsx12(CodeBlockShortcutPlugin, {}),
       /* @__PURE__ */ jsx12(CodeHighlightPlugin, {}),
       /* @__PURE__ */ jsx12(TablePlugin, {}),
+      /* @__PURE__ */ jsx12(TableRowShortcutsPlugin, {}),
       /* @__PURE__ */ jsx12(LinkPlugin, {}),
       /* @__PURE__ */ jsx12(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
       /* @__PURE__ */ jsx12(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
@@ -6071,12 +6270,12 @@ import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 // src/plugins/FoldingPlugin.tsx
 import {
   useCallback as useCallback3,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useRef as useRef6,
   useState as useState5
 } from "react";
-import { $getRoot, $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
-import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
+import { $getRoot, $getSelection as $getSelection5, $isRangeSelection as $isRangeSelection5 } from "lexical";
+import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
 import { $isHeadingNode } from "@lexical/rich-text";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var HEADING_LEVELS = {
@@ -6088,7 +6287,7 @@ var HEADING_LEVELS = {
   h6: 6
 };
 function FoldingPlugin() {
-  const [editor] = useLexicalComposerContext7();
+  const [editor] = useLexicalComposerContext8();
   const [foldedKeys, setFoldedKeys] = useState5(/* @__PURE__ */ new Set());
   const [buttons, setButtons] = useState5([]);
   const foldedRef = useRef6(foldedKeys);
@@ -6114,8 +6313,8 @@ function FoldingPlugin() {
           hidden.add(sibling.getKey());
         }
       }
-      const selection = $getSelection3();
-      if ($isRangeSelection3(selection)) {
+      const selection = $getSelection5();
+      if ($isRangeSelection5(selection)) {
         const topLevel = selection.anchor.getNode().getTopLevelElement();
         if (topLevel && hidden.has(topLevel.getKey())) {
           let node = topLevel.getPreviousSibling();
@@ -6157,7 +6356,7 @@ function FoldingPlugin() {
       );
     });
   }, [editor]);
-  useEffect9(() => {
+  useEffect10(() => {
     sync();
     const unregister = editor.registerUpdateListener(sync);
     const rootElement = editor.getRootElement();
@@ -6205,17 +6404,109 @@ function FoldingPlugin() {
   )) });
 }
 
-// src/plugins/TableSettingsPlugin.tsx
-import { useCallback as useCallback5, useEffect as useEffect11, useState as useState7 } from "react";
-import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
+// src/plugins/TableControlsPlugin.tsx
+import { useCallback as useCallback7 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext11 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
 
+// src/components/TableRail.tsx
+import { useCallback as useCallback4, useRef as useRef7, useState as useState6 } from "react";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var TABLE_RAIL_WIDTH = { row: 28, column: 24 };
+var NAMES = { row: "row", column: "column" };
+function TableRail({
+  axis,
+  box,
+  lanes,
+  current,
+  insertable,
+  canDelete,
+  onInsert,
+  onDelete
+}) {
+  const rail = useRef7(null);
+  const [pointer, setPointer] = useState6(null);
+  const width = TABLE_RAIL_WIDTH[axis];
+  const vertical = axis === "row";
+  const boundary = useCallback4(
+    (index) => {
+      if (index < lanes.length) return lanes[index].start;
+      const last = lanes[lanes.length - 1];
+      return last ? last.start + last.size : 0;
+    },
+    [lanes]
+  );
+  const onPointerMove = useCallback4(
+    (event) => {
+      const rect = rail.current?.getBoundingClientRect();
+      if (!rect) return;
+      setPointer(vertical ? event.clientY - rect.top : event.clientX - rect.left);
+    },
+    [vertical]
+  );
+  if (lanes.length === 0) return null;
+  const handle = (() => {
+    if (pointer === null) return { mode: "insert", index: lanes.length };
+    let nearest = lanes.length;
+    let distance = Number.POSITIVE_INFINITY;
+    for (const index of insertable) {
+      const d = Math.abs(boundary(index) - pointer);
+      if (d < distance) {
+        distance = d;
+        nearest = index;
+      }
+    }
+    const under = lanes.findIndex((lane2) => pointer >= lane2.start && pointer < lane2.start + lane2.size);
+    const lane = lanes[under];
+    const threshold = lane ? Math.min(10, lane.size * 0.3) : 0;
+    if (!canDelete || under === -1 || distance <= threshold) return { mode: "insert", index: nearest };
+    return { mode: "delete", index: under };
+  })();
+  const at = (value) => vertical ? { top: value } : { left: value };
+  const span = (lane) => vertical ? { top: lane.start + 3, height: Math.max(4, lane.size - 6) } : { left: lane.start + 3, width: Math.max(4, lane.size - 6) };
+  const across = vertical ? { left: width, width: box.width } : { top: width, height: box.height };
+  const marker = lanes[Math.min(current, lanes.length - 1)];
+  const isAppend = handle.mode === "insert" && handle.index === lanes.length;
+  const name = NAMES[axis];
+  const label = handle.mode === "delete" ? `Delete ${name} ${handle.index + 1}` : isAppend ? `Add ${name}` : `Insert ${name} before ${name} ${handle.index + 1}`;
+  const previewStyle = handle.mode === "insert" ? { ...at(boundary(handle.index)), ...across } : vertical ? { top: lanes[handle.index].start, height: lanes[handle.index].size, ...across } : { left: lanes[handle.index].start, width: lanes[handle.index].size, ...across };
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      ref: rail,
+      className: `zui-table-rail is-${axis}`,
+      style: vertical ? { top: box.top, left: box.left - width, width, height: box.height } : { top: box.top - width, left: box.left, width: box.width, height: width },
+      onPointerMove,
+      onPointerLeave: () => setPointer(null),
+      children: [
+        /* @__PURE__ */ jsx14("div", { className: "zui-table-rail-marker", style: span(marker), "aria-hidden": true }),
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            className: `zui-table-rail-handle is-${handle.mode} ${pointer === null ? "is-resting" : ""}`,
+            style: at(
+              handle.mode === "insert" ? boundary(handle.index) : lanes[handle.index].start + lanes[handle.index].size / 2
+            ),
+            title: label,
+            "aria-label": label,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => handle.mode === "insert" ? onInsert(handle.index) : onDelete(handle.index),
+            children: /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", children: handle.mode === "insert" ? /* @__PURE__ */ jsx14("path", { d: "M6 2.5v7M2.5 6h7" }) : /* @__PURE__ */ jsx14("path", { d: "M2.5 6h7" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx14("div", { className: `zui-table-rail-preview is-${handle.mode}`, style: previewStyle, "aria-hidden": true })
+      ]
+    }
+  );
+}
+
 // src/useMarkdownEditor.ts
-import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect11, useRef as useRef8, useState as useState7 } from "react";
 import {
-  $getNodeByKey as $getNodeByKey4,
-  $getSelection as $getSelection4,
-  $isRangeSelection as $isRangeSelection4,
+  $getNodeByKey as $getNodeByKey5,
+  $getSelection as $getSelection6,
+  $isRangeSelection as $isRangeSelection6,
   CAN_REDO_COMMAND,
   CAN_UNDO_COMMAND,
   COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW2,
@@ -6223,7 +6514,7 @@ import {
   REDO_COMMAND,
   UNDO_COMMAND
 } from "lexical";
-import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
+import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
 import { INSERT_TABLE_COMMAND } from "@lexical/table";
 import { $insertNodeToNearestRoot, mergeRegister as mergeRegister2 } from "@lexical/utils";
 var TRACKED_FORMATS = [
@@ -6235,29 +6526,31 @@ var TRACKED_FORMATS = [
 ];
 function $readDrawingWidth(key) {
   if (key === null) return null;
-  const node = $getNodeByKey4(key);
+  const node = $getNodeByKey5(key);
   return $isDrawingNode(node) ? node.getData().width ?? "full" : null;
 }
 function useMarkdownEditor() {
-  const [editor] = useLexicalComposerContext8();
+  const [editor] = useLexicalComposerContext9();
   const { defaultBlockWidth } = useEditorContext();
-  const [activeFormats, setActiveFormats] = useState6(
+  const [activeFormats, setActiveFormats] = useState7(
     /* @__PURE__ */ new Set()
   );
-  const [canUndo, setCanUndo] = useState6(false);
-  const [canRedo, setCanRedo] = useState6(false);
-  const [tableSettings, setTableSettingsState] = useState6(null);
-  const activeDrawingRef = useRef7(null);
-  const [drawingWidth, setDrawingWidth] = useState6(null);
-  useEffect10(
+  const [canUndo, setCanUndo] = useState7(false);
+  const [canRedo, setCanRedo] = useState7(false);
+  const [tableSettings, setTableSettingsState] = useState7(null);
+  const [tableCell, setTableCell] = useState7(null);
+  const activeDrawingRef = useRef8(null);
+  const [drawingWidth, setDrawingWidth] = useState7(null);
+  useEffect11(
     () => mergeRegister2(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
           const table = $getSelectedTable();
           setTableSettingsState(table ? $getTableSettings(table) : null);
+          setTableCell(table ? $getTableCellPosition() : null);
           setDrawingWidth($readDrawingWidth(activeDrawingRef.current));
-          const selection = $getSelection4();
-          if (!$isRangeSelection4(selection)) {
+          const selection = $getSelection6();
+          if (!$isRangeSelection6(selection)) {
             setActiveFormats(/* @__PURE__ */ new Set());
             return;
           }
@@ -6296,13 +6589,13 @@ function useMarkdownEditor() {
     ),
     [editor]
   );
-  const toggleFormat = useCallback4(
+  const toggleFormat = useCallback5(
     (format) => {
       editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
     },
     [editor]
   );
-  const insertTable = useCallback4(
+  const insertTable = useCallback5(
     ({
       rows = 3,
       columns = 3,
@@ -6324,7 +6617,7 @@ function useMarkdownEditor() {
     },
     [editor, defaultBlockWidth.table]
   );
-  const insertDrawing = useCallback4(
+  const insertDrawing = useCallback5(
     ({ width = defaultBlockWidth.drawing } = {}) => {
       editor.update(() => {
         const data = width === void 0 ? EMPTY_DRAWING : { version: 2, canvasHeight: EMPTY_DRAWING.canvasHeight, width, shapes: [] };
@@ -6333,7 +6626,7 @@ function useMarkdownEditor() {
     },
     [editor, defaultBlockWidth.drawing]
   );
-  const updateTableSettings = useCallback4(
+  const updateTableSettings = useCallback5(
     (settings) => {
       editor.update(() => {
         const table = $getSelectedTable();
@@ -6342,15 +6635,45 @@ function useMarkdownEditor() {
     },
     [editor]
   );
-  const setTableWidth = useCallback4(
+  const setTableWidth = useCallback5(
     (width) => updateTableSettings({ width }),
     [updateTableSettings]
   );
-  const setTableDensity = useCallback4(
+  const setTableDensity = useCallback5(
     (density) => updateTableSettings({ density }),
     [updateTableSettings]
   );
-  const setBlockWidth = useCallback4(
+  const insertTableRow = useCallback5(
+    (position = "below") => {
+      editor.update(() => {
+        const table = $getSelectedTable();
+        if (table) $insertTableRowNear(table, position);
+      });
+    },
+    [editor]
+  );
+  const deleteTableRow = useCallback5(() => {
+    editor.update(() => {
+      const table = $getSelectedTable();
+      if (table) $deleteSelectedTableRow(table);
+    });
+  }, [editor]);
+  const insertTableColumn = useCallback5(
+    (position = "after") => {
+      editor.update(() => {
+        const table = $getSelectedTable();
+        if (table) $insertTableColumnNear(table, position);
+      });
+    },
+    [editor]
+  );
+  const deleteTableColumn = useCallback5(() => {
+    editor.update(() => {
+      const table = $getSelectedTable();
+      if (table) $deleteSelectedTableColumn(table);
+    });
+  }, [editor]);
+  const setBlockWidth = useCallback5(
     (width) => {
       const key = activeDrawingRef.current;
       if (key === null) {
@@ -6358,7 +6681,7 @@ function useMarkdownEditor() {
         return;
       }
       editor.update(() => {
-        const node = $getNodeByKey4(key);
+        const node = $getNodeByKey5(key);
         if (!$isDrawingNode(node)) return;
         const { width: _previous, ...data } = node.getData();
         node.setData(width === "full" ? data : { ...data, width });
@@ -6366,10 +6689,10 @@ function useMarkdownEditor() {
     },
     [editor, updateTableSettings]
   );
-  const undo = useCallback4(() => {
+  const undo = useCallback5(() => {
     editor.dispatchCommand(UNDO_COMMAND, void 0);
   }, [editor]);
-  const redo = useCallback4(() => {
+  const redo = useCallback5(() => {
     editor.dispatchCommand(REDO_COMMAND, void 0);
   }, [editor]);
   return {
@@ -6384,6 +6707,11 @@ function useMarkdownEditor() {
     setTableWidth,
     tableDensity: tableSettings?.density ?? null,
     setTableDensity,
+    tableCell,
+    insertTableRow,
+    deleteTableRow,
+    insertTableColumn,
+    deleteTableColumn,
     canUndo,
     canRedo,
     undo,
@@ -6392,23 +6720,23 @@ function useMarkdownEditor() {
 }
 
 // src/components/Toolbar.tsx
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function Toolbar({ children, className }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       className: `zui-text-editor-toolbar ${className ?? ""}`,
       role: "toolbar",
-      children: children ?? /* @__PURE__ */ jsxs11(Fragment5, { children: [
-        /* @__PURE__ */ jsx14(FormatButtons, {}),
-        /* @__PURE__ */ jsx14(ToolbarDivider, {}),
-        /* @__PURE__ */ jsx14(InsertButtons, {})
+      children: children ?? /* @__PURE__ */ jsxs12(Fragment5, { children: [
+        /* @__PURE__ */ jsx15(FormatButtons, {}),
+        /* @__PURE__ */ jsx15(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx15(InsertButtons, {})
       ] })
     }
   );
 }
 function ToolbarDivider() {
-  return /* @__PURE__ */ jsx14("div", { className: "zui-text-editor-toolbar-divider" });
+  return /* @__PURE__ */ jsx15("div", { className: "zui-text-editor-toolbar-divider" });
 }
 function ToolbarButton({
   label,
@@ -6418,7 +6746,7 @@ function ToolbarButton({
   disabled = false,
   className
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "button",
     {
       type: "button",
@@ -6434,7 +6762,7 @@ function ToolbarButton({
   );
 }
 function Icon2({ children, strokeWidth = 1.5 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "svg",
     {
       viewBox: "0 0 20 20",
@@ -6453,27 +6781,27 @@ var FORMAT_BUTTONS = [
   {
     format: "bold",
     label: "Bold",
-    icon: /* @__PURE__ */ jsx14(Icon2, { strokeWidth: 1.8, children: /* @__PURE__ */ jsx14("path", { d: "M6 3.5h5a3 3 0 0 1 0 6H6zm0 6h6a3 3 0 0 1 0 6H6z" }) })
+    icon: /* @__PURE__ */ jsx15(Icon2, { strokeWidth: 1.8, children: /* @__PURE__ */ jsx15("path", { d: "M6 3.5h5a3 3 0 0 1 0 6H6zm0 6h6a3 3 0 0 1 0 6H6z" }) })
   },
   {
     format: "italic",
     label: "Italic",
-    icon: /* @__PURE__ */ jsx14(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx14("path", { d: "M8.5 3.5h6M5.5 16.5h6M11.5 3.5l-3 13" }) })
+    icon: /* @__PURE__ */ jsx15(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx15("path", { d: "M8.5 3.5h6M5.5 16.5h6M11.5 3.5l-3 13" }) })
   },
   {
     format: "strikethrough",
     label: "Strikethrough",
-    icon: /* @__PURE__ */ jsx14(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx14("path", { d: "M4 10h12M13.5 5.5c-.6-1.2-2-2-3.5-2-2 0-3.5 1.2-3.5 2.8 0 .5.1.9.4 1.3m-.4 5c.5 1.6 2 2.9 3.9 2.9 2 0 3.6-1.2 3.6-2.9 0-.4-.1-.8-.2-1.1" }) })
+    icon: /* @__PURE__ */ jsx15(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx15("path", { d: "M4 10h12M13.5 5.5c-.6-1.2-2-2-3.5-2-2 0-3.5 1.2-3.5 2.8 0 .5.1.9.4 1.3m-.4 5c.5 1.6 2 2.9 3.9 2.9 2 0 3.6-1.2 3.6-2.9 0-.4-.1-.8-.2-1.1" }) })
   },
   {
     format: "code",
     label: "Inline code",
-    icon: /* @__PURE__ */ jsx14(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx14("path", { d: "M7.5 6L4 10l3.5 4M12.5 6L16 10l-3.5 4" }) })
+    icon: /* @__PURE__ */ jsx15(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx15("path", { d: "M7.5 6L4 10l3.5 4M12.5 6L16 10l-3.5 4" }) })
   }
 ];
 function FormatButtons() {
   const { activeFormats, toggleFormat } = useMarkdownEditor();
-  return /* @__PURE__ */ jsx14(Fragment5, { children: FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(Fragment5, { children: FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx15(
     ToolbarButton,
     {
       label,
@@ -6486,36 +6814,36 @@ function FormatButtons() {
 }
 function InsertButtons() {
   const { insertTable, insertDrawing } = useMarkdownEditor();
-  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
-    /* @__PURE__ */ jsx14(ToolbarButton, { label: "Insert table", onClick: () => insertTable(), children: /* @__PURE__ */ jsxs11(Icon2, { children: [
-      /* @__PURE__ */ jsx14("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
-      /* @__PURE__ */ jsx14("path", { d: "M3 8h14M8 8v8.5M13 8v8.5" })
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    /* @__PURE__ */ jsx15(ToolbarButton, { label: "Insert table", onClick: () => insertTable(), children: /* @__PURE__ */ jsxs12(Icon2, { children: [
+      /* @__PURE__ */ jsx15("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
+      /* @__PURE__ */ jsx15("path", { d: "M3 8h14M8 8v8.5M13 8v8.5" })
     ] }) }),
-    /* @__PURE__ */ jsx14(ToolbarButton, { label: "Insert drawing", onClick: insertDrawing, children: /* @__PURE__ */ jsxs11(Icon2, { children: [
-      /* @__PURE__ */ jsx14("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
-      /* @__PURE__ */ jsx14("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
-      /* @__PURE__ */ jsx14("ellipse", { cx: "13", cy: "14.5", rx: "4", ry: "2.8" })
+    /* @__PURE__ */ jsx15(ToolbarButton, { label: "Insert drawing", onClick: insertDrawing, children: /* @__PURE__ */ jsxs12(Icon2, { children: [
+      /* @__PURE__ */ jsx15("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
+      /* @__PURE__ */ jsx15("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
+      /* @__PURE__ */ jsx15("ellipse", { cx: "13", cy: "14.5", rx: "4", ry: "2.8" })
     ] }) })
   ] });
 }
 function HistoryButtons() {
   const { canUndo, canRedo, undo, redo } = useMarkdownEditor();
-  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
-    /* @__PURE__ */ jsx14(ToolbarButton, { label: "Undo", onClick: undo, disabled: !canUndo, children: /* @__PURE__ */ jsxs11(Icon2, { children: [
-      /* @__PURE__ */ jsx14("path", { d: "M7 6L3.5 9.5 7 13" }),
-      /* @__PURE__ */ jsx14("path", { d: "M3.5 9.5H12a4 4 0 0 1 0 8h-1" })
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    /* @__PURE__ */ jsx15(ToolbarButton, { label: "Undo", onClick: undo, disabled: !canUndo, children: /* @__PURE__ */ jsxs12(Icon2, { children: [
+      /* @__PURE__ */ jsx15("path", { d: "M7 6L3.5 9.5 7 13" }),
+      /* @__PURE__ */ jsx15("path", { d: "M3.5 9.5H12a4 4 0 0 1 0 8h-1" })
     ] }) }),
-    /* @__PURE__ */ jsx14(ToolbarButton, { label: "Redo", onClick: redo, disabled: !canRedo, children: /* @__PURE__ */ jsxs11(Icon2, { children: [
-      /* @__PURE__ */ jsx14("path", { d: "M13 6l3.5 3.5L13 13" }),
-      /* @__PURE__ */ jsx14("path", { d: "M16.5 9.5H8a4 4 0 0 0 0 8h1" })
+    /* @__PURE__ */ jsx15(ToolbarButton, { label: "Redo", onClick: redo, disabled: !canRedo, children: /* @__PURE__ */ jsxs12(Icon2, { children: [
+      /* @__PURE__ */ jsx15("path", { d: "M13 6l3.5 3.5L13 13" }),
+      /* @__PURE__ */ jsx15("path", { d: "M16.5 9.5H8a4 4 0 0 0 0 8h1" })
     ] }) })
   ] });
 }
 
-// src/plugins/TableSettingsPlugin.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+// src/components/TableSettingsToolbar.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Icon3({ children }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "svg",
     {
       viewBox: "0 0 20 20",
@@ -6530,32 +6858,66 @@ function Icon3({ children }) {
     }
   );
 }
-function TableSettingsPlugin() {
-  const [editor] = useLexicalComposerContext9();
-  const isEditable = useLexicalEditable2();
-  const [anchor, setAnchor] = useState7(null);
-  const [settings, setSettings] = useState7(null);
-  const sync = useCallback5(() => {
+function TableSettingsToolbar({ settings, style, onSettings }) {
+  return /* @__PURE__ */ jsx16("div", { className: "zui-table-settings", role: "toolbar", "aria-label": "Table settings", style, children: LAYOUT_OPTIONS.map(({ preset, label, icon, width, density }) => /* @__PURE__ */ jsx16(
+    ToolbarButton,
+    {
+      label,
+      active: layoutPreset(settings.width) === preset,
+      onClick: () => onSettings({ width, density }),
+      children: /* @__PURE__ */ jsx16(Icon3, { children: icon })
+    },
+    preset
+  )) });
+}
+
+// src/plugins/useSelectedTable.ts
+import { useCallback as useCallback6, useEffect as useEffect12, useState as useState8 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
+function measure(element, main) {
+  const rect = element.getBoundingClientRect();
+  const mainRect = main.getBoundingClientRect();
+  const rowElements = Array.from(
+    element.querySelectorAll(":scope > tbody > tr, :scope > tr")
+  );
+  const rows = rowElements.map((row) => {
+    const r = row.getBoundingClientRect();
+    return { start: r.top - rect.top, size: r.height };
+  });
+  const columns = Array.from(rowElements[0]?.children ?? []).map((cell) => {
+    const r = cell.getBoundingClientRect();
+    return { start: r.left - rect.left, size: r.width };
+  });
+  return {
+    box: {
+      top: rect.top - mainRect.top,
+      left: rect.left - mainRect.left,
+      right: mainRect.right - rect.right,
+      width: rect.width,
+      height: rect.height
+    },
+    rows,
+    columns
+  };
+}
+function useSelectedTable() {
+  const [editor] = useLexicalComposerContext10();
+  const [selected, setSelected] = useState8(null);
+  const sync = useCallback6(() => {
     const table = editor.getEditorState().read(() => {
       const node = $getSelectedTable();
-      return node ? { key: node.getKey(), settings: $getTableSettings(node) } : null;
+      const position = $getTableCellPosition();
+      return node && position ? { key: node.getKey(), settings: $getTableSettings(node), position } : null;
     });
     const element = table ? editor.getElementByKey(table.key) : null;
     const main = editor.getRootElement()?.parentElement;
     if (!table || !element || !main) {
-      setAnchor(null);
-      setSettings(null);
+      setSelected(null);
       return;
     }
-    const rect = element.getBoundingClientRect();
-    const mainRect = main.getBoundingClientRect();
-    setAnchor({
-      top: rect.top - mainRect.top,
-      right: mainRect.right - rect.right + 8
-    });
-    setSettings(table.settings);
+    setSelected({ ...table, ...measure(element, main) });
   }, [editor]);
-  useEffect11(() => {
+  useEffect12(() => {
     sync();
     const unregister = editor.registerUpdateListener(sync);
     const rootElement = editor.getRootElement();
@@ -6566,39 +6928,79 @@ function TableSettingsPlugin() {
       observer?.disconnect();
     };
   }, [editor, sync]);
-  const update = useCallback5(
-    (next) => {
+  const key = selected?.key ?? null;
+  useEffect12(() => {
+    if (key === null || typeof ResizeObserver === "undefined") return;
+    const element = editor.getElementByKey(key);
+    if (!element) return;
+    const observer = new ResizeObserver(sync);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [editor, key, sync]);
+  return selected;
+}
+
+// src/plugins/TableControlsPlugin.tsx
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function TableControlsPlugin() {
+  const [editor] = useLexicalComposerContext11();
+  const isEditable = useLexicalEditable2();
+  const table = useSelectedTable();
+  const withTable = useCallback7(
+    (fn) => {
       editor.update(() => {
-        const table = $getSelectedTable();
-        if (table) $setTableSettings(table, next);
+        const node = $getSelectedTable();
+        if (node) fn(node);
       });
     },
     [editor]
   );
-  if (!isEditable || !anchor || !settings) return null;
-  return /* @__PURE__ */ jsx15(
-    "div",
-    {
-      className: "zui-table-settings",
-      role: "toolbar",
-      "aria-label": "Table settings",
-      style: { top: anchor.top, right: anchor.right },
-      children: LAYOUT_OPTIONS.map(({ preset, label, icon, width, density }) => /* @__PURE__ */ jsx15(
-        ToolbarButton,
-        {
-          label,
-          active: layoutPreset(settings.width) === preset,
-          onClick: () => update({ width, density }),
-          children: /* @__PURE__ */ jsx15(Icon3, { children: icon })
-        },
-        preset
-      ))
-    }
+  const updateSettings = useCallback7(
+    (next) => withTable((node) => $setTableSettings(node, next)),
+    [withTable]
   );
+  if (!isEditable || !table) return null;
+  const { position } = table;
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsx17(
+      TableSettingsToolbar,
+      {
+        settings: table.settings,
+        style: { top: table.box.top - TABLE_RAIL_WIDTH.column, right: table.box.right },
+        onSettings: updateSettings
+      }
+    ),
+    /* @__PURE__ */ jsx17(
+      TableRail,
+      {
+        axis: "row",
+        box: table.box,
+        lanes: table.rows,
+        current: position.row,
+        insertable: insertableRowIndices(position),
+        canDelete: canDeleteRow(position),
+        onInsert: (index) => withTable((node) => $insertTableRowAt(node, index, position.column)),
+        onDelete: (index) => withTable((node) => $deleteTableRowAt(node, index, position.column))
+      }
+    ),
+    /* @__PURE__ */ jsx17(
+      TableRail,
+      {
+        axis: "column",
+        box: table.box,
+        lanes: table.columns,
+        current: position.column,
+        insertable: insertableColumnIndices(position),
+        canDelete: canDeleteColumn(position),
+        onInsert: (index) => withTable((node) => $insertTableColumnAt(node, index, position.row)),
+        onDelete: (index) => withTable((node) => $deleteTableColumnAt(node, index, position.row))
+      }
+    )
+  ] });
 }
 
 // src/EditorContent.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function EditorContent({
   placeholder = "Start writing...",
   foldable = true,
@@ -6606,7 +7008,7 @@ function EditorContent({
 }) {
   const { mode, readOnly, autoFocus, rawValue, onRawChange } = useEditorContext();
   if (mode === "edit-raw") {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx18(
       "textarea",
       {
         className: "zui-text-editor-textarea",
@@ -6619,36 +7021,36 @@ function EditorContent({
       }
     );
   }
-  return /* @__PURE__ */ jsxs12("div", { className: "zui-text-editor-body", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "zui-text-editor-main", children: [
-      /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs14("div", { className: "zui-text-editor-body", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "zui-text-editor-main", children: [
+      /* @__PURE__ */ jsx18(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx16(
+          contentEditable: /* @__PURE__ */ jsx18(
             ContentEditable,
             {
               className: "zui-text-editor-content",
               "aria-placeholder": placeholder,
-              placeholder: /* @__PURE__ */ jsx16("div", { className: "zui-text-editor-placeholder", children: placeholder })
+              placeholder: /* @__PURE__ */ jsx18("div", { className: "zui-text-editor-placeholder", children: placeholder })
             }
           ),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      foldable && /* @__PURE__ */ jsx16(FoldingPlugin, {}),
-      /* @__PURE__ */ jsx16(TableSettingsPlugin, {})
+      foldable && /* @__PURE__ */ jsx18(FoldingPlugin, {}),
+      /* @__PURE__ */ jsx18(TableControlsPlugin, {})
     ] }),
     children
   ] });
 }
 
 // src/plugins/OutlinePlugin.tsx
-import { useCallback as useCallback6, useEffect as useEffect12, useState as useState8 } from "react";
-import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
+import { useCallback as useCallback8, useEffect as useEffect13, useState as useState9 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext12 } from "@lexical/react/LexicalComposerContext";
 import {
   TableOfContentsPlugin
 } from "@lexical/react/LexicalTableOfContentsPlugin";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var INDENT_PER_LEVEL = {
   h1: 0,
   h2: 1,
@@ -6658,10 +7060,10 @@ var INDENT_PER_LEVEL = {
   h6: 5
 };
 function OutlinePlugin() {
-  const [editor] = useLexicalComposerContext10();
-  const [collapsed, setCollapsed] = useState8(false);
-  const [activeKey, setActiveKey] = useState8(null);
-  useEffect12(() => {
+  const [editor] = useLexicalComposerContext12();
+  const [collapsed, setCollapsed] = useState9(false);
+  const [activeKey, setActiveKey] = useState9(null);
+  useEffect13(() => {
     const rootElement = editor.getRootElement();
     const scroller = rootElement?.closest(".zui-text-editor");
     if (!rootElement || !(scroller instanceof HTMLElement)) return;
@@ -6691,7 +7093,7 @@ function OutlinePlugin() {
       unregister();
     };
   }, [editor]);
-  const scrollTo = useCallback6(
+  const scrollTo = useCallback8(
     (key) => {
       editor.getEditorState().read(() => {
         const element = editor.getElementByKey(key);
@@ -6700,16 +7102,16 @@ function OutlinePlugin() {
     },
     [editor]
   );
-  return /* @__PURE__ */ jsx17(TableOfContentsPlugin, { children: (entries) => {
+  return /* @__PURE__ */ jsx19(TableOfContentsPlugin, { children: (entries) => {
     for (const [key] of entries) {
       editor.getElementByKey(key)?.setAttribute("data-outline-key", key);
     }
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         className: `zui-text-editor-outline ${collapsed ? "is-collapsed" : ""}`,
         children: [
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx19(
             "button",
             {
               type: "button",
@@ -6718,7 +7120,7 @@ function OutlinePlugin() {
               "aria-label": collapsed ? "Show outline" : "Hide outline",
               "aria-expanded": !collapsed,
               onClick: () => setCollapsed((c2) => !c2),
-              children: /* @__PURE__ */ jsx17(
+              children: /* @__PURE__ */ jsx19(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -6728,14 +7130,14 @@ function OutlinePlugin() {
                   stroke: "currentColor",
                   strokeWidth: "1.8",
                   strokeLinecap: "round",
-                  children: /* @__PURE__ */ jsx17("path", { d: "M4 5h12M4 10h8M4 15h10" })
+                  children: /* @__PURE__ */ jsx19("path", { d: "M4 5h12M4 10h8M4 15h10" })
                 }
               )
             }
           ),
-          !collapsed && /* @__PURE__ */ jsxs13("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
-            entries.length === 0 && /* @__PURE__ */ jsx17("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
-            entries.map(([key, text, tag]) => /* @__PURE__ */ jsx17(
+          !collapsed && /* @__PURE__ */ jsxs15("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
+            entries.length === 0 && /* @__PURE__ */ jsx19("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
+            entries.map(([key, text, tag]) => /* @__PURE__ */ jsx19(
               "button",
               {
                 type: "button",
@@ -6756,11 +7158,11 @@ function OutlinePlugin() {
 }
 
 // src/MarkdownEditor.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var DEFAULT_ITEMS = {
-  format: /* @__PURE__ */ jsx18(FormatButtons, {}),
-  insert: /* @__PURE__ */ jsx18(InsertButtons, {}),
-  history: /* @__PURE__ */ jsx18(HistoryButtons, {})
+  format: /* @__PURE__ */ jsx20(FormatButtons, {}),
+  insert: /* @__PURE__ */ jsx20(InsertButtons, {}),
+  history: /* @__PURE__ */ jsx20(HistoryButtons, {})
 };
 function EditorToolbar({
   children,
@@ -6768,7 +7170,7 @@ function EditorToolbar({
 }) {
   const { mode, readOnly } = useEditorContext();
   if (mode !== "edit-md" || readOnly) return null;
-  return /* @__PURE__ */ jsx18(Toolbar, { className, children });
+  return /* @__PURE__ */ jsx20(Toolbar, { className, children });
 }
 function MarkdownEditor({
   placeholder,
@@ -6777,10 +7179,10 @@ function MarkdownEditor({
   foldable = true,
   ...rootProps
 }) {
-  return /* @__PURE__ */ jsxs14(EditorRoot, { ...rootProps, children: [
-    toolbar === true && /* @__PURE__ */ jsx18(EditorToolbar, {}),
+  return /* @__PURE__ */ jsxs16(EditorRoot, { ...rootProps, children: [
+    toolbar === true && /* @__PURE__ */ jsx20(EditorToolbar, {}),
     typeof toolbar === "function" && toolbar(DEFAULT_ITEMS),
-    /* @__PURE__ */ jsx18(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx18(OutlinePlugin, {}) })
+    /* @__PURE__ */ jsx20(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx20(OutlinePlugin, {}) })
   ] });
 }
 MarkdownEditor.Root = EditorRoot;
@@ -6954,10 +7356,20 @@ var DRAWING_DATA_JSON_SCHEMA = {
 export {
   $createDrawingNode,
   $createFrontmatterNode,
+  $deleteSelectedTableColumn,
+  $deleteSelectedTableRow,
+  $deleteTableColumnAt,
+  $deleteTableRowAt,
   $getSelectedTable,
+  $getSelectedTableCell,
+  $getTableCellPosition,
   $getTableDensity,
   $getTableSettings,
   $getTableWidth,
+  $insertTableColumnAt,
+  $insertTableColumnNear,
+  $insertTableRowAt,
+  $insertTableRowNear,
   $isDrawingNode,
   $isFrontmatterNode,
   $isTableWidthExplicit,
@@ -6998,6 +7410,8 @@ export {
   anchorPoint,
   bindEndpoints,
   boxOutline,
+  canDeleteColumn,
+  canDeleteRow,
   codeTokenizer,
   connectorPoints,
   drawingToMermaid,
@@ -7010,6 +7424,8 @@ export {
   inkAmplitude,
   inkFillOffset,
   inkStroke,
+  insertableColumnIndices,
+  insertableRowIndices,
   isBlockWidth,
   isDrawingSkeleton,
   makeBinding,