copy and paste feature. onSelectedCell fcn provides the index to save…

… cell data into jotai

src/assets/icons/Paste.tsx

@@ -0,0 +1,10 @@
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+import { mdiContentPaste } from "@mdi/js";
+
+export default function Paste(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d={mdiContentPaste} />
+    </SvgIcon>
+  );
+}

src/assets/icons/PasteFromClipboard.tsx

@@ -0,0 +1,10 @@
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+import { mdiClipboardArrowDownOutline } from "@mdi/js";
+
+export default function PasteFromClipboard(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d={mdiClipboardArrowDownOutline} />
+    </SvgIcon>
+  );
+}

src/components/SideDrawer/index.tsx

@@ -34,8 +34,8 @@ export default function SideDrawer() {
 
   const [cell, setCell] = useState<SelectedCell>(null);
   const [open, setOpen] = useState(false);
-  if (sideDrawerRef) sideDrawerRef.current = { cell, setCell, open, setOpen };
 
+  if (sideDrawerRef) sideDrawerRef.current = { cell, setCell, open, setOpen };
   const handleNavigate = (direction: "up" | "down") => () => {
     if (!tableState?.rows) return;
 

src/components/Table/CellMenu/index.tsx

@@ -1,44 +1,87 @@
 import React from "react";
 import { PopoverProps } from "@mui/material";
 import CopyCells from "@src/assets/icons/CopyCells";
+import Paste from "@src/assets/icons/Paste";
 import { useProjectContext } from "@src/contexts/ProjectContext";
 import { MenuContents } from "./MenuContent";
+import _find from "lodash/find";
+import { atom, useAtom } from "jotai";
+import PasteFromClipboard from "@src/assets/icons/PasteFromClipboard";
+
+export const cellMenuDataAtom = atom("");
+
+export type SelectedCell = {
+  rowIndex: number;
+  colIndex: number;
+};
 
 export type CellMenuRef = {
+  selectedCell: SelectedCell;
+  setSelectedCell: React.Dispatch<React.SetStateAction<SelectedCell | null>>;
   anchorEl: HTMLElement | null;
   setAnchorEl: React.Dispatch<
     React.SetStateAction<PopoverProps["anchorEl"] | null>
   >;
 };
 
 export default function CellMenu() {
-  const { cellMenuRef }: any = useProjectContext();
+  const { cellMenuRef, tableState, updateCell }: any = useProjectContext();
   const [anchorEl, setAnchorEl] = React.useState<any | null>(null);
+  const [selectedCell, setSelectedCell] = React.useState<any | null>();
+  const [cellMenuData, setCellMenuData] = useAtom(cellMenuDataAtom);
   const open = Boolean(anchorEl);
 
   if (cellMenuRef)
     cellMenuRef.current = {
       anchorEl,
       setAnchorEl,
+      selectedCell,
+      setSelectedCell,
     } as {};
 
   const handleClose = () => setAnchorEl(null);
   const handleCopy = () => {
-    const selected: any = anchorEl?.innerHTML;
-    const copy = navigator.clipboard.writeText(selected);
-    const onSuccess = () => {
-      console.log("Copied");
-      var promise = navigator.clipboard.readText();
-      promise.then((text) => console.log(text));
-    };
+    const cols = _find(tableState.columns, { index: selectedCell.colIndex });
+    const rows = tableState.rows[selectedCell.rowIndex];
+    const cell = rows[cols.key];
+    const formatData = typeof cell === "object" ? JSON.stringify(cell) : cell;
+    setCellMenuData(formatData);
     const onFail = () => console.log("Fail to copy");
+    const onSuccess = () => console.log;
 
+    const copy = navigator.clipboard.writeText(formatData);
     copy.then(onSuccess, onFail);
+
     handleClose();
   };
+  const handlePaste = () => {
+    const targetCol = _find(tableState.columns, {
+      index: selectedCell.colIndex,
+    });
+    const targetRow = tableState.rows[selectedCell.rowIndex];
+    if (cellMenuData) updateCell(targetRow.ref, targetCol.key, cellMenuData);
+    handleClose();
+  };
+
+  const handlePasteFromClipboard = () => {
+    const paste = navigator.clipboard.readText();
+    const targetCol = _find(tableState.columns, {
+      index: selectedCell.colIndex,
+    });
+    const targetRow = tableState.rows[selectedCell.rowIndex];
+    paste.then((clipText) =>
+      updateCell(targetRow.ref, targetCol.key, clipText)
+    );
+  };
 
   const cellMenuAction = [
-    { label: "Copy", icon: <CopyCells />, color: "", onClick: handleCopy },
+    { label: "Copy", icon: <CopyCells />, onClick: handleCopy },
+    { label: "Paste", icon: <Paste />, onClick: handlePaste },
+    {
+      label: "Paste from Clipboard",
+      icon: <PasteFromClipboard />,
+      onClick: handlePasteFromClipboard,
+    },
   ];
 
   if (!cellMenuRef.current || !open) return <></>;

src/components/Table/TableRow.tsx

@@ -1,5 +1,5 @@
 import { useProjectContext } from "@src/contexts/ProjectContext";
-import { Fragment, useEffect } from "react";
+import { Fragment } from "react";
 import { Row, RowRendererProps } from "react-data-grid";
 
 import OutOfOrderIndicator from "./OutOfOrderIndicator";

src/components/Table/index.tsx

@@ -44,8 +44,14 @@ const rowClass = (row: any) => (row._rowy_outOfOrder ? "out-of-order" : "");
 //const SelectColumn = { ..._SelectColumn, width: 42, maxWidth: 42 };
 
 export default function Table() {
-  const { tableState, tableActions, dataGridRef, sideDrawerRef, updateCell } =
-    useProjectContext();
+  const {
+    tableState,
+    tableActions,
+    dataGridRef,
+    cellMenuRef,
+    sideDrawerRef,
+    updateCell,
+  } = useProjectContext();
   const { userDoc } = useAppContext();
 
   const userDocHiddenFields =
@@ -246,6 +252,12 @@ export default function Table() {
                   });
                 }
               }}
+              onSelectedCellChange={({ rowIdx, idx }) => {
+                cellMenuRef?.current?.setSelectedCell({
+                  rowIndex: rowIdx,
+                  colIndex: idx,
+                });
+              }}
             />
           </DndProvider>
         ) : (