JSFiddle - React, Tailwind, and code Playground

by xavierm02

JavaScript

// isn't suposed to work
// here just for wyntax coloration
function WYSIWYGEditor( ) {
    Object.defineProperties( this, {
        iframe: {
            value: document.createElement( 'iframe' ),
            configurable: false,
            enumerable: true,
            writable: false
        },
        textarea: {
            value: document.createElement( 'textarea' ),
            configurable: false,
            enumerable: true,
            writable: false
        },
        container: {
            value: document.createElement( 'div' ),
            configurable: false,
            enumerable: true,
            writable: false
        }
    } );
    Object.defineProperty( this, 'wysiwygField', {
        value: this.iframe./* get the container */,
        configurable: false,
        enumerable: true,
        writable: false
    } )
    this.container.appendChild( iframe );
}
Object.defineProperties( WYSIWYGEditor.prototype, {
    wysiwyg: {
        value: true,
        configurable: false,
        enumerable: true,
        get: function ( value ) {// or simply true or somethign similar is shorcuts are implemented
            return value
        },
        set: function ( value ) {
            value = !!value;
            if ( value ) {
                this.wysiwygField.innerHTML = this.textarea.value;
                this.container.removeChild( this.textarea );
                this.container.appendChild( this.iframe );
            } else {
                this.textarea.value = this.wysiwygField.innerHTML;
                this.container.removeChild( this.iframe );
                this.container.appendChild( this.textarea );
            }
            return value;
        }
    }
} );