Border All

4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:Ta313,'use client'; import * as React from 'react'; import { useDraggable, useDropLine } from '@platejs/dnd'; import { BlockSelectionPlugin, useBlockSelected, } from '@platejs/selection/react'; import { resizeLengthClampStatic } from '@platejs/resizable'; import { getTableColumnCount, setCellBackground, setTableColSize, setTableMarginLeft, setTableRowSize, } from '@platejs/table'; import { TablePlugin, TableProvider, roundCellSizeToStep, useCellIndices, useOverrideColSize, useOverrideMarginLeft, useOverrideRowSize, useTableCellBorders, useTableBordersDropdownMenuContentState, useTableColSizes, useTableElement, useTableMergeState, useTableSelectionDom, useTableValue, } from '@platejs/table/react'; import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, CombineIcon, EraserIcon, Grid2X2Icon, GripVertical, PaintBucketIcon, SquareSplitHorizontalIcon, Trash2Icon, XIcon, } from 'lucide-react'; import { type TElement, type TTableCellElement, type TTableElement, type TTableRowElement, KEYS, PathApi, } from 'platejs'; import { type PlateElementProps, PlateElement, useComposedRef, useEditorPlugin, useEditorRef, useEditorSelector, useElement, useFocusedLast, usePluginOption, useReadOnly, useRemoveNodeButton, useSelected, withHOC, } from 'platejs/react'; import { useElementSelector } from 'platejs/react'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Popover, PopoverAnchor, PopoverContent, } from '@/components/ui/popover'; import { cn } from '@/lib/utils'; import { blockSelectionVariants } from './block-selection'; import { ColorDropdownMenuItems, DEFAULT_COLORS, } from './font-color-toolbar-button'; import { BorderAllIcon, BorderBottomIcon, BorderLeftIcon, BorderNoneIcon, BorderRightIcon, BorderTopIcon, } from './table-icons'; import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarMenuGroup, } from './toolbar'; 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, options: TableResizeStartOptions ) => void; startResize: ( event: React.PointerEvent, options: TableResizeStartOptions ) => void; }; const TABLE_CONTROL_COLUMN_WIDTH = 8; const TABLE_DEFAULT_COLUMN_WIDTH = 120; const TABLE_DEFERRED_COLUMN_RESIZE_CELL_COUNT = 1200; const TABLE_MULTI_SELECTION_TOOLBAR_DELAY_MS = 150; const TableResizeContext = React.createContext( 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; hoverIndicatorRef: React.RefObject; marginLeft: number; controlColumnWidth: number; tablePath: number[]; tableRef: React.RefObject; wrapperRef: React.RefObject; }) { 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(null); const activeRowElementRef = React.useRef(null); const cleanupListenersRef = React.useRef<(() => void) | null>(null); const marginLeftRef = React.useRef(marginLeft); const dragStateRef = React.useRef(null); const frozenRowIndicesRef = React.useRef(null); const previewHandleKeyRef = React.useRef(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 & { event: React.PointerEvent; }) => { 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, 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 - 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, { 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) { 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(null); const hoverIndicatorRef = React.useRef(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(null); const wrapperRef = React.useRef(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); const content = (

{resolvedColSizes.length > 0 && ( {hasControls && ( )} {resolvedColSizes.map((colSize, index) => ( ))} )} {children}

{isSelectingTable && (

)}

); if (readOnly) { return content; } return {content}; } ); function TableFloatingToolbar({ children, ...props }: React.ComponentProps) { const selectedCellCount = useEditorSelector( (editor) => editor.getApi(TablePlugin).table.getSelectedCellIds()?.length ?? 0, [] ); const selected = useSelected(); const isFocusedLast = useFocusedLast(); const [isExpandedSelectionToolbarReady, setIsExpandedSelectionToolbarReady] = React.useState(false); // `getSelectedCellIds` only reports cells once a range spans more than one // cell, so a count of zero means the selection (a caret or an expanded // range) is confined to a single cell. Gating on it instead of // `editor.api.isCollapsed()` keeps the row/column controls available while a // cell's content is fully selected (e.g. select-all inside a cell), not just // while the caret is collapsed in it. const isSingleCellToolbarOpen = isFocusedLast && selected && selectedCellCount === 0; const isExpandedSelectionPending = isFocusedLast && selectedCellCount > 1; React.useEffect(() => { if (!isExpandedSelectionPending) { // eslint-disable-next-line react-hooks/set-state-in-effect -- Reset the delayed toolbar gate when selection is no longer expanded. setIsExpandedSelectionToolbarReady(false); return; } const timeoutId = window.setTimeout(() => { setIsExpandedSelectionToolbarReady(true); }, TABLE_MULTI_SELECTION_TOOLBAR_DELAY_MS); return () => { window.clearTimeout(timeoutId); }; }, [isExpandedSelectionPending]); const shouldRenderExpandedSelectionToolbar = isExpandedSelectionToolbarReady && isExpandedSelectionPending; const isToolbarOpen = isSingleCellToolbarOpen || shouldRenderExpandedSelectionToolbar; return ( {children} {isSingleCellToolbarOpen && ( )} {shouldRenderExpandedSelectionToolbar && ( )} ); } function ExpandedSelectionTableFloatingToolbarContent( props: React.ComponentProps ) { const { tf } = useEditorPlugin(TablePlugin); const { canMerge, canSplit } = useTableMergeState(); if (!canMerge && !canSplit) return null; return ( tf.table.merge()} onSplit={() => tf.table.split()} {...props} /> ); } function SingleCellTableFloatingToolbarContent( props: React.ComponentProps ) { const { tf } = useEditorPlugin(TablePlugin); const element = useElement(); const { props: buttonProps } = useRemoveNodeButton({ element }); const { canSplit } = useTableMergeState(); return ( { tf.remove.tableColumn(); }} onDeleteRow={() => { tf.remove.tableRow(); }} onInsertColumnAfter={() => { tf.insert.tableColumn(); }} onInsertColumnBefore={() => { tf.insert.tableColumn({ before: true }); }} onInsertRowAfter={() => { tf.insert.tableRow(); }} onInsertRowBefore={() => { tf.insert.tableRow({ before: true }); }} onSplit={() => tf.table.split()} {...props} /> ); } function TableFloatingToolbarContent({ buttonProps, canMerge = false, canSplit = false, singleCellMode = false, onDeleteColumn, onDeleteRow, onInsertColumnAfter, onInsertColumnBefore, onInsertRowAfter, onInsertRowBefore, onMerge, onSplit, ...props }: React.ComponentProps & { buttonProps?: React.ComponentProps; canMerge?: boolean; canSplit?: boolean; singleCellMode?: boolean; onDeleteColumn?: () => void; onDeleteRow?: () => void; onInsertColumnAfter?: () => void; onInsertColumnBefore?: () => void; onInsertRowAfter?: () => void; onInsertRowBefore?: () => void; onMerge?: () => void; onSplit?: () => void; }) { return ( e.preventDefault()} contentEditable={false} {...props} > {canMerge && onMerge && ( e.preventDefault()} tooltip="Merge cells" > )} {canSplit && onSplit && ( e.preventDefault()} tooltip="Split cell" > )} {singleCellMode && ( )} {singleCellMode && ( e.preventDefault()} tooltip="Insert row before" > e.preventDefault()} tooltip="Insert row after" > e.preventDefault()} tooltip="Delete row" > )} {singleCellMode && ( e.preventDefault()} tooltip="Insert column before" > e.preventDefault()} tooltip="Insert column after" > e.preventDefault()} tooltip="Delete column" > )} ); } function TableBordersDropdownMenuContent( props: React.ComponentProps ) { const editor = useEditorRef(); const { getOnSelectTableBorder, hasBottomBorder, hasLeftBorder, hasNoBorders, hasOuterBorders, hasRightBorder, hasTopBorder, } = useTableBordersDropdownMenuContentState(); return ( { e.preventDefault(); editor.tf.focus(); }} align="start" side="right" sideOffset={0} {...props} >

Top Border

Right Border

Bottom Border

Left Border

No Border

Outside Borders

); } function ColorDropdownMenu({ children, tooltip, }: { children: React.ReactNode; tooltip: string; }) { const [open, setOpen] = React.useState(false); const editor = useEditorRef(); const onUpdateColor = React.useCallback( (color: string) => { setOpen(false); setCellBackground(editor, { color, selectedCells: editor.getApi(TablePlugin).table.getSelectedCells() ?? [], }); }, [editor] ); const onClearColor = React.useCallback(() => { setOpen(false); setCellBackground(editor, { color: null, selectedCells: editor.getApi(TablePlugin).table.getSelectedCells() ?? [], }); }, [editor]); return ( {children} Clear ); } export function TableRowElement({ children, ...props }: PlateElementProps) { 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 }) => !!dragEntry && 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 ( {hasControls && ( )} {children} ); } 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}, 120px)` ); 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 }) { const editor = useEditorRef(); const element = useElement(); return ( ); } function RowDropLine() { const { dropLine } = useDropLine(); if (!dropLine) return null; return (

); } export function TableCellElement({ isHeader, ...props }: PlateElementProps & { 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 (

{props.children}

{!readOnly && !isSelectionAreaVisible && ( )} {isSelectingRow && (

)} ); } export function TableCellHeaderElement( props: React.ComponentProps ) { return ; } 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 (

{ setResizePreview(event, { colIndex, direction: 'right', handleKey: rightHandleKey, rowIndex, }); }} onPointerLeave={() => { clearResizePreview(rightHandleKey); }} onPointerDown={(event) => { startResize(event, { colIndex, direction: 'right', handleKey: rightHandleKey, rowIndex, }); }} />

{ setResizePreview(event, { colIndex, direction: 'bottom', handleKey: bottomHandleKey, rowIndex, }); }} onPointerLeave={() => { clearResizePreview(bottomHandleKey); }} onPointerDown={(event) => { startResize(event, { colIndex, direction: 'bottom', handleKey: bottomHandleKey, rowIndex, }); }} /> {isLeftHandle && (

{ setResizePreview(event, { colIndex, direction: 'left', handleKey: leftHandleKey, rowIndex, }); }} onPointerLeave={() => { clearResizePreview(leftHandleKey); }} onPointerDown={(event) => { startResize(event, { colIndex, direction: 'left', handleKey: leftHandleKey, rowIndex, }); }} /> )}

); }); TableCellResizeControls.displayName = 'TableCellResizeControls'; 52:T5035,'use client'; import type { LucideProps } from 'lucide-react'; export function BorderAllIcon(props: LucideProps) { return ( ); } export function BorderBottomIcon(props: LucideProps) { return ( ); } export function BorderLeftIcon(props: LucideProps) { return ( ); } export function BorderNoneIcon(props: LucideProps) { return ( ); } export function BorderRightIcon(props: LucideProps) { return ( ); } export function BorderTopIcon(props: LucideProps) { return ( ); } 53:Tb97,import * as React from 'react'; import type { TTableCellElement, TTableElement } from 'platejs'; import type { SlateElementProps } from 'platejs/static'; import { BaseTablePlugin } from '@platejs/table'; import { SlateElement } from 'platejs/static'; import { cn } from '@/lib/utils'; export function TableElementStatic({ children, ...props }: SlateElementProps) { const { disableMarginLeft } = props.editor.getOptions(BaseTablePlugin); const marginLeft = disableMarginLeft ? 0 : props.element.marginLeft; return (

{children}

); } export function TableRowElementStatic(props: SlateElementProps) { return ( {props.children} ); } export function TableCellElementStatic({ isHeader, ...props }: SlateElementProps & { isHeader?: boolean; }) { const { editor, element } = props; const { api } = editor.getPlugin(BaseTablePlugin); const { minHeight, width } = api.table.getCellSize({ element }); const borders = api.table.getCellBorders({ element }); return (

{props.children}

); } export function TableCellHeaderElementStatic( props: SlateElementProps ) { return ; } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@platejs/table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40platejs%2Ftable","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@platejs/table"}]]}]}],["$","li","@radix-ui/react-popover",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-popover","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-popover"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["dropdown-menu","popover","https://platejs.org/r/resize-handle.json","https://platejs.org/r/block-selection.json","https://platejs.org/r/toolbar.json","https://platejs.org/r/tailwind-scrollbar-hide.json","https://platejs.org/r/font-color-toolbar-button.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/ui/table-node.tsx","content":"$51","type":"registry:ui"},{"path":"src/registry/ui/table-icons.tsx","content":"$52","type":"registry:ui"},{"path":"src/registry/ui/table-node-static.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]