From fb4de4a762908eb41d5cd7686177e1c5b985a9eb Mon Sep 17 00:00:00 2001
From: David Sooter <david.sooter@cpars.de>
Date: Tue, 3 Feb 2026 17:33:10 +0100
Subject: [PATCH] Fix modal not showing on delete issue

---
 .../src/components/decision-graph/graph/graph.tsx         | 5 +++--
 .../src/components/decision-graph/nodes/graph-node.tsx    | 5 +++--
 .../nodes/specifications/input.specification.tsx          | 5 +++--
 packages/jdm-editor/src/theme.tsx                         | 8 +++++---
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/jdm-editor/src/components/decision-graph/graph/graph.tsx b/packages/jdm-editor/src/components/decision-graph/graph/graph.tsx
index 7674acc8..9195e041 100644
--- a/packages/jdm-editor/src/components/decision-graph/graph/graph.tsx
+++ b/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: (
diff --git a/packages/jdm-editor/src/components/decision-graph/nodes/graph-node.tsx b/packages/jdm-editor/src/components/decision-graph/nodes/graph-node.tsx
index f53b1e0c..ec1afb42 100644
--- a/packages/jdm-editor/src/components/decision-graph/nodes/graph-node.tsx
+++ b/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: (
diff --git a/packages/jdm-editor/src/components/decision-graph/nodes/specifications/input.specification.tsx b/packages/jdm-editor/src/components/decision-graph/nodes/specifications/input.specification.tsx
index 5185c7c8..18c72fd9 100644
--- a/packages/jdm-editor/src/components/decision-graph/nodes/specifications/input.specification.tsx
+++ b/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: (
diff --git a/packages/jdm-editor/src/theme.tsx b/packages/jdm-editor/src/theme.tsx
index 9e55f034..737d063d 100644
--- a/packages/jdm-editor/src/theme.tsx
+++ b/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, { useMemo } from 'react';
 
 declare module 'antd/es/theme/interface/alias' {
@@ -35,8 +35,10 @@ export const JdmConfigProvider: React.FC<JdmConfigProviderProps> = ({
 
   return (
     <ConfigProvider prefixCls={prefixCls} theme={{ ...restTheme, algorithm, token: { ...token, mode, motion: false } }}>
-      <GlobalCssVariables mode={mode} />
-      {children}
+      <App style={{ height: '100%' }}>
+        <GlobalCssVariables mode={mode} />
+        {children}
+      </App>
     </ConfigProvider>
   );
 };