update CodeMirror lib

Signed-off-by: Oleksii Orel <[email protected]>
eclipse-che · Jan 15, 2025 · 6876874 · 6876874
1 parent 59a63fc
commit 6876874
Show file tree

Hide file tree

Showing 24 changed files with 163 additions and 228 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "@codemirror/autocomplete": "6.18.1",
     "@hapi/hoek": "^10.0.1",
     "axios": "^1.7.4",
+    "bn.js": "^5.2.0",
     "braces": "^3.0.3",
     "cross-spawn": "^7.0.6",
     "elliptic": "^6.6.1",
@@ -52,6 +53,7 @@
     "micromatch": "^4.0.8",
     "nanoid": "3.3.8",
     "postcss": "^8.4.49",
+    "sha.js": "^2.4.8",
     "undici": "^5.28.3",
     "ws": "^8.17.1"
   }

diff --git a/packages/dashboard-frontend/package.json b/packages/dashboard-frontend/package.json
@@ -32,17 +32,14 @@
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
-    "@codemirror/lang-yaml": "^6.1.1",
-    "@codemirror/language": "^6.10.3",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.34.1",
     "@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",
     "axios": "^1.7.0",
     "buffer": "^6.0.3",
+    "codemirror": "^5.65.18",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^3.5.0",
     "detect-browser": "^5.3.0",
@@ -52,7 +49,7 @@
     "inversify-inject-decorators": "^3.1.0",
     "inversify-react": "^1.1.0",
     "js-yaml": "^4.1.0",
-    "lodash": "^4.17.21",
+    "lodash": "^4.7.21",
     "multi-ini": "^2.3.2",
     "process": "^0.11.10",
     "qs": "^6.12.1",

