Merge pull request #625 from devtron-labs/fix/code-editor-diff-map

fix: CodeEditor - diffMap not rendering diff correctly for large values, removed react-codemirror-merge wrapper, directly using @codemirror/merge

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.9.0",
+    "version": "1.9.0-patch-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -102,6 +102,7 @@
         "@codemirror/language": "6.10.8",
         "@codemirror/legacy-modes": "6.4.2",
         "@codemirror/lint": "6.8.4",
+        "@codemirror/merge": "^6.10.0",
         "@codemirror/search": "6.5.8",
         "@lezer/highlight": "1.2.1",
         "@replit/codemirror-indentation-markers": "6.5.3",
@@ -119,7 +120,6 @@
         "marked": "^13.0.3",
         "nanoid": "^3.3.8",
         "react-canvas-confetti": "^2.0.7",
-        "react-codemirror-merge": "4.23.6",
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",
         "react-draggable": "^4.4.5",

package.json

@@ -29,7 +29,7 @@ export const CLOSE_SEARCH_SHORTCUT_KEYS: SupportedKeyboardKeysType[] = ['Escape'
 
 export const READ_ONLY_TOOLTIP_TIMEOUT = 2000
 
-export const CODE_EDITOR_FONT_SIZE = 15
+export const CODE_EDITOR_FONT_SIZE = 14
 
 export const CODE_EDITOR_LINE_HEIGHT = 1.4
 

src/Common/CodeMirror/CodeEditor.constants.ts

@@ -22,6 +22,8 @@ import {
     BasicSetupOptions,
     Compartment,
     keymap,
+    EditorView,
+    EditorState,
 } from '@uiw/react-codemirror'
 import { foldGutter } from '@codemirror/language'
 import { search } from '@codemirror/search'
@@ -159,7 +161,7 @@ const CodeEditor = <DiffView extends boolean = false>({
             setCodemirrorMergeKey(getUniqueId())
         },
         // Include any props that modify codemirror-merge extensions directly, as a workaround for the unresolved bug.
-        [readOnly, tabSize, disableSearch, appTheme, mode],
+        [readOnly, tabSize, disableSearch, appTheme, mode, isOriginalModifiable],
     )
 
     // METHODS
@@ -224,11 +226,22 @@ const CodeEditor = <DiffView extends boolean = false>({
         readOnlyTooltip,
     ]
 
-    const originalViewExtensions: Extension[] = [...getBaseExtensions(), readOnlyTooltip]
+    const originalViewExtensions: Extension[] = [
+        codeEditorTheme,
+        ...getBaseExtensions(),
+        readOnlyTooltip,
+        EditorState.readOnly.of(readOnly || !isOriginalModifiable),
+    ]
 
-    const modifiedViewExtensions: Extension[] = [...getBaseExtensions(), readOnlyTooltip]
+    const modifiedViewExtensions: Extension[] = [
+        codeEditorTheme,
+        ...getBaseExtensions(),
+        readOnlyTooltip,
+        EditorState.readOnly.of(readOnly),
+    ]
 
     const diffMinimapExtensions: Extension[] = [
+        codeEditorTheme,
         basicSetup({
             ...basicSetupOptions,
             lineNumbers: false,
@@ -237,6 +250,8 @@ const CodeEditor = <DiffView extends boolean = false>({
             syntaxHighlighting: false,
         }),
         getLanguageExtension(mode, true),
+        EditorView.editable.of(false),
+        EditorState.readOnly.of(true),
     ]
 
     return (
@@ -255,7 +270,6 @@ const CodeEditor = <DiffView extends boolean = false>({
                 placeholder={placeholder}
                 handleOnChange={handleOnChange}
                 handleLhsOnChange={handleLhsOnChange}
-                isOriginalModifiable={isOriginalModifiable}
                 onBlur={onBlur}
                 onFocus={onFocus}
                 autoFocus={autoFocus}