chore: migrate to react-codemirror

Signed-off-by: Oleksii Orel <[email protected]>

Author: olexii4

.deps/prod.md

@@ -3,6 +3,15 @@
 | Packages | License | Resolved CQs |
 | --- | --- | --- |
 | [`@babel/[email protected]`](https://github.com/babel/babel.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@babel/runtime/7.27.0) |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/autocomplete.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@codemirror/autocomplete/6.18.6) |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/commands.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@codemirror/commands/6.8.1) |
+| [`@codemirror/[email protected]`](git+https://github.com/codemirror/lang-yaml.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@codemirror/lang-yaml/6.1.2) |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/language.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@codemirror/language/6.10.3) |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/lint.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@codemirror/lint/6.8.5) |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/search.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@codemirror/search/6.5.6) |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/state.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@codemirror/state/6.5.2) |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/theme-one-dark.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@codemirror/theme-one-dark/6.1.2) |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/view.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@codemirror/view/6.37.1) |
 | [`@devfile/[email protected]`](https://github.com/devfile/api) | Apache-2.0 | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@devfile/api/2.3.0-1746644330) |
 | [`@eclipse-che/[email protected]`](git+https://github.com/devfile/devworkspace-generator.git) | EPL-2.0 | ecd.che |
 | [`@fastify/[email protected]`](git+https://github.com/fastify/accept-negotiator.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@fastify/accept-negotiator/1.1.0) |
@@ -40,7 +49,10 @@
 | [`@kubernetes/[email protected]`](https://github.com/kubernetes-client/javascript.git) | Apache-2.0 | #17950 |
 | [`@lezer/[email protected]`](https://github.com/lezer-parser/common.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@lezer/common/1.2.3) |
 | [`@lezer/[email protected]`](https://github.com/lezer-parser/highlight.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@lezer/highlight/1.2.1) |
+| [`@lezer/[email protected]`](https://github.com/lezer-parser/lr.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@lezer/lr/1.4.2) |
+| [`@lezer/[email protected]`](https://github.com/lezer-parser/yaml.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@lezer/yaml/1.0.3) |
 | `@lukeed/[email protected]` | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@lukeed/ms/2.0.2) |
+| [`@marijn/[email protected]`](git+https://github.com/marijnh/find-cluster-break.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@marijn/find-cluster-break/1.0.2) |
 | [`@npmcli/[email protected]`](https://github.com/npm/agent.git) | ISC | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@npmcli/agent/2.2.2) |
 | [`@npmcli/[email protected]`](https://github.com/npm/fs.git) | ISC | #14656 |
 | [`@patternfly/[email protected]`](https://github.com/patternfly/patternfly-react.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@patternfly/react-core/4.278.0) |
@@ -63,6 +75,8 @@
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #10798 |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@types/use-sync-external-store/0.0.3) |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #6016 |
+| [`@uiw/[email protected]`](https://github.com/uiwjs/react-codemirror.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@uiw/codemirror-extensions-basic-setup/4.23.5) |
+| [`@uiw/[email protected]`](https://github.com/uiwjs/react-codemirror.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@uiw/react-codemirror/4.23.5) |
 | [`[email protected]`](https://github.com/npm/abbrev-js.git) | ISC | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/abbrev/2.0.0) |
 | [`[email protected]`](git+https://github.com/mysticatea/abort-controller.git) | MIT | #7592 |
 | [`[email protected]`](git+https://github.com/jsumners/abstract-logging.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/abstract-logging/2.0.1) |
@@ -118,7 +132,7 @@
 | [`[email protected]`](git://github.com/isaacs/chownr.git) | BlueOak-1.0.0 | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/chownr/3.0.0) |
 | [`[email protected]`](git+https://github.com/crypto-browserify/cipher-base.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/cipher-base/1.0.6) |
 | `[email protected]` | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/clean-stack/2.2.0) |
-| [`codemirror@5.65.18`](https://github.com/codemirror/CodeMirror.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/codemirror/5.65.18) |
+| [`codemirror@6.0.1`](https://github.com/codemirror/basic-setup.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/codemirror/6.0.1) |
 | `[email protected]` | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/color-convert/1.9.3) |
 | `[email protected]` | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/color-convert/2.0.1) |
 | [`[email protected]`]([email protected]:dfcreative/color-name.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/color-name/1.1.3) |
@@ -135,6 +149,7 @@
 | [`[email protected]`]([email protected]:crypto-browserify/createHash.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/create-hash/1.1.3) |
 | [`[email protected]`]([email protected]:crypto-browserify/createHash.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/create-hash/1.2.0) |
 | [`[email protected]`](https://github.com/crypto-browserify/createHmac.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/create-hmac/1.1.7) |
+| [`[email protected]`](git+https://github.com/marijnh/crelt.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/crelt/1.0.6) |
 | [`[email protected]`]([email protected]:moxystudio/node-cross-spawn.git) | MIT | #17146 |
 | [`[email protected]`](git://github.com/crypto-browserify/crypto-browserify.git) | MIT | #1033 |
 | [`[email protected]`](git://github.com/trentm/node-dashdash.git) | MIT | #14596 |
@@ -454,6 +469,7 @@
 | `[email protected]` | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/strip-ansi/6.0.1) |
 | `[email protected]` | MIT | #8735 |
 | `[email protected]` | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/strip-json-comments/3.1.1) |
+| [`[email protected]`](git+https://github.com/marijnh/style-mod.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/style-mod/4.1.2) |
 | `[email protected]` | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/supports-color/5.5.0) |
 | [`[email protected]`](git+https://github.com/focus-trap/tabbable.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/tabbable/5.3.3) |
 | [`[email protected]`](https://github.com/isaacs/node-tar.git) | ISC | #10508 |
@@ -490,6 +506,7 @@
 | [`[email protected]`](https://github.com/uuidjs/uuid.git) | MIT | #57 |
 | `[email protected]` | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/value-equal/1.0.1) |
 | [`[email protected]`](git://github.com/davepacheco/node-verror.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/verror/1.10.0) |
+| [`[email protected]`](git+https://github.com/marijnh/w3c-keyname.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/w3c-keyname/2.2.8) |
 | [`[email protected]`](https://github.com/BerkeleyTrue/warning.git) | MIT | CQ22359 |
 | `[email protected]` | BSD-2-Clause | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/webidl-conversions/3.0.1) |
 | `[email protected]` | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/whatwg-url/5.0.0) |

package.json

@@ -42,6 +42,8 @@
     "@babel/helpers": "^7.26.10",
     "@babel/runtime": "^7.26.10",
     "@adobe/css-tools": "^4.3.2",
+    "@codemirror/language": "6.10.3",
+    "@codemirror/search": "6.5.6",
     "@hapi/hoek": "^10.0.1",
     "axios": "^1.8.2",
     "bn.js": "^5.2.0",

packages/dashboard-frontend/package.json

@@ -32,13 +32,16 @@
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
+    "@codemirror/lang-yaml": "^6.1.1",
+    "@codemirror/language": "^6.10.3",
+    "@codemirror/view": "^6.36.2",
     "@lezer/highlight": "^1.2.1",
     "@patternfly/react-core": "^4.276.11",
     "@patternfly/react-icons": "^4.93.7",
     "@patternfly/react-table": "^4.113.3",
     "@reduxjs/toolkit": "^2.2.7",
+    "@uiw/react-codemirror": "4.23.5",
     "buffer": "^6.0.3",
-    "codemirror": "^5.65.18",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^3.5.0",
     "detect-browser": "^5.3.0",

packages/dashboard-frontend/src/components/BasicViewer/index.tsx

@@ -10,7 +10,7 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
-import CodeMirror from 'codemirror';
+import CodeMirror from '@uiw/react-codemirror';
 import React from 'react';
 
 import styles from '@/components/BasicViewer/index.module.css';
@@ -21,36 +21,15 @@ export type Props = {
 };
 
 export class BasicViewer extends React.PureComponent<Props> {
-  private editor: CodeMirror.Editor | undefined;
-
-  public componentDidMount(): void {
-    const parent = window.document.querySelector(`#${this.props.id}`);
-    if (parent) {
-      this.editor = CodeMirror.fromTextArea(parent as HTMLTextAreaElement, {
-        lineNumbers: false,
-        lineWrapping: false,
-        readOnly: true,
-        value: this.props.value,
-      });
-    }
-  }
-
-  componentDidUpdate(): void {
-    if (this.editor) {
-      this.editor.setValue(this.props.value);
-      this.editor.refresh();
-    }
-  }
-
   public render(): React.ReactElement {
     return (
       <div className={styles.basicViewer}>
-        <textarea
+        <CodeMirror
           id={this.props.id}
-          data-testid={this.props.id}
-          value={this.props.value}
           readOnly={true}
-        ></textarea>
+          basicSetup={false}
+          value={this.props.value}
+        />
       </div>
     );
   }

packages/dashboard-frontend/src/components/DevfileViewer/index.module.css

@@ -21,3 +21,7 @@
   height: 100%;
   border: 1px solid var(--pf-global--BorderColor--100);
 }
+
+.devfileViewer .codeMirror > div {
+  height: 100%;
+}

packages/dashboard-frontend/src/components/DevfileViewer/index.tsx

@@ -10,11 +10,11 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
-import 'codemirror/mode/yaml/yaml';
-import 'codemirror/lib/codemirror.css';
-import '@/components/DevfileViewer/theme/eclipse-che.css';
-
-import CodeMirror from 'codemirror';
+import { yaml } from '@codemirror/lang-yaml';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { tags as t } from '@lezer/highlight';
+import CodeMirror from '@uiw/react-codemirror';
 import React from 'react';
 
 import styles from '@/components/DevfileViewer/index.module.css';
@@ -27,37 +27,50 @@ export type Props = {
 };
 
 export class DevfileViewer extends React.PureComponent<Props> {
-  private editor: CodeMirror.Editor | undefined;
-
-  constructor(props: Props) {
-    super(props);
-  }
+  public static theme = EditorView.theme(
+    {
+      '&': {
+        color: '#2e3440',
+        backgroundColor: '#fff',
+      },
+      '.cm-activeLine': {
+        backgroundColor: 'inherit',
+      },
+      '.cm-gutters': {
+        backgroundColor: '#f7f7f7',
+        color: '#999',
+      },
+      '.cm-activeLineGutter': {
+        backgroundColor: '#f7f7f7',
+      },
+    },
+    { dark: false },
+  );
 
-  public componentDidMount(): void {
-    const parent = window.document.querySelector(`#${this.props.id}`);
-    if (parent) {
-      this.editor = CodeMirror.fromTextArea(parent as HTMLTextAreaElement, {
-        mode: 'yaml',
-        theme: 'eclipse-che',
-        lineNumbers: true,
-        lineWrapping: true,
-        readOnly: true,
-        value: this.props.value,
-      });
-    }
-  }
-
-  componentDidUpdate(): void {
-    if (this.editor) {
-      this.editor.setValue(this.props.value);
-      this.editor.refresh();
-    }
-  }
+  public static highlightStyle = HighlightStyle.define([
+    { tag: t.keyword, color: '#5e81ac' },
+    { tag: [t.string], color: '#5e81ac' },
+    { tag: [t.variableName], color: '#008080' },
+    {
+      tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+      color: '#008080',
+    },
+  ]);
 
   public render(): React.ReactElement {
     return (
       <div className={styles.devfileViewer}>
-        <textarea id={this.props.id} value={this.props.value} readOnly={true}></textarea>
+        <CodeMirror
+          className={styles.codeMirror}
+          readOnly={true}
+          id={this.props.id}
+          value={this.props.value}
+          extensions={[
+            DevfileViewer.theme,
+            syntaxHighlighting(DevfileViewer.highlightStyle),
+            yaml(),
+          ]}
+        />
       </div>
     );
   }