Merge pull request #390 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,5 +1,6 @@
 # TBD
 
+- [FP-3050](https://movai.atlassian.net/browse/FP-3050): Configurations: Toggle between XML and YAML isn't highlighting in real-time
 - [FP-3107](https://movai.atlassian.net/browse/FP-3107): IDE: File selection context disappeared
 
 # v1.4.5

src/editors/Configuration/view/Configuration.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import { i18n } from "@mov-ai/mov-fe-lib-react";
 import { MonacoCodeEditor } from "@mov-ai/mov-fe-lib-code-editor";
@@ -31,6 +31,7 @@ export const Configuration = (props, ref) => {
     propsData: props.data,
     keysToDisconsider: Model.KEYS_TO_DISCONSIDER,
   });
+  const [extension, setExtension] = useState("yaml");
   // Style Hooks
   const classes = configurationStyles();
   const theme = useTheme();
@@ -99,6 +100,7 @@ export const Configuration = (props, ref) => {
    */
   const handleChangeFileType = (event, newExtension) => {
     event.stopPropagation();
+    setExtension(newExtension);
     updateConfigExtension(newExtension);
   };
 
@@ -116,15 +118,15 @@ export const Configuration = (props, ref) => {
    *                                                                                      */
   //========================================================================================
 
-  const renderEditor = () => {
+  const editorEl = useMemo(() => {
     return (
       <div
         data-testid="section_configuration-editor"
         className={classes.codeContainer}
       >
         <MonacoCodeEditor
           value={data.code}
-          language={data.extension}
+          language={extension}
           theme={theme.codeEditor?.theme}
           options={{ readOnly: !editable }}
           onChange={updateConfigCode}
@@ -133,7 +135,7 @@ export const Configuration = (props, ref) => {
         />
       </div>
     );
-  };
+  }, [extension, classes.codeContainer, data.code]);
 
   return (
     <div
@@ -157,7 +159,7 @@ export const Configuration = (props, ref) => {
           </ToggleButtonGroup>
         </Toolbar>
       </AppBar>
-      {renderEditor()}
+      {editorEl}
     </div>
   );
 };