@thangph2146/lexical-editor 0.0.1

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

@@ -0,0 +1,309 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable"
+import {
+  $computeTableMapSkipCellCheck,
+  $getTableNodeFromLexicalNodeOrThrow,
+  $isTableCellNode,
+  TableNode,
+} from "@lexical/table"
+import { $getNearestNodeFromDOMNode, $getNodeByKey, type NodeKey } from "lexical"
+
+type ResizeEdge = "left" | "right"
+
+type DragState = {
+  tableKey: NodeKey
+  columnIndex: number
+  startX: number
+  startWidth: number
+  initialColWidths: number[]
+}
+
+const EDGE_HITBOX_PX = 12
+
+/** Độ 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
+
+function getCellTarget(target: EventTarget | null): HTMLTableCellElement | null {
+  if (!target) return null
+  let node = target as Node
+  if (node.nodeType === Node.TEXT_NODE) {
+    node = node.parentNode as Node
+  }
+  if (!(node instanceof HTMLElement)) return null
+  const cell = node.closest("th, td")
+  return cell instanceof HTMLTableCellElement ? cell : null
+}
+
+function getResizeEdge(clientX: number, rect: DOMRect): ResizeEdge | null {
+  const nearLeft = Math.abs(clientX - rect.left) <= EDGE_HITBOX_PX
+  const nearRight = Math.abs(clientX - rect.right) <= EDGE_HITBOX_PX
+
+  if (!nearLeft && !nearRight) return null
+  if (nearLeft && nearRight) return "right"
+  return nearLeft ? "left" : "right"
+}
+
+function getColumnIndexFromTableMap(
+  tableNode: TableNode,
+  tableCellNode: ReturnType<typeof $getNearestNodeFromDOMNode>
+): number | null {
+  if (!$isTableCellNode(tableCellNode)) return null
+  const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null)
+
+  for (let row = 0; row < tableMap.length; row++) {
+    const tableMapRow = tableMap[row]
+    if (!tableMapRow) continue
+
+    for (let column = 0; column < tableMapRow.length; column++) {
+      const cell = tableMapRow[column]
+      if (cell && cell.cell === tableCellNode) {
+        return column
+      }
+    }
+  }
+
+  return null
+}
+
+export function TableColumnResizerPlugin() {
+  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 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
+
+      const edge = getResizeEdge(event.clientX, cell.getBoundingClientRect())
+      if (!edge) return
+
+      event.preventDefault()
+
+      let nextDragState: DragState | null = null
+
+      editor.read(() => {
+        const tableCellNode = $getNearestNodeFromDOMNode(cell)
+        if (!$isTableCellNode(tableCellNode)) return
+
+        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode)
+        const columnIndexFromMap = getColumnIndexFromTableMap(tableNode, tableCellNode)
+        if (columnIndexFromMap == null) return
+
+        // Disable resizing left edge of the first column
+        if (edge === "left" && columnIndexFromMap === 0) return
+
+        const colSpan = tableCellNode.getColSpan()
+        const resizeColumnIndex =
+          edge === "left" ? columnIndexFromMap - 1 : columnIndexFromMap + colSpan - 1
+
+        let currentWidths = tableNode.getColWidths()
+        
+        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
+            }
+
+            // 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 (!currentWidths) {
+           currentWidths = Array(tableNode.getColumnCount()).fill(MIN_COLUMN_WIDTH_PX)
+        }
+
+        const startWidth =
+          currentWidths[resizeColumnIndex] ??
+          Math.max(Math.round(cell.getBoundingClientRect().width), MIN_COLUMN_WIDTH_PX)
+
+        nextDragState = {
+          tableKey: tableNode.getKey(),
+          columnIndex: resizeColumnIndex,
+          startX: event.clientX,
+          startWidth,
+          initialColWidths: [...currentWidths],
+        }
+      })
+
+      if (!nextDragState) return
+
+      event.preventDefault()
+      event.stopPropagation()
+      dragRef.current = nextDragState
+      setCursor("col-resize")
+    }
+
+    const onPointerMoveDocument = (event: PointerEvent) => {
+    const drag = dragRef.current
+    if (!drag) return
+
+    const { initialColWidths, startX, columnIndex } = drag
+    const deltaX = event.clientX - startX
+
+    editor.update(() => {
+      const tableNode = $getNodeByKey(drag.tableKey)
+      if (!(tableNode instanceof TableNode)) return
+
+      const colWidths = tableNode.getColWidths() ?? initialColWidths
+      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 (currentLeftWidth === undefined || currentRightWidth === undefined) return
+
+        const maxShrinkLeft = currentLeftWidth - MIN_COLUMN_WIDTH_PX
+        const maxGrowLeft = currentRightWidth - MIN_COLUMN_WIDTH_PX
+
+        // Clamp deltaX to ensure neither column shrinks below MIN_COLUMN_WIDTH_PX
+        const constrainedDelta = Math.min(Math.max(deltaX, -maxShrinkLeft), maxGrowLeft)
+
+        const newLeftWidth = currentLeftWidth + constrainedDelta
+        const newRightWidth = currentRightWidth - constrainedDelta
+
+        if (colWidths[columnIndex] === newLeftWidth && colWidths[nextColumnIndex] === newRightWidth)
+          return
+
+        const nextColWidths = [...colWidths]
+        nextColWidths[columnIndex] = newLeftWidth
+        nextColWidths[nextColumnIndex] = newRightWidth
+        tableNode.setColWidths(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)
+      }
+    })
+  }
+
+    const onPointerUpDocument = () => {
+      if (!dragRef.current) return
+      dragRef.current = null
+      clearCursor()
+    }
+
+    rootElement.addEventListener("pointermove", onPointerMove)
+    rootElement.addEventListener("pointerdown", onPointerDown)
+    document.addEventListener("pointermove", onPointerMoveDocument)
+    document.addEventListener("pointerup", onPointerUpDocument)
+
+    return () => {
+      rootElement.removeEventListener("pointermove", onPointerMove)
+      rootElement.removeEventListener("pointerdown", onPointerDown)
+      document.removeEventListener("pointermove", onPointerMoveDocument)
+      document.removeEventListener("pointerup", onPointerUpDocument)
+      clearCursor()
+      dragRef.current = null
+    }
+  }, [editor, isEditable])
+
+  return null
+}

package/src/plugins/table-plugin.tsx

@@ -0,0 +1,299 @@
+"use client"
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import {
+  createContext,
+  JSX,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import * as React from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import {
+  $createTableNodeWithDimensions,
+  TableNode,
+} from "@lexical/table"
+import {
+  $insertNodes,
+  $getSelection,
+  $getRoot,
+  $isRangeSelection,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  EditorThemeClasses,
+  Klass,
+  LexicalCommand,
+  LexicalEditor,
+  LexicalNode,
+} from "lexical"
+
+import { invariant } from "../shared/invariant"
+import { Button } from "../ui/button"
+import { DialogFooter } from "../ui/dialog"
+import { Flex } from "../ui/flex"
+import { Input } from "../ui/input"
+import { Label } from "../ui/label"
+
+export type InsertTableCommandPayload = Readonly<{
+  columns: string
+  rows: string
+  includeHeaders?: boolean
+}>
+
+export type CellContextShape = {
+  cellEditorConfig: null | CellEditorConfig
+  cellEditorPlugins: null | JSX.Element | Array<JSX.Element>
+  set: (
+    cellEditorConfig: null | CellEditorConfig,
+    cellEditorPlugins: null | JSX.Element | Array<JSX.Element>
+  ) => void
+}
+
+export type CellEditorConfig = Readonly<{
+  namespace: string
+  nodes?: ReadonlyArray<Klass<LexicalNode>>
+  onError: (error: Error, editor: LexicalEditor) => void
+  readOnly?: boolean
+  theme?: EditorThemeClasses
+}>
+
+export const INSERT_NEW_TABLE_COMMAND: LexicalCommand<InsertTableCommandPayload> =
+  createCommand("INSERT_NEW_TABLE_COMMAND")
+
+/** Chèn bảng vào editor (dùng trong dialog hoặc command handler) */
+function insertTableIntoEditor(
+  editor: LexicalEditor,
+  payload: InsertTableCommandPayload
+): void {
+  const rows = Number(payload.rows) || 3
+  const cols = Number(payload.columns) || 3
+  const includeHeaders = payload.includeHeaders ?? false
+  editor.update(
+    () => {
+      const root = $getRoot()
+      const tableNode = $createTableNodeWithDimensions(rows, cols, includeHeaders)
+      try {
+        const selection = $getSelection()
+        let targetBlock: ReturnType<typeof root.getFirstChild> = null
+        if (selection !== null && $isRangeSelection(selection)) {
+          try {
+            targetBlock = selection.anchor.getNode().getTopLevelElementOrThrow()
+          } catch {
+            targetBlock = root.getLastChild()
+          }
+        } else {
+          targetBlock = root.getLastChild()
+        }
+        if (targetBlock) {
+          targetBlock.insertAfter(tableNode)
+        } else {
+          root.append(tableNode)
+        }
+      } catch {
+        root.selectEnd()
+        $insertNodes([tableNode])
+      }
+    },
+    { tag: "insert-table" }
+  )
+}
+
+export const CellContext = createContext<CellContextShape>({
+  cellEditorConfig: null,
+  cellEditorPlugins: null,
+  set: () => {
+    // Empty
+  },
+})
+
+export function TableContext({ children }: { children: JSX.Element }) {
+  const [contextValue, setContextValue] = useState<{
+    cellEditorConfig: null | CellEditorConfig
+    cellEditorPlugins: null | JSX.Element | Array<JSX.Element>
+  }>({
+    cellEditorConfig: null,
+    cellEditorPlugins: null,
+  })
+  return (
+    <CellContext.Provider
+      value={useMemo(
+        () => ({
+          cellEditorConfig: contextValue.cellEditorConfig,
+          cellEditorPlugins: contextValue.cellEditorPlugins,
+          set: (cellEditorConfig, cellEditorPlugins) => {
+            setContextValue({ cellEditorConfig, cellEditorPlugins })
+          },
+        }),
+        [contextValue.cellEditorConfig, contextValue.cellEditorPlugins]
+      )}
+    >
+      {children}
+    </CellContext.Provider>
+  )
+}
+
+export function InsertTableDialog({
+  activeEditor,
+  onClose,
+}: {
+  activeEditor: LexicalEditor
+  onClose: () => void
+}): JSX.Element {
+  const [rows, setRows] = useState("5")
+  const [columns, setColumns] = useState("5")
+  const [includeHeaders, setIncludeHeaders] = useState(true)
+
+  // Cho phép tùy chỉnh số cột/dòng; giới hạn 1–100 cột, 1–500 dòng
+  const isDisabled = useMemo(() => {
+    const row = Number(rows)
+    const column = Number(columns)
+    return !(row && row > 0 && row <= 500 && column && column > 0 && column <= 100)
+  }, [rows, columns])
+
+  const onClick = () => {
+    const payload = { columns, rows, includeHeaders }
+    onClose()
+    const rootEl = activeEditor.getRootElement()
+    rootEl?.focus({ preventScroll: false })
+    // Chèn bảng trực tiếp bằng editor.update (không qua command) để luôn hoạt động
+    setTimeout(() => {
+      insertTableIntoEditor(activeEditor, payload)
+    }, 150)
+  }
+
+  return (
+    <div className="editor-table-dialog">
+      <Flex direction="column" gap={4}>
+        <Flex gap={4}>
+          <div className="editor-table-dialog__group editor-flex-1">
+            <Label htmlFor="rows" className="editor-mb-2">
+              Số dòng
+            </Label>
+            <Input
+              id="rows"
+              placeholder="Ví dụ: 5"
+              onChange={(e) => setRows(e.target.value)}
+              value={rows}
+              data-test-id="table-modal-rows"
+              type="number"
+              min={1}
+              max={500}
+            />
+          </div>
+          <div className="editor-table-dialog__group editor-flex-1">
+            <Label htmlFor="columns" className="editor-mb-2">
+              Số cột
+            </Label>
+            <Input
+              id="columns"
+              placeholder="Ví dụ: 5"
+              onChange={(e) => setColumns(e.target.value)}
+              value={columns}
+              data-test-id="table-modal-columns"
+              type="number"
+              min={1}
+              max={100}
+            />
+          </div>
+        </Flex>
+
+        <Flex
+            align="center"
+            gap={2}
+            className="editor-table-dialog__checkbox-group"
+          >
+            <input
+              id="include-headers"
+              type="checkbox"
+              checked={includeHeaders}
+              onChange={(e) => setIncludeHeaders(e.target.checked)}
+              className="editor-checkbox"
+            />
+            <Label htmlFor="include-headers" className="editor-label--normal">
+              Dòng đầu làm hàng tiêu đề
+            </Label>
+          </Flex>
+
+          <div className="editor-text-xs-muted">
+            Sau khi chèn, có thể gộp ô (chuột phải) để tạo tiêu đề phức tạp.
+          </div>
+
+          <DialogFooter data-test-id="table-modal-confirm-insert" className="editor-px-0 editor-mt-2">
+            <Button
+              disabled={isDisabled}
+              onClick={onClick}
+              className="editor-w-full"
+            >
+              Chèn bảng
+            </Button>
+          </DialogFooter>
+        </Flex>
+    </div>
+  )
+}
+
+export function TablePlugin({
+  cellEditorConfig,
+  children,
+}: {
+  cellEditorConfig: CellEditorConfig
+  children: JSX.Element | Array<JSX.Element>
+}): JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+  const cellContext = useContext(CellContext)
+
+  useEffect(() => {
+    if (!editor.hasNodes([TableNode])) {
+      invariant(false, "TablePlugin: TableNode is not registered on editor")
+    }
+
+    cellContext.set(cellEditorConfig, children)
+
+    return editor.registerCommand<InsertTableCommandPayload>(
+      INSERT_NEW_TABLE_COMMAND,
+      ({ columns, rows, includeHeaders }) => {
+        const tableNode = $createTableNodeWithDimensions(
+          Number(rows),
+          Number(columns),
+          includeHeaders
+        )
+        $insertNodes([tableNode])
+        return true
+      },
+      COMMAND_PRIORITY_EDITOR
+    )
+  }, [cellContext, cellEditorConfig, children, editor])
+
+  return null
+}
+
+/**
+ * Plugin chỉ đăng ký INSERT_NEW_TABLE_COMMAND để Insert Table tạo đúng node bảng.
+ * Dùng thay cho TablePlugin đầy đủ khi không cần cellEditorConfig.
+ */
+export function InsertTableCommandPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    if (!editor.hasNodes([TableNode])) return
+
+    return editor.registerCommand<InsertTableCommandPayload>(
+      INSERT_NEW_TABLE_COMMAND,
+      (payload) => {
+        insertTableIntoEditor(editor, payload)
+        return true
+      },
+      COMMAND_PRIORITY_EDITOR
+    )
+  }, [editor])
+
+  return null
+}

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

