diff --git a/ui/src/components/nodes/Code.tsx b/ui/src/components/nodes/Code.tsx
index 7fd02d8b..5d3e7ef7 100644
--- a/ui/src/components/nodes/Code.tsx
+++ b/ui/src/components/nodes/Code.tsx
@@ -40,7 +40,6 @@ import Grid from "@mui/material/Grid";
import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
import PlayDisabledIcon from "@mui/icons-material/PlayDisabled";
-import DeleteIcon from "@mui/icons-material/Delete";
import ViewComfyIcon from "@mui/icons-material/ViewComfy";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
@@ -62,6 +61,8 @@ import { NewPodButtons, ResizeIcon, level2fontsize } from "./utils";
import { timeDifference } from "../../lib/utils";
import { ButtonGroup } from "@mui/material";
+import { ConfirmDeleteButton } from "./utils";
+
function Timer({ lastExecutedAt }) {
const [counter, setCounter] = useState(0);
useEffect(() => {
@@ -442,14 +443,12 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
)}
{!isGuest && (
- {
+ {
// Delete all edges connected to the node.
reactFlowInstance.deleteElements({ nodes: [{ id }] });
}}
- >
-
-
+ />
)}
diff --git a/ui/src/components/nodes/Rich.tsx b/ui/src/components/nodes/Rich.tsx
index 4200e2f7..a25324b6 100644
--- a/ui/src/components/nodes/Rich.tsx
+++ b/ui/src/components/nodes/Rich.tsx
@@ -37,7 +37,6 @@ import Box from "@mui/material/Box";
import InputBase from "@mui/material/InputBase";
import Tooltip from "@mui/material/Tooltip";
import IconButton from "@mui/material/IconButton";
-import DeleteIcon from "@mui/icons-material/Delete";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
@@ -139,7 +138,7 @@ import { SlashExtension } from "./extensions/slash";
import { SlashSuggestor } from "./extensions/useSlash";
import { BlockHandleExtension } from "./extensions/blockHandle";
-import { NewPodButtons, level2fontsize } from "./utils";
+import { ConfirmDeleteButton, NewPodButtons, level2fontsize } from "./utils";
import { RepoContext } from "../../lib/store";
import "./remirror-size.css";
@@ -464,14 +463,12 @@ function MyFloatingToolbar({ id }: { id: string }) {
{!isGuest && (
- {
+ handleConfirm={() => {
reactFlowInstance.deleteElements({ nodes: [{ id }] });
}}
- >
-
-
+ />
)}
- {
+ {
// This does not work, will throw "Parent node
// jqgdsz2ns6k57vich0bf not found" when deleting a scope.
//
@@ -163,9 +162,7 @@ function MyFloatingToolbar({ id }: { id: string }) {
// But this works:
reactFlowInstance.deleteElements({ nodes: [{ id }] });
}}
- >
-
-
+ />
)}
over this component. Ref:
+// https://mui.com/material-ui/guides/composition/#caveat-with-refs
+export const ConfirmDeleteButton = React.forwardRef(
+ ({ handleConfirm, ...props }: any) => {
+ const [open, setOpen] = useState(false);
+ return (
+
+ {
+ setOpen(true);
+ }}
+ {...props}
+ >
+
+
+
+
+ );
+ }
+);