Merge pull request #644 from devtron-labs/fix/code-editor-instance

fix: CodeEditor - Instance not destroying

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.9.0-patch-2",
+    "version": "1.9.0-patch-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -177,29 +177,54 @@ export const CodeEditorRenderer = ({
         updateDiffMinimapValues(diffMinimapRef.current, vu.transactions, 'b')
     })
 
-    // DIFF VIEW INITIALIZATION
     useEffect(() => {
+        // DIFF VIEW INITIALIZATION
         if (!loading && codeMirrorMergeParentRef.current) {
-            setCodeMirrorMergeInstance(
-                new MergeView({
+            codeMirrorMergeInstance?.destroy()
+
+            const codeMirrorMergeView = new MergeView({
+                a: {
+                    doc: lhsValue,
+                    extensions: [...originalViewExtensions, originalUpdateListener],
+                },
+                b: {
+                    doc: value,
+                    extensions: [...modifiedViewExtensions, modifiedUpdateListener],
+                },
+                ...(!readOnly ? { revertControls: 'a-to-b', renderRevertControl: getRevertControlButton } : {}),
+                diffConfig: { scanLimit: 5000 },
+                parent: codeMirrorMergeParentRef.current,
+            })
+            setCodeMirrorMergeInstance(codeMirrorMergeView)
+
+            // MINIMAP INITIALIZATION
+            if (codeMirrorMergeView && diffMinimapParentRef.current) {
+                diffMinimapInstance?.destroy()
+                diffMinimapRef.current?.destroy()
+
+                const diffMinimapMergeView = new MergeView({
                     a: {
                         doc: lhsValue,
-                        extensions: [...originalViewExtensions, originalUpdateListener],
+                        extensions: diffMinimapExtensions,
                     },
                     b: {
                         doc: value,
-                        extensions: [...modifiedViewExtensions, modifiedUpdateListener],
+                        extensions: diffMinimapExtensions,
                     },
-                    ...(!readOnly ? { revertControls: 'a-to-b', renderRevertControl: getRevertControlButton } : {}),
+                    gutter: false,
                     diffConfig: { scanLimit: 5000 },
-                    parent: codeMirrorMergeParentRef.current,
-                }),
-            )
+                    parent: diffMinimapParentRef.current,
+                })
+
+                diffMinimapRef.current = diffMinimapMergeView
+                setDiffMinimapInstance(diffMinimapMergeView)
+            }
         }
 
         return () => {
-            codeMirrorMergeInstance?.destroy()
             setCodeMirrorMergeInstance(null)
+            setDiffMinimapInstance(null)
+            diffMinimapRef.current = null
         }
     }, [loading, codemirrorMergeKey, diffMode])
 
@@ -216,39 +241,11 @@ export const CodeEditorRenderer = ({
             const modifiedDoc = codeMirrorMergeInstance.b.state.doc.toString()
             if (modifiedDoc !== value) {
                 codeMirrorMergeInstance.b.dispatch({
-                    changes: { from: 0, to: originalDoc.length, insert: value || '' },
+                    changes: { from: 0, to: modifiedDoc.length, insert: value || '' },
                 })
             }
         }
-    }, [lhsValue, value])
-
-    // MINIMAP INITIALIZATION
-    useEffect(() => {
-        if (codeMirrorMergeInstance && diffMinimapParentRef.current) {
-            const diffMinimapMergeView = new MergeView({
-                a: {
-                    doc: lhsValue,
-                    extensions: diffMinimapExtensions,
-                },
-                b: {
-                    doc: value,
-                    extensions: diffMinimapExtensions,
-                },
-                gutter: false,
-                diffConfig: { scanLimit: 5000 },
-                parent: diffMinimapParentRef.current,
-            })
-
-            diffMinimapRef.current = diffMinimapMergeView
-            setDiffMinimapInstance(diffMinimapMergeView)
-        }
-
-        return () => {
-            diffMinimapInstance?.destroy()
-            setDiffMinimapInstance(null)
-            diffMinimapRef.current = null
-        }
-    }, [codeMirrorMergeInstance])
+    }, [lhsValue, value, codeMirrorMergeInstance])
 
     // SCALING FACTOR UPDATER
     useEffect(() => {

src/Common/CodeMirror/CodeEditorRenderer.tsx

@@ -40,7 +40,7 @@ export const DiffMinimap = ({ view, theme, diffMinimapParentRef, scalingFactor }
 
     useEffect(() => {
         updateOverlay()
-    }, [scalingFactor])
+    }, [view, scalingFactor])
 
     // Sync overlay scrolling with the diff view
     const handleDiffScroll = () => {
@@ -109,7 +109,7 @@ export const DiffMinimap = ({ view, theme, diffMinimapParentRef, scalingFactor }
             document.removeEventListener('mousemove', handleOverlayMouseMove)
             document.removeEventListener('mouseup', handleOverlayMouseUp)
         }
-    }, [isDragging])
+    }, [view, isDragging])
 
     // Clicking on the minimap scrolls the diff viewer
     const handleMinimapClick = (event: React.MouseEvent<HTMLDivElement>) => {