Merge pull request #583 from devtron-labs/codemirror-revert

chore: codemirror-revert

Author: vivek-devtron

.eslintignore

@@ -11,6 +11,7 @@ src/Common/CIPipeline.Types.ts
 src/Common/ChartVersionAndTypeSelector.tsx
 src/Common/Checkbox.tsx
 src/Common/ClipboardButton/__tests__/ClipboardButton.test.tsx
+src/Common/CodeEditor/CodeEditor.tsx
 src/Common/Common.service.ts
 src/Common/CustomInput/CustomInput.tsx
 src/Common/CustomTagSelector/PropagateTagInfo.tsx

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.7.0",
+    "version": "1.7.0-patch-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -64,6 +64,8 @@
         "json-schema": "^0.4.0",
         "lint-staged": "^12.5.0",
         "moment": "^2.29.4",
+        "monaco-editor": "0.44.0",
+        "monaco-yaml": "5.1.1",
         "prettier": "^3.1.1",
         "react-ga4": "^1.4.1",
         "react-toastify": "9.1.3",
@@ -115,6 +117,7 @@
         "react-codemirror-merge": "4.23.6",
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",
+        "react-monaco-editor": "^0.54.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",
         "sass": "^1.69.7",
         "tslib": "2.7.0",
@@ -126,6 +129,9 @@
             "react": "^17.0.2",
             "react-dom": "^17.0.2"
         },
+        "react-monaco-editor": {
+            "monaco-editor": "0.44.0"
+        },
         "vite-plugin-svgr": {
             "vite": "5.4.14"
         },

package.json

@@ -15,20 +15,25 @@
  */
 
 import YAML from 'yaml'
-
 import { noop, YAMLStringify } from '@Common/Helper'
-import { MODES } from '@Common/Constants'
-
-import { CodeEditorPayloadType, CodeEditorInitialValueType, CodeEditorState } from './types'
+import { MODES } from '../Constants'
+import { Action, CodeEditorInitialValueType, CodeEditorState } from './types'
+import { getCodeEditorThemeFromAppTheme } from './utils'
 
-export const CodeEditorReducer = (state: CodeEditorState, action: CodeEditorPayloadType): CodeEditorState => {
+export const CodeEditorReducer = (state: CodeEditorState, action: Action) => {
     switch (action.type) {
+        case 'changeLanguage':
+            return { ...state, mode: action.value }
         case 'setDiff':
             return { ...state, diffMode: action.value }
+        case 'setTheme':
+            return { ...state, theme: action.value }
         case 'setCode':
             return { ...state, code: action.value }
-        case 'setLhsCode':
-            return { ...state, lhsCode: action.value }
+        case 'setDefaultCode':
+            return { ...state, defaultCode: action.value }
+        case 'setHeight':
+            return { ...state, height: action.value.toString() }
         default:
             return state
     }
@@ -67,14 +72,18 @@ export const parseValueToCode = (value: string, mode: string, tabSize: number) =
 
 export const initialState = ({
     mode,
+    theme,
     value,
-    lhsValue,
+    defaultValue,
     diffView,
     noParsing,
     tabSize,
+    appTheme,
 }: CodeEditorInitialValueType): CodeEditorState => ({
+    mode: mode as MODES,
+    theme: getCodeEditorThemeFromAppTheme(theme, appTheme),
     code: noParsing ? value : parseValueToCode(value, mode, tabSize),
-    lhsCode: noParsing ? lhsValue : parseValueToCode(lhsValue, mode, tabSize),
+    defaultCode: noParsing ? defaultValue : parseValueToCode(defaultValue, mode, tabSize),
     diffMode: diffView,
-    noParsing: [MODES.JSON, MODES.YAML].includes(mode) ? noParsing : true,
+    noParsing: [MODES.JSON, MODES.YAML].includes(mode as MODES) ? noParsing : true,
 })