src/js/components/Editor.tsx
import React from 'react'
import AceEditor from 'react-ace'
import 'ace-builds/src-noconflict/theme-tomorrow'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/mode-css'
import 'ace-builds/src-noconflict/snippets/css'
import 'ace-builds/src-noconflict/snippets/javascript'
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/ext-searchbox'
import { useStore } from './StoreContext'
import { observer } from 'mobx-react'
const style = {
border: '1px solid #EBEBEB',
margin: 0,
height: '100%',
width: '100%',
lineHeight: '150%'
}
const setOptions = {
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true,
showLineNumbers: true,
tabSize: 2
}
export default observer(() => {
const { source, onChangeSource, mode } = useStore().AppStore
return (
<AceEditor
theme='tomorrow'
value={source}
onChange={onChangeSource}
showGutter
showPrintMargin
highlightActiveLine
editorProps={{
$blockScrolling: Infinity
}}
{...{ mode, style, setOptions }}
/>
)
})