chore: Bump monaco-editor and monaco-yaml (#3871)

* chore: Bump monaco-editor and monaco-yaml

* fix x-index of the minimap

* Bump and fix duplicate hover content

* Fix index for cluster wizard buttons

* Move z-index style deep to proper editor child

* Fix z-index

* Tests correction

* force focus

* Tests correction

* Update packages

* Test correction

* Tests corrections

---------

Co-authored-by: Pietocha <konrad.pietocha@sap.com>

Author: mrCherry97

package-lock.json

@@ -94,8 +94,8 @@
     "lodash": "^4.17.19",
     "marked": "^15.0.7",
     "marked-react": "^3.0.0",
-    "monaco-editor": "^0.33.0",
-    "monaco-yaml": "^4.0.4",
+    "monaco-editor": "^0.52.2",
+    "monaco-yaml": "^5.4.0",
     "oidc-client-ts": "^3.2.0",
     "p-queue": "^8.1.0",
     "pako": "^2.0.4",

package.json

@@ -97,7 +97,7 @@ export function Editor({
         </div>
       )}
       <div ref={divRef} className="resource-form__editor" />
-      {placeholder && !!!value && (
+      {placeholder && !value && (
         <div className="resource-form__placeholder">{placeholder}</div>
       )}
       <div className="resource-form__legend">

src/shared/components/MonacoEditorESM/Editor.js

@@ -6,6 +6,10 @@
   position: relative;
 }
 
+.minimap {
+  z-index: 0 !important;
+}
+
 .resource-form__overlay {
   position: absolute;
   top: 0;
@@ -25,8 +29,15 @@
   flex-grow: 1;
   border: 1px solid var(--sapNeutralBackground);
 
-  .monaco-hover {
-    z-index: 100;
+  .monaco-editor {
+    textarea.inputarea {
+      z-index: unset;
+    }
+
+    .overflowingContentWidgets {
+      z-index: 100;
+      position: absolute;
+    }
   }
 }
 
@@ -61,6 +72,9 @@
   pointer-events: none;
 }
 
-.monaco-hover-content .hover-contents p:last-of-type {
-  display: none;
+.monaco-hover-content {
+  .hover-row:not(:first-of-type),
+  p:last-of-type {
+    display: none;
+  }
 }

src/shared/components/MonacoEditorESM/Editor.scss

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
 import { Uri } from 'monaco-editor';
-import { setDiagnosticsOptions } from 'monaco-yaml';
+import * as monaco from 'monaco-editor';
+import { configureMonacoYaml } from 'monaco-yaml';
 import { useGetSchema } from 'hooks/useGetSchema';
 import { v4 as uuid } from 'uuid';
 import YamlWorker from './yaml.worker.js?worker';
@@ -65,7 +66,7 @@ export function useAutocompleteWorker({
       });
     }
 
-    setDiagnosticsOptions({
+    configureMonacoYaml(monaco, {
       enableSchemaRequest: false,
       hover: true,
       completion: !!schema && !readOnly,