You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
1.6 KiB
JavaScript
100 lines
1.6 KiB
JavaScript
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.52.2/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;
|