Merge pull request #89 from MOV-AI/FP-3050-configurations-toggle-between-xml-and-yaml-isnt-highlighting-in-real-time

FP-3050: Configurations: Toggle between XML and YAML isn't highlighting in real-time

Author: diasnad

CHANGELOG.md

@@ -1,6 +1,7 @@
 # TBD
 
 - [FP-2920](https://movai.atlassian.net/browse/FP-2920): Configure husky, lint-staged and prettier for lib-code-editor
+- [FP-3050](https://movai.atlassian.net/browse/FP-3050): Configurations: Toggle between XML and YAML isn't highlighting in real-time
 
 # 1.1.4
 

src/components/MonacoCodeEditor/MonacoCodeEditor.js

@@ -27,8 +27,8 @@ const MonacoCodeEditor = React.forwardRef((props, ref) => {
   } = props;
   // Hooks
   const { createEditor } = useLanguageServer
-    ? useMonacoEditorServer()
-    : useMonacoEditor();
+    ? useMonacoEditorServer([language])
+    : useMonacoEditor([language]);
 
   //========================================================================================
   /*                                                                                      *
@@ -62,6 +62,9 @@ const MonacoCodeEditor = React.forwardRef((props, ref) => {
    */
   React.useEffect(() => {
     const element = editorRef.current;
+
+    if (editor.current) element.innerHTML = "";
+
     const _editor = createEditor({
       element,
       value,
@@ -88,7 +91,7 @@ const MonacoCodeEditor = React.forwardRef((props, ref) => {
     // Set editor ref
     if (ref) ref.current = _editor;
     editor.current = _editor;
-  }, []);
+  }, [createEditor]);
 
   /**
    * On change Code

src/components/MonacoCodeEditor/hooks/useMonacoEditor.js

@@ -1,31 +1,36 @@
+import { useCallback } from "react";
 import * as monaco from "monaco-editor";
 
-const useMonacoEditor = () => {
+const useMonacoEditor = (dependencies) => {
   /**
    * Create editor
    * @param {{element: HTMLElement, value: string, language: string, theme: string, options: object, disableMinimap: boolean}} props
    *  Props to be used to compose editor
    * @returns Monaco Editor object
    */
-  const createEditor = (props) => {
-    const { element, value, language, theme, options, disableMinimap } = props;
+  const createEditor = useCallback(
+    (props) => {
+      const { element, value, language, theme, options, disableMinimap } =
+        props;
 
-    return monaco.editor.create(element, {
-      value: value,
-      language: language,
-      theme: theme,
-      "semanticHighlighting.enabled": true,
-      selectOnLineNumbers: true,
-      autoIndent: "full",
-      lineNumbers: disableMinimap ? "off" : "on",
-      overviewRulerBorder: !disableMinimap,
-      overviewRulerLanes: disableMinimap ? 0 : 3,
-      minimap: {
-        enabled: !disableMinimap,
-      },
-      ...options,
-    });
-  };
+      return monaco.editor.create(element, {
+        value: value,
+        language: language,
+        theme: theme,
+        "semanticHighlighting.enabled": true,
+        selectOnLineNumbers: true,
+        autoIndent: "full",
+        lineNumbers: disableMinimap ? "off" : "on",
+        overviewRulerBorder: !disableMinimap,
+        overviewRulerLanes: disableMinimap ? 0 : 3,
+        minimap: {
+          enabled: !disableMinimap,
+        },
+        ...options,
+      });
+    },
+    [dependencies],
+  );
 
   return { createEditor };
 };

src/components/MonacoCodeEditor/hooks/useMonacoEditorCore.js

@@ -163,36 +163,39 @@ function getSuggestions(model, position) {
  *                                                                                      */
 //========================================================================================
 
-const useMonacoEditorCore = () => {
+const useMonacoEditorCore = (dependencies) => {
   useEffect(() => {
     getBuiltins().then((actualBuiltins) => {
       BUILTINS = { ...BUILTINS, ...actualBuiltins };
       sendBuiltins2LanguageServer(BUILTINS);
     });
   }, []);
 
-  const createLanguageClient = useCallback((connection) => {
-    return new MonacoLanguageClient({
-      name: "Python Language Client",
-      clientOptions: {
-        // use a language id as a document selector
-        documentSelector: ["python"],
-        // disable the default error handler
-        errorHandler: {
-          error: () => ErrorAction.Continue,
-          closed: () => CloseAction.DoNotRestart,
+  const createLanguageClient = useCallback(
+    (connection) => {
+      return new MonacoLanguageClient({
+        name: "Python Language Client",
+        clientOptions: {
+          // use a language id as a document selector
+          documentSelector: ["python"],
+          // disable the default error handler
+          errorHandler: {
+            error: () => ErrorAction.Continue,
+            closed: () => CloseAction.DoNotRestart,
+          },
         },
-      },
-      // create a language client connection from the JSON RPC connection on demand
-      connectionProvider: {
-        get: (errorHandler, closeHandler) => {
-          return Promise.resolve(
-            createConnection(connection, errorHandler, closeHandler),
-          );
+        // create a language client connection from the JSON RPC connection on demand
+        connectionProvider: {
+          get: (errorHandler, closeHandler) => {
+            return Promise.resolve(
+              createConnection(connection, errorHandler, closeHandler),
+            );
+          },
         },
-      },
-    });
-  }, []);
+      });
+    },
+    [dependencies],
+  );
 
   /**
    * Create editor