anztrax/TestMonacoEditorPage.js

## TestMonacoEditorPage.js
import React from 'react';
import Head from 'next/head';
import {stylesheet, classNames} from './index.css';
import ComponentA from './Component/ComponentA/ComponentA';
// import ComponentB from './Component/ComponentB/ComponentB';

export default class TestMonacoEditorPage extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      current_scenario_script : [
        'function x() {',
        '\tconsole.log("Hello world!");',
        '}'
      ].join('\n')
    }
  }


  componentDidMount(){
    window.require.config({ paths: { 'vs': '/vs' }});
    window.require(['vs/editor/editor.main'], () => {
      if(typeof monaco != "undefined") {
        this.editor = monaco.editor.create(document.getElementById('container'), {
          value: this.state.current_scenario_script,
          language: 'javascript'
        });
        this.editor.onDidChangeModelContent((e)=> {
          this.setState({page_edited: true, current_scenario_script: event.target.value})
        });
      }
    });
  }

  componentDidUpdate(){
    //no op
  }

  componentWillUnmount(){
    if(typeof this.editor != "undefined")
      this.editor.destroy();
  }


  render(){
    return (
      <div>
        <h1>Blurry eyes</h1>
        <div id="container" style={{width : '100%', height: '500px'}}></div>
        <Head>
          <style dangerouslySetInnerHTML={{__html: stylesheet}} />
          <script src="/vs/loader.js"></script>
          <script src="/vs/editor/editor.main.js"></script>
        </Head>
        <ComponentA />
        <img src="/assets/images/logo.jpg" />
        {/*<ComponentB />*/}
      </div>
    )
  }
}
	import React from 'react';
	import Head from 'next/head';
	import {stylesheet, classNames} from './index.css';
	import ComponentA from './Component/ComponentA/ComponentA';
	// import ComponentB from './Component/ComponentB/ComponentB';

	export default class TestMonacoEditorPage extends React.Component{
	constructor(props){
	super(props);
	this.state = {
	current_scenario_script : [
	'function x() {',
	'\tconsole.log("Hello world!");',
	'}'
	].join('\n')
	}
	}


	componentDidMount(){
	window.require.config({ paths: { 'vs': '/vs' }});
	window.require(['vs/editor/editor.main'], () => {
	if(typeof monaco != "undefined") {
	this.editor = monaco.editor.create(document.getElementById('container'), {
	value: this.state.current_scenario_script,
	language: 'javascript'
	});
	this.editor.onDidChangeModelContent((e)=> {
	this.setState({page_edited: true, current_scenario_script: event.target.value})
	});
	}
	});
	}

	componentDidUpdate(){
	//no op
	}

	componentWillUnmount(){
	if(typeof this.editor != "undefined")
	this.editor.destroy();
	}


	render(){
	return (
	<div>
	<h1>Blurry eyes</h1>
	<div id="container" style={{width : '100%', height: '500px'}}></div>
	<Head>
	<style dangerouslySetInnerHTML={{__html: stylesheet}} />
	<script src="/vs/loader.js"></script>
	<script src="/vs/editor/editor.main.js"></script>
	</Head>
	<ComponentA />
	<img src="/assets/images/logo.jpg" />
	{/<ComponentB />/}
	</div>
	)
	}
	}