⬅️ Back to Table of Contents

📄 CodeEditorElement.js

📊 Analysis Summary

Metric	Count
🔧 Functions	3
🧱 Classes	1
📦 Imports	2
📊 Variables & Constants	1

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Classes

🛠️ File Location:

📂 playground/elements/CodeEditorElement.js

📦 Imports

Name	Source
Element	flow
LoaderLib	flow

---

Variables & Constants

Name	Type	Kind	Value	Exported
timeout	any	let/var	null	✗

---

Functions

CodeEditorElement.focus(): void

Returns: void

Calls:

• this.editor.focus

Code

focus() {

        if ( this.editor ) this.editor.focus();

    }

CodeEditorElement.serialize(data: any): void

Parameters:

• data any

Returns: void

Calls:

• super.serialize

Code

serialize( data ) {

        super.serialize( data );

        data.source = this.source;

    }

CodeEditorElement.deserialize(data: any): void

Parameters:

• data any

Returns: void

Calls:

• super.deserialize

Code

deserialize( data ) {

        super.deserialize( data );

        this.source = data.source || '';

    }

---

Classes

CodeEditorElement

Class Code

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 || '';

    }

}

Methods

focus(): void

Code

focus() {

        if ( this.editor ) this.editor.focus();

    }

serialize(data: any): void

Code

serialize( data ) {

        super.serialize( data );

        data.source = this.source;

    }

deserialize(data: any): void

Code

deserialize( data ) {

        super.deserialize( data );

        this.source = data.source || '';

    }

---