documentation-hub 5.7.2

package/src/components/editor/TableEditor.tsx

@@ -0,0 +1,926 @@
+/**
+ * TableEditor - Full table editing component with cell selection
+ *
+ * Features:
+ * - Click to select cell, Shift+Click for range selection
+ * - Right-click context menu for table operations
+ * - Cell content editing via contentEditable
+ * - Row/column insert/delete operations
+ * - Merge/split cells
+ * - Shading and border controls
+ * - Tab navigation between cells
+ */
+
+import {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Plus,
+  Minus,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  Merge,
+  Split,
+  Paintbrush,
+} from 'lucide-react';
+import { cn } from '@/utils/cn';
+import type { CellSelection, QuickActionId } from '@/types/editor';
+
+// Table data types
+interface ParagraphData {
+  text: string;
+  runs?: Array<{
+    text: string;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    color?: string;
+  }>;
+  alignment?: 'left' | 'center' | 'right' | 'justify';
+}
+
+interface TableCellData {
+  paragraphs: ParagraphData[];
+  shading?: string;
+  verticalMerge?: 'restart' | 'continue';
+  columnSpan?: number;
+  rowSpan?: number;
+  verticalAlignment?: 'top' | 'center' | 'bottom';
+  borders?: {
+    top?: { style: string; size: number; color: string };
+    bottom?: { style: string; size: number; color: string };
+    left?: { style: string; size: number; color: string };
+    right?: { style: string; size: number; color: string };
+  };
+}
+
+interface TableRowData {
+  cells: TableCellData[];
+  height?: number;
+}
+
+interface TableData {
+  rows: TableRowData[];
+  width?: number;
+  alignment?: 'left' | 'center' | 'right';
+}
+
+export interface TableEditorProps {
+  /** Table data */
+  table: TableData;
+  /** Table index in document */
+  tableIndex: number;
+  /** Callback when table changes */
+  onChange: (table: TableData) => void;
+  /** Current cell selection */
+  selection: CellSelection | null;
+  /** Callback when selection changes */
+  onSelectionChange: (selection: CellSelection | null) => void;
+  /** Table shading settings */
+  tableShadingSettings?: {
+    header2Shading: string;
+    otherShading: string;
+  };
+  /** Quick action to apply */
+  activeQuickAction: QuickActionId | null;
+  /** Clear quick action after applying */
+  onQuickActionComplete: () => void;
+  /** Whether editor is read-only */
+  readOnly?: boolean;
+}
+
+export interface TableEditorRef {
+  /** Insert row above selection */
+  insertRowAbove: () => void;
+  /** Insert row below selection */
+  insertRowBelow: () => void;
+  /** Insert column left of selection */
+  insertColumnLeft: () => void;
+  /** Insert column right of selection */
+  insertColumnRight: () => void;
+  /** Delete selected row */
+  deleteRow: () => void;
+  /** Delete selected column */
+  deleteColumn: () => void;
+  /** Merge selected cells */
+  mergeCells: () => void;
+  /** Split selected cell */
+  splitCell: () => void;
+  /** Apply shading to selection */
+  applyShading: (color: string) => void;
+  /** Set vertical alignment */
+  setVerticalAlignment: (alignment: 'top' | 'center' | 'bottom') => void;
+}
+
+/**
+ * Context menu item
+ */
+interface ContextMenuItem {
+  id: string;
+  label: string;
+  icon: React.ElementType;
+  action: () => void;
+  disabled?: boolean;
+  divider?: boolean;
+}
+
+/**
+ * Context menu component
+ */
+function ContextMenu({
+  x,
+  y,
+  items,
+  onClose,
+}: {
+  x: number;
+  y: number;
+  items: ContextMenuItem[];
+  onClose: () => void;
+}) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [onClose]);
+
+  // Close on escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  return (
+    <motion.div
+      ref={menuRef}
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      transition={{ duration: 0.1 }}
+      className="fixed z-50 bg-popover border border-border rounded-lg shadow-lg py-1 min-w-[180px]"
+      style={{ left: x, top: y }}
+    >
+      {items.map((item) =>
+        item.divider ? (
+          <div key={item.id} className="h-px bg-border my-1" />
+        ) : (
+          <button
+            key={item.id}
+            onClick={() => {
+              item.action();
+              onClose();
+            }}
+            disabled={item.disabled}
+            className={cn(
+              'w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left',
+              'hover:bg-muted transition-colors',
+              'disabled:opacity-50 disabled:cursor-not-allowed'
+            )}
+          >
+            <item.icon className="w-4 h-4" />
+            {item.label}
+          </button>
+        )
+      )}
+    </motion.div>
+  );
+}
+
+/**
+ * Main TableEditor component
+ */
+export const TableEditor = forwardRef<TableEditorRef, TableEditorProps>(
+  function TableEditor(
+    {
+      table,
+      tableIndex,
+      onChange,
+      selection,
+      onSelectionChange,
+      tableShadingSettings,
+      activeQuickAction,
+      onQuickActionComplete,
+      readOnly = false,
+    },
+    ref
+  ) {
+    const tableRef = useRef<HTMLTableElement>(null);
+    const [contextMenu, setContextMenu] = useState<{
+      x: number;
+      y: number;
+    } | null>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState<{ row: number; col: number } | null>(
+      null
+    );
+
+    // Get selected cell(s) bounds
+    const selectionBounds = useMemo(() => {
+      if (!selection) return null;
+      return {
+        minRow: Math.min(selection.startRow, selection.endRow),
+        maxRow: Math.max(selection.startRow, selection.endRow),
+        minCol: Math.min(selection.startCol, selection.endCol),
+        maxCol: Math.max(selection.startCol, selection.endCol),
+      };
+    }, [selection]);
+
+    // Check if cell is in selection
+    const isCellSelected = useCallback(
+      (row: number, col: number) => {
+        if (!selectionBounds) return false;
+        return (
+          row >= selectionBounds.minRow &&
+          row <= selectionBounds.maxRow &&
+          col >= selectionBounds.minCol &&
+          col <= selectionBounds.maxCol
+        );
+      },
+      [selectionBounds]
+    );
+
+    // Handle cell click
+    const handleCellClick = useCallback(
+      (row: number, col: number, e: React.MouseEvent) => {
+        if (readOnly) return;
+
+        if (e.shiftKey && selection) {
+          // Extend selection
+          onSelectionChange({
+            startRow: selection.startRow,
+            startCol: selection.startCol,
+            endRow: row,
+            endCol: col,
+          });
+        } else {
+          // New selection
+          onSelectionChange({
+            startRow: row,
+            startCol: col,
+            endRow: row,
+            endCol: col,
+          });
+        }
+      },
+      [selection, onSelectionChange, readOnly]
+    );
+
+    // Handle cell right-click
+    const handleCellContextMenu = useCallback(
+      (row: number, col: number, e: React.MouseEvent) => {
+        if (readOnly) return;
+
+        e.preventDefault();
+
+        // Select cell if not already selected
+        if (!isCellSelected(row, col)) {
+          onSelectionChange({
+            startRow: row,
+            startCol: col,
+            endRow: row,
+            endCol: col,
+          });
+        }
+
+        setContextMenu({ x: e.clientX, y: e.clientY });
+      },
+      [isCellSelected, onSelectionChange, readOnly]
+    );
+
+    // Handle mouse down for drag selection
+    const handleCellMouseDown = useCallback(
+      (row: number, col: number, e: React.MouseEvent) => {
+        if (readOnly || e.button !== 0) return;
+
+        setIsDragging(true);
+        setDragStart({ row, col });
+        onSelectionChange({
+          startRow: row,
+          startCol: col,
+          endRow: row,
+          endCol: col,
+        });
+      },
+      [onSelectionChange, readOnly]
+    );
+
+    // Handle mouse enter during drag
+    const handleCellMouseEnter = useCallback(
+      (row: number, col: number) => {
+        if (!isDragging || !dragStart) return;
+
+        onSelectionChange({
+          startRow: dragStart.row,
+          startCol: dragStart.col,
+          endRow: row,
+          endCol: col,
+        });
+      },
+      [isDragging, dragStart, onSelectionChange]
+    );
+
+    // Handle mouse up
+    useEffect(() => {
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        setDragStart(null);
+      };
+
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => document.removeEventListener('mouseup', handleMouseUp);
+    }, []);
+
+    // Table operations
+    const insertRowAbove = useCallback(() => {
+      if (!selection) return;
+
+      const newTable = { ...table };
+      const newRow: TableRowData = {
+        cells: table.rows[0].cells.map(() => ({
+          paragraphs: [{ text: '', runs: [{ text: '' }] }],
+        })),
+      };
+
+      newTable.rows = [
+        ...newTable.rows.slice(0, selectionBounds!.minRow),
+        newRow,
+        ...newTable.rows.slice(selectionBounds!.minRow),
+      ];
+
+      onChange(newTable);
+    }, [table, selection, selectionBounds, onChange]);
+
+    const insertRowBelow = useCallback(() => {
+      if (!selection) return;
+
+      const newTable = { ...table };
+      const newRow: TableRowData = {
+        cells: table.rows[0].cells.map(() => ({
+          paragraphs: [{ text: '', runs: [{ text: '' }] }],
+        })),
+      };
+
+      newTable.rows = [
+        ...newTable.rows.slice(0, selectionBounds!.maxRow + 1),
+        newRow,
+        ...newTable.rows.slice(selectionBounds!.maxRow + 1),
+      ];
+
+      onChange(newTable);
+    }, [table, selection, selectionBounds, onChange]);
+
+    const insertColumnLeft = useCallback(() => {
+      if (!selection) return;
+
+      const newTable = { ...table };
+      newTable.rows = newTable.rows.map((row) => ({
+        ...row,
+        cells: [
+          ...row.cells.slice(0, selectionBounds!.minCol),
+          { paragraphs: [{ text: '', runs: [{ text: '' }] }] },
+          ...row.cells.slice(selectionBounds!.minCol),
+        ],
+      }));
+
+      onChange(newTable);
+    }, [table, selection, selectionBounds, onChange]);
+
+    const insertColumnRight = useCallback(() => {
+      if (!selection) return;
+
+      const newTable = { ...table };
+      newTable.rows = newTable.rows.map((row) => ({
+        ...row,
+        cells: [
+          ...row.cells.slice(0, selectionBounds!.maxCol + 1),
+          { paragraphs: [{ text: '', runs: [{ text: '' }] }] },
+          ...row.cells.slice(selectionBounds!.maxCol + 1),
+        ],
+      }));
+
+      onChange(newTable);
+    }, [table, selection, selectionBounds, onChange]);
+
+    const deleteRow = useCallback(() => {
+      if (!selection || table.rows.length <= 1) return;
+
+      const newTable = { ...table };
+      newTable.rows = newTable.rows.filter(
+        (_, index) =>
+          index < selectionBounds!.minRow || index > selectionBounds!.maxRow
+      );
+
+      onChange(newTable);
+      onSelectionChange(null);
+    }, [table, selection, selectionBounds, onChange, onSelectionChange]);
+
+    const deleteColumn = useCallback(() => {
+      if (!selection || table.rows[0].cells.length <= 1) return;
+
+      const newTable = { ...table };
+      newTable.rows = newTable.rows.map((row) => ({
+        ...row,
+        cells: row.cells.filter(
+          (_, index) =>
+            index < selectionBounds!.minCol || index > selectionBounds!.maxCol
+        ),
+      }));
+
+      onChange(newTable);
+      onSelectionChange(null);
+    }, [table, selection, selectionBounds, onChange, onSelectionChange]);
+
+    const mergeCells = useCallback(() => {
+      if (!selection || !selectionBounds) return;
+
+      const { minRow, maxRow, minCol, maxCol } = selectionBounds;
+      if (minRow === maxRow && minCol === maxCol) return; // Single cell
+
+      const newTable = { ...table };
+
+      // Get text from all selected cells
+      const mergedText = newTable.rows
+        .slice(minRow, maxRow + 1)
+        .flatMap((row) =>
+          row.cells
+            .slice(minCol, maxCol + 1)
+            .flatMap((cell) => cell.paragraphs.map((p) => p.text))
+        )
+        .filter((t) => t)
+        .join(' ');
+
+      // Set merged cell properties
+      const mergedCell = newTable.rows[minRow].cells[minCol];
+      mergedCell.paragraphs = [{ text: mergedText, runs: [{ text: mergedText }] }];
+      mergedCell.columnSpan = maxCol - minCol + 1;
+      mergedCell.rowSpan = maxRow - minRow + 1;
+
+      // Mark other cells in the merge region
+      for (let r = minRow; r <= maxRow; r++) {
+        for (let c = minCol; c <= maxCol; c++) {
+          if (r === minRow && c === minCol) continue;
+
+          if (r === minRow) {
+            // Same row - remove cell (it's spanned)
+            // In real implementation, we'd mark it for removal
+          }
+          if (r > minRow && c === minCol) {
+            // First column of subsequent rows - mark as continue
+            newTable.rows[r].cells[c].verticalMerge = 'continue';
+          }
+        }
+      }
+
+      onChange(newTable);
+    }, [table, selection, selectionBounds, onChange]);
+
+    const splitCell = useCallback(() => {
+      if (!selection) return;
+
+      const newTable = { ...table };
+      const cell = newTable.rows[selection.startRow]?.cells[selection.startCol];
+
+      if (cell) {
+        cell.columnSpan = 1;
+        cell.rowSpan = 1;
+        delete cell.verticalMerge;
+      }
+
+      onChange(newTable);
+    }, [table, selection, onChange]);
+
+    const applyShading = useCallback(
+      (color: string) => {
+        if (!selection || !selectionBounds) return;
+
+        const newTable = { ...table };
+        const { minRow, maxRow, minCol, maxCol } = selectionBounds;
+
+        for (let r = minRow; r <= maxRow; r++) {
+          for (let c = minCol; c <= maxCol; c++) {
+            if (newTable.rows[r]?.cells[c]) {
+              newTable.rows[r].cells[c].shading = color.replace('#', '');
+            }
+          }
+        }
+
+        onChange(newTable);
+      },
+      [table, selection, selectionBounds, onChange]
+    );
+
+    const setVerticalAlignment = useCallback(
+      (alignment: 'top' | 'center' | 'bottom') => {
+        if (!selection || !selectionBounds) return;
+
+        const newTable = { ...table };
+        const { minRow, maxRow, minCol, maxCol } = selectionBounds;
+
+        for (let r = minRow; r <= maxRow; r++) {
+          for (let c = minCol; c <= maxCol; c++) {
+            if (newTable.rows[r]?.cells[c]) {
+              newTable.rows[r].cells[c].verticalAlignment = alignment;
+            }
+          }
+        }
+
+        onChange(newTable);
+      },
+      [table, selection, selectionBounds, onChange]
+    );
+
+    // Expose methods via ref
+    useImperativeHandle(ref, () => ({
+      insertRowAbove,
+      insertRowBelow,
+      insertColumnLeft,
+      insertColumnRight,
+      deleteRow,
+      deleteColumn,
+      mergeCells,
+      splitCell,
+      applyShading,
+      setVerticalAlignment,
+    }));
+
+    // Handle quick actions
+    useEffect(() => {
+      if (!activeQuickAction || !selection) return;
+
+      switch (activeQuickAction) {
+        case 'table-add-row-above':
+          insertRowAbove();
+          break;
+        case 'table-add-row-below':
+          insertRowBelow();
+          break;
+        case 'table-add-col-left':
+          insertColumnLeft();
+          break;
+        case 'table-add-col-right':
+          insertColumnRight();
+          break;
+        case 'table-delete-row':
+          deleteRow();
+          break;
+        case 'table-delete-col':
+          deleteColumn();
+          break;
+        case 'table-merge-cells':
+          mergeCells();
+          break;
+        case 'table-split-cell':
+          splitCell();
+          break;
+        case 'apply-h2-shading':
+          if (tableShadingSettings) {
+            applyShading(tableShadingSettings.header2Shading);
+          }
+          break;
+        case 'apply-other-shading':
+          if (tableShadingSettings) {
+            applyShading(tableShadingSettings.otherShading);
+          }
+          break;
+        case 'table-vertical-align':
+          // Would show a dialog - for now default to center
+          setVerticalAlignment('center');
+          break;
+      }
+
+      onQuickActionComplete();
+    }, [
+      activeQuickAction,
+      selection,
+      insertRowAbove,
+      insertRowBelow,
+      insertColumnLeft,
+      insertColumnRight,
+      deleteRow,
+      deleteColumn,
+      mergeCells,
+      splitCell,
+      applyShading,
+      setVerticalAlignment,
+      tableShadingSettings,
+      onQuickActionComplete,
+    ]);
+
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if (!selection) return;
+
+        const { startRow, startCol } = selection;
+
+        switch (e.key) {
+          case 'Tab':
+            e.preventDefault();
+            if (e.shiftKey) {
+              // Previous cell
+              if (startCol > 0) {
+                onSelectionChange({
+                  startRow,
+                  startCol: startCol - 1,
+                  endRow: startRow,
+                  endCol: startCol - 1,
+                });
+              } else if (startRow > 0) {
+                onSelectionChange({
+                  startRow: startRow - 1,
+                  startCol: table.rows[0].cells.length - 1,
+                  endRow: startRow - 1,
+                  endCol: table.rows[0].cells.length - 1,
+                });
+              }
+            } else {
+              // Next cell
+              if (startCol < table.rows[0].cells.length - 1) {
+                onSelectionChange({
+                  startRow,
+                  startCol: startCol + 1,
+                  endRow: startRow,
+                  endCol: startCol + 1,
+                });
+              } else if (startRow < table.rows.length - 1) {
+                onSelectionChange({
+                  startRow: startRow + 1,
+                  startCol: 0,
+                  endRow: startRow + 1,
+                  endCol: 0,
+                });
+              }
+            }
+            break;
+
+          case 'ArrowUp':
+            if (startRow > 0) {
+              onSelectionChange({
+                startRow: startRow - 1,
+                startCol,
+                endRow: startRow - 1,
+                endCol: startCol,
+              });
+            }
+            break;
+
+          case 'ArrowDown':
+            if (startRow < table.rows.length - 1) {
+              onSelectionChange({
+                startRow: startRow + 1,
+                startCol,
+                endRow: startRow + 1,
+                endCol: startCol,
+              });
+            }
+            break;
+
+          case 'ArrowLeft':
+            if (startCol > 0) {
+              onSelectionChange({
+                startRow,
+                startCol: startCol - 1,
+                endRow: startRow,
+                endCol: startCol - 1,
+              });
+            }
+            break;
+
+          case 'ArrowRight':
+            if (startCol < table.rows[0].cells.length - 1) {
+              onSelectionChange({
+                startRow,
+                startCol: startCol + 1,
+                endRow: startRow,
+                endCol: startCol + 1,
+              });
+            }
+            break;
+        }
+      },
+      [selection, table, onSelectionChange]
+    );
+
+    // Context menu items
+    const contextMenuItems: ContextMenuItem[] = [
+      {
+        id: 'insert-row-above',
+        label: 'Insert Row Above',
+        icon: ArrowUp,
+        action: insertRowAbove,
+      },
+      {
+        id: 'insert-row-below',
+        label: 'Insert Row Below',
+        icon: ArrowDown,
+        action: insertRowBelow,
+      },
+      {
+        id: 'insert-col-left',
+        label: 'Insert Column Left',
+        icon: ArrowLeft,
+        action: insertColumnLeft,
+      },
+      {
+        id: 'insert-col-right',
+        label: 'Insert Column Right',
+        icon: ArrowRight,
+        action: insertColumnRight,
+      },
+      { id: 'divider-1', label: '', icon: Plus, action: () => {}, divider: true },
+      {
+        id: 'delete-row',
+        label: 'Delete Row',
+        icon: Minus,
+        action: deleteRow,
+        disabled: table.rows.length <= 1,
+      },
+      {
+        id: 'delete-col',
+        label: 'Delete Column',
+        icon: Minus,
+        action: deleteColumn,
+        disabled: table.rows[0].cells.length <= 1,
+      },
+      { id: 'divider-2', label: '', icon: Plus, action: () => {}, divider: true },
+      {
+        id: 'merge-cells',
+        label: 'Merge Cells',
+        icon: Merge,
+        action: mergeCells,
+        disabled:
+          !selectionBounds ||
+          (selectionBounds.minRow === selectionBounds.maxRow &&
+            selectionBounds.minCol === selectionBounds.maxCol),
+      },
+      {
+        id: 'split-cell',
+        label: 'Split Cell',
+        icon: Split,
+        action: splitCell,
+      },
+      { id: 'divider-3', label: '', icon: Plus, action: () => {}, divider: true },
+      {
+        id: 'apply-h2-shading',
+        label: 'Apply Header 2 Shading',
+        icon: Paintbrush,
+        action: () =>
+          tableShadingSettings &&
+          applyShading(tableShadingSettings.header2Shading),
+        disabled: !tableShadingSettings,
+      },
+      {
+        id: 'apply-other-shading',
+        label: 'Apply Other Shading',
+        icon: Paintbrush,
+        action: () =>
+          tableShadingSettings && applyShading(tableShadingSettings.otherShading),
+        disabled: !tableShadingSettings,
+      },
+    ];
+
+    return (
+      <div
+        className="relative my-4 overflow-x-auto"
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+      >
+        <table
+          ref={tableRef}
+          className="w-full border-collapse border border-border"
+        >
+          <tbody>
+            {table.rows.map((row, rowIndex) => (
+              <tr key={rowIndex}>
+                {row.cells.map((cell, cellIndex) => {
+                  // Skip cells that are continued from vertical merge
+                  if (cell.verticalMerge === 'continue') {
+                    return null;
+                  }
+
+                  const isSelected = isCellSelected(rowIndex, cellIndex);
+
+                  return (
+                    <td
+                      key={cellIndex}
+                      className={cn(
+                        'border border-border p-2 relative cursor-cell',
+                        'transition-colors duration-100',
+                        isSelected &&
+                          'ring-2 ring-primary ring-inset bg-primary/10',
+                        !isSelected && 'hover:bg-muted/30',
+                        cell.verticalAlignment === 'center' && 'align-middle',
+                        cell.verticalAlignment === 'bottom' && 'align-bottom',
+                        (!cell.verticalAlignment ||
+                          cell.verticalAlignment === 'top') &&
+                          'align-top'
+                      )}
+                      style={{
+                        backgroundColor: cell.shading
+                          ? `#${cell.shading}`
+                          : undefined,
+                      }}
+                      colSpan={cell.columnSpan || 1}
+                      rowSpan={cell.rowSpan || 1}
+                      onClick={(e) => handleCellClick(rowIndex, cellIndex, e)}
+                      onContextMenu={(e) =>
+                        handleCellContextMenu(rowIndex, cellIndex, e)
+                      }
+                      onMouseDown={(e) =>
+                        handleCellMouseDown(rowIndex, cellIndex, e)
+                      }
+                      onMouseEnter={() =>
+                        handleCellMouseEnter(rowIndex, cellIndex)
+                      }
+                      data-row={rowIndex}
+                      data-col={cellIndex}
+                    >
+                      {cell.paragraphs.map((para, paraIndex) => (
+                        <div
+                          key={paraIndex}
+                          contentEditable={!readOnly}
+                          suppressContentEditableWarning
+                          className={cn(
+                            'min-h-[1.2em] outline-none focus:bg-primary/5',
+                            para.alignment === 'center' && 'text-center',
+                            para.alignment === 'right' && 'text-right',
+                            para.alignment === 'justify' && 'text-justify'
+                          )}
+                          onBlur={(e) => {
+                            const newText = e.currentTarget.textContent || '';
+                            if (newText !== para.text) {
+                              const newTable = { ...table };
+                              newTable.rows[rowIndex].cells[
+                                cellIndex
+                              ].paragraphs[paraIndex].text = newText;
+                              onChange(newTable);
+                            }
+                          }}
+                        >
+                          {para.runs && para.runs.length > 0 ? (
+                            para.runs.map((run, runIndex) => (
+                              <span
+                                key={runIndex}
+                                style={{
+                                  fontWeight: run.bold ? 'bold' : undefined,
+                                  fontStyle: run.italic ? 'italic' : undefined,
+                                  textDecoration: run.underline
+                                    ? 'underline'
+                                    : undefined,
+                                  color: run.color ? `#${run.color}` : undefined,
+                                }}
+                              >
+                                {run.text}
+                              </span>
+                            ))
+                          ) : (
+                            <span>{para.text || '\u00A0'}</span>
+                          )}
+                        </div>
+                      ))}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        {/* Context menu */}
+        <AnimatePresence>
+          {contextMenu && (
+            <ContextMenu
+              x={contextMenu.x}
+              y={contextMenu.y}
+              items={contextMenuItems}
+              onClose={() => setContextMenu(null)}
+            />
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  }
+);
+
+export default TableEditor;