@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react';
22import { parseColor } from 'react-aria-components' ;
33
44import { useRootLoaderData } from '~/root' ;
5+ import { useIsLightTheme } from '~/ui/hooks/theme' ;
56
67import { monaco } from './monaco.client' ;
78
@@ -14,6 +15,9 @@ export const DiffEditor = ({ original, modified }: { original: string; modified:
1415 modified ?: monaco . editor . ITextModel ;
1516 } > ( { } ) ;
1617
18+ const isLightTheme = useIsLightTheme ( ) ;
19+ const isLightThemeRef = useRef ( isLightTheme ) ;
20+
1721 const { settings } = useRootLoaderData ( ) ! ;
1822
1923 // 1) Define theme when settings change
@@ -63,7 +67,7 @@ export const DiffEditor = ({ original, modified }: { original: string; modified:
6367 } ) ;
6468
6569 // Apply theme (global)
66- monaco . editor . setTheme ( 'insomnia' ) ;
70+ // monaco.editor.setTheme('insomnia');
6771
6872 // Re-layout if editor exists
6973 editorRef . current ?. layout ( undefined , true ) ;
@@ -78,17 +82,29 @@ export const DiffEditor = ({ original, modified }: { original: string; modified:
7882 renderSideBySide : true ,
7983 useInlineViewWhenSpaceIsLimited : true ,
8084 readOnly : true ,
81- lineNumbers : 'off' ,
8285 scrollBeyondLastLine : false ,
8386 automaticLayout : true ,
8487 contextmenu : false ,
8588 minimap : { enabled : false } ,
89+ hideUnchangedRegions : {
90+ enabled : true ,
91+ contextLineCount : 3 ,
92+ minimumLineCount : 3 ,
93+ revealLineCount : 20 ,
94+ } ,
95+
96+ // You can optionally disable the resizing
97+ enableSplitViewResizing : false ,
98+ // Additional options for better testing experience
99+ theme : isLightThemeRef . current ? 'vs' : 'vs-dark' ,
100+ // Enable glyph margin for both editors
101+ glyphMargin : true ,
86102 } ) ;
87103
88104 editorRef . current = diffEditor ;
89105
90106 // Make sure theme vars are applied
91- monaco . editor . setTheme ( 'insomnia ' ) ;
107+ // monaco.editor.setTheme('vs-dark ');
92108
93109 // Layout next frame (helps in Electron)
94110 requestAnimationFrame ( ( ) => diffEditor . layout ( undefined , true ) ) ;
@@ -143,8 +159,38 @@ export const DiffEditor = ({ original, modified }: { original: string; modified:
143159 } ) ;
144160
145161 // Re-apply theme vars + layout (cheap)
146- monaco . editor . setTheme ( 'insomnia' ) ;
162+ // monaco.editor.setTheme('insomnia');
147163 diffEditor . layout ( undefined , true ) ;
164+
165+ setTimeout ( ( ) => {
166+ const diffEditor = editorRef . current ;
167+ if ( ! diffEditor ) return ;
168+ const originalEditor = diffEditor . getOriginalEditor ( ) ;
169+ const modifiedEditor = diffEditor . getModifiedEditor ( ) ;
170+ console . log ( 'Adding decorations to main editor' ) ;
171+ originalEditor . createDecorationsCollection ( [
172+ {
173+ range : new monaco . Range ( 41 , 1 , 41 , 20 ) ,
174+ options : {
175+ glyphMarginClassName : 'info-decoration' ,
176+ hoverMessage : [ { value : `**Main Editor Info**` } , { value : 'Main editor hover message' } ] ,
177+ isWholeLine : true ,
178+ showIfCollapsed : true ,
179+ } ,
180+ } ,
181+ ] ) ;
182+ modifiedEditor . createDecorationsCollection ( [
183+ {
184+ range : new monaco . Range ( 41 , 1 , 41 , 20 ) ,
185+ options : {
186+ glyphMarginClassName : 'info-decoration' ,
187+ hoverMessage : [ { value : `**Main Editor Info**` } , { value : 'Main editor hover message' } ] ,
188+ isWholeLine : true ,
189+ showIfCollapsed : true ,
190+ } ,
191+ } ,
192+ ] ) ;
193+ } , 500 ) ;
148194 } , [ original , modified ] ) ;
149195
150196 return < div className = "h-full w-full" ref = { monacoEl } /> ;
0 commit comments