Skip to content

Commit d354823

Browse files
deep1401deep1401
authored
Merge branch 'main' into fix/missed-await
2 parents bf3aca6 + 6d79e6a commit d354823

8 files changed

Lines changed: 90 additions & 115 deletions

File tree

‎src/renderer/components/Experiment/ExperimentNotes.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,7 @@ import { authenticatedFetch } from 'renderer/lib/api-client/functions';
1717
import { PencilIcon, TypeOutline } from 'lucide-react';
1818
import { Box, Button, Typography } from '@mui/joy';
1919
import { useExperimentInfo } from 'renderer/lib/ExperimentInfoContext.js';
20-
import fairyflossTheme from '../Shared/fairyfloss.tmTheme.js';
21-
22-
const { parseTmTheme } = require('monaco-themes');
23-
24-
function setTheme(editor: any, monaco: any) {
25-
const themeData = parseTmTheme(fairyflossTheme);
26-
27-
monaco.editor.defineTheme('my-theme', themeData);
28-
monaco.editor.setTheme('my-theme');
29-
}
20+
import { setTheme, getMonacoEditorOptions } from 'renderer/lib/monacoConfig';
3021

3122
export default function ExperimentNotes({}) {
3223
const editorRef = useRef(null);
@@ -169,14 +160,11 @@ export default function ExperimentNotes({}) {
169160
defaultLanguage="markdown"
170161
theme="my-theme"
171162
height="100%"
172-
options={{
173-
minimap: {
174-
enabled: false,
175-
},
163+
options={getMonacoEditorOptions({
176164
fontSize: 18,
177165
cursorStyle: 'block',
178166
wordWrap: 'on',
179-
}}
167+
})}
180168
onMount={handleEditorDidMount}
181169
/>
182170
</Sheet>

‎src/renderer/components/Experiment/Tasks/EditInteractiveTaskModal.tsx‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,13 @@ import {
1818
Alert,
1919
} from '@mui/joy';
2020
import { Editor } from '@monaco-editor/react';
21-
import fairyflossTheme from '../../Shared/fairyfloss.tmTheme.js';
2221
import { useRef } from 'react';
2322
import { SafeJSONParse } from '../../Shared/SafeJSONParse';
2423
import { useExperimentInfo } from 'renderer/lib/ExperimentInfoContext';
2524
import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
2625
import { useSWRWithAuth as useSWR } from 'renderer/lib/authContext';
2726
import { fetcher } from 'renderer/lib/transformerlab-api-sdk';
28-
29-
const { parseTmTheme } = require('monaco-themes');
27+
import { setTheme, getMonacoEditorOptions } from 'renderer/lib/monacoConfig';
3028

3129
type ProviderOption = {
3230
id: string;
@@ -51,12 +49,7 @@ type InteractiveTemplate = {
5149
env_parameters?: ConfigField[];
5250
};
5351

54-
function setTheme(editor: any, monaco: any) {
55-
const themeData = parseTmTheme(fairyflossTheme);
56-
57-
monaco.editor.defineTheme('my-theme', themeData);
58-
monaco.editor.setTheme('my-theme');
59-
}
52+
// setTheme is now imported from shared config
6053

6154
type EditInteractiveTaskModalProps = {
6255
open: boolean;
@@ -593,14 +586,11 @@ export default function EditInteractiveTaskModal({
593586
theme="my-theme"
594587
defaultValue={setup}
595588
height="6rem"
596-
options={{
597-
minimap: {
598-
enabled: false,
599-
},
589+
options={getMonacoEditorOptions({
600590
fontSize: 18,
601591
cursorStyle: 'block',
602592
wordWrap: 'on',
603-
}}
593+
})}
604594
onMount={handleSetupEditorDidMount}
605595
/>
606596
<FormHelperText>
@@ -615,14 +605,11 @@ export default function EditInteractiveTaskModal({
615605
theme="my-theme"
616606
defaultValue={command}
617607
height="8rem"
618-
options={{
619-
minimap: {
620-
enabled: false,
621-
},
608+
options={getMonacoEditorOptions({
622609
fontSize: 18,
623610
cursorStyle: 'block',
624611
wordWrap: 'on',
625-
}}
612+
})}
626613
onMount={handleCommandEditorDidMount}
627614
/>
628615
<FormHelperText>

‎src/renderer/components/Experiment/Tasks/EditTaskModal.tsx‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,28 +20,19 @@ import {
2020
Typography,
2121
} from '@mui/joy';
2222
import { Editor } from '@monaco-editor/react';
23-
import fairyflossTheme from '../../Shared/fairyfloss.tmTheme.js';
2423
import { Trash2Icon, PlusIcon } from 'lucide-react';
2524

2625
import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
2726
import { useNotification } from 'renderer/components/Shared/NotificationSystem';
2827
import { SafeJSONParse } from 'renderer/components/Shared/SafeJSONParse';
2928
import { useRef } from 'react';
30-
31-
const { parseTmTheme } = require('monaco-themes');
29+
import { setTheme, getMonacoEditorOptions } from 'renderer/lib/monacoConfig';
3230

3331
type ProviderOption = {
3432
id: string;
3533
name: string;
3634
};
3735

38-
function setTheme(editor: any, monaco: any) {
39-
const themeData = parseTmTheme(fairyflossTheme);
40-
41-
monaco.editor.defineTheme('my-theme', themeData);
42-
monaco.editor.setTheme('my-theme');
43-
}
44-
4536
type EditTaskModalProps = {
4637
open: boolean;
4738
onClose: () => void;
@@ -1174,13 +1165,7 @@ export default function EditTaskModal({
11741165
setTheme(editor, monaco);
11751166
}}
11761167
theme="my-theme"
1177-
options={{
1178-
minimap: { enabled: false },
1179-
fontSize: 14,
1180-
lineNumbers: 'on',
1181-
scrollBeyondLastLine: false,
1182-
automaticLayout: true,
1183-
}}
1168+
options={getMonacoEditorOptions()}
11841169
/>
11851170
</div>
11861171
<FormHelperText>

‎src/renderer/components/Experiment/Tasks/NewTaskModal.tsx‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import {
2424
Switch,
2525
} from '@mui/joy';
2626
import { Editor } from '@monaco-editor/react';
27-
import fairyflossTheme from '../../Shared/fairyfloss.tmTheme.js';
2827
import {
2928
Trash2Icon,
3029
PlusIcon,
@@ -35,15 +34,7 @@ import {
3534
import { useEffect, useRef, useState } from 'react';
3635
import { useNotification } from 'renderer/components/Shared/NotificationSystem';
3736
import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
38-
39-
const { parseTmTheme } = require('monaco-themes');
40-
41-
function setTheme(editor: any, monaco: any) {
42-
const themeData = parseTmTheme(fairyflossTheme);
43-
44-
monaco.editor.defineTheme('my-theme', themeData);
45-
monaco.editor.setTheme('my-theme');
46-
}
37+
import { setTheme, getMonacoEditorOptions } from 'renderer/lib/monacoConfig';
4738

4839
type ProviderOption = {
4940
id: string;
@@ -1476,14 +1467,9 @@ export default function NewTaskModal({
14761467
}
14771468
}}
14781469
theme="my-theme"
1479-
options={{
1480-
minimap: { enabled: false },
1481-
fontSize: 14,
1482-
lineNumbers: 'on',
1483-
scrollBeyondLastLine: false,
1484-
automaticLayout: true,
1470+
options={getMonacoEditorOptions({
14851471
readOnly: isLoadingTaskJson, // Disable editing while loading
1486-
}}
1472+
})}
14871473
/>
14881474
</div>
14891475
)}

‎src/renderer/components/Experiment/Workflows/WorkflowList/WorkflowList.tsx‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,8 @@ import NewWorkflowModal from './NewWorkflowModal';
4040
import NewNodeModal from './NewNodeModal';
4141
import WorkflowCanvas from './WorkflowCanvas';
4242
import { useNotification } from '../../../Shared/NotificationSystem';
43-
import fairyflossTheme from '../../../Shared/fairyfloss.tmTheme.js';
4443
import { fetchWithAuth } from 'renderer/lib/authContext';
45-
46-
const { parseTmTheme } = require('monaco-themes');
47-
48-
function setTheme(editor: any, monaco: any) {
49-
const themeData = parseTmTheme(fairyflossTheme);
50-
monaco.editor.defineTheme('my-theme', themeData);
51-
monaco.editor.setTheme('my-theme');
52-
}
44+
import { setTheme, getMonacoEditorOptions } from 'renderer/lib/monacoConfig';
5345

5446
function ShowCode({
5547
code,
@@ -177,14 +169,11 @@ function ShowCode({
177169
theme="my-theme"
178170
height="100%"
179171
width="100%"
180-
options={{
181-
minimap: {
182-
enabled: false,
183-
},
172+
options={getMonacoEditorOptions({
184173
fontSize: 14,
185174
cursorStyle: 'block',
186175
wordWrap: 'on',
187-
}}
176+
})}
188177
onMount={handleEditorDidMount}
189178
/>
190179
</Box>

‎src/renderer/components/Plugins/PluginDetails.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,12 @@ import { Link, useLocation, useParams } from 'react-router-dom';
3434
import { Editor } from '@monaco-editor/react';
3535
import { useEffect, useRef, useState } from 'react';
3636

37-
const parseTmTheme = require('monaco-themes').parseTmTheme;
38-
import fairyflossTheme from '../Shared/fairyfloss.tmTheme.js';
39-
4037
import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
4138
import { fetcher } from 'renderer/lib/transformerlab-api-sdk';
4239
import { useSWRWithAuth as useSWR } from 'renderer/lib/authContext';
4340
import { useExperimentInfo } from 'renderer/lib/ExperimentInfoContext.js';
4441
import { useNotification } from '../Shared/NotificationSystem';
42+
import { setTheme, getMonacoEditorOptions } from 'renderer/lib/monacoConfig';
4543

4644
function ListPluginFiles({
4745
files,
@@ -141,12 +139,7 @@ function NewFileNameModal({
141139
);
142140
}
143141

144-
function setTheme(editor: any, monaco: any) {
145-
const themeData = parseTmTheme(fairyflossTheme);
146-
147-
monaco.editor.defineTheme('my-theme', themeData);
148-
monaco.editor.setTheme('my-theme');
149-
}
142+
// setTheme is now imported from shared config
150143

151144
export default function PluginDetails() {
152145
const { experimentInfo } = useExperimentInfo();
@@ -322,14 +315,11 @@ export default function PluginDetails() {
322315
<Editor
323316
defaultLanguage="python"
324317
theme="my-theme"
325-
options={{
326-
minimap: {
327-
enabled: false,
328-
},
318+
options={getMonacoEditorOptions({
329319
fontSize: 18,
330320
cursorStyle: 'block',
331321
wordWrap: 'on',
332-
}}
322+
})}
333323
onMount={handleEditorDidMount}
334324
/>
335325
</div>

‎src/renderer/components/TasksGallery/NewTeamTaskModal.tsx‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,9 @@ import FormLabel from '@mui/joy/FormLabel';
99
import Input from '@mui/joy/Input';
1010
import { FormHelperText, ModalClose, ModalDialog, Textarea } from '@mui/joy';
1111
import { Editor } from '@monaco-editor/react';
12-
import fairyflossTheme from '../Shared/fairyfloss.tmTheme.js';
1312
import { useRef } from 'react';
1413
import { useNotification } from '../Shared/NotificationSystem';
15-
16-
const { parseTmTheme } = require('monaco-themes');
17-
18-
function setTheme(editor: any, monaco: any) {
19-
const themeData = parseTmTheme(fairyflossTheme);
20-
monaco.editor.defineTheme('my-theme', themeData);
21-
monaco.editor.setTheme('my-theme');
22-
}
14+
import { setTheme, getMonacoEditorOptions } from 'renderer/lib/monacoConfig';
2315

2416
type NewTeamTaskModalProps = {
2517
open: boolean;
@@ -196,14 +188,11 @@ export default function NewTeamTaskModal({
196188
defaultLanguage="shell"
197189
theme="my-theme"
198190
height="6rem"
199-
options={{
200-
minimap: {
201-
enabled: false,
202-
},
191+
options={getMonacoEditorOptions({
203192
fontSize: 18,
204193
cursorStyle: 'block',
205194
wordWrap: 'on',
206-
}}
195+
})}
207196
onMount={handleSetupEditorDidMount}
208197
/>
209198
<FormHelperText>
@@ -218,14 +207,11 @@ export default function NewTeamTaskModal({
218207
defaultLanguage="shell"
219208
theme="my-theme"
220209
height="8rem"
221-
options={{
222-
minimap: {
223-
enabled: false,
224-
},
210+
options={getMonacoEditorOptions({
225211
fontSize: 18,
226212
cursorStyle: 'block',
227213
wordWrap: 'on',
228-
}}
214+
})}
229215
onMount={handleCommandEditorDidMount}
230216
/>
231217
<FormHelperText>

‎src/renderer/lib/monacoConfig.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import fairyflossTheme from '../components/Shared/fairyfloss.tmTheme.js';
2+
3+
const { parseTmTheme } = require('monaco-themes');
4+
5+
/**
6+
* Sets up the Monaco Editor theme
7+
*/
8+
export function setTheme(editor: any, monaco: any) {
9+
const themeData = parseTmTheme(fairyflossTheme);
10+
monaco.editor.defineTheme('my-theme', themeData);
11+
monaco.editor.setTheme('my-theme');
12+
}
13+
14+
/**
15+
* Gets improved Monaco Editor options with better text selection support
16+
*/
17+
export function getMonacoEditorOptions(
18+
overrides: Record<string, any> = {},
19+
): Record<string, any> {
20+
return {
21+
// Text selection improvements
22+
selectOnLineNumbers: true,
23+
selectionHighlight: true,
24+
occurrencesHighlight: true,
25+
// Smart selection - enables expanding selection intelligently
26+
// Use Alt+Shift+Right to expand selection, Alt+Shift+Left to shrink
27+
selectLeadingAndTrailingWhitespace: true,
28+
// Multi-cursor and column selection
29+
multiCursorModifier: 'ctrlCmd',
30+
columnSelection: true,
31+
// Rendering improvements
32+
renderLineHighlight: 'all',
33+
renderWhitespace: 'selection',
34+
// Editing improvements
35+
dragAndDrop: true,
36+
formatOnPaste: true,
37+
formatOnType: false,
38+
// Autocomplete
39+
quickSuggestions: true,
40+
wordBasedSuggestions: false,
41+
// UI improvements
42+
minimap: { enabled: false },
43+
fontSize: 14,
44+
lineNumbers: 'on',
45+
scrollBeyondLastLine: false,
46+
automaticLayout: true,
47+
// Word wrap and cursor
48+
wordWrap: 'off',
49+
cursorStyle: 'line',
50+
// Better selection visual feedback
51+
renderIndentGuides: true,
52+
highlightActiveIndentGuide: true,
53+
// Accept suggestion on commit characters
54+
acceptSuggestionOnCommitCharacter: true,
55+
acceptSuggestionOnEnter: 'on',
56+
// Tab behavior
57+
tabSize: 2,
58+
insertSpaces: true,
59+
// Accessibility
60+
accessibilitySupport: 'auto',
61+
// ... allow overrides
62+
...overrides,
63+
};
64+
}

0 commit comments

Comments
 (0)