Merge pull request #614 from devtron-labs/feat/codemirror-enhancements-v2

feat: CodeEditor Enhancements

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.8.7",
+    "version": "1.8.8",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -107,7 +107,8 @@
         "@replit/codemirror-indentation-markers": "6.5.3",
         "@replit/codemirror-vscode-keymap": "6.0.2",
         "@types/react-dates": "^21.8.6",
-        "@uiw/codemirror-theme-github": "^4.23.7",
+        "@uiw/codemirror-extensions-hyper-link": "4.23.10",
+        "@uiw/codemirror-theme-github": "4.23.7",
         "@uiw/react-codemirror": "4.23.7",
         "ansi_up": "^5.2.1",
         "codemirror-json-schema": "0.8.0",

package.json

@@ -75,7 +75,7 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
     }
 
     return (
-        <div className="flex">
+        <div className="flex left">
             <div className="chart-type-options flex" data-testid="chart-type-options">
                 <span className="cn-7 mr-4">Chart Type</span>
                 <SelectPicker

src/Common/ChartVersionAndTypeSelector.tsx

@@ -45,7 +45,7 @@ const SplitPane = () => {
 }
 
 export const Header = ({ children, className, hideDefaultSplitHeader }: CodeEditorHeaderProps) => {
-    const { diffMode, lhsValue, hasCodeEditorContainer, theme } = useCodeEditorContext()
+    const { diffMode, readOnly, lhsValue, hasCodeEditorContainer, theme } = useCodeEditorContext()
 
     return (
         <div className={`${getComponentSpecificThemeClass(theme)} flexbox w-100 border__primary--bottom`}>
@@ -56,7 +56,9 @@ export const Header = ({ children, className, hideDefaultSplitHeader }: CodeEdit
                 {children}
                 {!hideDefaultSplitHeader && lhsValue && <SplitPane />}
             </div>
-            {diffMode ? <div className="bg__secondary px-5 dc__align-self-stretch" /> : null}
+            {diffMode ? (
+                <div className={`bg__secondary dc__align-self-stretch ${readOnly ? 'px-15' : 'px-5'}`} />
+            ) : null}
         </div>
     )
 }

src/Common/CodeMirror/CodeEditor.components.tsx

@@ -28,14 +28,21 @@ import { search } from '@codemirror/search'
 import { lintGutter } from '@codemirror/lint'
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap'
 import { indentationMarkers } from '@replit/codemirror-indentation-markers'
+import { hyperLink } from '@uiw/codemirror-extensions-hyper-link'
 
 import { AppThemeType, useTheme } from '@Shared/Providers'
 import { getUniqueId } from '@Shared/Helpers'
 import { cleanKubeManifest } from '@Common/Helper'
 import { DEFAULT_JSON_SCHEMA_URI, MODES } from '@Common/Constants'
 
 import { codeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
-import { openSearchPanel, openSearchPanelWithReplace, replaceAll, showReplaceFieldState } from './Commands'
+import {
+    blurOnEscape,
+    openSearchPanel,
+    openSearchPanelWithReplace,
+    replaceAll,
+    showReplaceFieldState,
+} from './Commands'
 import { CodeEditorContextProps, CodeEditorProps } from './types'
 import { getFoldGutterElement, getLanguageExtension, getValidationSchema, parseValueToCode } from './utils'
 import { CodeEditorContext } from './CodeEditor.context'
@@ -48,6 +55,11 @@ import './codeEditor.scss'
 // CODEMIRROR CLASSES
 const foldingCompartment = new Compartment()
 
+// EXTENSIONS
+const foldConfig = foldGutter({
+    markerDOM: getFoldGutterElement,
+})
+
 const CodeEditor = <DiffView extends boolean = false>({
     theme,
     value: propValue,
@@ -184,10 +196,6 @@ const CodeEditor = <DiffView extends boolean = false>({
     }
 
     // EXTENSIONS
-    const foldConfig = foldGutter({
-        markerDOM: getFoldGutterElement,
-    })
-
     const getBaseExtensions = (): Extension[] => [
         basicSetup(basicSetupOptions),
         themeExtension,
@@ -196,6 +204,7 @@ const CodeEditor = <DiffView extends boolean = false>({
             ...(!disableSearch ? [{ key: 'Mod-f', run: openSearchPanel, scope: 'editor search-panel' }] : []),
             { key: 'Mod-Enter', run: replaceAll, scope: 'editor search-panel' },
             { key: 'Mod-Alt-f', run: openSearchPanelWithReplace, scope: 'editor search-panel' },
+            { key: 'Escape', run: blurOnEscape, stopPropagation: true },
         ]),
         indentationMarkers(),
         getLanguageExtension(mode),
@@ -206,6 +215,7 @@ const CodeEditor = <DiffView extends boolean = false>({
         }),
         showReplaceFieldState,
         ...(mode === MODES.YAML ? [yamlHighlight] : []),
+        hyperLink,
     ]
 
     const extensions: Extension[] = [
@@ -222,7 +232,6 @@ const CodeEditor = <DiffView extends boolean = false>({
         basicSetup({
             ...basicSetupOptions,
             lineNumbers: false,
-            foldGutter: false,
             highlightActiveLine: false,
             highlightActiveLineGutter: false,
             syntaxHighlighting: false,

src/Common/CodeMirror/CodeEditor.tsx

@@ -1 +1,2 @@
 export * from './findAndReplace'
+export * from './keyMaps'

src/Common/CodeMirror/Commands/index.ts

@@ -0,0 +1,6 @@
+import { Command, EditorView } from '@uiw/react-codemirror'
+
+export const blurOnEscape: Command = (view: EditorView) => {
+    view.contentDOM.blur()
+    return true
+}

src/Common/CodeMirror/Commands/keyMaps.ts

@@ -60,13 +60,12 @@ export const DiffMinimap = ({ view, diffMinimapExtensions, codeEditorTheme, them
         const { clientHeight, scrollHeight, scrollTop } = view.dom
         const minimapHeight = minimapContainerRef.current.clientHeight
 
-        let computedHeight = (clientHeight / scrollHeight) * minimapHeight
-        if (computedHeight < CODE_EDITOR_MIN_OVERLAY_HEIGHT) {
-            computedHeight = CODE_EDITOR_MIN_OVERLAY_HEIGHT
-        }
-
-        setOverlayHeight(computedHeight)
-        setOverlayTop((scrollTop / scrollHeight) * (minimapHeight - computedHeight))
+        const computedHeight = (clientHeight / scrollHeight) * minimapHeight
+        const modifiedHeight = Math.max(computedHeight, CODE_EDITOR_MIN_OVERLAY_HEIGHT)
+        setOverlayHeight(modifiedHeight)
+        setOverlayTop(
+            (scrollTop / scrollHeight) * (minimapHeight - (modifiedHeight !== computedHeight ? modifiedHeight : 0)),
+        )
     }
 
     useEffect(() => {

src/Common/CodeMirror/Extensions/DiffMinimap.tsx

@@ -19,6 +19,9 @@ import { EditorView, Extension, showTooltip, StateEffect, StateField, Tooltip, V
 import { getReadOnlyElement } from '../utils'
 import { READ_ONLY_TOOLTIP_TIMEOUT } from '../CodeEditor.constants'
 
+/** Array of keys to be ignored on keypress */
+const ignoreKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'Enter', 'Escape']
+
 // Effect to update the tooltip in the editor state
 const updateTooltipEffect = StateEffect.define<Tooltip | null>()
 
@@ -84,8 +87,15 @@ const keypressTooltipPlugin = ViewPlugin.fromClass(
             }
         }
 
-        handleKeyPress = () => {
-            if (!this.view.state.readOnly) {
+        handleKeyPress = (e: KeyboardEvent) => {
+            if (
+                !this.view.state.readOnly ||
+                ignoreKeys.includes(e.key) ||
+                e.metaKey ||
+                e.shiftKey ||
+                e.altKey ||
+                e.ctrlKey
+            ) {
                 return
             }
 

src/Common/CodeMirror/Extensions/readOnlyTooltip.ts

@@ -34,10 +34,10 @@
         border-left: 1px solid var(--N200);
     }
 
-    .cm-mergeView {
+    &:not(.code-editor__read-only) .cm-mergeView {
         position: relative;
         &::before {
-            content: "";
+            content: '';
             position: absolute;
             top: 0;
             bottom: 0;
@@ -49,6 +49,20 @@
             background-color: var(--bg-primary);
         }
     }
+
+    &.code-editor__read-only .cm-mergeView {
+        position: relative;
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: calc(50%);
+            transform: translate(-50%);
+            width: 1px;
+            background-color: var(--N200);
+        }
+    }
 }
 
 .cm-scroller {
@@ -165,11 +179,11 @@
         border-top-left-radius: 2px;
         border-bottom-left-radius: 2px;
         border-left: 2px solid var(--R500);
+        line-height: 18px;
     }
 
     .cm-diagnosticText {
         font-size: 12px;
-        line-height: 18px;
     }
 
     .cm-diagnosticSource {
@@ -268,9 +282,13 @@
         padding: 0;
     }
 
-    & .cm-line,
-    & .cm-line span {
+    & .cm-line {
         color: transparent !important;
+        padding: 0;
+
+        & span {
+            color: transparent !important;
+        }
     }
 
     & .cm-scroller {