|
|
|
@ -4,7 +4,7 @@
|
|
|
|
* @Github:
|
|
|
|
* @Github:
|
|
|
|
* @Date: 2019-11-27 15:02:52
|
|
|
|
* @Date: 2019-11-27 15:02:52
|
|
|
|
* @LastEditors : tangjiang
|
|
|
|
* @LastEditors : tangjiang
|
|
|
|
* @LastEditTime : 2019-12-27 09:22:08
|
|
|
|
* @LastEditTime : 2019-12-27 10:32:25
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
import './index.scss';
|
|
|
|
import './index.scss';
|
|
|
|
import React, { useState, useRef, useEffect } from 'react';
|
|
|
|
import React, { useState, useRef, useEffect } from 'react';
|
|
|
|
@ -29,6 +29,7 @@ const maps = {
|
|
|
|
function MyMonacoEditor (props, ref) {
|
|
|
|
function MyMonacoEditor (props, ref) {
|
|
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
const {
|
|
|
|
|
|
|
|
code,
|
|
|
|
notice,
|
|
|
|
notice,
|
|
|
|
language,
|
|
|
|
language,
|
|
|
|
identifier,
|
|
|
|
identifier,
|
|
|
|
@ -41,7 +42,7 @@ function MyMonacoEditor (props, ref) {
|
|
|
|
} = props;
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
|
|
|
|
const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框
|
|
|
|
const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框
|
|
|
|
const [editCode, setEditCode] = useState('');
|
|
|
|
// const [editCode, setEditCode] = useState('');
|
|
|
|
// const [curLang, setCurLang] = useState('C');
|
|
|
|
// const [curLang, setCurLang] = useState('C');
|
|
|
|
const [fontSize, setFontSize] = useState(() => { // 字体
|
|
|
|
const [fontSize, setFontSize] = useState(() => { // 字体
|
|
|
|
return +fromStore('oj_fontSize') || 14;
|
|
|
|
return +fromStore('oj_fontSize') || 14;
|
|
|
|
@ -52,9 +53,9 @@ function MyMonacoEditor (props, ref) {
|
|
|
|
const [ height, setHeight ] = useState('calc(100% - 56px)');
|
|
|
|
const [ height, setHeight ] = useState('calc(100% - 56px)');
|
|
|
|
const editorRef = useRef(null);
|
|
|
|
const editorRef = useRef(null);
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
// useEffect(() => {
|
|
|
|
setEditCode(props.code || '');
|
|
|
|
// setEditCode(props.code || '');
|
|
|
|
}, [props]);
|
|
|
|
// }, [props]);
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
setHeight(showOrHideControl ? 'calc(100% - 378px)' : 'calc(100% - 56px)');
|
|
|
|
setHeight(showOrHideControl ? 'calc(100% - 378px)' : 'calc(100% - 56px)');
|
|
|
|
@ -80,11 +81,11 @@ function MyMonacoEditor (props, ref) {
|
|
|
|
// 文本框内容变化时，记录文本框内容
|
|
|
|
// 文本框内容变化时，记录文本框内容
|
|
|
|
const handleEditorChange = (origin, monaco) => {
|
|
|
|
const handleEditorChange = (origin, monaco) => {
|
|
|
|
editorRef.current = monaco; // 获取当前monaco实例
|
|
|
|
editorRef.current = monaco; // 获取当前monaco实例
|
|
|
|
setEditCode(origin); // 保存编辑器初始值
|
|
|
|
// setEditCode(origin); // 保存编辑器初始值
|
|
|
|
editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化
|
|
|
|
editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化
|
|
|
|
// TODO 需要优化 节流
|
|
|
|
// TODO 需要优化 节流
|
|
|
|
const val = editorRef.current.getValue();
|
|
|
|
const val = editorRef.current.getValue();
|
|
|
|
setEditCode(val);
|
|
|
|
// setEditCode(val);
|
|
|
|
onCodeChange(val);
|
|
|
|
onCodeChange(val);
|
|
|
|
// 值一变化保存当前代码值
|
|
|
|
// 值一变化保存当前代码值
|
|
|
|
// saveUserInputCode(val);
|
|
|
|
// saveUserInputCode(val);
|
|
|
|
@ -179,7 +180,7 @@ function MyMonacoEditor (props, ref) {
|
|
|
|
height={height}
|
|
|
|
height={height}
|
|
|
|
width="100%"
|
|
|
|
width="100%"
|
|
|
|
language={language && language.toLowerCase()}
|
|
|
|
language={language && language.toLowerCase()}
|
|
|
|
value={editCode}
|
|
|
|
value={code || ''}
|
|
|
|
options={editorOptions}
|
|
|
|
options={editorOptions}
|
|
|
|
theme={theme} // dark || light
|
|
|
|
theme={theme} // dark || light
|
|
|
|
editorDidMount={handleEditorChange}
|
|
|
|
editorDidMount={handleEditorChange}
|
|
|
|
@ -210,12 +211,12 @@ const mapStateToProps = (state) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
|
|
// const mapDispatchToProps = (dispatch) => ({
|
|
|
|
// saveUserInputCode: (code) => dispatch(actions.saveUserInputCode(code)),
|
|
|
|
// // saveUserInputCode: (code) => dispatch(actions.saveUserInputCode(code)),
|
|
|
|
});
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
|
|
// MyMonacoEditor = React.forwardRef(MyMonacoEditor);
|
|
|
|
// MyMonacoEditor = React.forwardRef(MyMonacoEditor);
|
|
|
|
export default connect(
|
|
|
|
export default connect(
|
|
|
|
mapStateToProps,
|
|
|
|
mapStateToProps,
|
|
|
|
mapDispatchToProps
|
|
|
|
// mapDispatchToProps
|
|
|
|
)(CNotificationHOC() (MyMonacoEditor));
|
|
|
|
)(CNotificationHOC() (MyMonacoEditor));
|
|
|
|
|
