30 lines
758 B
JavaScript
30 lines
758 B
JavaScript
|
import ReactEditor from 'react-simple-code-editor';
|
||
|
|
import { getHighlighter } from '../highlighting';
|
||
|
|
|
||
|
|
import 'prismjs/themes/prism.css';
|
||
|
|
|
||
|
|
export default function EditorTextArea({ code, setCode, language }) {
|
||
|
|
const highlight = getHighlighter(language);
|
||
|
|
|
||
|
|
function highlightWithLineNumbers(input, grammar) {
|
||
|
|
return highlight(input, grammar)
|
||
|
|
.split('\n')
|
||
|
|
.map((line, i) => `<span class='editorLineNumber'>${i + 1}</span>${line}`)
|
||
|
|
.join('\n');
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<main>
|
||
|
|
<ReactEditor
|
||
|
|
value={code}
|
||
|
|
onValueChange={setCode}
|
||
|
|
highlight={highlightWithLineNumbers}
|
||
|
|
placeholder={'Type some code...'}
|
||
|
|
padding={10}
|
||
|
|
textareaId='code-area'
|
||
|
|
className='editor'
|
||
|
|
/>
|
||
|
|
</main>
|
||
|
|
)
|
||
|
|
}
|