forgeplus-react/src/forge/Newfile/m_editor.js

import React , { Component } from "react";
import Editor from "react-monaco-editor";

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,
    }
  }
  changeEditor=(editorValue)=>{
    this.setState({
      editorValue
    })
  }

  render(){
    const { editorValue } = this.state;
    const { readOnly, editorType } = this.props;
    const editor_options = {
      lineNumbers: "on",
      selectOnLineNumbers: true,
      lineHeight: 24,
      revealHorizontalRightPadding: 5,
      lineNumbersMinChars: 2,
      readOnly: readOnly,
      cursorStyle: readOnly ? "underline-thin" : "line"
    }
    return(
      <React.Fragment>
        <div>
          <div className="branchTable">
            <Editor
              height="320px"
              theme={"vs-grey"}
              value={editorValue}
              options={editor_options}
              onChange={this.changeEditor}
            />
          </div>
          {!readOnly && <UserSubmitComponent 
            {...this.props} 
            {...this.state} 
            filepath={`${this.props.filepath}`}
            content={editorValue}
            editor_type={editorType}
          ></UserSubmitComponent>
          }
          
        </div>
      </React.Fragment>
    )
  }
}
export default m_editor;