|  |  |  | @ -11,7 +11,8 @@ import React, { useState, useRef, useEffect } from 'react'; | 
			
		
	
		
			
				
					|  |  |  |  | import { Drawer, Tooltip, Badge } from 'antd'; | 
			
		
	
		
			
				
					|  |  |  |  | import { fromStore, CNotificationHOC } from 'educoder'; | 
			
		
	
		
			
				
					|  |  |  |  | import { connect } from 'react-redux'; | 
			
		
	
		
			
				
					|  |  |  |  | import MonacoEditor from '@monaco-editor/react'; | 
			
		
	
		
			
				
					|  |  |  |  | import { ControlledEditor } from '@monaco-editor/react'; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | import SettingDrawer from '../../components/monacoSetting'; | 
			
		
	
		
			
				
					|  |  |  |  | import CONST from '../../../../constants'; | 
			
		
	
		
			
				
					|  |  |  |  | import MyIcon from '../../../../common/components/MyIcon'; | 
			
		
	
	
		
			
				
					|  |  |  | @ -47,8 +48,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 +70,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); | 
			
		
	
		
			
				
					|  |  |  |  |       }); | 
			
		
	
		
			
				
					|  |  |  |  |   function onChangeHandler(ev, value) { | 
			
		
	
		
			
				
					|  |  |  |  |     onCodeChange(value); | 
			
		
	
		
			
				
					|  |  |  |  |   } | 
			
		
	
		
			
				
					|  |  |  |  |   }, [ | 
			
		
	
		
			
				
					|  |  |  |  |     editorRef.current | 
			
		
	
		
			
				
					|  |  |  |  |   ]) | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   // 配置编辑器属性
 | 
			
		
	
		
			
				
					|  |  |  |  |   const editorOptions = { | 
			
		
	
	
		
			
				
					|  |  |  | @ -152,14 +140,14 @@ function MyMonacoEditor(props, ref) { | 
			
		
	
		
			
				
					|  |  |  |  |             <MyIcon className='code-icon' type="iconshezhi" onClick={handleShowDrawer} style={{ fontSize: '18px' }} /> | 
			
		
	
		
			
				
					|  |  |  |  |           </Tooltip> | 
			
		
	
		
			
				
					|  |  |  |  |         </div> | 
			
		
	
		
			
				
					|  |  |  |  |         <MonacoEditor | 
			
		
	
		
			
				
					|  |  |  |  |         <ControlledEditor | 
			
		
	
		
			
				
					|  |  |  |  |           height={height} | 
			
		
	
		
			
				
					|  |  |  |  |           width="100%" | 
			
		
	
		
			
				
					|  |  |  |  |           language={language && language.toLowerCase()} | 
			
		
	
		
			
				
					|  |  |  |  |           value={code || ''} | 
			
		
	
		
			
				
					|  |  |  |  |           options={editorOptions} | 
			
		
	
		
			
				
					|  |  |  |  |           theme={theme} // dark || light
 | 
			
		
	
		
			
				
					|  |  |  |  |           editorDidMount={handleEditorChange} | 
			
		
	
		
			
				
					|  |  |  |  |           onChange={onChangeHandler} | 
			
		
	
		
			
				
					|  |  |  |  |         /> | 
			
		
	
		
			
				
					|  |  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
	
		
			
				
					|  |  |  | 
 |