From bb089997361ba80036db0f9cfb4c747163c88e05 Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Wed, 10 Dec 2025 13:38:27 +0100 Subject: [PATCH] replaced YAML editor with the one from nxtcm fixes: FCN-36 Signed-off-by: Erik Jan de Wit --- frontend/package-lock.json | 327 ++++++++++++++++++++++++- frontend/package.json | 1 + frontend/src/components/YamlEditor.tsx | 146 +---------- 3 files changed, 339 insertions(+), 135 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f50d348d1d8..ffe184a0c01 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -61,6 +61,7 @@ "js-yaml": "4.1.0", "lodash": "4.17.21", "monaco-editor": "^0.34.1", + "nxtcm-components": "^0.0.1-prerelease.1", "parse-url": "^9.2.0", "react-error-boundary": "3.1.4", "react-monaco-editor": "^0.51.0", @@ -6778,6 +6779,109 @@ "react-dom": "^17 || ^18" } }, + "node_modules/@patternfly/widgetized-dashboard": { + "version": "1.0.0-prerelease.1", + "resolved": "https://registry.npmjs.org/@patternfly/widgetized-dashboard/-/widgetized-dashboard-1.0.0-prerelease.1.tgz", + "integrity": "sha512-zpjMlAXaPGsS1ZB1+u521KNcRrxL64W+nnM55EmZ7qvKiesKlLydIPtmFKXxIsLd5Bl78iqP2D5egHL941YXYg==", + "license": "MIT", + "dependencies": { + "@patternfly/react-core": "^6.3.1", + "@patternfly/react-icons": "^6.3.1", + "clsx": "^2.1.0", + "react-grid-layout": "^1.5.1" + }, + "peerDependencies": { + "react": "^18", + "react-dom": "^18" + } + }, + "node_modules/@patternfly/widgetized-dashboard/node_modules/@patternfly/react-core": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.4.0.tgz", + "integrity": "sha512-zMgJmcFohp2FqgAoZHg7EXZS7gnaFESquk0qIavemYI0FsqspVlzV2/PUru7w+86+jXfqebRhgubPRsv1eJwEg==", + "license": "MIT", + "dependencies": { + "@patternfly/react-icons": "^6.4.0", + "@patternfly/react-styles": "^6.4.0", + "@patternfly/react-tokens": "^6.4.0", + "focus-trap": "7.6.4", + "react-dropzone": "^14.3.5", + "tslib": "^2.8.1" + }, + "peerDependencies": { + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" + } + }, + "node_modules/@patternfly/widgetized-dashboard/node_modules/@patternfly/react-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.4.0.tgz", + "integrity": "sha512-SPjzatm73NUYv/BL6A/cjRA5sFQ15NkiyPAcT8gmklI7HY+ptd6/eg49uBDFmxTQcSwbb5ISW/R6wwCQBY2M+Q==", + "license": "MIT", + "peerDependencies": { + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" + } + }, + "node_modules/@patternfly/widgetized-dashboard/node_modules/@patternfly/react-styles": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.4.0.tgz", + "integrity": "sha512-EXmHA67s5sy+Wy/0uxWoUQ52jr9lsH2wV3QcgtvVc5zxpyBX89gShpqv4jfVqaowznHGDoL6fVBBrSe9BYOliQ==", + "license": "MIT" + }, + "node_modules/@patternfly/widgetized-dashboard/node_modules/@patternfly/react-tokens": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.4.0.tgz", + "integrity": "sha512-iZthBoXSGQ/+PfGTdPFJVulaJZI3rwE+7A/whOXPGp3Jyq3k6X52pr1+5nlO6WHasbZ9FyeZGqXf4fazUZNjbw==", + "license": "MIT" + }, + "node_modules/@patternfly/widgetized-dashboard/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@patternfly/widgetized-dashboard/node_modules/file-selector": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz", + "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==", + "license": "MIT", + "dependencies": { + "tslib": "^2.7.0" + }, + "engines": { + "node": ">= 12" + } + }, + "node_modules/@patternfly/widgetized-dashboard/node_modules/focus-trap": { + "version": "7.6.4", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.4.tgz", + "integrity": "sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==", + "license": "MIT", + "dependencies": { + "tabbable": "^6.2.0" + } + }, + "node_modules/@patternfly/widgetized-dashboard/node_modules/react-dropzone": { + "version": "14.3.8", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.8.tgz", + "integrity": "sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==", + "license": "MIT", + "dependencies": { + "attr-accept": "^2.2.4", + "file-selector": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">= 10.13" + }, + "peerDependencies": { + "react": ">= 16.8 || 18.0.0" + } + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -19601,6 +19705,12 @@ "dev": true, "license": "Apache-2.0" }, + "node_modules/fast-equals": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-4.0.3.tgz", + "integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==", + "license": "MIT" + }, "node_modules/fast-fifo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz", @@ -29558,6 +29668,150 @@ "dev": true, "license": "MIT" }, + "node_modules/nxtcm-components": { + "version": "0.0.1-prerelease.1", + "resolved": "https://registry.npmjs.org/nxtcm-components/-/nxtcm-components-0.0.1-prerelease.1.tgz", + "integrity": "sha512-TEf3pQwe4aRpFx3frG6mviL7CYwShHZA8Ttbbowg3l5A5YDw34oVZdF4DVQO0/86gUUcJGLCwoQ2S7reUDsIqQ==", + "license": "Apache-2.0", + "dependencies": { + "@patternfly/patternfly": "^6.4.0", + "@patternfly/react-component-groups": "^6.3.0", + "@patternfly/react-icons": "^6.3.1", + "@patternfly/react-styles": "^6.4.0", + "@patternfly/widgetized-dashboard": "^1.0.0-prerelease.1", + "js-yaml": "^4.1.0", + "progress": "^2.0.3", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "peerDependencies": { + "@patternfly/react-core": "^6.0.0", + "js-yaml": "^4.1.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "yaml": "^2.8.1" + } + }, + "node_modules/nxtcm-components/node_modules/@patternfly/patternfly": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-6.4.0.tgz", + "integrity": "sha512-4drFhg74sEc/fftark5wZevODIog17qR4pwLCdB3j5iK3Uu5oMA2SdLhsEeEQggalfnFzve/Km87MdVR0ghhvQ==", + "license": "MIT" + }, + "node_modules/nxtcm-components/node_modules/@patternfly/react-component-groups": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-component-groups/-/react-component-groups-6.4.0.tgz", + "integrity": "sha512-vg0761nQ/7hfggbp6+XowRcQQSd9oIToh77+4lmsyrs41MkA5ppQIPBCZ4lUZW87kmEPhkHqglpJcVfsrrIM/g==", + "license": "MIT", + "dependencies": { + "@patternfly/react-core": "^6.0.0", + "@patternfly/react-icons": "^6.0.0", + "@patternfly/react-styles": "^6.0.0", + "@patternfly/react-table": "^6.0.0", + "react-jss": "^10.10.0" + }, + "peerDependencies": { + "@patternfly/react-drag-drop": "^6.0.0", + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" + } + }, + "node_modules/nxtcm-components/node_modules/@patternfly/react-core": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.4.0.tgz", + "integrity": "sha512-zMgJmcFohp2FqgAoZHg7EXZS7gnaFESquk0qIavemYI0FsqspVlzV2/PUru7w+86+jXfqebRhgubPRsv1eJwEg==", + "license": "MIT", + "dependencies": { + "@patternfly/react-icons": "^6.4.0", + "@patternfly/react-styles": "^6.4.0", + "@patternfly/react-tokens": "^6.4.0", + "focus-trap": "7.6.4", + "react-dropzone": "^14.3.5", + "tslib": "^2.8.1" + }, + "peerDependencies": { + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" + } + }, + "node_modules/nxtcm-components/node_modules/@patternfly/react-icons": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.4.0.tgz", + "integrity": "sha512-SPjzatm73NUYv/BL6A/cjRA5sFQ15NkiyPAcT8gmklI7HY+ptd6/eg49uBDFmxTQcSwbb5ISW/R6wwCQBY2M+Q==", + "license": "MIT", + "peerDependencies": { + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" + } + }, + "node_modules/nxtcm-components/node_modules/@patternfly/react-styles": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.4.0.tgz", + "integrity": "sha512-EXmHA67s5sy+Wy/0uxWoUQ52jr9lsH2wV3QcgtvVc5zxpyBX89gShpqv4jfVqaowznHGDoL6fVBBrSe9BYOliQ==", + "license": "MIT" + }, + "node_modules/nxtcm-components/node_modules/@patternfly/react-table": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.4.0.tgz", + "integrity": "sha512-yv0sFOLGts8a2q9C1xUegjp50ayYyVRe0wKjMf+aMSNIK8sVYu8qu0yfBsCDybsUCldue7+qsYKRLFZosTllWQ==", + "license": "MIT", + "dependencies": { + "@patternfly/react-core": "^6.4.0", + "@patternfly/react-icons": "^6.4.0", + "@patternfly/react-styles": "^6.4.0", + "@patternfly/react-tokens": "^6.4.0", + "lodash": "^4.17.21", + "tslib": "^2.8.1" + }, + "peerDependencies": { + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" + } + }, + "node_modules/nxtcm-components/node_modules/@patternfly/react-tokens": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.4.0.tgz", + "integrity": "sha512-iZthBoXSGQ/+PfGTdPFJVulaJZI3rwE+7A/whOXPGp3Jyq3k6X52pr1+5nlO6WHasbZ9FyeZGqXf4fazUZNjbw==", + "license": "MIT" + }, + "node_modules/nxtcm-components/node_modules/file-selector": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz", + "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==", + "license": "MIT", + "dependencies": { + "tslib": "^2.7.0" + }, + "engines": { + "node": ">= 12" + } + }, + "node_modules/nxtcm-components/node_modules/focus-trap": { + "version": "7.6.4", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.4.tgz", + "integrity": "sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==", + "license": "MIT", + "dependencies": { + "tabbable": "^6.2.0" + } + }, + "node_modules/nxtcm-components/node_modules/react-dropzone": { + "version": "14.3.8", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.8.tgz", + "integrity": "sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==", + "license": "MIT", + "dependencies": { + "attr-accept": "^2.2.4", + "file-selector": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">= 10.13" + }, + "peerDependencies": { + "react": ">= 16.8 || 18.0.0" + } + }, "node_modules/nyc": { "version": "15.1.0", "resolved": "https://registry.npmjs.org/nyc/-/nyc-15.1.0.tgz", @@ -31672,6 +31926,15 @@ "node": ">=8" } }, + "node_modules/progress": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", + "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/promise-map-series": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/promise-map-series/-/promise-map-series-0.3.0.tgz", @@ -31966,7 +32229,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0" @@ -32066,6 +32328,29 @@ "react": "^18.3.1" } }, + "node_modules/react-draggable": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.5.0.tgz", + "integrity": "sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==", + "license": "MIT", + "dependencies": { + "clsx": "^2.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, + "node_modules/react-draggable/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/react-dropzone": { "version": "14.2.3", "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", @@ -32124,6 +32409,33 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "node_modules/react-grid-layout": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.5.3.tgz", + "integrity": "sha512-KaG6IbjD6fYhagUtIvOzhftXG+ViKZjCjADe86X1KHl7C/dsBN2z0mi14nbvZKTkp0RKiil9RPcJBgq3LnoA8g==", + "license": "MIT", + "dependencies": { + "clsx": "^2.1.1", + "fast-equals": "^4.0.3", + "prop-types": "^15.8.1", + "react-draggable": "^4.4.6", + "react-resizable": "^3.0.5", + "resize-observer-polyfill": "^1.5.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, + "node_modules/react-grid-layout/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/react-hot-loader": { "version": "4.13.1", "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.1.tgz", @@ -32311,6 +32623,19 @@ "typescript": "^4.8 || ^5.0" } }, + "node_modules/react-resizable": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz", + "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==", + "license": "MIT", + "dependencies": { + "prop-types": "15.x", + "react-draggable": "^4.0.3" + }, + "peerDependencies": { + "react": ">= 16.3" + } + }, "node_modules/react-router": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index 66364872fce..7d123513ad3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -90,6 +90,7 @@ "js-yaml": "4.1.0", "lodash": "4.17.21", "monaco-editor": "^0.34.1", + "nxtcm-components": "^0.0.1-prerelease.1", "parse-url": "^9.2.0", "react-error-boundary": "3.1.4", "react-monaco-editor": "^0.51.0", diff --git a/frontend/src/components/YamlEditor.tsx b/frontend/src/components/YamlEditor.tsx index 5141ffdb01d..15c3b48c84b 100644 --- a/frontend/src/components/YamlEditor.tsx +++ b/frontend/src/components/YamlEditor.tsx @@ -1,13 +1,7 @@ /* Copyright Contributors to the Open Cluster Management project */ import jsYaml from 'js-yaml' -import { debounce } from 'lodash' -import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js' -import 'monaco-editor/esm/vs/editor/editor.all.js' -import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api' -import { useCallback, useEffect, useMemo, useRef, useState } from 'react' -import MonacoEditor, { monaco } from 'react-monaco-editor' -import './YAMLEditor.css' -import { defineThemes, getTheme } from './theme' +import { useMemo } from 'react' +import { YamlCodeEditor } from 'nxtcm-components' /** * @@ -25,119 +19,20 @@ export const findResourceFieldLineNumber = (resourceYaml: object, fieldPath: str export default function YAMLEditor(props: { resourceYAML: string readOnly: boolean - height: number // in pixels - to be convested to string in memo hook + height: number // in pixels - to be converted to string setResourceYaml?: React.Dispatch> defaultScrollToLine?: number }) { - const { resourceYAML, readOnly, height, setResourceYaml, defaultScrollToLine } = props - const editorRef = useRef(null) - const monacoRef = useRef(null) - const [hasManagedFieldsFolded, setHasManagedFieldsFolded] = useState(false) + const { resourceYAML, readOnly, height, setResourceYaml } = props const editorHeight: string = useMemo(() => { return height < 100 ? '100px' : `${height}px` }, [height]) - useEffect(() => { - if (process.env.NODE_ENV === 'test') return - /* istanbul ignore if */ - if (resourceYAML && defaultScrollToLine) { - editorRef.current?.setSelection(new monaco.Range(0, 0, 0, 0)) - } - }, [resourceYAML, defaultScrollToLine]) - - // By default we will collapse the managedFields section - useEffect(() => { - let managedFieldsStart = 0 - let managedFieldsEnd = 0 - if (resourceYAML && !hasManagedFieldsFolded) { - const resourceLines = resourceYAML.split('\n') - resourceLines.forEach((line, i) => { - if (line === ' managedFields:') { - managedFieldsStart = i + 1 - } else if (managedFieldsStart > 0 && managedFieldsEnd === 0 && (line[2] !== ' ' || line[0] !== ' ')) { - managedFieldsEnd = i - } - }) - /* istanbul ignore if */ - if (managedFieldsStart > 0 && managedFieldsEnd > 0) { - if (process.env.NODE_ENV === 'test') return - const top = editorRef.current?.getScrollTop() - editorRef.current?.setSelection(new monaco.Range(managedFieldsStart, 0, managedFieldsEnd, 0)) - editorRef.current - ?.getAction('editor.fold') - .run() - .then(() => { - if (defaultScrollToLine) { - editorRef.current?.setSelection(new monaco.Range(0, 0, 0, 0)) - } else { - editorRef.current?.setScrollTop(Math.abs(top ?? 0)) - } - setHasManagedFieldsFolded(true) - }) - .catch(() => console.error('Encountered an error while trying to fold the ManagedFields section.')) - } - } - - if (editorRef?.current) { - window.getEditorValue = () => editorRef?.current?.getValue() - } - - return () => { - delete window.getEditorValue - } - }, [editorRef, resourceYAML, defaultScrollToLine, hasManagedFieldsFolded]) - - /* istanbul ignore next */ - function onEditorDidMount(editor: monacoEditor.editor.IStandaloneCodeEditor, monaco: typeof monacoEditor) { - // make sure this instance of monaco editor has the ocp console themes - defineThemes(monaco?.editor) - - // if we don't reset the themes to vs - // and console-light or console-dark were set, monaco wouldn't - // update the 'monoco-colors' style with the right colors - monaco?.editor?.setTheme('vs') - ;(window as any).monaco?.editor?.setTheme('vs') - monaco?.editor?.setTheme(getTheme()) - ;(window as any).monaco?.editor?.setTheme(getTheme()) - - // observe documentElement class changes (theme toggles) - if (typeof MutationObserver !== 'undefined') { - const classObserver = new MutationObserver(() => { - monaco?.editor?.setTheme(getTheme()) - ;(window as any).monaco?.editor?.setTheme(getTheme()) - }) - classObserver.observe(document.documentElement, { - attributes: true, - attributeFilter: ['class'], - }) - } - - editor.changeViewZones( - (changeAccessor: { - addZone: (arg0: { afterLineNumber: number; heightInPx: number; domNode: HTMLDivElement }) => void - }) => { - const domNode = document.createElement('div') - changeAccessor.addZone({ - afterLineNumber: 0, - heightInPx: 10, - domNode: domNode, - }) - } - ) - editorRef.current = editor - monacoRef.current = monaco + const handleChange = (value: string) => { + setResourceYaml?.(value) } - // react to changes from editing yaml - // eslint-disable-next-line react-hooks/exhaustive-deps - const onChange = useCallback( - debounce((value) => { - setResourceYaml?.(value) - }, 100), - [] - ) - return (
-
)