-
Notifications
You must be signed in to change notification settings - Fork 349
/
CodeEditorShortcutMainHeader.tsx
72 lines (68 loc) · 1.87 KB
/
CodeEditorShortcutMainHeader.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import React from 'react';
import { CodeEditor, Language } from '@patternfly/react-code-editor';
import { Grid, GridItem, Chip } from '@patternfly/react-core';
export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
const onEditorDidMount = (editor, monaco) => {
// eslint-disable-next-line no-console
console.log(editor.getValue());
editor.layout();
editor.focus();
monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
};
const onChange = value => {
// eslint-disable-next-line no-console
console.log(value);
};
const shortcuts = [
{
keys: ['Opt', 'F1'],
description: 'Accessibility helps'
},
{
keys: ['F1'],
description: 'View all editor shortcuts'
},
{
keys: ['Ctrl', 'Space'],
description: 'Activate auto complete'
},
{
keys: ['Cmd', 'S'],
description: 'Save'
}
];
const shortcutsPopoverProps = {
bodyContent: (
<Grid span={6} hasGutter key="grid">
{shortcuts.map((shortcut, index) => (
<React.Fragment key={index}>
<GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
{shortcut.keys
.map(key => (
<Chip key={key} isReadOnly>
{key}
</Chip>
))
.reduce((prev, curr) => (
<>{[prev, ' + ', curr]}</>
))}
</GridItem>
<GridItem>{shortcut.description}</GridItem>
</React.Fragment>
))}
</Grid>
),
'aria-label': 'Shortcuts'
};
return (
<CodeEditor
shortcutsPopoverProps={shortcutsPopoverProps}
isLanguageLabelVisible
code="Some example content"
onChange={onChange}
language={Language.javascript}
onEditorDidMount={onEditorDidMount}
height="400px"
/>
);
};