diff options
author | 2021-10-10 01:11:33 +0200 | |
---|---|---|
committer | 2021-10-31 19:26:09 +0100 | |
commit | 2ada4a06167b3a00a4c4c69e1b0c78b00ef1db5f (patch) | |
tree | 24f0b0bf8f8959ebcf0722456da2d6260c6f1421 /language-web/src/main/js/editor/EditorButtons.tsx | |
parent | Merge pull request #7 from golej-marci/language-to-store (diff) | |
download | refinery-2ada4a06167b3a00a4c4c69e1b0c78b00ef1db5f.tar.gz refinery-2ada4a06167b3a00a4c4c69e1b0c78b00ef1db5f.tar.zst refinery-2ada4a06167b3a00a4c4c69e1b0c78b00ef1db5f.zip |
feat(web): add CodeMirror 6 editor
Diffstat (limited to 'language-web/src/main/js/editor/EditorButtons.tsx')
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 35 |
1 files changed, 28 insertions, 7 deletions
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx index 56577e82..9622475c 100644 --- a/language-web/src/main/js/editor/EditorButtons.tsx +++ b/language-web/src/main/js/editor/EditorButtons.tsx | |||
@@ -2,8 +2,10 @@ import { observer } from 'mobx-react-lite'; | |||
2 | import Stack from '@mui/material/Stack'; | 2 | import Stack from '@mui/material/Stack'; |
3 | import ToggleButton from '@mui/material/ToggleButton'; | 3 | import ToggleButton from '@mui/material/ToggleButton'; |
4 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | 4 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; |
5 | import CheckIcon from '@mui/icons-material/Check'; | ||
5 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; | 6 | import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; |
6 | import RedoIcon from '@mui/icons-material/Redo'; | 7 | import RedoIcon from '@mui/icons-material/Redo'; |
8 | import SearchIcon from '@mui/icons-material/Search'; | ||
7 | import UndoIcon from '@mui/icons-material/Undo'; | 9 | import UndoIcon from '@mui/icons-material/Undo'; |
8 | import React from 'react'; | 10 | import React from 'react'; |
9 | 11 | ||
@@ -37,15 +39,34 @@ export const EditorButtons = observer(() => { | |||
37 | <RedoIcon fontSize="small" /> | 39 | <RedoIcon fontSize="small" /> |
38 | </ToggleButton> | 40 | </ToggleButton> |
39 | </ToggleButtonGroup> | 41 | </ToggleButtonGroup> |
40 | <ToggleButton | 42 | <ToggleButtonGroup |
41 | selected={editorStore.showLineNumbers} | ||
42 | onChange={() => editorStore.toggleLineNumbers()} | ||
43 | size="small" | 43 | size="small" |
44 | aria-label="Show line numbers" | ||
45 | value="show-line-numbers" | ||
46 | > | 44 | > |
47 | <FormatListNumberedIcon fontSize="small" /> | 45 | <ToggleButton |
48 | </ToggleButton> | 46 | selected={editorStore.showLineNumbers} |
47 | onClick={() => editorStore.toggleLineNumbers()} | ||
48 | aria-label="Show line numbers" | ||
49 | value="show-line-numbers" | ||
50 | > | ||
51 | <FormatListNumberedIcon fontSize="small" /> | ||
52 | </ToggleButton> | ||
53 | <ToggleButton | ||
54 | selected={editorStore.showSearchPanel} | ||
55 | onClick={() => editorStore.toggleSearchPanel()} | ||
56 | aria-label="Show find/replace" | ||
57 | value="show-search-panel" | ||
58 | > | ||
59 | <SearchIcon fontSize="small" /> | ||
60 | </ToggleButton> | ||
61 | <ToggleButton | ||
62 | selected={editorStore.showLintPanel} | ||
63 | onClick={() => editorStore.toggleLintPanel()} | ||
64 | aria-label="Show errors and warnings" | ||
65 | value="show-lint-panel" | ||
66 | > | ||
67 | <CheckIcon fontSize="small" /> | ||
68 | </ToggleButton> | ||
69 | </ToggleButtonGroup> | ||
49 | </Stack> | 70 | </Stack> |
50 | ); | 71 | ); |
51 | }); | 72 | }); |