aboutsummaryrefslogtreecommitdiffstats
path: root/subprojects/frontend/src/editor/EditorParent.ts
diff options
context:
space:
mode:
Diffstat (limited to 'subprojects/frontend/src/editor/EditorParent.ts')
-rw-r--r--subprojects/frontend/src/editor/EditorParent.ts228
1 files changed, 0 insertions, 228 deletions
diff --git a/subprojects/frontend/src/editor/EditorParent.ts b/subprojects/frontend/src/editor/EditorParent.ts
deleted file mode 100644
index 3742b89c..00000000
--- a/subprojects/frontend/src/editor/EditorParent.ts
+++ /dev/null
@@ -1,228 +0,0 @@
1import { alpha, styled } from '@mui/material/styles';
2
3export default styled('div', {
4 name: 'EditorParent',
5 shouldForwardProp: (propName) => propName !== 'showLineNumbers',
6})<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => {
7 const codeMirrorLintStyle: Record<string, unknown> = {};
8 (['error', 'warning', 'info'] as const).forEach((severity) => {
9 const color = theme.palette[severity].main;
10 codeMirrorLintStyle[`.cm-diagnostic-${severity}`] = {
11 borderLeftColor: color,
12 };
13 codeMirrorLintStyle[`.cm-lintRange-${severity}`] = {
14 backgroundImage: 'none',
15 textDecoration: `underline wavy ${color}`,
16 textDecorationSkipInk: 'none',
17 };
18 });
19
20 return {
21 background: theme.palette.background.default,
22 '&, .cm-editor': {
23 height: '100%',
24 },
25 '.cm-content': {
26 padding: 0,
27 },
28 '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail':
29 {
30 ...theme.typography.body1,
31 fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
32 fontFeatureSettings: '"liga", "calt"',
33 letterSpacing: 0,
34 textRendering: 'optimizeLegibility',
35 },
36 '.cm-scroller': {
37 color: theme.palette.text.secondary,
38 },
39 '.cm-gutters': {
40 background: 'transparent',
41 color: theme.palette.text.disabled,
42 border: 'none',
43 },
44 '.cm-specialChar': {
45 color: theme.palette.secondary.main,
46 },
47 '.cm-activeLine': {
48 background: theme.palette.highlight.activeLine,
49 },
50 '.cm-foldGutter': {
51 color: alpha(theme.palette.text.primary, 0),
52 transition: theme.transitions.create('color', {
53 duration: theme.transitions.duration.short,
54 }),
55 '@media (hover: none)': {
56 color: theme.palette.text.primary,
57 },
58 },
59 '.cm-gutters:hover .cm-foldGutter': {
60 color: theme.palette.text.primary,
61 },
62 '.cm-activeLineGutter': {
63 background: 'transparent',
64 },
65 '.cm-lineNumbers': {
66 ...(!showLineNumbers && {
67 display: 'none !important',
68 }),
69 '.cm-activeLineGutter': {
70 color: theme.palette.text.primary,
71 },
72 },
73 '.cm-cursor, .cm-cursor-primary': {
74 borderLeft: `2px solid ${theme.palette.primary.main}`,
75 },
76 '.cm-selectionBackground': {
77 background: theme.palette.selection.main,
78 },
79 '.cm-focused': {
80 outline: 'none',
81 '.cm-selectionBackground': {
82 background: theme.palette.selection.main,
83 },
84 },
85 '.cm-panels-top': {
86 color: theme.palette.text.secondary,
87 },
88 '.cm-panel': {
89 '&, & button, & input': {
90 fontFamily: theme.typography.fontFamily,
91 },
92 background: theme.palette.background.default,
93 borderTop: `1px solid ${theme.palette.divider2}`,
94 'button[name="close"]': {
95 background: 'transparent',
96 color: theme.palette.text.secondary,
97 cursor: 'pointer',
98 },
99 },
100 '.cm-panel.cm-panel-lint': {
101 boderBottom: 'none',
102 'button[name="close"]': {
103 // Close button interferes with scrollbar, so we better hide it.
104 // The panel can still be closed from the toolbar.
105 display: 'none',
106 },
107 ul: {
108 li: {
109 cursor: 'pointer',
110 color: theme.palette.text.primary,
111 },
112 '[aria-selected], &:focus [aria-selected]': {
113 background: theme.palette.selection.main,
114 color: theme.palette.selection.contrastText,
115 },
116 },
117 },
118 '.cm-foldPlaceholder': {
119 color: theme.palette.text.secondary,
120 backgroundColor: alpha(theme.palette.text.secondary, 0),
121 border: `1px solid ${alpha(theme.palette.text.secondary, 0.5)}`,
122 borderRadius: theme.shape.borderRadius,
123 transition: theme.transitions.create(
124 ['background-color', 'border-color', 'color'],
125 {
126 duration: theme.transitions.duration.short,
127 },
128 ),
129 '&:hover': {
130 backgroundColor: alpha(
131 theme.palette.text.secondary,
132 theme.palette.action.hoverOpacity,
133 ),
134 borderColor: theme.palette.text.secondary,
135 '@media (hover: none)': {
136 backgroundColor: 'transparent',
137 },
138 },
139 },
140 '.tok-comment': {
141 fontStyle: 'italic',
142 color: theme.palette.highlight.comment,
143 },
144 '.tok-number': {
145 color: theme.palette.highlight.number,
146 },
147 '.tok-string': {
148 color: theme.palette.secondary.dark,
149 },
150 '.tok-keyword': {
151 color: theme.palette.primary.main,
152 },
153 '.tok-typeName, .tok-macroName, .tok-atom': {
154 color: theme.palette.text.primary,
155 },
156 '.tok-variableName': {
157 color: theme.palette.highlight.parameter,
158 },
159 '.tok-problem-node': {
160 '&, & .tok-variableName': {
161 color: theme.palette.text.secondary,
162 },
163 },
164 '.tok-problem-individual': {
165 '&, & .tok-variableName': {
166 color: theme.palette.text.primary,
167 },
168 },
169 '.tok-problem-abstract, .tok-problem-new': {
170 fontStyle: 'italic',
171 },
172 '.tok-problem-containment': {
173 fontWeight: 700,
174 },
175 '.tok-problem-error': {
176 '&, & .tok-typeName': {
177 color: theme.palette.error.main,
178 },
179 },
180 '.tok-problem-builtin': {
181 '&, & .tok-typeName, & .tok-atom, & .tok-variableName': {
182 color: theme.palette.primary.main,
183 fontWeight: 400,
184 fontStyle: 'normal',
185 },
186 },
187 '.cm-tooltip-autocomplete': {
188 background: theme.palette.background.paper,
189 ...(theme.palette.mode === 'dark' && {
190 overflow: 'hidden',
191 borderRadius: theme.shape.borderRadius,
192 // https://github.com/mui/material-ui/blob/10c72729c7d03bab8cdce6eb422642684c56dca2/packages/mui-material/src/Paper/Paper.js#L18
193 backgroundImage:
194 'linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))',
195 }),
196 boxShadow: theme.shadows[4],
197 '.cm-completionIcon': {
198 color: theme.palette.text.secondary,
199 },
200 '.cm-completionLabel': {
201 color: theme.palette.text.primary,
202 },
203 '.cm-completionDetail': {
204 color: theme.palette.text.secondary,
205 fontStyle: 'normal',
206 },
207 '[aria-selected]': {
208 background: `${theme.palette.primary.main} !important`,
209 '.cm-completionIcon, .cm-completionLabel, .cm-completionDetail': {
210 color: theme.palette.primary.contrastText,
211 },
212 },
213 },
214 '.cm-completionIcon': {
215 width: 16,
216 padding: 0,
217 marginRight: '0.5em',
218 textAlign: 'center',
219 },
220 ...codeMirrorLintStyle,
221 '.cm-problem-read': {
222 background: theme.palette.highlight.occurences.read,
223 },
224 '.cm-problem-write': {
225 background: theme.palette.highlight.occurences.write,
226 },
227 };
228});