import React , { useRef , useEffect } from 'react' ; import { Controlled as ReactCodeMirror } from 'react-codemirror2' ; import { message } from 'antd' ; import 'codemirror/lib/codemirror.css' ; import 'codemirror/theme/monokai.css' ; import 'codemirror/theme/neat.css' ; import 'codemirror/mode/markdown/markdown' ; import 'codemirror/mode/javascript/javascript' ; import { qiniuUpload } from '@utils/index' ; interface IProps { value : string ; onChangeInput : ( v : string ) => void ; } const CodeMirror = ( { value , onChangeInput } ) => { const codeMirrorContainer = useRef ( null ) ; const codeMirror = useRef ( null ) ; const onChange = ( editor , data , v ) => { onChangeInput ( v ) ; } ; const getImgUrl = ( url ) => { const v = codeMirror . current . editor . getValue ( ) ; const lineFeed = v . length > 0 ? '\n' : '' ; const newValue = `${ v }${ lineFeed }![](${ url })` ; onChangeInput ( newValue ) ; } ; const listenPaste = ( e ) => { const clipboard = e . clipboardData ; if ( ! clipboard . items || ! clipboard . items . length ) { return ; } if ( process . env . APP_ENV === 'qa' ) { return message . error ( '测试环境暂不支持黏贴图片' ) ; } const data = clipboard . items [ 0 ] ; if ( clipboard . items [ 0 ] . type === 'image/png' ) { const imgFile = data . getAsFile ( ) ; qiniuUpload ( imgFile , getImgUrl ) ; } } ; useEffect ( ( ) => { const ele = codeMirrorContainer . current ; if ( ! ! ele ) { ele . addEventListener ( 'paste' , listenPaste ) ; } return ( ) => { ele . removeEventListener ( 'paste' , listenPaste ) ; } ; } , [ ] ) ; const options = { mode : 'markdown' , theme : 'monokai' , tabSize : 1 , indentWithTabs : true , autofocus : true } ; return ( < div ref = { codeMirrorContainer } > < ReactCodeMirror ref = { codeMirror } value = { value } options = { options } onBeforeChange = { onChange } / > < /div>); } ; export default CodeMirror ;