refactor: CodeEditor - diff minimap improvements, add selection color tokens

Author: RohitRaj011

src/Common/CodeMirror/CodeEditor.constants.ts

@@ -32,3 +32,5 @@ export const READ_ONLY_TOOLTIP_TIMEOUT = 2000
 export const CODE_EDITOR_FONT_SIZE = 15
 
 export const CODE_EDITOR_LINE_HEIGHT = 1.4
+
+export const CODE_EDITOR_MIN_OVERLAY_HEIGHT = 20

src/Common/CodeMirror/CodeEditor.theme.ts

@@ -82,6 +82,8 @@ export const getCodeEditorTheme = (isDark: boolean) => {
                 gutterForeground: 'var(--N500)',
                 gutterBorder: 'transparent',
                 lineHighlight: 'var(--active-line)',
+                selection: 'var(--selection-color)',
+                selectionMatch: 'var(--selection-match-color)',
             },
             styles,
             theme: isDark ? 'dark' : 'light',

src/Common/CodeMirror/CodeEditor.tsx

@@ -75,7 +75,6 @@ const CodeEditor = <DiffView extends boolean = false>({
     onFocus,
     autoFocus,
     disableSearch = false,
-    showDiffMinimap,
 }: CodeEditorProps<DiffView>) => {
     // HOOKS
     const { appTheme } = useTheme()
@@ -255,7 +254,6 @@ const CodeEditor = <DiffView extends boolean = false>({
                 modifiedViewExtensions={modifiedViewExtensions}
                 extensions={extensions}
                 diffMinimapExtensions={diffMinimapExtensions}
-                showDiffMinimap={showDiffMinimap}
             />
         </CodeEditorContext.Provider>
     )

src/Common/CodeMirror/CodeEditorRenderer.tsx

@@ -48,7 +48,6 @@ export const CodeEditorRenderer = ({
     extensions,
     autoFocus,
     diffMinimapExtensions,
-    showDiffMinimap = true,
 }: CodeEditorRendererProps) => {
     // CONTEXTS
     const { value, lhsValue, diffMode } = useCodeEditorContext()
@@ -197,15 +196,13 @@ export const CodeEditorRenderer = ({
                     extensions={modifiedViewExtensions}
                 />
             </CodeMirrorMerge>
-            {showDiffMinimap && (
-                <DiffMinimap
-                    key={codeEditorDiffViewKey}
-                    theme={theme}
-                    codeEditorTheme={codeEditorTheme}
-                    view={codeMirrorMergeRef.current?.view}
-                    diffMinimapExtensions={diffMinimapExtensions}
-                />
-            )}
+            <DiffMinimap
+                key={codeEditorDiffViewKey}
+                theme={theme}
+                codeEditorTheme={codeEditorTheme}
+                view={codeMirrorMergeRef.current?.view}
+                diffMinimapExtensions={diffMinimapExtensions}
+            />
         </div>
     ) : (
         <div

src/Common/CodeMirror/Extensions/diffMinimap.tsx renamed to src/Common/CodeMirror/Extensions/DiffMinimap.tsx

@@ -1,13 +1,18 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { EditorView } from '@uiw/react-codemirror'
 import CodeMirrorMerge, { CodeMirrorMergeRef } from 'react-codemirror-merge'
 
 import { getComponentSpecificThemeClass } from '@Shared/Providers'
+import { useDebouncedEffect } from '@Common/DebouncedSearch/Utils'
 
 import { DiffMinimapProps } from '../types'
-import { CODE_EDITOR_FONT_SIZE, CODE_EDITOR_LINE_HEIGHT } from '../CodeEditor.constants'
+import { CODE_EDITOR_FONT_SIZE, CODE_EDITOR_LINE_HEIGHT, CODE_EDITOR_MIN_OVERLAY_HEIGHT } from '../CodeEditor.constants'
+import { useCodeEditorContext } from '../CodeEditor.context'
+import { updateDiffMinimapValues } from '../utils'
+
+export const DiffMinimap = ({ view, diffMinimapExtensions, codeEditorTheme, theme }: DiffMinimapProps) => {
+    // CONTEXTS
+    const { lhsValue, value } = useCodeEditorContext()
 
-export const DiffMinimap = ({ view, state, diffMinimapExtensions, codeEditorTheme, theme }: DiffMinimapProps) => {
     // STATES
     const [overlayTop, setOverlayTop] = useState<number>(0)
     const [overlayHeight, setOverlayHeight] = useState<number>(50)
@@ -24,12 +29,27 @@ export const DiffMinimap = ({ view, state, diffMinimapExtensions, codeEditorThem
     const componentSpecificThemeClass = getComponentSpecificThemeClass(theme)
 
     const scalingFactor = useMemo(() => {
-        if (view?.dom) {
-            return view.dom.clientHeight / view.dom.scrollHeight
+        if (view) {
+            return Math.min(view.dom.clientHeight / view.dom.scrollHeight, 1)
         }
 
         return 1
-    }, [view?.a.state.doc.length, view?.b.state.doc.length])
+    }, [lhsValue, value])
+
+    // SETTING INITIAL DIFF MINI MAP VALUES
+    useEffect(() => {
+        setTimeout(() => {
+            updateDiffMinimapValues(minimapEditorRef.current?.view, value, lhsValue)
+        }, 0)
+    }, [])
+
+    useDebouncedEffect(
+        () => {
+            updateDiffMinimapValues(minimapEditorRef.current?.view, value, lhsValue)
+        },
+        300,
+        [value, lhsValue, scalingFactor],
+    )
 
     // Update the overlay position and size
     const updateOverlay = () => {
@@ -40,11 +60,13 @@ export const DiffMinimap = ({ view, state, diffMinimapExtensions, codeEditorThem
         const { clientHeight, scrollHeight, scrollTop } = view.dom
         const minimapHeight = minimapContainerRef.current.clientHeight
 
-        const _overlayHeight = (clientHeight / scrollHeight) * minimapHeight
-        const _overlayTop = (scrollTop / scrollHeight) * minimapHeight
+        let computedHeight = (clientHeight / scrollHeight) * minimapHeight
+        if (computedHeight < CODE_EDITOR_MIN_OVERLAY_HEIGHT) {
+            computedHeight = CODE_EDITOR_MIN_OVERLAY_HEIGHT
+        }
 
-        setOverlayHeight(_overlayHeight)
-        setOverlayTop(_overlayTop)
+        setOverlayHeight(computedHeight)
+        setOverlayTop((scrollTop / scrollHeight) * (minimapHeight - computedHeight))
     }
 
     useEffect(() => {
@@ -93,18 +115,18 @@ export const DiffMinimap = ({ view, state, diffMinimapExtensions, codeEditorThem
     }
 
     useEffect(() => {
-        if (view?.dom) {
+        if (view) {
             const { dom } = view
             dom.addEventListener('scroll', handleDiffScroll)
         }
 
         return () => {
-            if (view?.dom) {
+            if (view) {
                 const { dom } = view
                 dom.removeEventListener('scroll', handleDiffScroll)
             }
         }
-    }, [view])
+    }, [])
 
     useEffect(() => {
         if (isDragging) {
@@ -132,13 +154,6 @@ export const DiffMinimap = ({ view, state, diffMinimapExtensions, codeEditorThem
         view.dom.scrollTo({ top: scrollRatio * (scrollHeight - clientHeight) })
     }
 
-    const minimapTheme = EditorView.theme({
-        '&.cm-editor': {
-            fontSize: `${scalingFactor * CODE_EDITOR_FONT_SIZE}px`,
-            lineHeight: `${scalingFactor * CODE_EDITOR_LINE_HEIGHT}`,
-        },
-    })
-
     return (
         <div
             ref={minimapContainerRef}
@@ -150,20 +165,23 @@ export const DiffMinimap = ({ view, state, diffMinimapExtensions, codeEditorThem
                 theme={codeEditorTheme}
                 className="code-editor__mini-map dc__overflow-hidden w-100"
                 gutter={false}
+                destroyRerender={false}
+                style={{
+                    fontSize: `${scalingFactor * CODE_EDITOR_FONT_SIZE}px`,
+                    lineHeight: `${scalingFactor * CODE_EDITOR_LINE_HEIGHT}`,
+                }}
             >
                 <CodeMirrorMerge.Original
                     basicSetup={false}
-                    value={state.lhsCode}
                     readOnly
                     editable={false}
-                    extensions={[...diffMinimapExtensions, minimapTheme]}
+                    extensions={diffMinimapExtensions}
                 />
                 <CodeMirrorMerge.Modified
                     basicSetup={false}
-                    value={state.code}
                     readOnly
                     editable={false}
-                    extensions={[...diffMinimapExtensions, minimapTheme]}
+                    extensions={diffMinimapExtensions}
                 />
             </CodeMirrorMerge>
             <div

src/Common/CodeMirror/Extensions/index.ts

@@ -18,4 +18,4 @@ export * from './yamlParseLinter'
 export * from './readOnlyTooltip'
 export * from './findAndReplace'
 export * from './yamlHighlight'
-export * from './diffMinimap'
+export * from './DiffMinimap'

src/Common/CodeMirror/codeEditor.scss

@@ -246,6 +246,9 @@
     pointer-events: none;
 
     .cm-editor {
+        font-size: inherit;
+        line-height: inherit;
+
         &.cm-merge-a .cm-changedLine,
         .cm-deletedChunk,
         &.cm-merge-a .cm-changedText,

src/Common/CodeMirror/types.ts

@@ -78,7 +78,6 @@ export type CodeEditorProps<DiffView extends boolean = false> = {
     disableSearch?: boolean
     diffView?: DiffView
     theme?: AppThemeType
-    showDiffMinimap?: boolean
 } & CodeEditorPropsBasedOnDiffView<DiffView>
 
 export interface GetCodeEditorHeightReturnType {
@@ -136,7 +135,6 @@ export type CodeEditorRendererProps = Required<
         | 'onBlur'
         | 'onFocus'
         | 'autoFocus'
-        | 'showDiffMinimap'
     >
 > &
     Required<Pick<CodeEditorDiffBaseProps, 'isOriginalModifiable'>> & {

src/Common/CodeMirror/utils.tsx

@@ -24,6 +24,7 @@ import { json, jsonLanguage, jsonParseLinter } from '@codemirror/lang-json'
 import { yaml, yamlLanguage } from '@codemirror/lang-yaml'
 import { shell } from '@codemirror/legacy-modes/mode/shell'
 import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile'
+import { CodeMirrorMergeRef } from 'react-codemirror-merge'
 
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 
@@ -135,6 +136,27 @@ export const getUpdatedSearchMatchesCount = (newQuery: SearchQuery, view: Editor
     return updatedMatchesCount
 }
 
+export const updateDiffMinimapValues = (view: CodeMirrorMergeRef['view'], value: string, lhsValue: string) => {
+    if (!view) {
+        return
+    }
+
+    const currentLhsValue = view.a.state.doc.toString()
+    const currentRhsValue = view.b.state.doc.toString()
+
+    if (currentRhsValue !== value) {
+        view.b.dispatch({
+            changes: { from: 0, to: currentRhsValue.length, insert: value || '' },
+        })
+    }
+
+    if (currentLhsValue !== lhsValue) {
+        view.a.dispatch({
+            changes: { from: 0, to: currentLhsValue.length, insert: lhsValue || '' },
+        })
+    }
+}
+
 // DOM HELPERS
 export const getFoldGutterElement = (open: boolean) => {
     const icon = document.createElement('span')