feat: CodeEditor

 - Header - redesign header to have consistent height
 - DiffMiniMap - color tokens update, fixed issue of not showing until editor is modified
 - DiffView - Sync horizontal scroll of the editors

Author: RohitRaj011

src/Common/CodeEditor/CodeEditor.tsx

@@ -391,16 +391,18 @@ const Header: React.FC<CodeEditorHeaderInterface> & CodeEditorHeaderComposition
     children,
     className,
     hideDefaultSplitHeader,
-    diffViewWidth,
 }) => {
-    const { defaultValue } = useCodeEditorContext()
+    const { defaultValue, state } = useCodeEditorContext()
     return (
-        <div
-            className={className || 'code-editor__header flex right'}
-            style={{ ...(diffViewWidth ? { width: 'calc(100% - 30px)' } : {}) }}
-        >
-            {children}
-            {!hideDefaultSplitHeader && defaultValue && <SplitPane />}
+        <div className="flexbox w-100 dc__border-bottom ">
+            <div
+                data-code-editor-header
+                className={`code-editor__header flex-grow-1 bg__secondary ${className || ''} ${state.diffMode ? 'dc__grid-half vertical-divider' : ''}`}
+            >
+                {children}
+                {!hideDefaultSplitHeader && defaultValue && <SplitPane />}
+            </div>
+            {state.diffMode ? <div className="bg__secondary px-15 dc__align-self-stretch" /> : null}
         </div>
     )
 }

src/Common/CodeEditor/codeEditor.scss

