diff options
Diffstat (limited to 'subprojects/frontend/src/editor/EditorButtons.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/EditorButtons.tsx | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx new file mode 100644 index 00000000..150aa00d --- /dev/null +++ b/subprojects/frontend/src/editor/EditorButtons.tsx | |||
@@ -0,0 +1,98 @@ | |||
1 | import type { Diagnostic } from '@codemirror/lint'; | ||
2 | import { observer } from 'mobx-react-lite'; | ||
3 | import IconButton from '@mui/material/IconButton'; | ||
4 | import Stack from '@mui/material/Stack'; | ||
5 | import ToggleButton from '@mui/material/ToggleButton'; | ||
6 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | ||
7 | import CheckIcon from '@mui/icons-material/Check'; | ||
8 | import ErrorIcon from '@mui/icons-material/Error'; | ||
9 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; | ||
10 | import FormatPaint from '@mui/icons-material/FormatPaint'; | ||
11 | import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; | ||
12 | import RedoIcon from '@mui/icons-material/Redo'; | ||
13 | import SearchIcon from '@mui/icons-material/Search'; | ||
14 | import UndoIcon from '@mui/icons-material/Undo'; | ||
15 | import WarningIcon from '@mui/icons-material/Warning'; | ||
16 | import React from 'react'; | ||
17 | |||
18 | import { useRootStore } from '../RootStore'; | ||
19 | |||
20 | // Exhastive switch as proven by TypeScript. | ||
21 | // eslint-disable-next-line consistent-return | ||
22 | function getLintIcon(severity: Diagnostic['severity'] | null) { | ||
23 | switch (severity) { | ||
24 | case 'error': | ||
25 | return <ErrorIcon fontSize="small" />; | ||
26 | case 'warning': | ||
27 | return <WarningIcon fontSize="small" />; | ||
28 | case 'info': | ||
29 | return <InfoOutlinedIcon fontSize="small" />; | ||
30 | case null: | ||
31 | return <CheckIcon fontSize="small" />; | ||
32 | } | ||
33 | } | ||
34 | |||
35 | export const EditorButtons = observer(() => { | ||
36 | const { editorStore } = useRootStore(); | ||
37 | |||
38 | return ( | ||
39 | <Stack | ||
40 | direction="row" | ||
41 | spacing={1} | ||
42 | > | ||
43 | <Stack | ||
44 | direction="row" | ||
45 | alignItems="center" | ||
46 | > | ||
47 | <IconButton | ||
48 | disabled={!editorStore.canUndo} | ||
49 | onClick={() => editorStore.undo()} | ||
50 | aria-label="Undo" | ||
51 | > | ||
52 | <UndoIcon fontSize="small" /> | ||
53 | </IconButton> | ||
54 | <IconButton | ||
55 | disabled={!editorStore.canRedo} | ||
56 | onClick={() => editorStore.redo()} | ||
57 | aria-label="Redo" | ||
58 | > | ||
59 | <RedoIcon fontSize="small" /> | ||
60 | </IconButton> | ||
61 | </Stack> | ||
62 | <ToggleButtonGroup | ||
63 | size="small" | ||
64 | > | ||
65 | <ToggleButton | ||
66 | selected={editorStore.showLineNumbers} | ||
67 | onClick={() => editorStore.toggleLineNumbers()} | ||
68 | aria-label="Show line numbers" | ||
69 | value="show-line-numbers" | ||
70 | > | ||
71 | <FormatListNumberedIcon fontSize="small" /> | ||
72 | </ToggleButton> | ||
73 | <ToggleButton | ||
74 | selected={editorStore.showSearchPanel} | ||
75 | onClick={() => editorStore.toggleSearchPanel()} | ||
76 | aria-label="Show find/replace" | ||
77 | value="show-search-panel" | ||
78 | > | ||
79 | <SearchIcon fontSize="small" /> | ||
80 | </ToggleButton> | ||
81 | <ToggleButton | ||
82 | selected={editorStore.showLintPanel} | ||
83 | onClick={() => editorStore.toggleLintPanel()} | ||
84 | aria-label="Show diagnostics panel" | ||
85 | value="show-lint-panel" | ||
86 | > | ||
87 | {getLintIcon(editorStore.highestDiagnosticLevel)} | ||
88 | </ToggleButton> | ||
89 | </ToggleButtonGroup> | ||
90 | <IconButton | ||
91 | onClick={() => editorStore.formatText()} | ||
92 | aria-label="Automatic format" | ||
93 | > | ||
94 | <FormatPaint fontSize="small" /> | ||
95 | </IconButton> | ||
96 | </Stack> | ||
97 | ); | ||
98 | }); | ||