123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- import { Element, LoaderLib } from 'flow';
- export class CodeEditorElement extends Element {
- constructor( source = '' ) {
- super();
- this.updateInterval = 500;
- this._source = source;
- this.dom.style[ 'z-index' ] = - 1;
- this.dom.classList.add( 'no-zoom' );
- this.setHeight( 500 );
- const editorDOM = document.createElement( 'div' );
- editorDOM.style.width = '100%';
- editorDOM.style.height = '100%';
- this.dom.appendChild( editorDOM );
- this.editor = null; // async
- window.require.config( { paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.48.0/min/vs' } } );
- require( [ 'vs/editor/editor.main' ], () => {
- this.editor = window.monaco.editor.create( editorDOM, {
- value: this.source,
- language: 'javascript',
- theme: 'vs-dark',
- automaticLayout: true,
- minimap: { enabled: false }
- } );
- let timeout = null;
- this.editor.getModel().onDidChangeContent( () => {
- this._source = this.editor.getValue();
- if ( timeout ) clearTimeout( timeout );
- timeout = setTimeout( () => {
- this.dispatchEvent( new Event( 'change' ) );
- }, this.updateInterval );
- } );
- } );
- }
- set source( value ) {
- if ( this._source === value ) return;
- this._source = value;
- if ( this.editor ) this.editor.setValue( value );
- this.dispatchEvent( new Event( 'change' ) );
- }
- get source() {
- return this._source;
- }
- focus() {
- if ( this.editor ) this.editor.focus();
- }
- serialize( data ) {
- super.serialize( data );
- data.source = this.source;
- }
- deserialize( data ) {
- super.deserialize( data );
- this.source = data.source || '';
- }
- }
- LoaderLib[ 'CodeEditorElement' ] = CodeEditorElement;
|