@@ -15,11 +15,6 @@
  */
 
  .code-editor__header {
-  height: 40px;
-  background: var(--N100);
-  padding: 0 16px;
-  border-bottom: 1px solid var(--N200);
-
   .radio-group {
       height: 24px;
       overflow: hidden;

src/Common/CodeEditor/types.ts

@@ -82,7 +82,6 @@ export interface CodeEditorHeaderInterface {
     children?: any
     className?: string
     hideDefaultSplitHeader?: boolean
-    diffViewWidth?: boolean
 }
 export interface CodeEditorComposition {
     Header?: React.FC<any>

src/Common/CodeMirror/CodeEditor.components.tsx

@@ -47,12 +47,15 @@ export const Header = ({ children, className, hideDefaultSplitHeader }: CodeEdit
     const { state, hasCodeEditorContainer } = useCodeEditorContext()
 
     return (
-        <div
-            data-code-editor-header
-            className={`${hasCodeEditorContainer ? 'dc__top-radius-4' : ''} ${className || 'code-editor__header flex right bcn-1 pt-10 pb-9 px-16 dc__border-bottom'}`}
-        >
-            {children}
-            {!hideDefaultSplitHeader && state.lhsCode && <SplitPane />}
+        <div className="flexbox w-100 dc__border-bottom ">
+            <div
+                data-code-editor-header
+                className={`${hasCodeEditorContainer ? 'dc__top-radius-4' : ''} code-editor__header flex-grow-1 bg__secondary ${className || ''} ${state.diffMode ? 'dc__grid-half vertical-divider' : ''}`}
+            >
+                {children}
+                {!hideDefaultSplitHeader && state.lhsCode && <SplitPane />}
+            </div>
+            {state.diffMode ? <div className="bg__secondary px-5 dc__align-self-stretch" /> : null}
         </div>
     )
 }

src/Common/CodeMirror/CodeEditorRenderer.tsx

@@ -19,6 +19,7 @@ import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'
 import CodeMirrorMerge, { CodeMirrorMergeRef } from 'react-codemirror-merge'
 
 import { getComponentSpecificThemeClass } from '@Shared/Providers'
+import { getUniqueId } from '@Shared/Helpers'
 import { Progressing } from '@Common/Progressing'
 
 import { CodeEditorRendererProps } from './types'
@@ -50,6 +51,7 @@ export const CodeEditorRenderer = ({
     // STATES
     const [isFocused, setIsFocused] = useState(false)
     const [gutterWidth, setGutterWidth] = useState(0)
+    const [codeEditorDiffViewKey, setCodeEditorDiffViewKey] = useState<string>('')
 
     // REFS
     const codeMirrorRef = useRef<ReactCodeMirrorRef>()
@@ -90,6 +92,44 @@ export const CodeEditorRenderer = ({
         updateGutterWith()
     }, [state.lhsCode, state.code, isFocused])
 
+    // SYNCING LEFT RIGHT EDITOR HORIZONTAL SCROLLS
+    const handleLHSScroll = () => {
+        codeMirrorMergeRef.current.view.a.scrollDOM.scrollTo({
+            left: codeMirrorMergeRef.current.view.b.scrollDOM.scrollLeft,
+        })
+    }
+
+    const handleRHSScroll = () => {
+        codeMirrorMergeRef.current.view.b.scrollDOM.scrollTo({
+            left: codeMirrorMergeRef.current.view.a.scrollDOM.scrollLeft,
+        })
+    }
+    useEffect(() => {
+        if (!loading) {
+            // This timeout is added to ensure ref of diff editor is properly initialized and \
+            // key state is set to trigger re-render of diffMinimap with diff editor latest ref.
+            setTimeout(() => {
+                setCodeEditorDiffViewKey(getUniqueId())
+
+                // SYNCING LEFT RIGHT EDITOR HORIZONTAL SCROLLS
+                if (codeMirrorMergeRef.current?.view) {
+                    codeMirrorMergeRef.current.view.a.scrollDOM.addEventListener('scroll', handleRHSScroll)
+                    codeMirrorMergeRef.current.view.b.scrollDOM.addEventListener('scroll', handleLHSScroll)
+                }
+            }, 0)
+        }
+
+        return () => {
+            setCodeEditorDiffViewKey('')
+
+            // SYNCING LEFT RIGHT EDITOR HORIZONTAL SCROLLS
+            if (codeMirrorMergeRef.current?.view) {
+                codeMirrorMergeRef.current.view.b.scrollDOM.removeEventListener('scroll', handleLHSScroll)
+                codeMirrorMergeRef.current.view.a.scrollDOM.removeEventListener('scroll', handleRHSScroll)
+            }
+        }
+    }, [loading])
+
     const onCreateEditor = () => {
         updateGutterWith()
     }
@@ -141,15 +181,14 @@ export const CodeEditorRenderer = ({
                     extensions={modifiedViewExtensions}
                 />
             </CodeMirrorMerge>
-            {codeMirrorMergeRef.current && (
-                <DiffMinimap
-                    theme={theme}
-                    codeEditorTheme={codeEditorTheme}
-                    view={codeMirrorMergeRef.current.view}
-                    state={state}
-                    diffMinimapExtensions={diffMinimapExtensions}
-                />
-            )}
+            <DiffMinimap
+                key={codeEditorDiffViewKey}
+                theme={theme}
+                codeEditorTheme={codeEditorTheme}
+                view={codeMirrorMergeRef.current?.view}
+                state={state}
+                diffMinimapExtensions={diffMinimapExtensions}
+            />
         </div>
     ) : (
         <div ref={codeMirrorParentDivRef} className={`w-100 ${codeEditorParentClassName}`}>

src/Common/CodeMirror/codeEditor.scss

@@ -234,16 +234,20 @@
         &.cm-merge-a .cm-changedText,
         .cm-deletedChunk .cm-deletedText,
         &.cm-merge-a .cm-changedLineGutter {
-            background-color: var(--R200);
+            background-color: var(--R300);
         }
 
         &.cm-merge-b .cm-changedLine,
         &.cm-merge-b .cm-changedText,
         &.cm-merge-b .cm-changedLineGutter {
-            background: var(--G200);
+            background: var(--G300);
         }
     }
 
+    .cm-content {
+        padding: 0;
+    }
+
     & .cm-line,
     & .cm-line span {
         color: transparent !important;