I first upload the image to s3 through my draft.js editor. The image is saved and everything working well. But when I open draft.js to edit the content, I can’t add some text.
It seems that the part of adding text is despair if there is only image in the first render.
I try to restart the editor in first rendering with empty content and then adding the content, but it’s not working. So currently I’m starting the draft JS editor with content (image)
const insertImage = (base64) => {
const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
'image',
'IMMUTABLE',
{ src: base64 }
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = EditorState.set(editorState, {
currentContent: contentStateWithEntity,
});
return AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');
};
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={colorStyleMap}
editorState={editorState}
onChange={handleEditorChange}
onBlur={handleBlur}
placeholder={placeholder}
readOnly={readOnly}
plugins={plugins}
handlePastedFiles={handleFilesAttach}
ref={(element) => {
editorRef = element;
}}
/>