fix : pls

components/admin/extra-sheet-editor.tsx

@@ -12,7 +12,7 @@ import {
   Rows3Icon,
   Trash2Icon,
 } from "lucide-react";
-import Spreadsheet, { type ColumnIndicatorProps, type DataEditorProps, type Point, type Selection } from "react-spreadsheet";
+import Spreadsheet, { type ColumnIndicatorProps, type DataEditorProps, type Point } from "react-spreadsheet";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { DeleteConfirmationDialog } from "@/components/admin/delete-confirmation-dialog";
@@ -125,8 +125,8 @@ export function ExtraSheetEditor({
   const [removeOpen, setRemoveOpen] = useState(false);
   const [cellDialogOpen, setCellDialogOpen] = useState(false);
   const [cellDraft, setCellDraft] = useState("");
-  const [selection, setSelection] = useState<Selection | null>(null);
-  const colorSelectionRef = useRef<Point[] | null>(null);
+  const [selectedCount, setSelectedCount] = useState(1);
+  const selectedPointsRef = useRef<Point[]>([active]);
   const matrix = useMemo(() => extraSheetToMatrix(value), [value]);
   const activeColumn = value.columns[active.column];
   const activeRow = value.rows[active.row];
@@ -135,12 +135,6 @@ export function ExtraSheetEditor({
     index !== (renaming ? active.column : -1) &&
     column.label.toLocaleLowerCase() === normalizedLabel,
   );
-  const selectedPoints = useCallback(() => {
-    const range = selection?.toRange(matrix);
-    return range ? Array.from(range) : [active];
-  }, [active, matrix, selection]);
-  const selectedCount = selectedPoints().length;
-
   const openAddColumn = () => {
     setRenaming(false);
     setColumnLabel(nextExtraSheetColumnLabel(value.columns));
@@ -225,16 +219,12 @@ export function ExtraSheetEditor({
             aria-label="เลือกสีพื้นหลังเซลล์"
             className="absolute inset-0 cursor-pointer opacity-0"
             value={activeRow?.backgrounds?.[activeColumn?.id ?? ""] ?? DEFAULT_CELL_BACKGROUND}
-            onPointerDown={() => {
-              colorSelectionRef.current = selectedPoints();
-            }}
             onChange={(event) => {
               onChange(updateExtraSheetCells(
                 value,
-                colorSelectionRef.current ?? selectedPoints(),
+                selectedPointsRef.current,
                 { backgroundColor: event.target.value },
               ));
-              colorSelectionRef.current = null;
             }}
           />
         </label>
@@ -242,7 +232,7 @@ export function ExtraSheetEditor({
           type="button"
           variant="ghost"
           size="sm"
-          onClick={() => onChange(updateExtraSheetCells(value, selectedPoints(), { backgroundColor: null }))}
+          onClick={() => onChange(updateExtraSheetCells(value, selectedPointsRef.current, { backgroundColor: null }))}
         >
           ล้างสีพื้นหลัง
         </Button>
@@ -343,8 +333,18 @@ export function ExtraSheetEditor({
           ColumnIndicator={columnIndicator}
           DataViewer={LiteralDataViewer}
           DataEditor={dataEditor}
-          onActivate={setActive}
-          onSelect={setSelection}
+          onActivate={(point) => {
+            setActive(point);
+            setSelectedCount(1);
+            selectedPointsRef.current = [point];
+          }}
+          onSelect={(nextSelection) => {
+            const range = nextSelection.toRange(matrix);
+            if (range) {
+              selectedPointsRef.current = Array.from(range);
+              setSelectedCount(range.size());
+            }
+          }}
           onChange={(next) => onChange(matrixToExtraSheet(
             value,
             next as ExtraSheetMatrix,
@@ -367,7 +367,7 @@ export function ExtraSheetEditor({
           <DialogFooter showCloseButton>
             <Button type="button" onClick={() => {
               onChange(selectedCount > 1
-                ? updateExtraSheetCells(value, selectedPoints(), { value: cellDraft })
+                ? updateExtraSheetCells(value, selectedPointsRef.current, { value: cellDraft })
                 : updateExtraSheetCell(value, active.row, active.column, cellDraft));
               setCellDialogOpen(false);
             }}>บันทึกเซลล์</Button>