copy object to clipboard on node double click

src/components/Graph/index.tsx

@@ -10,12 +10,14 @@ import {
   EdgeData,
   ElkRoot,
   NodeData,
+  NodeProps,
 } from "reaflow";
 import { CustomNode } from "src/components/CustomNode";
 import { getEdgeNodes } from "src/containers/Editor/LiveEditor/helpers";
 import useConfig from "src/hooks/store/useConfig";
 import styled from "styled-components";
 import shallow from "zustand/shallow";
+import toast from "react-hot-toast";
 
 interface GraphProps {
   json: string;
@@ -80,6 +82,16 @@ export const Graph: React.FC<GraphProps & CanvasContainerProps> = ({
       setSize({ width: layout.width, height: layout.height });
   };
 
+  const handleNodeClick = (
+    e: React.MouseEvent<SVGElement>,
+    props: NodeProps
+  ) => {
+    if (e.detail === 2) {
+      toast("Object copied to clipboard!");
+      navigator.clipboard.writeText(JSON.stringify(props.properties.text));
+    }
+  };
+
   return (
     <StyledEditorWrapper isWidget={isWidget}>
       <TransformWrapper
@@ -106,7 +118,12 @@ export const Graph: React.FC<GraphProps & CanvasContainerProps> = ({
             key={layout}
             onCanvasClick={onCanvasClick}
             onLayoutChange={onLayoutChange}
-            node={CustomNode}
+            node={(props) => (
+              <CustomNode
+                onClick={(e) => handleNodeClick(e, props)}
+                {...props}
+              />
+            )}
             zoomable={false}
             readonly
             {...props}

src/containers/Modals/ShareModal/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import toast from "react-hot-toast";
 import styled from "styled-components";
-import { useCopyToClipboard } from "usehooks-ts";
 import { Modal, ModalProps } from "src/components/Modal";
 import { Button } from "src/components/Button";
 import { BiErrorAlt } from "react-icons/bi";
@@ -46,7 +45,6 @@ const StyledContainer = styled.div`
 export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const json = useConfig((state) => state.json);
   const [encodedJson, setEncodedJson] = React.useState("");
-  const [_, copy] = useCopyToClipboard();
 
   const embedText = `<iframe src="https://jsonvisio.com/widget?json=${encodedJson}" width="512" height="384" style="border: 2px solid #b9bbbe; border-radius: 6px;"></iframe>`;
   const shareURL = `https://jsonvisio.com/editor?json=${encodedJson}`;
@@ -59,7 +57,7 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   }, [json]);
 
   const handleShare = (value: string) => {
-    copy(value);
+    navigator.clipboard.writeText(value);
     toast.success(`Link copied to clipboard.`);
     setVisible(false);
   };