同上-代码编辑器选中高亮

This commit is contained in:
caishi 2021-11-01 17:08:00 +08:00 committed by caishi
parent 8b4fc88b1d
commit a3b943f744
1 changed files with 3 additions and 53 deletions

View File

@ -1,5 +1,4 @@
import React, { Component } from "react";
import Editor from "react-monaco-editor";
import {UnControlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/addon/selection/active-line.js';
import 'codemirror/mode/javascript/javascript.js';
@ -35,10 +34,10 @@ class m_editor extends Component {
render() {
const { editorValue , changeValue } = this.state;
const { readOnly, editorType, language , currentBranch , descName } = this.props;
const { readOnly, editorType, currentBranch , descName } = this.props;
const editor_options = {
lineNumbers: "on",
wordWrap: true, //强制换行
lineWrapping: true, //强制换行
selectOnLineNumbers: true,
lineHeight: 24,
renderLineHighlight: "line",
@ -51,64 +50,15 @@ class m_editor extends Component {
automaticLayout: true, // 自适应布局
overviewRulerBorder: false, // 不要滚动条的边框
scrollBeyondLastLine: false, // 取消代码后面一大段空白
styleActiveLine:true,//光标代码高亮
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
placeholder="请输入内容"
value={editorValue}