diff --git a/packages/dashboard-frontend/src/components/BasicViewer/index.tsx b/packages/dashboard-frontend/src/components/BasicViewer/index.tsx
@@ -10,9 +10,7 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
-import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
-import { EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
+import CodeMirror from 'codemirror';
 import React from 'react';
 
 import styles from '@/components/BasicViewer/index.module.css';
@@ -23,43 +21,37 @@ export type Props = {
 };
 
 export class BasicViewer extends React.PureComponent<Props> {
-  private editor: EditorView | undefined;
+  private editor: CodeMirror.Editor | undefined;
 
   public componentDidMount(): void {
     const parent = window.document.querySelector(`#${this.props.id}`);
     if (parent) {
-      const state = this.getEditorState();
-      this.editor = new EditorView({
-        state,
-        parent,
+      const editor = new CodeMirror.fromTextArea(parent, {
+        lineNumbers: false,
+        lineWrapping: false,
+        readOnly: true,
+        autoRefresh: true,
+        autofocus: true,
       });
-    }
-  }
+      editor.setSize(`100%`, `100%`);
+      editor.setValue(this.props.value);
+      editor.save();
 
-  public componentWillUnmount(): void {
-    if (this.editor) {
-      this.editor.destroy();
+      this.editor = editor;
     }
   }
 
   componentDidUpdate(prevProps: Readonly<Props>): void {
     if (this.editor && this.props.value !== prevProps.value) {
-      const state = this.getEditorState();
-      this.editor.setState(state);
+      this.editor.setValue(this.props.value);
+      this.editor.save();
     }
   }
 
-  private getEditorState(): EditorState {
-    return EditorState.create({
-      doc: this.props.value,
-      extensions: [syntaxHighlighting(defaultHighlightStyle), EditorState.readOnly.of(true)],
-    });
-  }
-
   public render(): React.ReactElement {
     return (
       <div className={styles.basicViewer}>
-        <div id={this.props.id}></div>
+        <textarea id={this.props.id} value={this.props.value}></textarea>
       </div>
     );
   }

diff --git a/packages/dashboard-frontend/src/components/DevfileViewer/index.tsx b/packages/dashboard-frontend/src/components/DevfileViewer/index.tsx
@@ -10,58 +10,15 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
-import { yaml } from '@codemirror/lang-yaml';
-import {
-  defaultHighlightStyle,
-  foldGutter,
-  HighlightStyle,
-  syntaxHighlighting,
-} from '@codemirror/language';
-import { EditorState, Extension } from '@codemirror/state';
-import { EditorView, lineNumbers } from '@codemirror/view';
-import { tags as t } from '@lezer/highlight';
+import 'codemirror/mode/yaml/yaml';
+import 'codemirror/lib/codemirror.css';
+import '@/components/DevfileViewer/theme/eclipse-che.css';
+
+import CodeMirror from 'codemirror';
 import React from 'react';
 
 import styles from '@/components/DevfileViewer/index.module.css';
 
-const base00 = '#2e3440'; // black
-const base01 = '#999'; // grey
-const base02 = '#f7f7f7'; // white
-const base03 = '#5e81ac'; // deep blue
-const base04 = '#008080'; // teal
-const base05 = '#fff'; // white
-export const basicLightTheme = EditorView.theme(
-  {
-    '&': {
-      color: base00,
-      backgroundColor: base05,
-    },
-    '.cm-gutters': {
-      backgroundColor: base02,
-      color: base01,
-    },
-    '.cm-activeLineGutter': {
-      backgroundColor: base02,
-    },
-  },
-  { dark: false },
-);
-const basicLightHighlightStyle = HighlightStyle.define([
-  { tag: t.keyword, color: base03 },
-  { tag: [t.string], color: base03 },
-  { tag: [t.variableName], color: base04 },
-  {
-    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-    color: base04,
-  },
-]);
-const basicLight: Extension = [basicLightTheme, syntaxHighlighting(basicLightHighlightStyle)];
-const minimalSetup: Extension = (() => [
-  lineNumbers(),
-  foldGutter(),
-  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-])();
-
 export type Props = {
   isActive: boolean;
   isExpanded: boolean;
@@ -70,7 +27,7 @@ export type Props = {
 };
 
 export class DevfileViewer extends React.PureComponent<Props> {
-  private editor: EditorView | undefined;
+  private editor: CodeMirror.Editor | undefined;
 
   constructor(props: Props) {
     super(props);
@@ -79,38 +36,35 @@ export class DevfileViewer extends React.PureComponent<Props> {
   public componentDidMount(): void {
     const parent = window.document.querySelector(`#${this.props.id}`);
     if (parent) {
-      const state = this.getEditorState();
-      this.editor = new EditorView({
-        state,
-        parent,
+      const editor = new CodeMirror.fromTextArea(parent, {
+        mode: 'yaml',
+        theme: 'eclipse-che',
+        lineNumbers: true,
+        lineWrapping: true,
+        readOnly: true,
+        autoRefresh: true,
+        autofocus: true,
+        gooters: true,
       });
-    }
-  }
+      editor.setSize(`100%`, `100%`);
+      editor.setValue(this.props.value);
+      editor.save();
 
-  public componentWillUnmount(): void {
-    if (this.editor) {
-      this.editor.destroy();
+      this.editor = editor;
     }
   }
 
   componentDidUpdate(prevProps: Readonly<Props>): void {
     if (this.editor && this.props.value !== prevProps.value) {
-      const state = this.getEditorState();
-      this.editor.setState(state);
+      this.editor.setValue(this.props.value);
+      this.editor.save();
     }
   }
 
-  private getEditorState(): EditorState {
-    return EditorState.create({
-      doc: this.props.value,
-      extensions: [minimalSetup, EditorState.readOnly.of(true), yaml(), basicLight],
-    });
-  }
-
   public render(): React.ReactElement {
     return (
       <div className={styles.devfileViewer}>
-        <div id={this.props.id}></div>
+        <textarea id={this.props.id}></textarea>
       </div>
     );
   }

diff --git a/packages/dashboard-frontend/src/components/DevfileViewer/theme/eclipse-che.css b/packages/dashboard-frontend/src/components/DevfileViewer/theme/eclipse-che.css
@@ -0,0 +1,89 @@
+.cm-s-eclipse-che span.cm-meta {
+  color: #000;
+}
+
+.cm-s-eclipse-che span.cm-keyword {
+  color: #00f;
+}
+
+.cm-s-eclipse-che span.cm-atom {
+  color: #008080;
+}
+
+.cm-s-eclipse-che span.cm-number {
+  color: #000;
+}
+
+.cm-s-eclipse-che span.cm-def {
+  color: #00f;
+}
+
+.cm-s-eclipse-che span.cm-variable {
+  color: black;
+}
+
+.cm-s-eclipse-che span.cm-variable-2 {
+  color: #0000c0;
+}
+
+.cm-s-eclipse-che span.cm-variable-3,
+.cm-s-eclipse-che span.cm-type {
+  color: #0000c0;
+}
+
+.cm-s-eclipse-che span.cm-property {
+  color: black;
+}
+
+.cm-s-eclipse-che span.cm-operator {
+  color: black;
+}
+
+.cm-s-eclipse-che span.cm-comment {
+  color: #3f7f5f;
+}
+
+.cm-s-eclipse-che span.cm-string {
+  color: #000;
+}
+
+.cm-s-eclipse-che span.cm-string-2 {
+  color: #555;
+}
+
+.cm-s-eclipse-che span.cm-qualifier {
+  color: #555;
+}
+
+.cm-s-eclipse-che span.cm-builtin {
+  color: #30a;
+}
+
+.cm-s-eclipse-che span.cm-bracket {
+  color: #cc7;
+}
+
+.cm-s-eclipse-che span.cm-tag {
+  color: #170;
+}
+
+.cm-s-eclipse-che span.cm-attribute {
+  color: #00c;
+}
+
+.cm-s-eclipse-che span.cm-link {
+  color: #219;
+}
+
+.cm-s-eclipse-che span.cm-error {
+  color: #f00;
+}
+
+.cm-s-eclipse-che .CodeMirror-activeline-background {
+  background: #e8f2ff;
+}
+
+.cm-s-eclipse-che .CodeMirror-matchingbracket {
+  color: black !important;
+  outline: 1px solid grey;
+}
diff --git a/...mponents/ImportFromGit/RepoOptionsAccordion/GitRepoOptions/AdditionalGitRemotes/index.tsx b/...mponents/ImportFromGit/RepoOptionsAccordion/GitRepoOptions/AdditionalGitRemotes/index.tsx
@@ -18,7 +18,7 @@ import {
   FormSection,
 } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import React from 'react';
 
 import AdditionalGitRemote from '@/components/ImportFromGit/RepoOptionsAccordion/GitRepoOptions/AdditionalGitRemotes/gitRemote';

diff --git a/...board-frontend/src/components/ImportFromGit/RepoOptionsAccordion/GitRepoOptions/index.tsx b/...board-frontend/src/components/ImportFromGit/RepoOptionsAccordion/GitRepoOptions/index.tsx
@@ -11,7 +11,7 @@
  */
 
 import { Form } from '@patternfly/react-core';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import React from 'react';
 
 import { AdditionalGitRemotes } from '@/components/ImportFromGit/RepoOptionsAccordion/GitRepoOptions/AdditionalGitRemotes';

diff --git a/packages/dashboard-frontend/src/components/ImportFromGit/helpers.ts b/packages/dashboard-frontend/src/components/ImportFromGit/helpers.ts
@@ -12,7 +12,7 @@
 
 import common, { api } from '@eclipse-che/common';
 import { ValidatedOptions } from '@patternfly/react-core';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 
 import {
   getGitRemotes,

diff --git a/...ontend/src/components/WorkspaceProgress/CommonSteps/CheckRunningWorkspacesLimit/index.tsx b/...ontend/src/components/WorkspaceProgress/CommonSteps/CheckRunningWorkspacesLimit/index.tsx
@@ -12,7 +12,7 @@
 
 import common from '@eclipse-che/common';
 import { AlertVariant } from '@patternfly/react-core';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 

diff --git a/...d-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Devfile/prepareDevfile.ts b/...d-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Devfile/prepareDevfile.ts
@@ -11,7 +11,7 @@
  */
 
 import { dump, load } from 'js-yaml';
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { DevfileAdapter } from '@/services/devfile/adapter';
 import devfileApi from '@/services/devfileApi';

diff --git a/...shboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Resources/index.tsx b/...shboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Resources/index.tsx
@@ -12,7 +12,7 @@
 
 import { helpers } from '@eclipse-che/common';
 import { AlertVariant } from '@patternfly/react-core';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 

diff --git a/...ontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Resources/prepareResources.ts b/...ontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Resources/prepareResources.ts
@@ -11,7 +11,7 @@
  */
 
 import { dump } from 'js-yaml';
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
 
 import { DevWorkspaceTemplate } from '@/services/devfileApi/devfileApi';
 import { DevWorkspace } from '@/services/devfileApi/devWorkspace';