refactor: Make useBpmnEditor return callback ref

frontend/packages/process-editor/src/components/Canvas/BPMNEditor/BPMNEditor.tsx

@@ -4,7 +4,7 @@ import { useBpmnEditor } from '../../../hooks/useBpmnEditor';
 import './BPMNEditor.css';
 
 export const BPMNEditor = (): React.ReactElement => {
-  const { canvasRef } = useBpmnEditor();
+  const canvasRef = useBpmnEditor();
 
-  return <div className={classes.editorContainer} ref={canvasRef}></div>;
+  return <div className={classes.editorContainer} ref={canvasRef} />;
 };

frontend/packages/process-editor/src/hooks/useBpmnEditor.test.tsx

@@ -124,29 +124,29 @@ describe('useBpmnEditor', () => {
   it('should call saveBpmn when "commandStack.changed" event is triggered on modelerInstance', async () => {
     const currentEventName = 'commandStack.changed';
     const currentEvent = { element: getMockBpmnElementForTask('data') };
-    renderUseBpmnEditor(false, currentEventName, currentEvent);
+    setup(false, currentEventName, currentEvent);
 
     await waitFor(() => expect(saveBpmnMock).toHaveBeenCalledTimes(1));
   });
 
   it('should handle "shape.added" event', async () => {
     const currentEvent = { element: getMockBpmnElementForTask('data') };
-    renderUseBpmnEditor(false, 'shape.added', currentEvent);
+    setup(false, 'shape.added', currentEvent);
 
     await waitFor(() => expect(onProcessTaskAddMock).toHaveBeenCalledTimes(1));
   });
 
   it('should handle "shape.remove" event', async () => {
     const currentEvent = { element: getMockBpmnElementForTask('data') };
-    renderUseBpmnEditor(false, 'shape.remove', currentEvent);
+    setup(false, 'shape.remove', currentEvent);
 
     await waitFor(() => expect(onProcessTaskRemoveMock).toHaveBeenCalledTimes(1));
   });
 
   it('should call setBpmnDetails with selected object when "selection.changed" event is triggered with new selection', async () => {
     const currentEventName = 'selection.changed';
     const currentEvent = { newSelection: [getMockBpmnElementForTask('data')], oldSelection: [] };
-    renderUseBpmnEditor(true, currentEventName, currentEvent);
+    setup(true, currentEventName, currentEvent);
 
     await waitFor(() => expect(setBpmnDetailsMock).toHaveBeenCalledTimes(1));
     expect(setBpmnDetailsMock).toHaveBeenCalledWith(expect.objectContaining(mockBpmnDetails));
@@ -155,13 +155,19 @@ describe('useBpmnEditor', () => {
   it('should call setBpmnDetails with null when "selection.changed" event is triggered with no new selected object', async () => {
     const currentEventName = 'selection.changed';
     const currentEvent = { oldSelection: [getMockBpmnElementForTask('data')], newSelection: [] };
-    renderUseBpmnEditor(true, currentEventName, currentEvent);
+    setup(true, currentEventName, currentEvent);
 
     await waitFor(() => expect(setBpmnDetailsMock).toHaveBeenCalledTimes(1));
     expect(setBpmnDetailsMock).toHaveBeenCalledWith(null);
   });
 });
 
+function setup(...params: Parameters<typeof renderUseBpmnEditor>): void {
+  const div = document.createElement('div');
+  const { result } = renderUseBpmnEditor(...params);
+  result.current(div);
+}
+
 const renderUseBpmnEditor = (
   overrideBpmnContext: boolean,
   currentEventName: string,

frontend/packages/process-editor/src/hooks/useBpmnEditor.ts

@@ -1,5 +1,4 @@
-import { type MutableRefObject, useEffect, useCallback, useRef } from 'react';
-import type BpmnModeler from 'bpmn-js/lib/Modeler';
+import { useEffect, useCallback } from 'react';
 import { useBpmnContext } from '../contexts/BpmnContext';
 import { useBpmnModeler } from './useBpmnModeler';
 import { useBpmnConfigPanelFormContext } from '../contexts/BpmnConfigPanelContext';
@@ -11,14 +10,10 @@ import { useStudioRecommendedNextActionContext } from '@studio/components';
 
 // Wrapper around bpmn-js to Reactify it
 
-type UseBpmnViewerResult = {
-  canvasRef: MutableRefObject<HTMLDivElement>;
-  modelerRef: MutableRefObject<BpmnModeler>;
-};
+type UseBpmnEditorResult = (div: HTMLDivElement) => void;
 
-export const useBpmnEditor = (): UseBpmnViewerResult => {
+export const useBpmnEditor = (): UseBpmnEditorResult => {
   const { getUpdatedXml, bpmnXml, modelerRef, setBpmnDetails } = useBpmnContext();
-  const canvasRef = useRef<HTMLDivElement | null>(null);
   const { metadataFormRef, resetForm } = useBpmnConfigPanelFormContext();
   const { getModeler, destroyModeler } = useBpmnModeler();
   const { addAction } = useStudioRecommendedNextActionContext();
@@ -98,14 +93,11 @@ export const useBpmnEditor = (): UseBpmnViewerResult => {
     });
   };
 
-  useEffect(() => {
-    if (!canvasRef.current) {
-      console.log('Canvas reference is not yet available in the DOM.');
-    }
+  const canvasRef = useCallback((div: HTMLDivElement) => {
     // GetModeler can only be fetched from this hook once since the modeler creates a
     // new instance and will attach the same canvasRef container to all instances it fetches.
     // Set modelerRef.current to the Context so that it can be used in other components
-    modelerRef.current = getModeler(canvasRef.current);
+    modelerRef.current = getModeler(div);
 
     initializeEditor().then(() => {
       // Wait for the initializeEditor to be initialized before attaching event listeners, to avoid trigger add.shape events on first draw
@@ -123,5 +115,5 @@ export const useBpmnEditor = (): UseBpmnViewerResult => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return { canvasRef, modelerRef };
+  return canvasRef;
 };