Fix modal not showing on delete issue

packages/jdm-editor/src/components/decision-graph/graph/graph.tsx

@@ -1,5 +1,5 @@
 import { CompressOutlined, LeftOutlined, RightOutlined, WarningOutlined } from '@ant-design/icons';
-import { Button, Modal, Typography, message, notification } from 'antd';
+import { App, Button, Typography, message, notification } from 'antd';
 import clsx from 'clsx';
 import equal from 'fast-deep-equal';
 import React, { type MutableRefObject, forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -91,6 +91,7 @@ export const Graph = forwardRef<GraphRef, GraphProps>(function GraphInner({ reac
   const graphActions = useDecisionGraphActions();
   const graphReferences = useDecisionGraphReferences((s) => s);
   const { onReactFlowInit } = useDecisionGraphListeners(({ onReactFlowInit }) => ({ onReactFlowInit }));
+  const { modal } = App.useApp();
   const { disabled, hasInputNode, components, customNodes, id } = useDecisionGraphState(
     ({ id, disabled, components, customNodes, decisionGraph }) => ({
       id,
@@ -403,7 +404,7 @@ export const Graph = forwardRef<GraphRef, GraphProps>(function GraphInner({ reac
                 if (selectedNodes.length > 0) {
                   const length = selectedNodes.length;
                   const text = length > 1 ? 'nodes' : 'node';
-                  Modal.confirm({
+                  modal.confirm({
                     icon: null,
                     title: `Delete ${text}`,
                     content: (

packages/jdm-editor/src/components/decision-graph/nodes/graph-node.tsx

@@ -1,6 +1,6 @@
 import { BookOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Button, Modal, Typography } from 'antd';
+import { App, Button, Typography } from 'antd';
 import clsx from 'clsx';
 import React from 'react';
 import type { HandleProps } from 'reactflow';
@@ -47,6 +47,7 @@ export const GraphNode = React.forwardRef<HTMLDivElement, GraphNodeProps>(
     const [currentDetails, setCurrentDetails] = usePersistentState<Details>(`node:details:${id}`, Details.Settings);
     const [detailsOpen, setDetailsOpen] = usePersistentState<boolean>(`node:detailsOpen:${id}`, false);
     const graphActions = useDecisionGraphActions();
+    const { modal } = App.useApp();
     const { nodeError, nodeTrace, disabled, compactMode } = useDecisionGraphState(
       ({ simulate, disabled, compactMode }) => ({
         disabled,
@@ -91,7 +92,7 @@ export const GraphNode = React.forwardRef<HTMLDivElement, GraphNodeProps>(
         label: <SpacedText left='Delete' right={platform.shortcut('Backspace')} />,
         disabled,
         onClick: () =>
-          Modal.confirm({
+          modal.confirm({
             icon: null,
             title: 'Delete node',
             content: (

packages/jdm-editor/src/components/decision-graph/nodes/specifications/input.specification.tsx

@@ -1,5 +1,5 @@
 import { BookOutlined, DeleteOutlined } from '@ant-design/icons';
-import { Button, Modal, Typography } from 'antd';
+import { App, Button, Typography } from 'antd';
 import { produce } from 'immer';
 import _ from 'lodash';
 import { ArrowRightToLineIcon } from 'lucide-react';
@@ -40,6 +40,7 @@ export const inputSpecification: NodeSpecification<NodeInputData> = {
     const { disabled } = useDecisionGraphState(({ disabled }) => ({
       disabled,
     }));
+    const { modal } = App.useApp();
 
     return (
       <GraphNode
@@ -67,7 +68,7 @@ export const inputSpecification: NodeSpecification<NodeInputData> = {
             label: <SpacedText left='Delete' right={platform.shortcut('Backspace')} />,
             disabled,
             onClick: () =>
-              Modal.confirm({
+              modal.confirm({
                 icon: null,
                 title: 'Delete node',
                 content: (

packages/jdm-editor/src/theme.tsx

@@ -1,5 +1,5 @@
 import type { ThemeConfig as AntThemeConfig } from 'antd';
-import { ConfigProvider, theme as antTheme, theme } from 'antd';
+import { App, ConfigProvider, theme as antTheme, theme } from 'antd';
 import React, { useContext, useMemo } from 'react';
 
 import { useWasmReady } from './helpers/wasm';
@@ -55,8 +55,10 @@ export const JdmConfigProvider: React.FC<JdmConfigProviderProps> = ({
   return (
     <ConfigProvider prefixCls={prefixCls} theme={{ ...restTheme, algorithm, token: { ...token, mode, motion: false } }}>
       <DictionaryContext.Provider value={dicts}>
-        <GlobalCssVariables mode={mode} />
-        {children}
+        <App style={{ height: '100%' }}>
+          <GlobalCssVariables mode={mode} />
+          {children}
+        </App>
       </DictionaryContext.Provider>
     </ConfigProvider>
   );