fix: CodeEditor - scalingFactor not getting calculated after re-render fix

Author: RohitRaj011

src/Common/CodeMirror/CodeEditorRenderer.tsx

@@ -54,6 +54,7 @@ export const CodeEditorRenderer = ({
     const [gutterWidth, setGutterWidth] = useState(0)
     const [codeMirrorMergeInstance, setCodeMirrorMergeInstance] = useState<MergeView>(null)
     const [diffMinimapInstance, setDiffMinimapInstance] = useState<MergeView>(null)
+    const [scalingFactor, setScalingFactor] = useState<number>(1)
 
     // REFS
     const codeMirrorRef = useRef<ReactCodeMirrorRef>()
@@ -198,6 +199,7 @@ export const CodeEditorRenderer = ({
 
         return () => {
             codeMirrorMergeInstance?.destroy()
+            setCodeMirrorMergeInstance(null)
         }
     }, [loading, codemirrorMergeKey, diffMode])
 
@@ -243,9 +245,22 @@ export const CodeEditorRenderer = ({
 
         return () => {
             diffMinimapInstance?.destroy()
+            setDiffMinimapInstance(null)
+            diffMinimapRef.current = null
         }
     }, [codeMirrorMergeInstance])
 
+    // SCALING FACTOR UPDATER
+    useEffect(() => {
+        setTimeout(() => {
+            setScalingFactor(
+                codeMirrorMergeInstance
+                    ? Math.min(codeMirrorMergeInstance.dom.clientHeight / codeMirrorMergeInstance.dom.scrollHeight, 1)
+                    : 1,
+            )
+        }, 100)
+    }, [lhsValue, value, codeMirrorMergeInstance])
+
     const { codeEditorClassName, codeEditorHeight, codeEditorParentClassName } = getCodeEditorHeight(height)
 
     if (loading) {
@@ -267,8 +282,8 @@ export const CodeEditorRenderer = ({
             <DiffMinimap
                 theme={theme}
                 view={codeMirrorMergeInstance}
-                minimapView={diffMinimapInstance}
                 diffMinimapParentRef={diffMinimapParentRef}
+                scalingFactor={scalingFactor}
             />
         </div>
     ) : (

src/Common/CodeMirror/Extensions/DiffMinimap.tsx

@@ -1,15 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { getComponentSpecificThemeClass } from '@Shared/Providers'
 
 import { DiffMinimapProps } from '../types'
 import { CODE_EDITOR_FONT_SIZE, CODE_EDITOR_MIN_OVERLAY_HEIGHT } from '../CodeEditor.constants'
-import { useCodeEditorContext } from '../CodeEditor.context'
-
-export const DiffMinimap = ({ view, minimapView, theme, diffMinimapParentRef }: DiffMinimapProps) => {
-    // CONTEXTS
-    const { lhsValue, value } = useCodeEditorContext()
 
+export const DiffMinimap = ({ view, theme, diffMinimapParentRef, scalingFactor }: DiffMinimapProps) => {
     // STATES
     const [overlayTop, setOverlayTop] = useState<number>(0)
     const [overlayHeight, setOverlayHeight] = useState<number>(50)
@@ -24,14 +20,6 @@ export const DiffMinimap = ({ view, minimapView, theme, diffMinimapParentRef }:
     // CONSTANTS
     const componentSpecificThemeClass = getComponentSpecificThemeClass(theme)
 
-    const scalingFactor = useMemo(() => {
-        if (view) {
-            return Math.min(view.dom.clientHeight / view.dom.scrollHeight, 1)
-        }
-
-        return 1
-    }, [lhsValue, value, view, minimapView])
-
     // Update the overlay position and size
     const updateOverlay = () => {
         if (!view?.dom || !minimapContainerRef.current || !overlayRef.current) {

src/Common/CodeMirror/types.ts

@@ -150,6 +150,6 @@ export type CodeEditorRendererProps = Required<
 
 export interface DiffMinimapProps extends Pick<CodeEditorRendererProps, 'theme'> {
     view: MergeView
-    minimapView: MergeView
     diffMinimapParentRef: MutableRefObject<HTMLDivElement>
+    scalingFactor: number
 }