138 lines
3.8 KiB
JavaScript
138 lines
3.8 KiB
JavaScript
import React, { Component } from "react";
|
|
import Editor from "react-monaco-editor";
|
|
// import {UnControlled as CodeMirror} from 'react-codemirror2'
|
|
|
|
import UserSubmitComponent from "./UserSubmitComponent";
|
|
|
|
import "./index.css";
|
|
import "./editor.css";
|
|
|
|
class m_editor extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
editorValue: this.props.content,
|
|
prevHeight:0
|
|
};
|
|
}
|
|
componentDidUpdate=(prevProps)=>{
|
|
if(prevProps && this.props && this.props.content !== prevProps.content){
|
|
this.setState({
|
|
editorValue:this.props.content
|
|
})
|
|
}
|
|
}
|
|
changeEditor = (editorValue) => {
|
|
this.setState({
|
|
editorValue,
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { editorValue } = this.state;
|
|
const { readOnly, editorType, language , currentBranch , descName } = this.props;
|
|
const editor_options = {
|
|
lineNumbers: "on",
|
|
wordWrap: true, //强制换行
|
|
selectOnLineNumbers: true,
|
|
lineHeight: 24,
|
|
renderLineHighlight: "line",
|
|
revealHorizontalRightPadding: 5,
|
|
placeholder:"请输入内容",
|
|
readOnly: readOnly,
|
|
cursorStyle: readOnly ? "underline-thin" : "line",
|
|
folding: true,
|
|
foldingStrategy: "indentation", // 代码可分小段折叠
|
|
automaticLayout: true, // 自适应布局
|
|
overviewRulerBorder: false, // 不要滚动条的边框
|
|
scrollBeyondLastLine: false, // 取消代码后面一大段空白
|
|
minimap: {
|
|
// 不要小地图
|
|
enabled: false,
|
|
},
|
|
};
|
|
|
|
const handleEditorMount = (editor, monaco) => {
|
|
editor.onDidChangeModelDecorations(() => {
|
|
requestAnimationFrame(updateEditorHeight); // folding
|
|
});
|
|
|
|
const updateEditorHeight = () => {
|
|
const editorElement = editor.getDomNode();
|
|
|
|
if (!editorElement) {
|
|
return;
|
|
}
|
|
|
|
const padding = 40;
|
|
|
|
const lineHeight = editor.getOption(
|
|
monaco.editor.EditorOption.lineHeight
|
|
);
|
|
|
|
const lineCount = editor.getModel().getLineCount() || 1;
|
|
let height =
|
|
editor.getTopForLineNumber(lineCount + 1) +
|
|
lineHeight +
|
|
padding ;
|
|
|
|
if(height<400){height = 400;}
|
|
|
|
if (this.state.prevHeight !== height) {
|
|
this.setState({
|
|
prevHeight:height
|
|
})
|
|
// setPrevHeight(height);
|
|
editorElement.style.height = `${height}px`;
|
|
editor.layout();
|
|
}
|
|
};
|
|
|
|
updateEditorHeight(); // typing
|
|
};
|
|
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<div className="editorBorderBox">
|
|
<Editor
|
|
language={language ? language : "plaintext"}
|
|
theme={"vs-grey"}
|
|
placeholder="请输入内容"
|
|
value={editorValue}
|
|
options={editor_options}
|
|
onChange={this.changeEditor}
|
|
editorWillMount={this.editorWillMount}
|
|
editorDidMount={handleEditorMount}
|
|
/>
|
|
{/* <CodeMirror
|
|
value={editorValue}
|
|
options={{
|
|
theme: 'monokai',
|
|
mode: 'JavaScript',
|
|
extraKeys: {"Ctrl": "autocomplete"},//ctrl可以弹出提示
|
|
styleActiveLine: true,
|
|
lineNumbers: true,
|
|
readOnly:true
|
|
}}
|
|
/> */}
|
|
</div>
|
|
{!readOnly && (
|
|
<div className="editorBorderSubmitBox" style={{marginTop:"20px",padding:"20px"}}>
|
|
<UserSubmitComponent
|
|
{...this.props}
|
|
{...this.state}
|
|
filepath={`${this.props.filepath}`}
|
|
content={editorValue}
|
|
editor_type={editorType}
|
|
currentBranch={currentBranch}
|
|
descName={descName}
|
|
></UserSubmitComponent>
|
|
</div>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
export default m_editor;
|