Skip to content

Commit d86c20e

Browse files
aslilacaslilac
committed
fix the editor
1 parent 6833e6b commit d86c20e

File tree

11 files changed

+156
-64
lines changed

11 files changed

+156
-64
lines changed

‎site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
9292
}
9393
9494
&.Mui-selected {
95-
color: ${theme.palette.text.primary};
96-
background: ${theme.colors.gray[14]};
95+
color: ${theme.experimental.roles.active.text};
96+
background: ${theme.experimental.roles.active.background};
9797
}
9898
9999
&.Mui-focused {
@@ -133,16 +133,13 @@ export const FileTreeView: FC<FileTreeViewProps> = ({
133133
} as CSSProperties
134134
}
135135
>
136-
{isFolder ? (
136+
{isFolder &&
137137
Object.keys(content)
138138
.sort(sortFileTree(content))
139139
.map((filename) => {
140140
const child = content[filename];
141141
return buildTreeItems(filename, child, currentPath);
142-
})
143-
) : (
144-
<></>
145-
)}
142+
})}
146143
</TreeItem>
147144
);
148145
};

‎site/src/pages/TemplateVersionEditorPage/MonacoEditor.tsx

Lines changed: 25 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
import { useTheme } from "@emotion/react";
22
import Editor, { loader } from "@monaco-editor/react";
33
import * as monaco from "monaco-editor";
4-
import { FC, useMemo } from "react";
4+
import { type FC, useEffect, useMemo } from "react";
55
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
66

77
loader.config({ monaco });
88

