-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.tsx
62 lines (56 loc) · 1.37 KB
/
index.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
import cn from 'classnames';
import * as React from 'react';
import ReactSimpleCodeEditor from 'react-simple-code-editor';
import { highlightCode } from './utils/highlightCode';
/**
* CODE EDITOR
*/
interface ICodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
value: string;
onChange(code: string): any;
padding?: number | string;
language?: string;
autoFocus?: boolean;
showLineNumbers?: boolean;
}
const CodeEditor = React.forwardRef<ReactSimpleCodeEditor, ICodeEditorProps>((props, ref) => {
const {
autoFocus,
language,
onChange,
value,
placeholder,
className,
padding,
style,
showLineNumbers,
...rest
} = props;
// Highlight code on change
const highlight = React.useCallback((code: string) => highlightCode(code, language || '', showLineNumbers), [
language,
showLineNumbers,
]);
return (
<ReactSimpleCodeEditor
{...rest}
// @ts-ignore FIXME type error
ref={ref}
className={cn(className, 'bp3-code-editor', {
'line-numbers': showLineNumbers,
})}
style={style}
placeholder={placeholder}
autoFocus={autoFocus}
value={value}
onValueChange={onChange}
highlight={highlight}
padding={padding}
/>
);
});
CodeEditor.displayName = 'CodeEditor';
/**
* EXPORTS
*/
export { CodeEditor, ICodeEditorProps };