Cleaner method for Editor passing methods up

posit-dev · Jul 26, 2024 · 1ce625f · 1ce625f
1 parent 6e21177
commit 1ce625f
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 63 deletions.
diff --git a/src/Components/App.tsx b/src/Components/App.tsx
@@ -12,7 +12,7 @@ import type { WebRProxyHandle } from "../hooks/useWebR";
 import { initRShiny, initWebR, useWebR } from "../hooks/useWebR";
 import type { ProxyType } from "../pyodide-proxy";
 import "./App.css";
-import { type EditorHandle } from "./Editor";
+import { type EditorMethods } from "./Editor";
 import { ExampleSelector } from "./ExampleSelector";
 import type { HeaderBarCallbacks } from "./HeaderBar";
 import HeaderBar from "./HeaderBar";
@@ -246,6 +246,10 @@ export function App({
 
   const proxyHandle = useWasmEngine();
 
+  const [editorMethods, setEditorMethods] = React.useState<EditorMethods>({
+    getActiveFileContents: null,
+  });
+
   const [viewerMethods, setViewerMethods] = React.useState<ViewerMethods>({
     ready: false,
   });
@@ -296,8 +300,6 @@ export function App({
     })();
   }, [proxyHandle.ready, currentFiles]);
 
-  const editorRef = React.useRef<EditorHandle>(null);
-
   // Set up message listener for communication with parent window.
   React.useEffect(() => {
     const listener = (event: MessageEvent) => {
@@ -311,8 +313,8 @@ export function App({
       } else if (event.data.type === "getFiles") {
         // Request files from Editor component and send them back to parent.
         let files: FileContent[] = [];
-        if (editorRef.current) {
-          files = editorRef.current.getActiveFileContents();
+        if (editorMethods.getActiveFileContents) {
+          files = editorMethods.getActiveFileContents();
         }
 
         event.ports[0].postMessage({ files: files });
@@ -322,10 +324,10 @@ export function App({
     window.addEventListener("message", listener);
 
     // Cleanup function
-    () => {
+    return () => {
       window.removeEventListener("message", listener);
     };
-  }, [currentFiles, setCurrentFiles]);
+  }, [currentFiles, setCurrentFiles, editorMethods]);
 
   const [utilityMethods, setUtilityMethods] = React.useState<UtilityMethods>({
     formatCode: async (code: string) => {
@@ -393,6 +395,7 @@ export function App({
               setCurrentFiles={setCurrentFiles}
               setFilesHaveChanged={setFilesHaveChanged}
               setHeaderBarCallbacks={setHeaderBarCallbacks}
+              setEditorMethods={setEditorMethods}
               terminalMethods={terminalMethods}
               viewerMethods={viewerMethods}
               utilityMethods={utilityMethods}
@@ -404,7 +407,6 @@ export function App({
               )}
               updateUrlHashOnRerun={appOptions.updateUrlHashOnRerun}
               appEngine={appEngine}
-              ref={editorRef}
             />
           </React.Suspense>
           <Terminal
@@ -448,6 +450,7 @@ export function App({
               setCurrentFiles={setCurrentFiles}
               setFilesHaveChanged={setFilesHaveChanged}
               setHeaderBarCallbacks={setHeaderBarCallbacks}
+              setEditorMethods={setEditorMethods}
               terminalMethods={terminalMethods}
               viewerMethods={viewerMethods}
               utilityMethods={utilityMethods}
@@ -459,7 +462,6 @@ export function App({
               )}
               updateUrlHashOnRerun={appOptions.updateUrlHashOnRerun}
               appEngine={appEngine}
-              ref={editorRef}
             />
           </React.Suspense>
           <Terminal
@@ -489,12 +491,12 @@ export function App({
             setCurrentFiles={setCurrentFiles}
             setFilesHaveChanged={setFilesHaveChanged}
             setHeaderBarCallbacks={setHeaderBarCallbacks}
+            setEditorMethods={setEditorMethods}
             terminalMethods={terminalMethods}
             utilityMethods={utilityMethods}
             runOnLoad={false}
             updateUrlHashOnRerun={appOptions.updateUrlHashOnRerun}
             appEngine={appEngine}
-            ref={editorRef}
           />
         </React.Suspense>
         <Terminal
@@ -513,6 +515,7 @@ export function App({
             setCurrentFiles={setCurrentFiles}
             setFilesHaveChanged={setFilesHaveChanged}
             setHeaderBarCallbacks={setHeaderBarCallbacks}
+            setEditorMethods={setEditorMethods}
             terminalMethods={terminalMethods}
             utilityMethods={utilityMethods}
             showFileTabs={false}
@@ -522,7 +525,6 @@ export function App({
             updateUrlHashOnRerun={appOptions.updateUrlHashOnRerun}
             appEngine={appEngine}
             style={{ height: asCssLengthUnit(appOptions.editorHeight) }}
-            ref={editorRef}
           />
         </React.Suspense>
         <OutputCell
@@ -563,12 +565,12 @@ export function App({
             setCurrentFiles={setCurrentFiles}
             setFilesHaveChanged={setFilesHaveChanged}
             setHeaderBarCallbacks={setHeaderBarCallbacks}
+            setEditorMethods={setEditorMethods}
             terminalMethods={terminalMethods}
             utilityMethods={utilityMethods}
             viewerMethods={viewerMethods}
             updateUrlHashOnRerun={appOptions.updateUrlHashOnRerun}
             appEngine={appEngine}
-            ref={editorRef}
           />
         </React.Suspense>
         <Viewer

diff --git a/src/Components/Editor.tsx b/src/Components/Editor.tsx
@@ -73,48 +73,48 @@ export type EditorFile =
       };
     };
 
-export type EditorHandle = {
-  getActiveFileContents: () => FileContent[];
+export type EditorMethods = {
+  // This function returns the current contents of the files in the editor.
+  getActiveFileContents: (() => FileContent[]) | null;
 };
 
-const Editor = React.forwardRef(function Editor(
-  {
-    currentFilesFromApp,
-    setCurrentFiles,
-    setFilesHaveChanged,
-    setHeaderBarCallbacks,
-    terminalMethods,
-    viewerMethods = null,
-    utilityMethods = null,
-    showFileTabs = true,
-    runOnLoad = true,
-    lineNumbers = true,
-    showHeaderBar = true,
-    floatingButtons = false,
-    updateUrlHashOnRerun = false,
-    appEngine,
-    style,
-  }: {
-    currentFilesFromApp: FileContent[];
-    setCurrentFiles: React.Dispatch<React.SetStateAction<FileContent[]>>;
-    setFilesHaveChanged: React.Dispatch<React.SetStateAction<boolean>>;
-    setHeaderBarCallbacks: React.Dispatch<
-      React.SetStateAction<HeaderBarCallbacks>
-    >;
-    terminalMethods: TerminalMethods;
-    viewerMethods?: ViewerMethods | null;
-    utilityMethods?: UtilityMethods | null;
-    showFileTabs?: boolean;
-    runOnLoad?: boolean;
-    lineNumbers?: boolean;
-    showHeaderBar?: boolean;
-    floatingButtons?: boolean;
-    updateUrlHashOnRerun?: boolean;
-    appEngine: AppEngine;
-    style?: React.CSSProperties;
-  },
-  ref: React.Ref<EditorHandle>,
-) {
+export default function Editor({
+  currentFilesFromApp,
+  setCurrentFiles,
+  setFilesHaveChanged,
+  setHeaderBarCallbacks,
+  setEditorMethods,
+  terminalMethods,
+  viewerMethods = null,
+  utilityMethods = null,
+  showFileTabs = true,
+  runOnLoad = true,
+  lineNumbers = true,
+  showHeaderBar = true,
+  floatingButtons = false,
+  updateUrlHashOnRerun = false,
+  appEngine,
+  style,
+}: {
+  currentFilesFromApp: FileContent[];
+  setCurrentFiles: React.Dispatch<React.SetStateAction<FileContent[]>>;
+  setFilesHaveChanged: React.Dispatch<React.SetStateAction<boolean>>;
+  setHeaderBarCallbacks: React.Dispatch<
+    React.SetStateAction<HeaderBarCallbacks>
+  >;
+  setEditorMethods: React.Dispatch<React.SetStateAction<EditorMethods>>;
+  terminalMethods: TerminalMethods;
+  viewerMethods?: ViewerMethods | null;
+  utilityMethods?: UtilityMethods | null;
+  showFileTabs?: boolean;
+  runOnLoad?: boolean;
+  lineNumbers?: boolean;
+  showHeaderBar?: boolean;
+  floatingButtons?: boolean;
+  updateUrlHashOnRerun?: boolean;
+  appEngine: AppEngine;
+  style?: React.CSSProperties;
+}) {
   // In the future, instead of directly instantiating the PyrightClient, it
   // would make sense to abstract it out to a class which in turn can run
   // multiple language server clients behind the scenes. In this file,
@@ -351,14 +351,14 @@ const Editor = React.forwardRef(function Editor(
     })();
   }, [runOnLoad, currentFilesFromApp, terminalMethods, runCodeInTerminal]);
 
-  React.useImperativeHandle(ref, () => ({
-    getActiveFileContents: () => {
-      syncActiveFileState();
-      const fileContents = editorFilesToFileContents(files);
-
-      return fileContents;
-    },
-  }));
+  React.useEffect(() => {
+    setEditorMethods({
+      getActiveFileContents: () => {
+        syncActiveFileState();
+        return editorFilesToFileContents(files);
+      },
+    });
+  }, [syncActiveFileState, setEditorMethods, files]);
 
   // ===========================================================================
   // CodeMirror setup
@@ -669,9 +669,7 @@ const Editor = React.forwardRef(function Editor(
       ) : null}
     </div>
   );
-});
-
-export default Editor;
+}
 
 // =============================================================================
 // Conversion between FileContent and EditorFile