CKeditor with React SSR

CKEditor.react.tsx

import React from "react";

let ClassicEditor, CKEditor;

if(__CLIENT__) {
    ClassicEditor = _ckeditor_ckeditor5BuildClassic;
    CKEditor = _ckeditor_ckeditor5React;
}
class MyUploadAdapter {
    loader: any;
    constructor(loader) {
        this.loader = loader;
    }
    upload() {
        const loader = this.loader;
        return loader.file;
    }
}

function MyCustomUploadAdapterPlugin( editor ) {
    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
        // Configure the URL to the upload script in your back-end here!
        return new MyUploadAdapter( loader );
    };
}
export default function() {
    return (
        <div className="box" style={{width: '700px', margin: 'auto'}}>
            {__CLIENT__ && 
                <CKEditor
                    editor={ ClassicEditor }
                    id="editor_box"
                    data="<div id='capture'>Hello from CKEditor 5!</div>"
                    config={{
                        toolbar: {items:["heading","|","bold","italic","link","bulletedList","numberedList","imageUpload","blockQuote","insertTable", "undo","redo"]}, // "mediaEmbed",
                        extraPlugins: [ MyCustomUploadAdapterPlugin ],
                        config: {
                            ui: {
                                width: '500px',
                                height: '300px'
                            }
                        }
                    }}
                    onInit={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                    onBlur={ editor => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ editor => {
                        console.log( 'Focus.', editor );
                    } }
                />}

                <style>{`
                .ck-editor__main > .ck-editor__editable {
                    height: 500px;
                }
                `}</style>
        </div>
    );
}