@saena-io/create 0.1.0 → 0.2.0

package/template/base/src/components/ui/rich-text/table-node.tsx

@@ -0,0 +1,934 @@
+import * as React from 'react';
+
+import { GripVerticalIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { useDraggable, useDropLine } from '@platejs/dnd';
+import { resizeLengthClampStatic } from '@platejs/resizable';
+import { BlockSelectionPlugin, useBlockSelected } from '@platejs/selection/react';
+import {
+  getTableColumnCount,
+  setTableColSize,
+  setTableMarginLeft,
+  setTableRowSize,
+} from '@platejs/table';
+import {
+  TablePlugin,
+  TableProvider,
+  roundCellSizeToStep,
+  useCellIndices,
+  useOverrideColSize,
+  useOverrideMarginLeft,
+  useOverrideRowSize,
+  useTableCellBorders,
+  useTableColSizes,
+  useTableElement,
+  useTableSelectionDom,
+  useTableValue,
+} from '@platejs/table/react';
+import { cn } from '@saena-io/ui/lib/utils';
+import {
+  KEYS,
+  PathApi,
+  type TElement,
+  type TTableCellElement,
+  type TTableElement,
+  type TTableRowElement,
+} from 'platejs';
+import {
+  PlateElement,
+  type PlateElementProps,
+  useComposedRef,
+  useEditorPlugin,
+  useEditorRef,
+  useElement,
+  useElementSelector,
+  usePluginOption,
+  useReadOnly,
+  withHOC,
+} from 'platejs/react';
+
+import { blockSelectionVariants } from './block-selection';
+
+// Table renderers ported from the PlateJS example (table-node.tsx) into SAENA. The key fix vs. the
+// previous renderer: cells are <td>/<th> with p-0 and an inner editable <div> (px-3 py-2 + min-height)
+// so even empty cells are clickable/editable. Features kept: column/row/margin resize controller,
+// cell selection DOM, row drag handle, per-side borders, and the cell-selected overlay. The example's
+// in-table floating toolbar (borders/merge/split/cell-background) is intentionally stripped — SAENA has
+// its own table-toolbar.tsx for those. Palette: 'brand' → 'primary'.
+
+type TableResizeDirection = 'bottom' | 'left' | 'right';
+
+type TableResizeStartOptions = {
+  colIndex: number;
+  direction: TableResizeDirection;
+  handleKey: string;
+  rowIndex: number;
+};
+
+type TableResizeDragState = {
+  colIndex: number;
+  direction: TableResizeDirection;
+  initialPosition: number;
+  initialSize: number;
+  marginLeft: number;
+  rowIndex: number;
+};
+
+type TableResizeContextValue = {
+  disableMarginLeft: boolean;
+  clearResizePreview: (handleKey: string) => void;
+  setResizePreview: (
+    event: React.PointerEvent<HTMLDivElement>,
+    options: TableResizeStartOptions,
+  ) => void;
+  startResize: (
+    event: React.PointerEvent<HTMLDivElement>,
+    options: TableResizeStartOptions,
+  ) => void;
+};
+
+const TABLE_CONTROL_COLUMN_WIDTH = 8;
+const TABLE_DEFAULT_COLUMN_WIDTH = 120;
+const TABLE_DEFERRED_COLUMN_RESIZE_CELL_COUNT = 1200;
+
+const TableResizeContext = React.createContext<TableResizeContextValue | null>(null);
+
+function useTableResizeContext() {
+  const context = React.useContext(TableResizeContext);
+
+  if (!context) {
+    throw new Error('TableResizeContext is missing');
+  }
+
+  return context;
+}
+
+function useTableResizeController({
+  deferColumnResize,
+  dragIndicatorRef,
+  hoverIndicatorRef,
+  marginLeft,
+  controlColumnWidth,
+  tablePath,
+  tableRef,
+  wrapperRef,
+}: {
+  deferColumnResize: boolean;
+  dragIndicatorRef: React.RefObject<HTMLDivElement | null>;
+  hoverIndicatorRef: React.RefObject<HTMLDivElement | null>;
+  marginLeft: number;
+  controlColumnWidth: number;
+  tablePath: number[];
+  tableRef: React.RefObject<HTMLTableElement | null>;
+  wrapperRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  const { editor, getOptions } = useEditorPlugin(TablePlugin);
+  const { disableMarginLeft = false, minColumnWidth = 0 } = getOptions();
+  const colSizes = useTableColSizes({
+    disableOverrides: true,
+  });
+  const effectiveColSizes = React.useMemo(
+    () => colSizes.map((colSize) => colSize || TABLE_DEFAULT_COLUMN_WIDTH),
+    [colSizes],
+  );
+  const effectiveColSizesRef = React.useRef(effectiveColSizes);
+  const activeHandleKeyRef = React.useRef<string | null>(null);
+  const activeRowElementRef = React.useRef<HTMLTableRowElement | null>(null);
+  const cleanupListenersRef = React.useRef<(() => void) | null>(null);
+  const marginLeftRef = React.useRef(marginLeft);
+  const dragStateRef = React.useRef<TableResizeDragState | null>(null);
+  const frozenRowIndicesRef = React.useRef<number[] | null>(null);
+  const previewHandleKeyRef = React.useRef<string | null>(null);
+  const overrideColSize = useOverrideColSize();
+  const overrideMarginLeft = useOverrideMarginLeft();
+  const overrideRowSize = useOverrideRowSize();
+
+  React.useEffect(() => {
+    effectiveColSizesRef.current = effectiveColSizes;
+  }, [effectiveColSizes]);
+
+  React.useEffect(() => {
+    marginLeftRef.current = marginLeft;
+  }, [marginLeft]);
+
+  const hideDeferredResizeIndicator = React.useCallback(() => {
+    const indicator = dragIndicatorRef.current;
+
+    if (!indicator) return;
+
+    indicator.style.display = 'none';
+    indicator.style.removeProperty('left');
+  }, [dragIndicatorRef]);
+
+  const showDeferredResizeIndicator = React.useCallback(
+    (offset: number) => {
+      const indicator = dragIndicatorRef.current;
+
+      if (!indicator) return;
+
+      indicator.style.display = 'block';
+      indicator.style.left = `${offset}px`;
+    },
+    [dragIndicatorRef],
+  );
+
+  const hideResizeIndicator = React.useCallback(() => {
+    const indicator = hoverIndicatorRef.current;
+
+    if (!indicator) return;
+
+    indicator.style.display = 'none';
+    indicator.style.removeProperty('left');
+  }, [hoverIndicatorRef]);
+
+  const clearFrozenRowHeights = React.useCallback(() => {
+    const frozenRowIndices = frozenRowIndicesRef.current;
+
+    if (!frozenRowIndices) return;
+
+    frozenRowIndicesRef.current = null;
+
+    frozenRowIndices.forEach((rowIndex) => {
+      overrideRowSize(rowIndex, null);
+    });
+  }, [overrideRowSize]);
+
+  const freezeRowHeights = React.useCallback(() => {
+    const table = tableRef.current;
+
+    if (!table || deferColumnResize) return;
+
+    clearFrozenRowHeights();
+
+    const frozenRowIndices: number[] = [];
+
+    Array.from(table.rows).forEach((row, rowIndex) => {
+      const height = row.getBoundingClientRect().height;
+
+      if (!height) return;
+
+      overrideRowSize(rowIndex, height);
+      frozenRowIndices.push(rowIndex);
+    });
+
+    frozenRowIndicesRef.current = frozenRowIndices;
+  }, [clearFrozenRowHeights, deferColumnResize, overrideRowSize, tableRef]);
+
+  const showResizeIndicatorAtOffset = React.useCallback(
+    (offset: number) => {
+      const indicator = hoverIndicatorRef.current;
+
+      if (!indicator) return;
+
+      indicator.style.display = 'block';
+      indicator.style.left = `${offset}px`;
+    },
+    [hoverIndicatorRef],
+  );
+
+  const showResizeIndicator = React.useCallback(
+    ({
+      event,
+      direction,
+    }: Pick<TableResizeStartOptions, 'direction'> & {
+      event: React.PointerEvent<HTMLDivElement>;
+    }) => {
+      if (direction === 'bottom') return;
+
+      const wrapper = wrapperRef.current;
+
+      if (!wrapper) return;
+
+      const handleRect = event.currentTarget.getBoundingClientRect();
+      const wrapperRect = wrapper.getBoundingClientRect();
+      const boundaryOffset = handleRect.left - wrapperRect.left + handleRect.width / 2;
+
+      showResizeIndicatorAtOffset(boundaryOffset);
+    },
+    [showResizeIndicatorAtOffset, wrapperRef],
+  );
+
+  const setResizePreview = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>, options: TableResizeStartOptions) => {
+      if (activeHandleKeyRef.current) return;
+
+      previewHandleKeyRef.current = options.handleKey;
+      showResizeIndicator({ ...options, event });
+    },
+    [showResizeIndicator],
+  );
+
+  const clearResizePreview = React.useCallback(
+    (handleKey: string) => {
+      if (activeHandleKeyRef.current) return;
+      if (previewHandleKeyRef.current !== handleKey) return;
+
+      previewHandleKeyRef.current = null;
+      hideResizeIndicator();
+    },
+    [hideResizeIndicator],
+  );
+
+  const commitColSize = React.useCallback(
+    (colIndex: number, width: number) => {
+      setTableColSize(editor, { colIndex, width }, { at: tablePath });
+      setTimeout(() => overrideColSize(colIndex, null), 0);
+    },
+    [editor, overrideColSize, tablePath],
+  );
+
+  const commitRowSize = React.useCallback(
+    (rowIndex: number, height: number) => {
+      setTableRowSize(editor, { height, rowIndex }, { at: tablePath });
+      setTimeout(() => overrideRowSize(rowIndex, null), 0);
+    },
+    [editor, overrideRowSize, tablePath],
+  );
+
+  const commitMarginLeft = React.useCallback(
+    (nextMarginLeft: number) => {
+      setTableMarginLeft(editor, { marginLeft: nextMarginLeft }, { at: tablePath });
+      setTimeout(() => overrideMarginLeft(null), 0);
+    },
+    [editor, overrideMarginLeft, tablePath],
+  );
+
+  const getColumnBoundaryOffset = React.useCallback(
+    (colIndex: number, currentWidth: number) =>
+      controlColumnWidth +
+      effectiveColSizesRef.current
+        .slice(0, colIndex)
+        .reduce((total, colSize) => total + colSize, 0) +
+      currentWidth,
+    [controlColumnWidth],
+  );
+
+  const applyResize = React.useCallback(
+    (event: PointerEvent, finished: boolean) => {
+      const dragState = dragStateRef.current;
+
+      if (!dragState) return;
+
+      const currentPosition = dragState.direction === 'bottom' ? event.clientY : event.clientX;
+      const delta = currentPosition - dragState.initialPosition;
+
+      if (dragState.direction === 'bottom') {
+        const newHeight = roundCellSizeToStep(dragState.initialSize + delta, undefined);
+
+        if (finished) {
+          commitRowSize(dragState.rowIndex, newHeight);
+        } else {
+          overrideRowSize(dragState.rowIndex, newHeight);
+        }
+
+        return;
+      }
+
+      if (dragState.direction === 'left') {
+        const initial = effectiveColSizesRef.current[dragState.colIndex] ?? dragState.initialSize;
+        const complement = (width: number) => initial + dragState.marginLeft - width;
+        const nextMarginLeft = roundCellSizeToStep(
+          resizeLengthClampStatic(dragState.marginLeft + delta, {
+            max: complement(minColumnWidth),
+            min: 0,
+          }),
+          undefined,
+        );
+        const nextWidth = complement(nextMarginLeft);
+
+        if (finished) {
+          commitMarginLeft(nextMarginLeft);
+          commitColSize(dragState.colIndex, nextWidth);
+        } else if (deferColumnResize) {
+          showDeferredResizeIndicator(controlColumnWidth + (nextMarginLeft - dragState.marginLeft));
+        } else {
+          showResizeIndicatorAtOffset(controlColumnWidth + (nextMarginLeft - dragState.marginLeft));
+          overrideMarginLeft(nextMarginLeft);
+          overrideColSize(dragState.colIndex, nextWidth);
+        }
+
+        return;
+      }
+
+      const currentInitial =
+        effectiveColSizesRef.current[dragState.colIndex] ?? dragState.initialSize;
+      const nextInitial = effectiveColSizesRef.current[dragState.colIndex + 1];
+      const complement = (width: number) => currentInitial + (nextInitial ?? 0) - width;
+      const currentWidth = roundCellSizeToStep(
+        resizeLengthClampStatic(currentInitial + delta, {
+          max: nextInitial ? complement(minColumnWidth) : undefined,
+          min: minColumnWidth,
+        }),
+        undefined,
+      );
+      const nextWidth = nextInitial ? complement(currentWidth) : undefined;
+
+      if (finished) {
+        commitColSize(dragState.colIndex, currentWidth);
+
+        if (nextWidth !== undefined) {
+          commitColSize(dragState.colIndex + 1, nextWidth);
+        }
+      } else if (deferColumnResize) {
+        showDeferredResizeIndicator(getColumnBoundaryOffset(dragState.colIndex, currentWidth));
+      } else {
+        showResizeIndicatorAtOffset(getColumnBoundaryOffset(dragState.colIndex, currentWidth));
+        overrideColSize(dragState.colIndex, currentWidth);
+
+        if (nextWidth !== undefined) {
+          overrideColSize(dragState.colIndex + 1, nextWidth);
+        }
+      }
+    },
+    [
+      commitColSize,
+      commitMarginLeft,
+      commitRowSize,
+      controlColumnWidth,
+      deferColumnResize,
+      getColumnBoundaryOffset,
+      showDeferredResizeIndicator,
+      showResizeIndicatorAtOffset,
+      minColumnWidth,
+      overrideColSize,
+      overrideMarginLeft,
+      overrideRowSize,
+    ],
+  );
+
+  const stopResize = React.useCallback(() => {
+    cleanupListenersRef.current?.();
+    cleanupListenersRef.current = null;
+    activeHandleKeyRef.current = null;
+    previewHandleKeyRef.current = null;
+    dragStateRef.current = null;
+
+    if (activeRowElementRef.current) {
+      delete activeRowElementRef.current.dataset.tableResizing;
+      activeRowElementRef.current = null;
+    }
+
+    hideDeferredResizeIndicator();
+    hideResizeIndicator();
+    clearFrozenRowHeights();
+  }, [clearFrozenRowHeights, hideDeferredResizeIndicator, hideResizeIndicator]);
+
+  React.useEffect(() => stopResize, [stopResize]);
+
+  const startResize = React.useCallback(
+    (
+      event: React.PointerEvent<HTMLDivElement>,
+      { colIndex, direction, handleKey, rowIndex }: TableResizeStartOptions,
+    ) => {
+      const rowHeight = tableRef.current?.rows.item(rowIndex)?.getBoundingClientRect().height ?? 0;
+
+      dragStateRef.current = {
+        colIndex,
+        direction,
+        initialPosition: direction === 'bottom' ? event.clientY : event.clientX,
+        initialSize:
+          direction === 'bottom'
+            ? rowHeight
+            : (effectiveColSizesRef.current[colIndex] ?? TABLE_DEFAULT_COLUMN_WIDTH),
+        marginLeft: marginLeftRef.current,
+        rowIndex,
+      };
+      activeHandleKeyRef.current = handleKey;
+      previewHandleKeyRef.current = null;
+
+      const rowElement = tableRef.current?.rows.item(rowIndex) ?? null;
+
+      if (activeRowElementRef.current && activeRowElementRef.current !== rowElement) {
+        delete activeRowElementRef.current.dataset.tableResizing;
+      }
+
+      activeRowElementRef.current = rowElement;
+
+      if (rowElement) {
+        rowElement.dataset.tableResizing = 'true';
+      }
+
+      cleanupListenersRef.current?.();
+
+      if (direction !== 'bottom') {
+        freezeRowHeights();
+      }
+
+      const handlePointerMove = (pointerEvent: PointerEvent) => {
+        applyResize(pointerEvent, false);
+      };
+
+      const handlePointerEnd = (pointerEvent: PointerEvent) => {
+        applyResize(pointerEvent, true);
+        stopResize();
+      };
+
+      window.addEventListener('pointermove', handlePointerMove);
+      window.addEventListener('pointerup', handlePointerEnd);
+      window.addEventListener('pointercancel', handlePointerEnd);
+
+      cleanupListenersRef.current = () => {
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerEnd);
+        window.removeEventListener('pointercancel', handlePointerEnd);
+      };
+
+      if (deferColumnResize && direction !== 'bottom') {
+        hideResizeIndicator();
+        showDeferredResizeIndicator(
+          direction === 'left'
+            ? controlColumnWidth
+            : getColumnBoundaryOffset(
+                colIndex,
+                effectiveColSizesRef.current[colIndex] ?? TABLE_DEFAULT_COLUMN_WIDTH,
+              ),
+        );
+      } else {
+        showResizeIndicator({ direction, event });
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [
+      controlColumnWidth,
+      deferColumnResize,
+      getColumnBoundaryOffset,
+      hideResizeIndicator,
+      showDeferredResizeIndicator,
+      showResizeIndicator,
+      stopResize,
+      tableRef,
+      applyResize,
+      freezeRowHeights,
+    ],
+  );
+
+  return React.useMemo(
+    () => ({
+      clearResizePreview,
+      disableMarginLeft,
+      setResizePreview,
+      startResize,
+    }),
+    [clearResizePreview, disableMarginLeft, setResizePreview, startResize],
+  );
+}
+
+export const TableElement = withHOC(
+  TableProvider,
+  function TableElement({ children, ...props }: PlateElementProps<TTableElement>) {
+    const readOnly = useReadOnly();
+    const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, 'isSelectionAreaVisible');
+    const hasControls = !readOnly && !isSelectionAreaVisible;
+    const { marginLeft, props: tableProps } = useTableElement();
+    const colSizes = useTableColSizes();
+    const controlColumnWidth = hasControls ? TABLE_CONTROL_COLUMN_WIDTH : 0;
+    const dragIndicatorRef = React.useRef<HTMLDivElement>(null);
+    const hoverIndicatorRef = React.useRef<HTMLDivElement>(null);
+    const deferColumnResize =
+      colSizes.length * props.element.children.length > TABLE_DEFERRED_COLUMN_RESIZE_CELL_COUNT;
+    const tablePath = useElementSelector(([, path]) => path, [], {
+      key: KEYS.table,
+    });
+    const tableRef = React.useRef<HTMLTableElement>(null);
+    const wrapperRef = React.useRef<HTMLDivElement>(null);
+    useTableSelectionDom(tableRef);
+    const resizeController = useTableResizeController({
+      controlColumnWidth,
+      deferColumnResize,
+      dragIndicatorRef,
+      hoverIndicatorRef,
+      marginLeft,
+      tablePath,
+      tableRef,
+      wrapperRef,
+    });
+    const resolvedColSizes = React.useMemo(() => {
+      if (colSizes.length > 0) {
+        return colSizes.map((colSize) => colSize || TABLE_DEFAULT_COLUMN_WIDTH);
+      }
+
+      return Array.from(
+        { length: getTableColumnCount(props.element) },
+        () => TABLE_DEFAULT_COLUMN_WIDTH,
+      );
+    }, [colSizes, props.element]);
+    const tableVariableStyle = React.useMemo(() => {
+      if (resolvedColSizes.length === 0) {
+        return;
+      }
+
+      return {
+        ...Object.fromEntries(
+          resolvedColSizes.map((colSize, index) => [`--table-col-${index}`, `${colSize}px`]),
+        ),
+      } as React.CSSProperties;
+    }, [resolvedColSizes]);
+    const tableStyle = React.useMemo(
+      () =>
+        ({
+          width: `${
+            resolvedColSizes.reduce((total, colSize) => total + colSize, 0) + controlColumnWidth
+          }px`,
+        }) as React.CSSProperties,
+      [controlColumnWidth, resolvedColSizes],
+    );
+
+    const isSelectingTable = useBlockSelected(props.element.id as string);
+
+    return (
+      <PlateElement
+        {...props}
+        className={cn(
+          'overflow-x-auto py-5',
+          hasControls && '-ml-2 *:data-[slot=block-selection]:left-2',
+        )}
+        style={{ paddingLeft: marginLeft }}
+      >
+        <TableResizeContext.Provider value={resizeController}>
+          <div ref={wrapperRef} className="group/table relative w-fit" style={tableVariableStyle}>
+            <div
+              ref={dragIndicatorRef}
+              className="-translate-x-[1.5px] pointer-events-none absolute inset-y-0 z-36 hidden w-[3px] bg-ring/70"
+              contentEditable={false}
+            />
+            <div
+              ref={hoverIndicatorRef}
+              className="-translate-x-[1.5px] pointer-events-none absolute inset-y-0 z-35 hidden w-[3px] bg-ring/80"
+              contentEditable={false}
+            />
+            <table
+              ref={tableRef}
+              className={cn(
+                'mr-0 ml-px table h-px table-fixed border-collapse',
+                'data-[table-selecting=true]:[&_*::selection]:!bg-transparent',
+                'data-[table-selecting=true]:[&_*::selection]:!text-inherit',
+                'data-[table-selecting=true]:[&_*::-moz-selection]:!bg-transparent',
+                'data-[table-selecting=true]:[&_*::-moz-selection]:!text-inherit',
+                'data-[table-selecting=true]:[&_*]:!caret-transparent',
+              )}
+              style={tableStyle}
+              {...tableProps}
+            >
+              {resolvedColSizes.length > 0 && (
+                <colgroup>
+                  {hasControls && (
+                    <col
+                      style={{
+                        maxWidth: TABLE_CONTROL_COLUMN_WIDTH,
+                        minWidth: TABLE_CONTROL_COLUMN_WIDTH,
+                        width: TABLE_CONTROL_COLUMN_WIDTH,
+                      }}
+                    />
+                  )}
+                  {resolvedColSizes.map((colSize, index) => (
+                    <col
+                      key={index}
+                      style={{
+                        maxWidth: colSize,
+                        minWidth: colSize,
+                        width: colSize,
+                      }}
+                    />
+                  ))}
+                </colgroup>
+              )}
+              <tbody className="min-w-full">{children}</tbody>
+            </table>
+
+            {isSelectingTable && (
+              <div className={blockSelectionVariants()} contentEditable={false} />
+            )}
+          </div>
+        </TableResizeContext.Provider>
+      </PlateElement>
+    );
+  },
+);
+
+export function TableRowElement({ children, ...props }: PlateElementProps<TTableRowElement>) {
+  const { element } = props;
+  const readOnly = useReadOnly();
+  const editor = useEditorRef();
+  const rowIndex = useElementSelector(([, path]) => path.at(-1) as number, [], {
+    key: KEYS.tr,
+  });
+  const rowSize = useElementSelector(([node]) => (node as TTableRowElement).size, [], {
+    key: KEYS.tr,
+  });
+  const rowSizeOverrides = useTableValue('rowSizeOverrides');
+  const rowMinHeight = rowSizeOverrides.get?.(rowIndex) ?? rowSize;
+  const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, 'isSelectionAreaVisible');
+  const hasControls = !readOnly && !isSelectionAreaVisible;
+
+  const { isDragging, nodeRef, previewRef, handleRef } = useDraggable({
+    element,
+    type: element.type,
+    canDropNode: ({ dragEntry, dropEntry }) =>
+      PathApi.equals(PathApi.parent(dragEntry[1]), PathApi.parent(dropEntry[1])),
+    onDropHandler: (_, { dragItem }) => {
+      const dragElement = (dragItem as { element: TElement }).element;
+
+      if (dragElement) {
+        editor.tf.select(dragElement);
+      }
+    },
+  });
+
+  return (
+    <PlateElement
+      {...props}
+      ref={useComposedRef(props.ref, previewRef, nodeRef)}
+      as="tr"
+      className={cn('group/row', isDragging && 'opacity-50')}
+      style={
+        {
+          ...props.style,
+          '--tableRowMinHeight': rowMinHeight ? `${rowMinHeight}px` : undefined,
+        } as React.CSSProperties
+      }
+    >
+      {hasControls && (
+        <td className="w-2 min-w-2 max-w-2 select-none p-0" contentEditable={false}>
+          <RowDragHandle dragRef={handleRef} />
+          <RowDropLine />
+        </td>
+      )}
+
+      {children}
+    </PlateElement>
+  );
+}
+
+function useTableCellPresentation(element: TTableCellElement) {
+  const { api } = useEditorPlugin(TablePlugin);
+  const borders = useTableCellBorders({ element });
+  const { col, row } = useCellIndices();
+
+  const colSpan = api.table.getColSpan(element);
+  const rowSpan = api.table.getRowSpan(element);
+  const width = React.useMemo(() => {
+    const terms = Array.from(
+      { length: colSpan },
+      (_, offset) => `var(--table-col-${col + offset}, ${TABLE_DEFAULT_COLUMN_WIDTH}px)`,
+    );
+
+    return terms.length === 1 ? terms[0]! : `calc(${terms.join(' + ')})`;
+  }, [col, colSpan]);
+
+  return {
+    borders,
+    colIndex: col + colSpan - 1,
+    colSpan,
+    rowIndex: row + rowSpan - 1,
+    rowSpan,
+    width,
+  };
+}
+
+function RowDragHandle({ dragRef }: { dragRef: React.Ref<any> }) {
+  const editor = useEditorRef();
+  const element = useElement();
+
+  return (
+    <button
+      ref={dragRef}
+      type="button"
+      className={cn(
+        '-translate-y-1/2 absolute top-1/2 left-0 z-51 flex h-6 w-4 items-center justify-center rounded-md border border-input bg-background p-0',
+        'cursor-grab active:cursor-grabbing',
+        'opacity-0 transition-opacity duration-100 group-hover/row:opacity-100 group-data-[table-resizing=true]/row:opacity-0',
+      )}
+      onClick={() => {
+        editor.tf.select(element);
+      }}
+    >
+      <HugeiconsIcon
+        icon={GripVerticalIcon}
+        strokeWidth={2}
+        className="size-4 text-muted-foreground"
+      />
+    </button>
+  );
+}
+
+function RowDropLine() {
+  const { dropLine } = useDropLine();
+
+  if (!dropLine) return null;
+
+  return (
+    <div
+      className={cn(
+        'absolute inset-x-0 left-2 z-50 h-0.5 bg-primary/50',
+        dropLine === 'top' ? '-top-px' : '-bottom-px',
+      )}
+    />
+  );
+}
+
+export function TableCellElement({
+  isHeader,
+  ...props
+}: PlateElementProps<TTableCellElement> & {
+  isHeader?: boolean;
+}) {
+  const readOnly = useReadOnly();
+  const element = props.element;
+
+  const tableId = useElementSelector(([node]) => node.id as string, [], {
+    key: KEYS.table,
+  });
+  const rowId = useElementSelector(([node]) => node.id as string, [], {
+    key: KEYS.tr,
+  });
+  const isSelectingTable = useBlockSelected(tableId);
+  const isSelectingRow = useBlockSelected(rowId) || isSelectingTable;
+  const isSelectionAreaVisible = usePluginOption(BlockSelectionPlugin, 'isSelectionAreaVisible');
+
+  const { borders, colIndex, colSpan, rowIndex, rowSpan, width } =
+    useTableCellPresentation(element);
+
+  return (
+    <PlateElement
+      {...props}
+      as={isHeader ? 'th' : 'td'}
+      className={cn(
+        'relative h-full overflow-visible border-none bg-background p-0',
+        element.background ? 'bg-(--cellBackground)' : 'bg-background',
+        isHeader && 'text-left *:m-0',
+        'before:size-full',
+        'data-[table-cell-selected=true]:before:z-10',
+        'data-[table-cell-selected=true]:before:bg-primary/5',
+        "before:absolute before:box-border before:select-none before:content-['']",
+        borders.bottom?.size && 'before:border-b before:border-b-border',
+        borders.right?.size && 'before:border-r before:border-r-border',
+        borders.left?.size && 'before:border-l before:border-l-border',
+        borders.top?.size && 'before:border-t before:border-t-border',
+      )}
+      style={
+        {
+          '--cellBackground': element.background,
+          maxWidth: width,
+          minWidth: width,
+        } as React.CSSProperties
+      }
+      attributes={{
+        ...props.attributes,
+        colSpan,
+        'data-table-cell-id': element.id,
+        rowSpan,
+      }}
+    >
+      <div
+        className="relative z-20 box-border h-full px-3 py-2"
+        style={rowSpan === 1 ? { minHeight: 'var(--tableRowMinHeight, 0px)' } : undefined}
+      >
+        {props.children}
+      </div>
+
+      {!readOnly && !isSelectionAreaVisible && (
+        <TableCellResizeControls colIndex={colIndex} rowIndex={rowIndex} />
+      )}
+
+      {isSelectingRow && <div className={blockSelectionVariants()} contentEditable={false} />}
+    </PlateElement>
+  );
+}
+
+export function TableCellHeaderElement(props: React.ComponentProps<typeof TableCellElement>) {
+  return <TableCellElement {...props} isHeader />;
+}
+
+const TableCellResizeControls = React.memo(function TableCellResizeControls({
+  colIndex,
+  rowIndex,
+}: {
+  colIndex: number;
+  rowIndex: number;
+}) {
+  const { clearResizePreview, disableMarginLeft, setResizePreview, startResize } =
+    useTableResizeContext();
+  const rightHandleKey = `right:${rowIndex}:${colIndex}`;
+  const bottomHandleKey = `bottom:${rowIndex}:${colIndex}`;
+  const leftHandleKey = `left:${rowIndex}:${colIndex}`;
+  const isLeftHandle = colIndex === 0 && !disableMarginLeft;
+
+  return (
+    <div
+      className="group/resize pointer-events-none absolute inset-0 z-30 select-none"
+      contentEditable={false}
+      suppressContentEditableWarning={true}
+    >
+      <div
+        className="-top-2 -right-1 pointer-events-auto absolute z-40 h-[calc(100%_+_8px)] w-2 cursor-col-resize touch-none"
+        onPointerEnter={(event) => {
+          setResizePreview(event, {
+            colIndex,
+            direction: 'right',
+            handleKey: rightHandleKey,
+            rowIndex,
+          });
+        }}
+        onPointerLeave={() => {
+          clearResizePreview(rightHandleKey);
+        }}
+        onPointerDown={(event) => {
+          startResize(event, {
+            colIndex,
+            direction: 'right',
+            handleKey: rightHandleKey,
+            rowIndex,
+          });
+        }}
+      />
+      <div
+        className="-bottom-1 pointer-events-auto absolute left-0 z-40 h-2 w-full cursor-row-resize touch-none"
+        onPointerEnter={(event) => {
+          setResizePreview(event, {
+            colIndex,
+            direction: 'bottom',
+            handleKey: bottomHandleKey,
+            rowIndex,
+          });
+        }}
+        onPointerLeave={() => {
+          clearResizePreview(bottomHandleKey);
+        }}
+        onPointerDown={(event) => {
+          startResize(event, {
+            colIndex,
+            direction: 'bottom',
+            handleKey: bottomHandleKey,
+            rowIndex,
+          });
+        }}
+      />
+      {isLeftHandle && (
+        <div
+          className="-left-1 pointer-events-auto absolute top-0 z-40 h-full w-2 cursor-col-resize touch-none"
+          onPointerEnter={(event) => {
+            setResizePreview(event, {
+              colIndex,
+              direction: 'left',
+              handleKey: leftHandleKey,
+              rowIndex,
+            });
+          }}
+          onPointerLeave={() => {
+            clearResizePreview(leftHandleKey);
+          }}
+          onPointerDown={(event) => {
+            startResize(event, {
+              colIndex,
+              direction: 'left',
+              handleKey: leftHandleKey,
+              rowIndex,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+});