The CKEditor component fails to render while using @mui/material Button component

[Mgsy]

It seems that using a <Button> component from @mui/material affects our component. After initializing the page, the <CKEditor /> component is destroyed. 

Required libraries:

npm install @mui/material @emotion/styled @emotion/react 

Example code:

import React, { Component } from 'react';
import { Button } from "@mui/material";
import Editor from '@ckeditor/ckeditor5-build-classic';
import { CKEditor } from '@ckeditor/ckeditor5-react'

const EditorComponent = () => (
  <CKEditor
      editor={ Editor }
      onReady={ editor => {
          window.editor = 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={ ( event, editor ) => {
            console.log( 'Blur.', editor );
        } }
        onFocus={ ( event, editor ) => {
            console.log( 'Focus.', editor );
        } }
    />
)

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 from online builder in React</h2>
                <Button>Button</Button>
                <EditorComponent />
            </div>
        );
    }
}

export default App;

After running the page, only the button is visible.

[przemyslaw-zan]

I have not found a reason for this, but presence of the button causes componentWillUnmount react hook to trigger, which calls _destroyEditor method in our case. This edge case can be caught by adding if ( !this.editor ) {...} after this line. We should probably throw an error here.

For a workaround, instead of an error the editor can be recursively initialized again by using this._initializeEditor(); in the aforementioned check. This does work, but causes ugly flash when the editor dissapears for a second before being initialized again.

[pomek]

Using conditional rendering allows rendering a button and an instance of CKEditor 5 next to each other.

import React, { Component } from 'react';
import { Button } from "@mui/material";
import Editor from '@ckeditor/ckeditor5-build-classic';
import { CKEditor } from '@ckeditor/ckeditor5-react'

const EditorComponent = ( props ) => (
	<CKEditor
		editor={ Editor }
		onReady={ editor => {
			props.parent.setState( { showButton: true } );

			window.editor = 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={ ( event, editor ) => {
			console.log( 'Blur.', editor );
		} }
		onFocus={ ( event, editor ) => {
			console.log( 'Focus.', editor );
		} }
	/>
);

class App extends Component {
	constructor( ...all ) {
		super( ...all );

		this.state = {
			showButton: false
		}
	}

	render() {
		return (
			<div className="App">
				<h2>Using CKEditor 5 from online builder in React</h2>
				<EditorComponent parent={ this }/>
				{ this.state.showButton ? <Button>Button</Button> : '' }
			</div>
		);
	}
}

export default App;

But still, this is a workaround rather than adequately fixing the issue.

[pomek]

Also, it works fine with the previous version of the component (v4.0.1).

[pomek]

In the Strict mode, React renders each component twice. Unfortunately, this causes the <CKEditor> component to be not rendered.

When I prepared a production build of a simple application, it worked fine.