diff --git a/packages/online-editor/src/editor/EditorPage.tsx b/packages/online-editor/src/editor/EditorPage.tsx index 9c3c027a453..58bcc13e31a 100644 --- a/packages/online-editor/src/editor/EditorPage.tsx +++ b/packages/online-editor/src/editor/EditorPage.tsx @@ -411,6 +411,40 @@ export function EditorPage(props: Props) { return editorEnvelopeLocator; }, [editorEnvelopeLocator, props.fileRelativePath, settings.editors.useLegacyDmnEditor]); + // `workspaceFilePromise` is ONLY updated when there's an external change on this file (e.g., on another tab), but + // when we jump between the legacy and the new DMN Editor, `settingsAwareEditorEnvelopeLocator` changes, + // and if we don't update `embeddedEditorFile`, the new will be rendered using the `embeddedEditorFile` + // that originally was used for opening the file, and the new chosen DMN Editor will display stale content. + useCancelableEffect( + useCallback( + ({ canceled }) => { + workspaceFilePromise.data?.workspaceFile.getFileContentsAsString().then((content) => { + if (canceled.get()) { + return; + } + + setEmbeddedEditorFile((prev) => + !prev + ? undefined + : { + ...prev, + getFileContents: async () => content, + } + ); + }); + }, + // + // This is a very unusual case. + // `workspaceFilePromise.data` should've been here, but we can't really add it otherwise + // the component will blink on any edit. + // `settingsAwareEditorEnvelopeLocator` is added because it is the only case where the + // should update for the same workspaceFile. + // + // eslint-disable-next-line react-hooks/exhaustive-deps + [settingsAwareEditorEnvelopeLocator] + ) + ); + return (