@@ -0,0 +1,69 @@
+import {
+  CodeIcon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  ListIcon,
+  ListOrderedIcon,
+  ListTodoIcon,
+  QuoteIcon,
+  TextIcon,
+  ListMinusIcon,
+  ListPlusIcon,
+  CaseSensitiveIcon,
+} from "lucide-react"
+import { IconSize } from "../../../ui/typography"
+
+export const blockTypeToBlockName: Record<
+  string,
+  { label: string; icon: React.ReactNode }
+> = {
+  paragraph: {
+    label: "Paragraph",
+    icon: <IconSize size="sm"><TextIcon /></IconSize>,
+  },
+  h1: {
+    label: "Heading 1",
+    icon: <IconSize size="sm"><Heading1Icon /></IconSize>,
+  },
+  h2: {
+    label: "Heading 2",
+    icon: <IconSize size="sm"><Heading2Icon /></IconSize>,
+  },
+  h3: {
+    label: "Heading 3",
+    icon: <IconSize size="sm"><Heading3Icon /></IconSize>,
+  },
+  number: {
+    label: "Numbered List",
+    icon: <IconSize size="sm"><ListOrderedIcon /></IconSize>,
+  },
+  "number-alpha": {
+    label: "Alpha List (a, b, c)",
+    icon: <IconSize size="sm"><CaseSensitiveIcon /></IconSize>,
+  },
+  bullet: {
+    label: "Bulleted List",
+    icon: <IconSize size="sm"><ListIcon /></IconSize>,
+  },
+  "bullet-dash": {
+    label: "Dash List (-)",
+    icon: <IconSize size="sm"><ListMinusIcon /></IconSize>,
+  },
+  "bullet-plus": {
+    label: "Plus List (+)",
+    icon: <IconSize size="sm"><ListPlusIcon /></IconSize>,
+  },
+  check: {
+    label: "Check List",
+    icon: <IconSize size="sm"><ListTodoIcon /></IconSize>,
+  },
+  code: {
+    label: "Code Block",
+    icon: <IconSize size="sm"><CodeIcon /></IconSize>,
+  },
+  quote: {
+    label: "Quote",
+    icon: <IconSize size="sm"><QuoteIcon /></IconSize>,
+  },
+}