jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-21 10:57:10 -05:00
Code Issues Projects Releases Wiki Activity

Add CodeEditor example

Browse Source
This commit is contained in:
Chiedo
2020-10-19 09:24:09 -04:00
parent d51688b281
commit 35c38e5781
4 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
react/CodeEditor.js
View File

@@ -1,25 +1,26 @@
const React = require('react')
const ReactDOM = require('react-dom')
const AceEditor = require('react-ace')
const AceEditor = require('react-ace').default
require('ace-builds/src-noconflict/mode-java')
const hash = require('object-hash')
require('ace-builds/src-noconflict/mode-javascript')
require('ace-builds/src-noconflict/theme-github')
const timestamp = Date.now()
function onChange (newValue) {
console.log('change', newValue)
}
const CodeEditor = (props) => {
return (
<div language={props.language}>
<div language={props.language} code={props.code}>
<AceEditor
mode={props.language}
theme='github'
onChange={onChange}
name={`code-editor-${timestamp}`}
name={`code-editor-${hash({ language: props.language, code: props.code })}`}
editorProps={{ $blockScrolling: true }}
defaultValue={props.code}
/>
</div>
)
@@ -32,7 +33,8 @@ if (typeof window === 'undefined') {
for (const componentContainer of componentContainers) {
const div = componentContainer.children[0]
const language = div.getAttribute('language')
ReactDOM.hydrate(React.createElement(CodeEditor, { language: language }), componentContainer)
const code = div.getAttribute('code')
ReactDOM.hydrate(React.createElement(CodeEditor, { language: language, code: code }), componentContainer)
}
}