I have a text editor created using react-draft-wysiwyg. I have created a custom blockrendering function which enables in adding a custom block.
Editor code :
<Editor
blockRenderMap={extendedBlockRenderMap}
blockRendererFn={blockRendererFn}
editorState={this.state.editorState}
onEditorStateChange={this.onEditorStateChange}
toolbarCustomButtons={[<FileAttachmentButton onAddFile={this.onAddFile} />]}
toolbar={{
options: ['inline', 'fontSize', 'fontFamily',
'list', 'textAlign', 'colorPicker',
'link', 'image'],
link:{
defaultTargetOption:'_blank',
showOpenOptionOnHover:true
},
image:{
urlEnabled: true,
uploadEnabled:true,
uploadCallback:this.uploadImageCallBack,
alignmentEnabled: true,
defaultSize: {
height: 'auto',
width: 'auto',
}
}
}}
/>
RenderMap
const RenderMap = new Map({
FileAttachment: {
element: 'div'
}
}).merge(DefaultDraftBlockRenderMap);
const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(RenderMap);
BlockRendering function
function blockRendererFn(contentBlock) {
const type = contentBlock.getType();
if (type === 'FileAttachment') {
return {
component: FileAttachment,
editable: false,
props: {}
};
}
}
Image call back function
uploadImageCallBack(file){
let uploadedImages = this.state.uploadedImages;
const imageObject = {
file: file,
localSrc: URL.createObjectURL(file),
}
uploadedImages.push(imageObject);
this.setState({uploadedImages: uploadedImages})
return new Promise(
(resolve, reject) => {
resolve({ data: { link: imageObject.localSrc } });
}
)
}
Custom Block Rendering works as I expected. But when I include custom block rendering uploading image functionality isnt working properly. Added image is not added inline.
When I try to add Image I am getting both atomic and FileAttachment as contentBlock type which might be restricting the image builtin functionality. When I inspected the content of the editor there is figure tag but there is no img tag attached to the figure tag
Can someone help me in figuring out a solution?
