fix: fixed issue of initializing editor multiple times (#656)

react-monaco-editor · Nov 22, 2022 · d8bd059 · d8bd059
1 parent 86964d5
commit d8bd059
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 59 deletions.
diff --git a/src/diff.tsx b/src/diff.tsx
@@ -1,6 +1,6 @@
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import * as React from "react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { MonacoDiffEditorProps } from "./types";
 import { noop, processSize } from "./utils";
 
@@ -40,12 +40,12 @@ function MonacoDiffEditor({
     [fixedWidth, fixedHeight]
   );
 
-  const handleEditorWillMount = useCallback(() => {
+  const handleEditorWillMount = () => {
     const finalOptions = editorWillMount(monaco);
     return finalOptions || {};
-  }, [editorWillMount]);
+  };
 
-  const handleEditorDidMount = useCallback(() => {
+  const handleEditorDidMount = () => {
     editorDidMount(editor.current, monaco);
 
     const { modified } = editor.current.getModel();
@@ -54,48 +54,44 @@ function MonacoDiffEditor({
         onChange(modified.getValue(), event);
       }
     });
-  }, [editorDidMount, onChange]);
+  };
 
-  const handleEditorWillUnmount = useCallback(() => {
+  const handleEditorWillUnmount = () => {
     editorWillUnmount(editor.current, monaco);
-  }, [editorWillUnmount]);
+  };
 
-  const initModels = useCallback(() => {
+  const initModels = () => {
     const finalValue = value != null ? value : defaultValue;
     const originalModel = monaco.editor.createModel(original, language);
     const modifiedModel = monaco.editor.createModel(finalValue, language);
     editor.current.setModel({
       original: originalModel,
       modified: modifiedModel,
     });
-  }, [defaultValue, language, original, value]);
+  };
 
-  useEffect(() => {
-    if (containerElement.current) {
-      // Before initializing monaco editor
-      handleEditorWillMount();
-      editor.current = monaco.editor.createDiffEditor(
-        containerElement.current,
-        {
-          ...(className ? { extraEditorClassName: className } : {}),
-          ...options,
-          ...(theme ? { theme } : {}),
-        },
-        overrideServices
-      );
-      // After initializing monaco editor
-      initModels();
-      handleEditorDidMount();
-    }
-  }, [
-    className,
-    handleEditorDidMount,
-    handleEditorWillMount,
-    initModels,
-    options,
-    overrideServices,
-    theme,
-  ]);
+  useEffect(
+    () => {
+      if (containerElement.current) {
+        // Before initializing monaco editor
+        handleEditorWillMount();
+        editor.current = monaco.editor.createDiffEditor(
+          containerElement.current,
+          {
+            ...(className ? { extraEditorClassName: className } : {}),
+            ...options,
+            ...(theme ? { theme } : {}),
+          },
+          overrideServices
+        );
+        // After initializing monaco editor
+        initModels();
+        handleEditorDidMount();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
   useEffect(() => {
     if (editor.current) {
@@ -174,7 +170,8 @@ function MonacoDiffEditor({
         _subscription.current.dispose();
       }
     },
-    [handleEditorWillUnmount]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
 
   return (

diff --git a/src/editor.tsx b/src/editor.tsx
@@ -1,6 +1,6 @@
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import * as React from "react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { MonacoEditorProps } from "./types";
 import { noop, processSize } from "./utils";
 
@@ -39,26 +39,26 @@ function MonacoEditor({
     [fixedWidth, fixedHeight]
   );
 
-  const handleEditorWillMount = useCallback(() => {
+  const handleEditorWillMount = () => {
     const finalOptions = editorWillMount(monaco);
     return finalOptions || {};
-  }, [editorWillMount]);
+  };
 
-  const handleEditorDidMount = useCallback(() => {
+  const handleEditorDidMount = () => {
     editorDidMount(editor.current, monaco);
 
     _subscription.current = editor.current.onDidChangeModelContent((event) => {
       if (!__prevent_trigger_change_event.current) {
         onChange(editor.current.getValue(), event);
       }
     });
-  }, [editorDidMount, onChange]);
+  };
 
-  const handleEditorWillUnmount = useCallback(() => {
+  const handleEditorWillUnmount = () => {
     editorWillUnmount(editor.current, monaco);
-  }, [editorWillUnmount]);
+  };
 
-  const initMonaco = useCallback(() => {
+  const initMonaco = () => {
     const finalValue = value !== null ? value : defaultValue;
     if (containerElement.current) {
       // Before initializing monaco editor
@@ -77,21 +77,10 @@ function MonacoEditor({
       // After initializing monaco editor
       handleEditorDidMount();
     }
-  }, [
-    className,
-    defaultValue,
-    handleEditorDidMount,
-    handleEditorWillMount,
-    language,
-    options,
-    overrideServices,
-    theme,
-    value,
-  ]);
+  };
 
-  useEffect(() => {
-    initMonaco();
-  }, [initMonaco]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(initMonaco, []);
 
   useEffect(() => {
     if (editor.current) {
@@ -157,7 +146,8 @@ function MonacoEditor({
         _subscription.current.dispose();
       }
     },
-    [handleEditorWillUnmount]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
 
   return (