@zuilib/text-editor 0.10.0 → 0.11.0

package/dist/index.js

@@ -1611,7 +1611,6 @@ function MarkdownSyncPlugin({
 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";
-import { $isTableRowNode as $isTableRowNode2 } from "@lexical/table";
 
 // src/transformers/tableSettings.ts
 import {
@@ -1755,7 +1754,7 @@ function formatTableSettingsMarker(settings, options = {}) {
   return pairs.length > 0 ? `<!-- ${pairs.join("; ")} -->` : null;
 }
 
-// src/transformers/tableRows.ts
+// src/transformers/tableGrid.ts
 import {
   $createParagraphNode as $createParagraphNode2,
   $getNodeByKey as $getNodeByKey3,
@@ -1782,6 +1781,19 @@ 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;
@@ -1791,29 +1803,27 @@ function $getSelectedTableCell() {
   const cell = $findMatchingParent2(node, (n2) => $isTableCellNode(n2));
   return $isTableCellNode(cell) ? cell : null;
 }
-function $getTableRowPosition() {
+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 {
-    index: rows.indexOf(row),
+    row: rows.indexOf(row),
     column: $cells(row).indexOf(cell),
-    count: rows.length,
+    rows: rows.length,
+    columns: $columnCount(table),
     hasHeader: $isHeaderRow(rows[0])
   };
 }
 function insertableRowIndices(position) {
   const indices = [];
-  for (let i = position.hasHeader ? 1 : 0; i <= position.count; i++) indices.push(i);
+  for (let i = position.hasHeader ? 1 : 0; i <= position.rows; i++) indices.push(i);
   return indices;
 }
 function canDeleteRow(position) {
-  return position.count > 1;
-}
-function $selectCell(cell) {
-  cell?.selectStart();
+  return position.rows > 1;
 }
 function $insertTableRowAt(table, index, column = 0) {
   const rows = $rows(table);
@@ -1823,16 +1833,16 @@ function $insertTableRowAt(table, index, column = 0) {
   const referenceCells = reference ? $cells(reference) : [];
   const row = $createTableRowNode();
   for (const cell of referenceCells) {
-    const columnHeader = cell.hasHeaderState(TableCellHeaderStates.COLUMN) ? TableCellHeaderStates.COLUMN : TableCellHeaderStates.NO_STATUS;
-    row.append($createTableCellNode(columnHeader).append($createParagraphNode2()));
-  }
-  if (referenceCells.length === 0) {
-    row.append($createTableCellNode(TableCellHeaderStates.NO_STATUS).append($createParagraphNode2()));
+    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);
-  const cells = $cells(row);
-  $selectCell(cells[Math.min(column, cells.length - 1)]);
+  $selectCellAt(table, at, column);
   return row;
 }
 function $deleteTableRowAt(table, index, column = 0) {
@@ -1847,20 +1857,56 @@ function $deleteTableRowAt(table, index, column = 0) {
       cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
     }
   }
-  const target = remaining[Math.min(index, remaining.length - 1)];
-  const cells = $cells(target);
-  $selectCell(cells[Math.min(column, cells.length - 1)]);
+  $selectCellAt(table, index, column);
   return true;
 }
 function $insertTableRowNear(table, position) {
-  const at = $getTableRowPosition();
+  const at = $getTableCellPosition();
   if (!at) return null;
-  return $insertTableRowAt(table, position === "below" ? at.index + 1 : at.index, at.column);
+  return $insertTableRowAt(table, position === "below" ? at.row + 1 : at.row, at.column);
 }
 function $deleteSelectedTableRow(table) {
-  const at = $getTableRowPosition();
+  const at = $getTableCellPosition();
   if (!at || !canDeleteRow(at)) return false;
-  return $deleteTableRowAt(table, at.index, at.column);
+  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
@@ -1881,16 +1927,14 @@ function TableRowShortcutsPlugin() {
         const shortcut = shortcutFor(event);
         if (!shortcut) return false;
         const table = $getSelectedTable();
-        const position = $getTableRowPosition();
+        const position = $getTableCellPosition();
         if (!table || !position) return false;
         if (shortcut === "tab") {
           const selection = $getSelection4();
-          const firstRow = table.getFirstChild();
-          const columns = $isTableRowNode2(firstRow) ? firstRow.getChildrenSize() : 0;
-          const isLastCell = position.index === position.count - 1 && position.column === columns - 1;
+          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.count);
+          $insertTableRowAt(table, position.rows);
           return true;
         }
         event.preventDefault();
@@ -5915,7 +5959,7 @@ import {
   $createTableRowNode as $createTableRowNode2,
   $isTableCellNode as $isTableCellNode2,
   $isTableNode as $isTableNode3,
-  $isTableRowNode as $isTableRowNode3,
+  $isTableRowNode as $isTableRowNode2,
   TableCellHeaderStates as TableCellHeaderStates2,
   TableCellNode,
   TableNode,
@@ -5930,7 +5974,7 @@ function $getMarkerSettings(node) {
 }
 function getTableColumnsSize(table) {
   const row = table.getFirstChild();
-  return $isTableRowNode3(row) ? row.getChildrenSize() : 0;
+  return $isTableRowNode2(row) ? row.getChildrenSize() : 0;
 }
 function createTableCell(textContent) {
   const unescaped = textContent.replace(/\\n/g, "\n");
@@ -5953,7 +5997,7 @@ var TABLE = {
     });
     if (marker) output.push(marker);
     for (const row of node.getChildren()) {
-      if (!$isTableRowNode3(row)) continue;
+      if (!$isTableRowNode2(row)) continue;
       const rowOutput = [];
       let isHeaderRow = false;
       for (const cell of row.getChildren()) {
@@ -5978,7 +6022,7 @@ var TABLE = {
       const table2 = parentNode.getPreviousSibling();
       if (!table2 || !$isTableNode3(table2)) return;
       const lastRow = table2.getLastChild();
-      if (!lastRow || !$isTableRowNode3(lastRow)) return;
+      if (!lastRow || !$isTableRowNode2(lastRow)) return;
       lastRow.getChildren().forEach((cell) => {
         if ($isTableCellNode2(cell)) {
           cell.setHeaderStyles(TableCellHeaderStates2.ROW, TableCellHeaderStates2.ROW);
@@ -6365,139 +6409,98 @@ import { useCallback as useCallback7 } from "react";
 import { useLexicalComposerContext as useLexicalComposerContext11 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
 
-// src/components/TableRowRail.tsx
+// 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 = 28;
-function TableRowRail({ box, rows, position, onInsert }) {
+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 [hovered, setHovered] = useState6(null);
-  const boundaryTop = useCallback4(
+  const [pointer, setPointer] = useState6(null);
+  const width = TABLE_RAIL_WIDTH[axis];
+  const vertical = axis === "row";
+  const boundary = useCallback4(
     (index) => {
-      if (index < rows.length) return rows[index].top;
-      const last = rows[rows.length - 1];
-      return last ? last.top + last.height : 0;
+      if (index < lanes.length) return lanes[index].start;
+      const last = lanes[lanes.length - 1];
+      return last ? last.start + last.size : 0;
     },
-    [rows]
+    [lanes]
   );
   const onPointerMove = useCallback4(
     (event) => {
-      const element = rail.current;
-      if (!element) return;
-      const y = event.clientY - element.getBoundingClientRect().top;
-      let nearest = null;
-      let distance = Number.POSITIVE_INFINITY;
-      for (const index of insertableRowIndices(position)) {
-        const d = Math.abs(boundaryTop(index) - y);
-        if (d < distance) {
-          distance = d;
-          nearest = index;
-        }
-      }
-      setHovered(nearest);
+      const rect = rail.current?.getBoundingClientRect();
+      if (!rect) return;
+      setPointer(vertical ? event.clientY - rect.top : event.clientX - rect.left);
     },
-    [position, boundaryTop]
+    [vertical]
   );
-  if (rows.length === 0) return null;
-  const current = rows[Math.min(position.index, rows.length - 1)];
-  const insertAt = hovered ?? position.count;
-  const insertTop = boundaryTop(insertAt);
+  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",
-      style: { top: box.top, left: box.left - TABLE_RAIL_WIDTH, width: TABLE_RAIL_WIDTH, height: box.height },
+      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: () => setHovered(null),
+      onPointerLeave: () => setPointer(null),
       children: [
-        /* @__PURE__ */ jsx14(
-          "div",
-          {
-            className: "zui-table-rail-marker",
-            style: { top: current.top + 3, height: Math.max(4, current.height - 6) },
-            "aria-hidden": true
-          }
-        ),
+        /* @__PURE__ */ jsx14("div", { className: "zui-table-rail-marker", style: span(marker), "aria-hidden": true }),
         /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
-            className: `zui-table-rail-add ${hovered === null ? "is-resting" : ""}`,
-            style: { top: insertTop },
-            title: insertAt === position.count ? "Add row" : `Insert row ${insertAt === 0 ? "at the top" : `after row ${insertAt}`}`,
-            "aria-label": insertAt === position.count ? "Add row" : `Insert row before row ${insertAt + 1}`,
+            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: () => onInsert(insertAt),
-            children: /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", children: /* @__PURE__ */ jsx14("path", { d: "M6 2.5v7M2.5 6h7" }) })
+            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-line",
-            style: { top: insertTop, left: TABLE_RAIL_WIDTH, width: box.width },
-            "aria-hidden": true
-          }
-        )
+        /* @__PURE__ */ jsx14("div", { className: `zui-table-rail-preview is-${handle.mode}`, style: previewStyle, "aria-hidden": true })
       ]
     }
   );
 }
 
-// src/components/shortcutLabel.ts
-var isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? "");
-function shortcutLabel(keys) {
-  const parts = keys.split("+");
-  if (isApple) {
-    const glyphs = {
-      Mod: "\u2318",
-      Shift: "\u21E7",
-      Alt: "\u2325",
-      Enter: "\u21A9",
-      Backspace: "\u232B",
-      Tab: "\u21E5"
-    };
-    return parts.map((part) => glyphs[part] ?? part).join("");
-  }
-  return parts.map((part) => part === "Mod" ? "Ctrl" : part).join("+");
-}
-
-// src/components/tableRowActions.tsx
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
-var TABLE_ROW_ACTIONS = [
-  {
-    action: "insert-above",
-    label: "Insert row above",
-    shortcut: "Mod+Shift+Enter",
-    icon: /* @__PURE__ */ jsxs12(Fragment5, { children: [
-      /* @__PURE__ */ jsx15("path", { d: "M3 11.5h14M3 15.5h14" }),
-      /* @__PURE__ */ jsx15("path", { d: "M10 3.5v5M7.5 6h5" })
-    ] })
-  },
-  {
-    action: "insert-below",
-    label: "Insert row below",
-    shortcut: "Mod+Enter",
-    icon: /* @__PURE__ */ jsxs12(Fragment5, { children: [
-      /* @__PURE__ */ jsx15("path", { d: "M3 4.5h14M3 8.5h14" }),
-      /* @__PURE__ */ jsx15("path", { d: "M10 11.5v5M7.5 14h5" })
-    ] })
-  },
-  {
-    action: "delete",
-    label: "Delete row",
-    shortcut: "Mod+Shift+Backspace",
-    icon: /* @__PURE__ */ jsxs12(Fragment5, { children: [
-      /* @__PURE__ */ jsx15("path", { d: "M3 5.5h14M3 14.5h14" }),
-      /* @__PURE__ */ jsx15("path", { d: "M7.5 10h5" })
-    ] })
-  }
-];
-function tableRowActionTitle(action) {
-  return `${action.label} (${shortcutLabel(action.shortcut)})`;
-}
-
 // src/useMarkdownEditor.ts
 import { useCallback as useCallback5, useEffect as useEffect11, useRef as useRef8, useState as useState7 } from "react";
 import {
@@ -6535,7 +6538,7 @@ function useMarkdownEditor() {
   const [canUndo, setCanUndo] = useState7(false);
   const [canRedo, setCanRedo] = useState7(false);
   const [tableSettings, setTableSettingsState] = useState7(null);
-  const [tableRow, setTableRow] = useState7(null);
+  const [tableCell, setTableCell] = useState7(null);
   const activeDrawingRef = useRef8(null);
   const [drawingWidth, setDrawingWidth] = useState7(null);
   useEffect11(
@@ -6544,7 +6547,7 @@ function useMarkdownEditor() {
         editorState.read(() => {
           const table = $getSelectedTable();
           setTableSettingsState(table ? $getTableSettings(table) : null);
-          setTableRow(table ? $getTableRowPosition() : null);
+          setTableCell(table ? $getTableCellPosition() : null);
           setDrawingWidth($readDrawingWidth(activeDrawingRef.current));
           const selection = $getSelection6();
           if (!$isRangeSelection6(selection)) {
@@ -6655,6 +6658,21 @@ function useMarkdownEditor() {
       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;
@@ -6689,9 +6707,11 @@ function useMarkdownEditor() {
     setTableWidth,
     tableDensity: tableSettings?.density ?? null,
     setTableDensity,
-    tableRow,
+    tableCell,
     insertTableRow,
     deleteTableRow,
+    insertTableColumn,
+    deleteTableColumn,
     canUndo,
     canRedo,
     undo,
@@ -6700,23 +6720,23 @@ function useMarkdownEditor() {
 }
 
 // src/components/Toolbar.tsx
-import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function Toolbar({ children, className }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       className: `zui-text-editor-toolbar ${className ?? ""}`,
       role: "toolbar",
-      children: children ?? /* @__PURE__ */ jsxs13(Fragment6, { children: [
-        /* @__PURE__ */ jsx16(FormatButtons, {}),
-        /* @__PURE__ */ jsx16(ToolbarDivider, {}),
-        /* @__PURE__ */ jsx16(InsertButtons, {})
+      children: children ?? /* @__PURE__ */ jsxs12(Fragment5, { children: [
+        /* @__PURE__ */ jsx15(FormatButtons, {}),
+        /* @__PURE__ */ jsx15(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx15(InsertButtons, {})
       ] })
     }
   );
 }
 function ToolbarDivider() {
-  return /* @__PURE__ */ jsx16("div", { className: "zui-text-editor-toolbar-divider" });
+  return /* @__PURE__ */ jsx15("div", { className: "zui-text-editor-toolbar-divider" });
 }
 function ToolbarButton({
   label,
@@ -6726,7 +6746,7 @@ function ToolbarButton({
   disabled = false,
   className
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15(
     "button",
     {
       type: "button",
@@ -6742,7 +6762,7 @@ function ToolbarButton({
   );
 }
 function Icon2({ children, strokeWidth = 1.5 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15(
     "svg",
     {
       viewBox: "0 0 20 20",
@@ -6761,27 +6781,27 @@ var FORMAT_BUTTONS = [
   {
     format: "bold",
     label: "Bold",
-    icon: /* @__PURE__ */ jsx16(Icon2, { strokeWidth: 1.8, children: /* @__PURE__ */ jsx16("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__ */ jsx16(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx16("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__ */ jsx16(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx16("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__ */ jsx16(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx16("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__ */ jsx16(Fragment6, { children: FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15(Fragment5, { children: FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx15(
     ToolbarButton,
     {
       label,
@@ -6794,36 +6814,36 @@ function FormatButtons() {
 }
 function InsertButtons() {
   const { insertTable, insertDrawing } = useMarkdownEditor();
-  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
-    /* @__PURE__ */ jsx16(ToolbarButton, { label: "Insert table", onClick: () => insertTable(), children: /* @__PURE__ */ jsxs13(Icon2, { children: [
-      /* @__PURE__ */ jsx16("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
-      /* @__PURE__ */ jsx16("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__ */ jsx16(ToolbarButton, { label: "Insert drawing", onClick: insertDrawing, children: /* @__PURE__ */ jsxs13(Icon2, { children: [
-      /* @__PURE__ */ jsx16("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
-      /* @__PURE__ */ jsx16("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
-      /* @__PURE__ */ jsx16("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__ */ jsxs13(Fragment6, { children: [
-    /* @__PURE__ */ jsx16(ToolbarButton, { label: "Undo", onClick: undo, disabled: !canUndo, children: /* @__PURE__ */ jsxs13(Icon2, { children: [
-      /* @__PURE__ */ jsx16("path", { d: "M7 6L3.5 9.5 7 13" }),
-      /* @__PURE__ */ jsx16("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__ */ jsx16(ToolbarButton, { label: "Redo", onClick: redo, disabled: !canRedo, children: /* @__PURE__ */ jsxs13(Icon2, { children: [
-      /* @__PURE__ */ jsx16("path", { d: "M13 6l3.5 3.5L13 13" }),
-      /* @__PURE__ */ jsx16("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/components/TableSettingsToolbar.tsx
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Icon3({ children }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx16(
     "svg",
     {
       viewBox: "0 0 20 20",
@@ -6838,36 +6858,17 @@ function Icon3({ children }) {
     }
   );
 }
-function TableSettingsToolbar({
-  settings,
-  position,
-  style,
-  onSettings,
-  onRowAction
-}) {
-  return /* @__PURE__ */ jsxs14("div", { className: "zui-table-settings", role: "toolbar", "aria-label": "Table", style, children: [
-    LAYOUT_OPTIONS.map(({ preset, label, icon, width, density }) => /* @__PURE__ */ jsx17(
-      ToolbarButton,
-      {
-        label,
-        active: layoutPreset(settings.width) === preset,
-        onClick: () => onSettings({ width, density }),
-        children: /* @__PURE__ */ jsx17(Icon3, { children: icon })
-      },
-      preset
-    )),
-    /* @__PURE__ */ jsx17(ToolbarDivider, {}),
-    TABLE_ROW_ACTIONS.map((rowAction) => /* @__PURE__ */ jsx17(
-      ToolbarButton,
-      {
-        label: tableRowActionTitle(rowAction),
-        disabled: rowAction.action === "delete" && !canDeleteRow(position) || rowAction.action === "insert-above" && position.hasHeader && position.index === 0,
-        onClick: () => onRowAction(rowAction.action),
-        children: /* @__PURE__ */ jsx17(Icon3, { children: rowAction.icon })
-      },
-      rowAction.action
-    ))
-  ] });
+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
@@ -6876,12 +6877,17 @@ import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexic
 function measure(element, main) {
   const rect = element.getBoundingClientRect();
   const mainRect = main.getBoundingClientRect();
-  const rows = Array.from(element.querySelectorAll(":scope > tbody > tr, :scope > tr")).map(
-    (row) => {
-      const r = row.getBoundingClientRect();
-      return { top: r.top - rect.top, height: r.height };
-    }
+  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,
@@ -6890,7 +6896,8 @@ function measure(element, main) {
       width: rect.width,
       height: rect.height
     },
-    rows
+    rows,
+    columns
   };
 }
 function useSelectedTable() {
@@ -6899,7 +6906,7 @@ function useSelectedTable() {
   const sync = useCallback6(() => {
     const table = editor.getEditorState().read(() => {
       const node = $getSelectedTable();
-      const position = $getTableRowPosition();
+      const position = $getTableCellPosition();
       return node && position ? { key: node.getKey(), settings: $getTableSettings(node), position } : null;
     });
     const element = table ? editor.getElementByKey(table.key) : null;
@@ -6934,66 +6941,66 @@ function useSelectedTable() {
 }
 
 // src/plugins/TableControlsPlugin.tsx
-import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+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 updateSettings = useCallback7(
-    (next) => {
-      editor.update(() => {
-        const node = $getSelectedTable();
-        if (node) $setTableSettings(node, next);
-      });
-    },
-    [editor]
-  );
-  const rowAction = useCallback7(
-    (action) => {
+  const withTable = useCallback7(
+    (fn) => {
       editor.update(() => {
         const node = $getSelectedTable();
-        if (!node) return;
-        if (action === "delete") $deleteSelectedTableRow(node);
-        else $insertTableRowNear(node, action === "insert-above" ? "above" : "below");
+        if (node) fn(node);
       });
     },
     [editor]
   );
-  const insertAt = useCallback7(
-    (index) => {
-      editor.update(() => {
-        const node = $getSelectedTable();
-        if (node) $insertTableRowAt(node, index);
-      });
-    },
-    [editor]
+  const updateSettings = useCallback7(
+    (next) => withTable((node) => $setTableSettings(node, next)),
+    [withTable]
   );
   if (!isEditable || !table) return null;
-  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
-    /* @__PURE__ */ jsx18(
+  const { position } = table;
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsx17(
       TableSettingsToolbar,
       {
         settings: table.settings,
-        position: table.position,
-        style: { top: table.box.top, right: table.box.right + 8 },
-        onSettings: updateSettings,
-        onRowAction: rowAction
+        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__ */ jsx18(
-      TableRowRail,
+    /* @__PURE__ */ jsx17(
+      TableRail,
       {
+        axis: "column",
         box: table.box,
-        rows: table.rows,
-        position: table.position,
-        onInsert: insertAt
+        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 jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function EditorContent({
   placeholder = "Start writing...",
   foldable = true,
@@ -7001,7 +7008,7 @@ function EditorContent({
 }) {
   const { mode, readOnly, autoFocus, rawValue, onRawChange } = useEditorContext();
   if (mode === "edit-raw") {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx18(
       "textarea",
       {
         className: "zui-text-editor-textarea",
@@ -7014,24 +7021,24 @@ function EditorContent({
       }
     );
   }
-  return /* @__PURE__ */ jsxs16("div", { className: "zui-text-editor-body", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "zui-text-editor-main", children: [
-      /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs14("div", { className: "zui-text-editor-body", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "zui-text-editor-main", children: [
+      /* @__PURE__ */ jsx18(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx19(
+          contentEditable: /* @__PURE__ */ jsx18(
             ContentEditable,
             {
               className: "zui-text-editor-content",
               "aria-placeholder": placeholder,
-              placeholder: /* @__PURE__ */ jsx19("div", { className: "zui-text-editor-placeholder", children: placeholder })
+              placeholder: /* @__PURE__ */ jsx18("div", { className: "zui-text-editor-placeholder", children: placeholder })
             }
           ),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      foldable && /* @__PURE__ */ jsx19(FoldingPlugin, {}),
-      /* @__PURE__ */ jsx19(TableControlsPlugin, {})
+      foldable && /* @__PURE__ */ jsx18(FoldingPlugin, {}),
+      /* @__PURE__ */ jsx18(TableControlsPlugin, {})
     ] }),
     children
   ] });
@@ -7043,7 +7050,7 @@ import { useLexicalComposerContext as useLexicalComposerContext12 } from "@lexic
 import {
   TableOfContentsPlugin
 } from "@lexical/react/LexicalTableOfContentsPlugin";
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var INDENT_PER_LEVEL = {
   h1: 0,
   h2: 1,
@@ -7095,16 +7102,16 @@ function OutlinePlugin() {
     },
     [editor]
   );
-  return /* @__PURE__ */ jsx20(TableOfContentsPlugin, { children: (entries) => {
+  return /* @__PURE__ */ jsx19(TableOfContentsPlugin, { children: (entries) => {
     for (const [key] of entries) {
       editor.getElementByKey(key)?.setAttribute("data-outline-key", key);
     }
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         className: `zui-text-editor-outline ${collapsed ? "is-collapsed" : ""}`,
         children: [
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx19(
             "button",
             {
               type: "button",
@@ -7113,7 +7120,7 @@ function OutlinePlugin() {
               "aria-label": collapsed ? "Show outline" : "Hide outline",
               "aria-expanded": !collapsed,
               onClick: () => setCollapsed((c2) => !c2),
-              children: /* @__PURE__ */ jsx20(
+              children: /* @__PURE__ */ jsx19(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -7123,14 +7130,14 @@ function OutlinePlugin() {
                   stroke: "currentColor",
                   strokeWidth: "1.8",
                   strokeLinecap: "round",
-                  children: /* @__PURE__ */ jsx20("path", { d: "M4 5h12M4 10h8M4 15h10" })
+                  children: /* @__PURE__ */ jsx19("path", { d: "M4 5h12M4 10h8M4 15h10" })
                 }
               )
             }
           ),
-          !collapsed && /* @__PURE__ */ jsxs17("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
-            entries.length === 0 && /* @__PURE__ */ jsx20("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
-            entries.map(([key, text, tag]) => /* @__PURE__ */ jsx20(
+          !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",
@@ -7151,11 +7158,11 @@ function OutlinePlugin() {
 }
 
 // src/MarkdownEditor.tsx
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var DEFAULT_ITEMS = {
-  format: /* @__PURE__ */ jsx21(FormatButtons, {}),
-  insert: /* @__PURE__ */ jsx21(InsertButtons, {}),
-  history: /* @__PURE__ */ jsx21(HistoryButtons, {})
+  format: /* @__PURE__ */ jsx20(FormatButtons, {}),
+  insert: /* @__PURE__ */ jsx20(InsertButtons, {}),
+  history: /* @__PURE__ */ jsx20(HistoryButtons, {})
 };
 function EditorToolbar({
   children,
@@ -7163,7 +7170,7 @@ function EditorToolbar({
 }) {
   const { mode, readOnly } = useEditorContext();
   if (mode !== "edit-md" || readOnly) return null;
-  return /* @__PURE__ */ jsx21(Toolbar, { className, children });
+  return /* @__PURE__ */ jsx20(Toolbar, { className, children });
 }
 function MarkdownEditor({
   placeholder,
@@ -7172,10 +7179,10 @@ function MarkdownEditor({
   foldable = true,
   ...rootProps
 }) {
-  return /* @__PURE__ */ jsxs18(EditorRoot, { ...rootProps, children: [
-    toolbar === true && /* @__PURE__ */ jsx21(EditorToolbar, {}),
+  return /* @__PURE__ */ jsxs16(EditorRoot, { ...rootProps, children: [
+    toolbar === true && /* @__PURE__ */ jsx20(EditorToolbar, {}),
     typeof toolbar === "function" && toolbar(DEFAULT_ITEMS),
-    /* @__PURE__ */ jsx21(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx21(OutlinePlugin, {}) })
+    /* @__PURE__ */ jsx20(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx20(OutlinePlugin, {}) })
   ] });
 }
 MarkdownEditor.Root = EditorRoot;
@@ -7349,14 +7356,18 @@ var DRAWING_DATA_JSON_SCHEMA = {
 export {
   $createDrawingNode,
   $createFrontmatterNode,
+  $deleteSelectedTableColumn,
   $deleteSelectedTableRow,
+  $deleteTableColumnAt,
   $deleteTableRowAt,
   $getSelectedTable,
   $getSelectedTableCell,
+  $getTableCellPosition,
   $getTableDensity,
-  $getTableRowPosition,
   $getTableSettings,
   $getTableWidth,
+  $insertTableColumnAt,
+  $insertTableColumnNear,
   $insertTableRowAt,
   $insertTableRowNear,
   $isDrawingNode,
@@ -7399,6 +7410,7 @@ export {
   anchorPoint,
   bindEndpoints,
   boxOutline,
+  canDeleteColumn,
   canDeleteRow,
   codeTokenizer,
   connectorPoints,
@@ -7412,6 +7424,7 @@ export {
   inkAmplitude,
   inkFillOffset,
   inkStroke,
+  insertableColumnIndices,
   insertableRowIndices,
   isBlockWidth,
   isDrawingSkeleton,