9-
export const MonacoEditor: FC<{
9+
interface MonacoEditorProps {
1010
value?: string;
1111
path?: string;
1212
onChange?: (value: string) => void;
13-
}> = ({ onChange, value, path }) => {
13+
}
14+
15+
export const MonacoEditor: FC<MonacoEditorProps> = ({
16+
onChange,
17+
value,
18+
path,
19+
}) => {
1420
const theme = useTheme();
1521

1622
const language = useMemo(() => {
@@ -31,6 +37,20 @@ export const MonacoEditor: FC<{
3137
}
3238
}, [path]);
3339

40+
useEffect(() => {
41+
document.fonts.ready
42+
.then(() => {
43+
// Ensures that all text is measured properly.
44+
// If this isn't done, there can be weird selection issues.
45+
monaco.editor.remeasureFonts();
46+
})
47+
.catch(() => {
48+
// Not a biggie!
49+
});
50+
51+
monaco.editor.defineTheme("min", theme.monaco);
52+
}, [theme]);
53+
3454
return (
3555
<Editor
3656
value={value}
@@ -52,62 +72,16 @@ export const MonacoEditor: FC<{
5272
onChange(newValue);
5373
}
5474
}}
55-
onMount={(editor, monaco) => {
75+
onMount={(editor) => {
5676
// This jank allows for Ctrl + Enter to work outside the editor.
5777
// We use this keybind to trigger a build.
5878
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Private type in Monaco!
5979
(editor as any)._standaloneKeybindingService.addDynamicKeybinding(
6080
`-editor.action.insertLineAfter`,
6181
monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
62-
() => {
63-
//
64-
},
82+
() => {},
6583
);
6684

67-
document.fonts.ready
68-
.then(() => {
69-
// Ensures that all text is measured properly.
70-
// If this isn't done, there can be weird selection issues.
71-
monaco.editor.remeasureFonts();
72-
})
73-
.catch(() => {
74-
// Not a biggie!
75-
});
76-
77-
monaco.editor.defineTheme("min", {
78-
base: "vs-dark",
79-
inherit: true,
80-
rules: [
81-
{
82-
token: "comment",
83-
foreground: "6B737C",
84-
},
85-
{
86-
token: "type",
87-
foreground: "B392F0",
88-
},
89-
{
90-
token: "string",
91-
foreground: "9DB1C5",
92-
},
93-
{
94-
token: "variable",
95-
foreground: "BBBBBB",
96-
},
97-
{
98-
token: "identifier",
99-
foreground: "B392F0",
100-
},
101-
{
102-
token: "delimiter.curly",
103-
foreground: "EBB325",
104-
},
105-
],
106-
colors: {
107-
"editor.foreground": theme.palette.text.primary,
108-
"editor.background": theme.palette.background.paper,
109-
},
110-
});
11185
editor.updateOptions({
11286
theme: "min",
11387
});

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { chromatic } from "testHelpers/chromatic";
13
import {
24
MockFailedProvisionerJob,
35
MockRunningProvisionerJob,
@@ -14,19 +16,19 @@ import {
1416
MockWorkspaceVolumeResource,
1517
} from "testHelpers/entities";
1618
import { TemplateVersionEditor } from "./TemplateVersionEditor";
17-
import type { Meta, StoryObj } from "@storybook/react";
1819

1920
const meta: Meta<typeof TemplateVersionEditor> = {
20-
title: "pages/TemplateVersionEditorPage",
21+
title: "pages/TemplateVersionEditor",
22+
parameters: {
23+
chromatic,
24+
layout: "fullscreen",
25+
},
2126
component: TemplateVersionEditor,
2227
args: {
2328
template: MockTemplate,
2429
templateVersion: MockTemplateVersion,
2530
defaultFileTree: MockTemplateVersionFileTree,
2631
},
27-
parameters: {
28-
layout: "fullscreen",
29-
},
3032
};
3133

3234
export default meta;

‎site/src/theme/dark/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import colors from "./colors";
22
import experimental from "./experimental";
3+
import monaco from "./monaco";
34
import muiTheme from "./mui";
45

56
export default {
67
...muiTheme,
78
colors,
89
experimental,
10+
monaco,
911
};

‎site/src/theme/dark/monaco.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import muiTheme from "./mui";
2+
import type * as monaco from "monaco-editor";
3+
4+
export default {
5+
base: "vs-dark",
6+
inherit: true,
7+
rules: [
8+
{
9+
token: "comment",
10+
foreground: "6B737C",
11+
},
12+
{
13+
token: "type",
14+
foreground: "B392F0",
15+
},
16+
{
17+
token: "string",
18+
foreground: "9DB1C5",
19+
},
20+
{
21+
token: "variable",
22+
foreground: "DDDDDD",
23+
},
24+
{
25+
token: "identifier",
26+
foreground: "B392F0",
27+
},
28+
{
29+
token: "delimiter.curly",
30+
foreground: "EBB325",
31+
},
32+
],
33+
colors: {
34+
"editor.foreground": muiTheme.palette.text.primary,
35+
"editor.background": muiTheme.palette.background.paper,
36+
},
37+
} satisfies monaco.editor.IStandaloneThemeData;

‎site/src/theme/darkBlue/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import colors from "./colors";
22
import experimental from "./experimental";
3+
import monaco from "./monaco";
34
import muiTheme from "./mui";
45

56
export default {
67
...muiTheme,
78
colors,
89
experimental,
10+
monaco,
911
};

‎site/src/theme/darkBlue/monaco.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import muiTheme from "./mui";
2+
import type * as monaco from "monaco-editor";
3+
4+
export default {
5+
base: "vs-dark",
6+
inherit: true,
7+
rules: [
8+
{
9+
token: "comment",
10+
foreground: "6B737C",
11+
},
12+
{
13+
token: "type",
14+
foreground: "B392F0",
15+
},
16+
{
17+
token: "string",
18+
foreground: "9DB1C5",
19+
},
20+
{
21+
token: "variable",
22+
foreground: "DDDDDD",
23+
},
24+
{
25+
token: "identifier",
26+
foreground: "B392F0",
27+
},
28+
{
29+
token: "delimiter.curly",
30+
foreground: "EBB325",
31+
},
32+
],
33+
colors: {
34+
"editor.foreground": muiTheme.palette.text.primary,
35+
"editor.background": muiTheme.palette.background.paper,
36+
},
37+
} satisfies monaco.editor.IStandaloneThemeData;

‎site/src/theme/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Theme as MuiTheme } from "@mui/material/styles";
2+
import type * as monaco from "monaco-editor";
23
import dark from "./dark";
34
import darkBlue from "./darkBlue";
45
import light from "./light";
@@ -8,6 +9,7 @@ import type { Colors } from "./colors";
89
export interface Theme extends MuiTheme {
910
colors: Colors;
1011
experimental: NewTheme;
12+
monaco: monaco.editor.IStandaloneThemeData;
1113
}
1214

1315
export const DEFAULT_THEME = "auto";

‎site/src/theme/light/experimental.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export default {
109109
},
110110
},
111111
active: {
112-
background: colors.sky[50],
112+
background: colors.sky[100],
113113
outline: colors.sky[500],
114114
fill: colors.sky[600],
115115
text: colors.sky[950],

‎site/src/theme/light/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import colors from "./colors";
22
import experimental from "./experimental";
3+
import monaco from "./monaco";
34
import muiTheme from "./mui";
45

56
export default {
67
...muiTheme,
78
colors,
89
experimental,
10+
monaco,
911
};

‎site/src/theme/light/monaco.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import muiTheme from "./mui";
2+
import type * as monaco from "monaco-editor";
3+
4+
export default {
5+
base: "vs",
6+
inherit: true,
7+
rules: [
8+
{
9+
token: "comment",
10+
foreground: "6B737C",
11+
},
12+
{
13+
token: "type",
14+
foreground: "682CD7",
15+
},
16+
{
17+
token: "string",
18+
foreground: "1766B4",
19+
},
20+
{
21+
token: "variable",
22+
foreground: "444444",
23+
},
24+
{
25+
token: "identifier",
26+
foreground: "682CD7",
27+
},
28+
{
29+
token: "delimiter.curly",
30+
foreground: "EBB325",
31+
},
32+
],
33+
colors: {
34+
"editor.foreground": muiTheme.palette.text.primary,
35+
"editor.background": muiTheme.palette.background.paper,
36+
},
37+
} satisfies monaco.editor.IStandaloneThemeData;

0 commit comments

Comments
 (0)