fix: validation in the yaml editor (#1351)

package.json

@@ -89,7 +89,7 @@
     "jquery": "^3.7.1",
     "json-schema-to-ts": "^3.1.1",
     "launchdarkly-js-client-sdk": "^3.5.0",
-    "monaco-editor": "^0.52.0",
+    "monaco-editor": "0.51.0",
     "monaco-yaml": "^5.2.3",
     "ng-showdown": "^1.1.0",
     "prop-types": "^15.8.1",

source/javascripts/components/YmlEditor/YmlEditor.tsx

@@ -1,40 +1,46 @@
+import { useEffect, useState } from 'react';
+
 import Editor from '@monaco-editor/react';
-import { configureMonacoYaml } from 'monaco-yaml';
+import { configureMonacoYaml, MonacoYaml } from 'monaco-yaml';
 
 type YmlEditorProps = {
   isLoading?: boolean;
   readonly: boolean;
   yml: string;
   onChange: (changedText?: string) => void;
 };
+
 const YmlEditor = ({ isLoading, readonly, yml, onChange }: YmlEditorProps) => {
-  const defaultSchema = {
-    uri: 'https://json.schemastore.org/bitrise.json',
-    fileMatch: ['*'],
-  };
+  const [monacoYaml, setMonacoYaml] = useState<MonacoYaml>();
+
+  useEffect(() => {
+    return monacoYaml?.dispose;
+  }, [monacoYaml]);
 
   return (
     <Editor
       language="yaml"
       value={isLoading ? 'Loading...' : yml}
       theme="vs-dark"
       options={{
-        readOnly: readonly || isLoading,
         roundedSelection: false,
         scrollBeyondLastLine: false,
+        readOnly: readonly || isLoading,
         stickyScroll: {
           enabled: true,
         },
       }}
-      onMount={(_, monaco) => {
-        configureMonacoYaml(monaco, {
-          validate: true,
-          enableSchemaRequest: true,
-          format: true,
-          hover: true,
-          completion: true,
-          schemas: [defaultSchema],
-        });
+      beforeMount={(monaco) => {
+        setMonacoYaml(
+          configureMonacoYaml(monaco, {
+            hover: true,
+            format: true,
+            validate: true,
+            completion: true,
+            enableSchemaRequest: true,
+            schemas: [{ uri: 'https://json.schemastore.org/bitrise.json', fileMatch: ['*'] }],
+          }),
+        );
       }}
       onChange={onChange}
     />