Update CkEditor config on the basis of React state - reactjs

Question

I am using CkEditor5 for implementing CKEditor in my React application. I want to update the config wrt my state. But it seems like the editor component isn't updating even after the state change.
Here is my CKEditor component
<CKEditor
editor={ ClassicEditor }
data={this.state.content}
onInit={ editor => {
console.log( 'Editor is ready to use!', editor );
} }
config={{
simpleUpload: {
uploadUrl: uploadUrl,
headers: {
'X-CSRFToken': csrftoken,
}
}}}
onChange={ ( event, editor ) => {
const data = editor.getData();
this.setState({
content: data
})
console.log( { event, editor, data } );
} }
onBlur={ ( event, editor ) => {
console.log( 'Blur.', editor );
} }
onFocus={ ( event, editor ) => {
console.log( 'Focus.', editor );
} }
/>
I want to update the upload URL based on the state.
It is stored in a variable like shown below -
const csrftoken = getCookie('csrftoken');
const uploadUrl = `https://example.com/api/blog/posts/images/${this.state.id}`

Answer 1

I solved this by using ClassicEditor instead of the CKEditor component.
I did this by writing two function for this. First getEditorConfig which would give me the changed config based on other parameters.
getEditorConfig = () => {
const csrftoken = getCookie('csrftoken');
const debug = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"
const uploadUrl = debug ? `http://127.0.0.1:8000/api/blog/posts/images/${this.state.id}`
: `https://example.com/api/blog/posts/images/${this.state.id}`
return {
simpleUpload: {
uploadUrl: uploadUrl,
headers: {
'X-CSRFToken': csrftoken,
}
}}
}
Next a helper function which creates a new editor instance and adds it to the DOM. I am storing the editor instance in the state.
addEditor = () => {
const config = this.getEditorConfig();
ClassicEditor
.create( document.querySelector( '#editor' ), config)
.then(newEditor => this.setState({editor: newEditor}))
.catch( error => {
console.log( error );
});
}
In one of the issues its suggested to destroy the old editor and create a new one when you want to update the config. So for that use the following two lines to destroy and use addEditor to create a new editor.
const { editor } = this.state;
editor.destroy();

Answer 2

My solution consists in adding ref and custom states to the editor e using a custom upload adapter. Now, I'm able to send the current state data to server and without using headers to that.
<CKEditor name="content" ref={editorRef}
editor={Editor}
config={customEditorConfig}
data={article.content}
customPropArticle={article}
onReady={editor => {
editor.editorRef = editorRef;
}}
onChange={onEditorChangeHandle}
/>
From UploadAdapter:
_sendRequest() {
const editorRef = this.editor.editorRef;
const { customPropArticle } = editorRef.current.props;
this.loader.file.then(file => {
const data = new FormData();
data.append('id', customPropArticle.Id);
data.append('upload', file);
this.xhr.send(data);
});