@thangph2146/lexical-editor 0.0.4 → 0.0.6

package/src/plugins/table-column-resizer-plugin.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState, useMemo, useLayoutEffect, useCallback } from "react"
+import { createPortal } from "react-dom"
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
 import { useLexicalEditable } from "@lexical/react/useLexicalEditable"
 import {
@@ -18,10 +19,16 @@ type DragState = {
   columnIndex: number
   startX: number
   startWidth: number
-  initialColWidths: number[]
+  initialColWidths: readonly number[]
 }
 
-const EDGE_HITBOX_PX = 12
+type HoverState = {
+  cellKey: NodeKey
+  tableKey: NodeKey
+  edge: ResizeEdge
+}
+
+const EDGE_HITBOX_PX = 8
 
 /** Độ rộng tối thiểu khi kéo cột (px) — nhỏ hơn để có thể thu hẹp cột như "TT" */
 const MIN_COLUMN_WIDTH_PX = 15
@@ -46,7 +53,7 @@ function getResizeEdge(clientX: number, rect: DOMRect): ResizeEdge | null {
   return nearLeft ? "left" : "right"
 }
 
-function getColumnIndexFromTableMap(
+function $getColumnIndexFromTableMap(
   tableNode: TableNode,
   tableCellNode: ReturnType<typeof $getNearestNodeFromDOMNode>
 ): number | null {
@@ -68,242 +75,374 @@ function getColumnIndexFromTableMap(
   return null
 }
 
-export function TableColumnResizerPlugin() {
+export function TableColumnResizerPlugin({
+  anchorElem = document.body,
+}: {
+  anchorElem?: HTMLElement
+}) {
   const [editor] = useLexicalComposerContext()
   const isEditable = useLexicalEditable()
   const dragRef = useRef<DragState | null>(null)
-
-  useEffect(() => {
-    if (!isEditable) return
-
-    const rootElement = editor.getRootElement()
-    if (!rootElement) return
-
-    const setCursor = (cursor: string) => {
-      rootElement.style.cursor = cursor
-    }
-
-    const clearCursor = () => {
-      setCursor("")
+  const [hoverState, setHoverState] = useState<HoverState | null>(null)
+  const resizerRef = useRef<HTMLDivElement | null>(null)
+
+  const onPointerDownImpl = useCallback((
+    event: PointerEvent,
+    cell: HTMLTableCellElement,
+    edge: ResizeEdge
+  ) => {
+    if (event.button !== 0) return
+
+    event.preventDefault()
+
+    // Capture pointer to handle dragging outside the resizer handle
+    const target = event.target as HTMLElement
+    if (target) {
+      target.setPointerCapture(event.pointerId)
     }
 
-    const onPointerMove = (event: PointerEvent) => {
-      if (dragRef.current) return
-
-      const cell = getCellTarget(event.target)
-      if (!cell) {
-        clearCursor()
-        return
-      }
-
-      const edge = getResizeEdge(event.clientX, cell.getBoundingClientRect())
-      
-      // Disable dragging left edge of the first column (visual check)
-      if (edge === "left") {
-        const table = cell.closest("table")
-        if (table) {
-          const tableRect = table.getBoundingClientRect()
-          const cellRect = cell.getBoundingClientRect()
-          // If cell left edge is close to table left edge (within tolerance)
-          if (Math.abs(cellRect.left - tableRect.left) < 5) {
-            clearCursor()
-            return
-          }
-        }
-      }
-
-      setCursor(edge ? "col-resize" : "")
-    }
-
-    const onPointerDown = (event: PointerEvent) => {
-      if (event.button !== 0) return
-
-      const cell = getCellTarget(event.target)
-      if (!cell) return
+    let nextDragState: DragState | null = null
 
-      const edge = getResizeEdge(event.clientX, cell.getBoundingClientRect())
-      if (!edge) return
+    editor.update(() => {
+      const tableCellNode = $getNearestNodeFromDOMNode(cell)
+      if (!$isTableCellNode(tableCellNode)) return
 
-      event.preventDefault()
+      const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode)
+      const tableElement = editor.getElementByKey(tableNode.getKey())
+      if (!tableElement) return
 
-      let nextDragState: DragState | null = null
+      const tableMap = $computeTableMapSkipCellCheck(tableNode, null, null)[0]
+      const colCount = tableMap[0]?.length ?? 0
+      const columnIndexFromMap = $getColumnIndexFromTableMap(tableNode, tableCellNode)
 
-      editor.read(() => {
-        const tableCellNode = $getNearestNodeFromDOMNode(cell)
-        if (!$isTableCellNode(tableCellNode)) return
+      if (columnIndexFromMap === null) return
 
-        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode)
-        const columnIndexFromMap = getColumnIndexFromTableMap(tableNode, tableCellNode)
-        if (columnIndexFromMap == null) return
+      const colSpan = tableCellNode.getColSpan()
+      const resizeColumnIndex =
+        edge === "left" ? columnIndexFromMap - 1 : columnIndexFromMap + colSpan - 1
 
-        // Disable resizing left edge of the first column
-        if (edge === "left" && columnIndexFromMap === 0) return
+      if (resizeColumnIndex < 0 || resizeColumnIndex >= colCount - 1) return
 
-        const colSpan = tableCellNode.getColSpan()
-        const resizeColumnIndex =
-          edge === "left" ? columnIndexFromMap - 1 : columnIndexFromMap + colSpan - 1
+      let currentWidths = tableNode.getColWidths()
 
-        let currentWidths = tableNode.getColWidths()
+      if (!currentWidths) {
+        // If no widths are stored in the node, measure the actual table
+        const columns = tableElement.querySelectorAll("col")
+        const widths: number[] = []
         
-        if (!currentWidths) {
-          const tableElement = editor.getElementByKey(tableNode.getKey())
-          if (tableElement instanceof HTMLTableElement) {
-            // Attempt to reconstruct widths from TableMap (handles merged cells better)
-            const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null)
-            const colCount = tableNode.getColumnCount()
-            const widths: (number | undefined)[] = new Array(colCount).fill(undefined)
-            
-            for (let r = 0; r < tableMap.length; r++) {
-              const row = tableMap[r]
-              if (!row) continue
-              for (let c = 0; c < row.length; c++) {
-                if (widths[c] !== undefined) continue
-                
-                const tableMapCell = row[c]
-                if (!tableMapCell) continue
-
-                const { cell } = tableMapCell
-                // Only measure if this cell spans 1 column (accurate width)
-                if (cell.getColSpan() === 1) {
-                  const cellElem = editor.getElementByKey(cell.getKey())
-                  if (cellElem) {
-                    widths[c] = Math.round(cellElem.getBoundingClientRect().width)
-                  }
-                }
-              }
-              // If all widths found, break early
-              if (widths.every(w => w !== undefined)) break
+        if (columns.length === colCount) {
+          columns.forEach((col) => {
+            const styleWidth = (col as HTMLElement).style.width
+            if (styleWidth && styleWidth.endsWith("px")) {
+              widths.push(parseFloat(styleWidth))
+            } else {
+              const rect = col.getBoundingClientRect()
+              widths.push(rect.width || 0)
             }
+          })
+        }
 
-            // Fallback: If still missing widths, try row 0 or distribute evenly
-             if (widths.some(w => w === undefined)) {
-                 if (tableElement.rows.length > 0) {
-                   const row = tableElement.rows[0]
-                   if (row && row.cells.length === colCount) {
-                      // Row 0 is perfect match, use it for missing values or override?
-                      // Prefer row 0 if it's clean
-                      const rowWidths = Array.from(row.cells).map(c => Math.round(c.getBoundingClientRect().width))
-                      for (let i = 0; i < colCount; i++) {
-                          if (widths[i] === undefined) widths[i] = rowWidths[i]
-                      }
-                   }
-                 }
-              }
-             
-             // Final fallback: distribute evenly for any remaining undefined
-             if (widths.some(w => w === undefined)) {
-                const tableWidth = tableElement.getBoundingClientRect().width
-                const defaultWidth = tableWidth / colCount
-                for (let i = 0; i < colCount; i++) {
-                     if (widths[i] === undefined) widths[i] = defaultWidth
-                }
-             }
-
-             currentWidths = widths as number[]
+        // If columns don't match or are missing, try to measure cells in the first row
+        if (widths.length !== colCount) {
+          const firstRow = tableElement.querySelector("tr")
+          if (firstRow) {
+            const cells = firstRow.querySelectorAll("th, td")
+            // This is only accurate if there are no colSpans in the first row
+            if (cells.length === colCount) {
+              cells.forEach((cell) => {
+                widths.push(cell.getBoundingClientRect().width)
+              })
+            }
           }
         }
 
-        if (!currentWidths) {
-           currentWidths = Array(tableNode.getColumnCount()).fill(MIN_COLUMN_WIDTH_PX)
+        // Fallback to average width if still missing
+        if (widths.length !== colCount) {
+          const tableRect = tableElement.getBoundingClientRect()
+          const avgWidth = tableRect.width / (colCount || 1)
+          for (let i = 0; i < colCount; i++) {
+            widths.push(avgWidth)
+          }
         }
+        
+        currentWidths = widths
+      }
 
-        const startWidth =
-          currentWidths[resizeColumnIndex] ??
-          Math.max(Math.round(cell.getBoundingClientRect().width), MIN_COLUMN_WIDTH_PX)
+      if (currentWidths[resizeColumnIndex] === undefined || currentWidths[resizeColumnIndex + 1] === undefined) {
+        return
+      }
 
-        nextDragState = {
-          tableKey: tableNode.getKey(),
-          columnIndex: resizeColumnIndex,
-          startX: event.clientX,
-          startWidth,
-          initialColWidths: [...currentWidths],
-        }
-      })
+      nextDragState = {
+        columnIndex: resizeColumnIndex,
+        initialColWidths: currentWidths,
+        startX: event.clientX,
+        startWidth: currentWidths[resizeColumnIndex],
+        tableKey: tableNode.getKey(),
+      }
+    })
 
-      if (!nextDragState) return
+    if (!nextDragState) return
 
-      event.preventDefault()
-      event.stopPropagation()
-      dragRef.current = nextDragState
-      setCursor("col-resize")
+    dragRef.current = nextDragState
+
+    // Prevent text selection while dragging
+    const rootElement = editor.getRootElement()
+    if (rootElement) {
+      rootElement.style.userSelect = "none"
+      rootElement.style.cursor = "col-resize"
     }
 
     const onPointerMoveDocument = (event: PointerEvent) => {
-    const drag = dragRef.current
-    if (!drag) return
+      const drag = dragRef.current
+      if (!drag) return
 
-    const { initialColWidths, startX, columnIndex } = drag
-    const deltaX = event.clientX - startX
+      event.preventDefault()
+      const deltaX = event.clientX - drag.startX
+      const { tableKey, columnIndex, initialColWidths } = drag
 
     editor.update(() => {
-      const tableNode = $getNodeByKey(drag.tableKey)
+      const tableNode = $getNodeByKey(tableKey)
       if (!(tableNode instanceof TableNode)) return
 
-      const colWidths = tableNode.getColWidths() ?? initialColWidths
+      const currentWidths = tableNode.getColWidths() || initialColWidths
+      const colCount = tableNode.getColumnCount()
       const nextColumnIndex = columnIndex + 1
-      const hasNeighbor = nextColumnIndex < initialColWidths.length
-
-      if (hasNeighbor) {
-        // Strict "Borrow" Logic:
-        // Adjust column width by borrowing from the neighbor.
-        // The total width of the two columns remains constant, ensuring the table width doesn't change.
-        const currentLeftWidth = initialColWidths[columnIndex]
-        const currentRightWidth = initialColWidths[nextColumnIndex]
+      
+      if (nextColumnIndex >= colCount) return
 
-        if (currentLeftWidth === undefined || currentRightWidth === undefined) return
+      const currentLeftWidth = initialColWidths[columnIndex]
+      const currentRightWidth = initialColWidths[nextColumnIndex]
 
-        const maxShrinkLeft = currentLeftWidth - MIN_COLUMN_WIDTH_PX
-        const maxGrowLeft = currentRightWidth - MIN_COLUMN_WIDTH_PX
+      if (currentLeftWidth === undefined || currentRightWidth === undefined) return
 
-        // Clamp deltaX to ensure neither column shrinks below MIN_COLUMN_WIDTH_PX
-        const constrainedDelta = Math.min(Math.max(deltaX, -maxShrinkLeft), maxGrowLeft)
+      const maxShrinkLeft = currentLeftWidth - MIN_COLUMN_WIDTH_PX
+      const maxGrowLeft = currentRightWidth - MIN_COLUMN_WIDTH_PX
 
-        const newLeftWidth = currentLeftWidth + constrainedDelta
-        const newRightWidth = currentRightWidth - constrainedDelta
+      // Clamp deltaX to ensure neither column shrinks below MIN_COLUMN_WIDTH_PX
+      const constrainedDelta = Math.min(Math.max(deltaX, -maxShrinkLeft), maxGrowLeft)
 
-        if (colWidths[columnIndex] === newLeftWidth && colWidths[nextColumnIndex] === newRightWidth)
-          return
+      const newLeftWidth = currentLeftWidth + constrainedDelta
+      const newRightWidth = currentRightWidth - constrainedDelta
 
-        const nextColWidths = [...colWidths]
-        nextColWidths[columnIndex] = newLeftWidth
-        nextColWidths[nextColumnIndex] = newRightWidth
-        tableNode.setColWidths(nextColWidths)
+      // Create a clean copy of widths, filling with measured values if needed
+      const nextColWidths = Array.from({ length: colCount }, (_, i) => {
+        if (i === columnIndex) return newLeftWidth
+        if (i === nextColumnIndex) return newRightWidth
+        return currentWidths[i] ?? initialColWidths[i] ?? 0
+      })
+      
+      // Use the correct method to update widths if setColWidths is not standard
+      if (typeof (tableNode as unknown as Record<string, unknown>).setColWidths === "function") {
+        ;((tableNode as unknown as Record<string, unknown>).setColWidths as (widths: number[]) => void)(nextColWidths)
       } else {
-        // Fallback for last column (or if no neighbor exists)
-        const currentWidth = initialColWidths[columnIndex]
-        if (currentWidth === undefined) return
-        
-        const newWidth = Math.max(MIN_COLUMN_WIDTH_PX, Math.round(currentWidth + deltaX))
-        
-        if (colWidths[columnIndex] === newWidth) return
-
-        const nextColWidths = [...colWidths]
-        nextColWidths[columnIndex] = newWidth
-        tableNode.setColWidths(nextColWidths)
+        // Fallback for different Lexical versions if needed
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ;(tableNode as any).__colWidths = nextColWidths
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ;(tableNode as any).__widths = nextColWidths
+        tableNode.markDirty()
       }
     })
-  }
+    }
+
+    const onPointerUpDocument = (event: PointerEvent) => {
+      const drag = dragRef.current
+      if (!drag) return
+
+      const target = event.target as HTMLElement
+      if (target && target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId)
+      }
 
-    const onPointerUpDocument = () => {
-      if (!dragRef.current) return
       dragRef.current = null
-      clearCursor()
+      const rootElement = editor.getRootElement()
+      if (rootElement) {
+        rootElement.style.userSelect = ""
+        rootElement.style.cursor = ""
+      }
+      document.removeEventListener("pointermove", onPointerMoveDocument)
+      document.removeEventListener("pointerup", onPointerUpDocument)
     }
 
-    rootElement.addEventListener("pointermove", onPointerMove)
-    rootElement.addEventListener("pointerdown", onPointerDown)
     document.addEventListener("pointermove", onPointerMoveDocument)
     document.addEventListener("pointerup", onPointerUpDocument)
+  }, [editor])
+
+  const updateResizerPosition = useCallback(() => {
+    const state = hoverState as HoverState | null
+    if (state === null || !resizerRef.current) return
+
+    const { cellKey, edge } = state
+    const cell = editor.getElementByKey(cellKey)
+    if (!cell) return
+
+    const cellRect = cell.getBoundingClientRect()
+    const anchorRect = anchorElem.getBoundingClientRect()
+
+    const resizerElem = resizerRef.current
+    
+    // Find the table element to make the resizer span the entire table height
+    const tableElement = cell.closest("table")
+    let top = cellRect.top - anchorRect.top
+    let height = cellRect.height
+
+    if (tableElement) {
+      const tableRect = tableElement.getBoundingClientRect()
+      top = tableRect.top - anchorRect.top
+      height = tableRect.height
+    }
+    
+    // Position at the edge, centered (width is 16px, so center is edge - 8)
+    const left = (edge === "left" ? cellRect.left : cellRect.right) - anchorRect.left - 8
+
+    resizerElem.style.transform = `translate(${left}px, ${top}px)`
+    resizerElem.style.height = `${height}px`
+    resizerElem.style.opacity = "1"
+  }, [editor, hoverState, anchorElem])
+
+  useLayoutEffect(() => {
+    updateResizerPosition()
+
+    // Update on window resize and scroll
+    window.addEventListener("resize", updateResizerPosition)
+    window.addEventListener("scroll", updateResizerPosition, true)
+
+    const updateListener = editor.registerUpdateListener(() => {
+      editor.read(() => {
+        const state = hoverState as HoverState | null
+        if (state !== null) {
+          const cell = editor.getElementByKey(state.cellKey)
+          if (!cell) {
+            setHoverState(null)
+          } else {
+            updateResizerPosition()
+          }
+        }
+      })
+    })
 
     return () => {
-      rootElement.removeEventListener("pointermove", onPointerMove)
-      rootElement.removeEventListener("pointerdown", onPointerDown)
-      document.removeEventListener("pointermove", onPointerMoveDocument)
-      document.removeEventListener("pointerup", onPointerUpDocument)
-      clearCursor()
-      dragRef.current = null
+      window.removeEventListener("resize", updateResizerPosition)
+      window.removeEventListener("scroll", updateResizerPosition, true)
+      updateListener()
     }
-  }, [editor, isEditable])
+  }, [editor, hoverState, updateResizerPosition])
 
-  return null
+  useEffect(() => {
+    if (!isEditable) return
+
+    const rootElement = editor.getRootElement()
+    if (!rootElement) return
+
+    const setCursor = (cursor: string) => {
+      if (rootElement) {
+        rootElement.style.cursor = cursor
+      }
+    }
+
+    const clearCursor = () => {
+      setCursor("")
+    }
+
+    const onPointerMove = (event: PointerEvent) => {
+      if (dragRef.current) return
+
+      // Do not show resizer while dragging/selecting (any button is pressed)
+      if (event.buttons !== 0) return
+
+      // If we are over the resizer, don't clear hover state
+      if (resizerRef.current && (event.target === resizerRef.current || resizerRef.current.contains(event.target as Node))) {
+        return
+      }
+
+      const cell = getCellTarget(event.target)
+      
+      let nextHoverState: HoverState | null = null
+
+      if (cell) {
+        editor.read(() => {
+          const cellNode = $getNearestNodeFromDOMNode(cell)
+          if ($isTableCellNode(cellNode)) {
+            const tableNode = $getTableNodeFromLexicalNodeOrThrow(cellNode)
+            const cellKey = cellNode.getKey()
+            const tableKey = tableNode.getKey()
+
+            const edge = getResizeEdge(event.clientX, cell.getBoundingClientRect())
+            if (edge) {
+              const colCount = tableNode.getColumnCount()
+              const colSpan = cellNode.getColSpan()
+              const columnIndexFromMap = $getColumnIndexFromTableMap(tableNode, cellNode)
+
+              if (
+                columnIndexFromMap !== null &&
+                !((edge === "left" && columnIndexFromMap === 0) ||
+                  (edge === "right" && columnIndexFromMap + colSpan === colCount))
+              ) {
+                nextHoverState = { cellKey, tableKey, edge }
+              }
+            }
+          }
+        })
+      }
+
+      if (!nextHoverState) {
+        if (hoverState !== null) {
+          clearCursor()
+          setHoverState(null)
+        }
+      } else {
+        setCursor("col-resize")
+        // @ts-expect-error hoverState might be null initially
+        if (!hoverState || hoverState.cellKey !== nextHoverState.cellKey || hoverState.edge !== nextHoverState.edge) {
+          setHoverState(nextHoverState)
+        }
+      }
+    }
+
+    anchorElem.addEventListener("pointermove", onPointerMove)
+
+    return () => {
+      anchorElem.removeEventListener("pointermove", onPointerMove)
+      clearCursor()
+    }
+  }, [editor, isEditable, hoverState, anchorElem])
+
+  const resizer = useMemo(() => {
+    const state = hoverState as HoverState | null
+    if (state === null) return null
+
+    const { cellKey, edge } = state
+
+    return createPortal(
+      <div 
+        ref={resizerRef}
+        className="editor-table-cell-resizer" 
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "16px",
+          opacity: 1,
+          willChange: "transform",
+          userSelect: "none",
+        }}
+        onPointerDown={(event) => {
+          event.stopPropagation()
+          event.preventDefault()
+          const cell = editor.getElementByKey(cellKey)
+          if (cell instanceof HTMLTableCellElement) {
+            onPointerDownImpl(event.nativeEvent, cell, edge)
+          }
+        }}
+      >
+        <div 
+          className="editor-table-cell-resize-ruler" 
+          style={{ pointerEvents: "none" }}
+        />
+      </div>,
+      anchorElem
+    )
+  }, [hoverState, anchorElem, editor, onPointerDownImpl])
+
+  return resizer
 }

package/src/plugins/toolbar/block-format/block-format-data.tsx

@@ -42,6 +42,10 @@ export const blockTypeToBlockName: Record<
     label: "Alpha List (a, b, c)",
     icon: <IconSize size="sm"><CaseSensitiveIcon /></IconSize>,
   },
+  "number-multi-level": {
+    label: "Multi-level List (1.1 / 1.1.1)",
+    icon: <IconSize size="sm"><ListOrderedIcon /></IconSize>,
+  },
   bullet: {
     label: "Bulleted List",
     icon: <IconSize size="sm"><ListIcon /></IconSize>,