|
|
|
@ -47,8 +47,6 @@ function MyMonacoEditor(props, ref) {
|
|
|
|
|
return fromStore('oj_theme') || 'dark';
|
|
|
|
|
});
|
|
|
|
|
const [height, setHeight] = useState('calc(100% - 56px)');
|
|
|
|
|
const editorRef = useRef(null);
|
|
|
|
|
console.log(language, code, '-------========----------')
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setHeight(showOrHideControl ? 'calc(100% - 378px)' : 'calc(100% - 56px)');
|
|
|
|
@ -71,21 +69,10 @@ function MyMonacoEditor(props, ref) {
|
|
|
|
|
setTheme(value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 文本框内容变化时,记录文本框内容
|
|
|
|
|
const handleEditorChange = (_, monaco) => {
|
|
|
|
|
editorRef.current = monaco; // 获取当前monaco实例
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (editorRef.current) {
|
|
|
|
|
editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化
|
|
|
|
|
const val = editorRef.current.getValue();
|
|
|
|
|
onCodeChange(val);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, [
|
|
|
|
|
editorRef.current
|
|
|
|
|
])
|
|
|
|
|
function onChangeHandler(ev, value) {
|
|
|
|
|
onCodeChange(value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 配置编辑器属性
|
|
|
|
|
const editorOptions = {
|
|
|
|
@ -159,7 +146,7 @@ function MyMonacoEditor(props, ref) {
|
|
|
|
|
value={code || ''}
|
|
|
|
|
options={editorOptions}
|
|
|
|
|
theme={theme} // dark || light
|
|
|
|
|
editorDidMount={handleEditorChange}
|
|
|
|
|
onChange={onChangeHandler}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|