|
@@ -0,0 +1,43 @@
|
|
|
|
+import React, { useState, useMemo, useEffect, Fragment } from 'react';
|
|
|
|
+import { UnControlled as CodeMirror } from 'react-codemirror2'
|
|
|
|
+import 'codemirror/lib/codemirror.css'
|
|
|
|
+import 'codemirror/lib/codemirror.js'
|
|
|
|
+import 'codemirror/theme/solarized.css'
|
|
|
|
+import 'codemirror/mode/clike/clike.js'
|
|
|
|
+import 'codemirror/addon/selection/active-line';
|
|
|
|
+// 折叠行
|
|
|
|
+import 'codemirror/addon/fold/foldgutter.css';
|
|
|
|
+import 'codemirror/addon/fold/foldcode.js';
|
|
|
|
+import 'codemirror/addon/fold/foldgutter.js';
|
|
|
|
+import 'codemirror/addon/fold/brace-fold.js';
|
|
|
|
+import 'codemirror/addon/fold/comment-fold.js'
|
|
|
|
+// 代码补全
|
|
|
|
+import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代码提示补全
|
|
|
|
+import 'codemirror/addon/hint/show-hint.js';
|
|
|
|
+import 'codemirror/addon/hint/anyword-hint.js'; // end
|
|
|
|
+// 设置语言
|
|
|
|
+import 'codemirror/mode/javascript/javascript';
|
|
|
|
+
|
|
|
|
+export default function CodeInput(props) {
|
|
|
|
+ const { value, onChange, onBeforeChange } = props
|
|
|
|
+ const [code, setCode] = useState(value)
|
|
|
|
+ // useEffect(() => {
|
|
|
|
+ // console.log(1)
|
|
|
|
+ // setCode(code)
|
|
|
|
+ // }, [])
|
|
|
|
+ return (
|
|
|
|
+ <CodeMirror
|
|
|
|
+ value={code}
|
|
|
|
+ options={{
|
|
|
|
+ lineNumbers: true,
|
|
|
|
+ mode: { name: 'text/javascript' },
|
|
|
|
+ extraKeys: { 'Ctrl': 'autocomplete' },
|
|
|
|
+ styleActiveLine: true,
|
|
|
|
+ lineWrapping: true,
|
|
|
|
+ foldGutter: true,
|
|
|
|
+ gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
|
|
|
|
+ }}
|
|
|
|
+ onChange={(editor, data, value) => onChange(editor, data, value)}
|
|
|
|
+ />
|
|
|
|
+ )
|
|
|
|
+}
|