How to render a Img with caption in DraftJS

  draftjs, javascript, reactjs

Like the title says, I’m trying to implement img rendering I DraftJS.
This is how I’m trying to do it:

export const blockRenderer = block => {
    if (block.getType() === "atomic") {
        return {
            component: ImageBlock,
            editable: true
        };
    }

    return null;
}
const ImageBlock = (props) => {

    const entity = props.contentState.getEntity(props.block.getEntityAt(0));
    const {src} = entity.getData();

    if (!!src) {
        return (
                <figure>
                    <img
                        src={src}
                        alt=""
                    />
                    <figcaption>
                    <EditorBlock{...props}/>
                    </figcaption>

                </figure>
        );
    }
    return null
}

The method almost works, I can edit the text contents of the img, however, when I try to delete the image I get the following error:

invariant.js:40 Uncaught Invariant Violation: Unknown DraftEntity key: null.
    at invariant (http://www.keepingtime.com:3000/static/js/0.chunk.js:32219:15)
    at Object.__get (http://www.keepingtime.com:3000/static/js/0.chunk.js:18929:27)
    at ContentState.getEntity (http://www.keepingtime.com:3000/static/js/0.chunk.js:14967:24)
    at ImageBlock (http://www.keepingtime.com:3000/static/js/main.chunk.js:1895:37)
    at renderWithHooks (http://www.keepingtime.com:3000/static/js/0.chunk.js:57479:22)
    at updateFunctionComponent (http://www.keepingtime.com:3000/static/js/0.chunk.js:59658:24)
    at beginWork (http://www.keepingtime.com:3000/static/js/0.chunk.js:61183:20)
    at HTMLUnknownElement.callCallback (http://www.keepingtime.com:3000/static/js/0.chunk.js:42872:18)
    at Object.invokeGuardedCallbackDev (http://www.keepingtime.com:3000/static/js/0.chunk.js:42921:20)
    at invokeGuardedCallback (http://www.keepingtime.com:3000/static/js/0.chunk.js:42974:35)
    at beginWork$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:65735:11)
    at performUnitOfWork (http://www.keepingtime.com:3000/static/js/0.chunk.js:64699:16)
    at workLoopSync (http://www.keepingtime.com:3000/static/js/0.chunk.js:64675:26)
    at performSyncWorkOnRoot (http://www.keepingtime.com:3000/static/js/0.chunk.js:64293:13)
    at http://www.keepingtime.com:3000/static/js/0.chunk.js:53813:28
    at unstable_runWithPriority (http://www.keepingtime.com:3000/static/js/0.chunk.js:106689:16)
    at runWithPriority$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:53759:14)
    at flushSyncCallbackQueueImpl (http://www.keepingtime.com:3000/static/js/0.chunk.js:53808:11)
    at flushSyncCallbackQueue (http://www.keepingtime.com:3000/static/js/0.chunk.js:53796:7)
    at discreteUpdates$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:64432:11)
    at discreteUpdates (http://www.keepingtime.com:3000/static/js/0.chunk.js:43494:16)
    at dispatchDiscreteEvent (http://www.keepingtime.com:3000/static/js/0.chunk.js:46893:7)
invariant @ invariant.js:40
__get @ DraftEntity.js:182
getEntity @ ContentState.js:173
ImageBlock @ ImageBlock.js:7
renderWithHooks @ react-dom.development.js:14803
updateFunctionComponent @ react-dom.development.js:17034
beginWork @ react-dom.development.js:18610
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
index.js:1 The above error occurred in the <ImageBlock> component:
    in ImageBlock (created by DraftEditorContents)
    in figure (created by DraftEditorContents)
    in div (created by DraftEditorContents)
    in DraftEditorContents (created by DraftEditor)
    in div (created by DraftEditor)
    in div (created by DraftEditor)
    in div (created by DraftEditor)
    in DraftEditor (at Editor.js:23)
    in div (at Editor.js:18)
    in MainEditor (at WikiPage.js:101)
    in div (at WikiPage.js:99)
    in div (at WikiPage.js:96)
    in div (at WikiPage.js:94)
    in WikiPage (created by Context.Consumer)
    in Route (at App.js:49)
    in Switch (at App.js:42)
    in App (at src/index.js:13)
    in GlobalState (at src/index.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:11)

Consider adding an error boundary to your tree to customize error handling behavior.
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2430
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
update.callback @ react-dom.development.js:20708
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19883
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
invariant.js:40 Uncaught Invariant Violation: Unknown DraftEntity key: null.
    at invariant (http://www.keepingtime.com:3000/static/js/0.chunk.js:32219:15)
    at Object.__get (http://www.keepingtime.com:3000/static/js/0.chunk.js:18929:27)
    at ContentState.getEntity (http://www.keepingtime.com:3000/static/js/0.chunk.js:14967:24)
    at ImageBlock (http://www.keepingtime.com:3000/static/js/main.chunk.js:1895:37)
    at renderWithHooks (http://www.keepingtime.com:3000/static/js/0.chunk.js:57479:22)
    at updateFunctionComponent (http://www.keepingtime.com:3000/static/js/0.chunk.js:59658:24)
    at beginWork (http://www.keepingtime.com:3000/static/js/0.chunk.js:61183:20)
    at HTMLUnknownElement.callCallback (http://www.keepingtime.com:3000/static/js/0.chunk.js:42872:18)
    at Object.invokeGuardedCallbackDev (http://www.keepingtime.com:3000/static/js/0.chunk.js:42921:20)
    at invokeGuardedCallback (http://www.keepingtime.com:3000/static/js/0.chunk.js:42974:35)
    at beginWork$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:65735:11)
    at performUnitOfWork (http://www.keepingtime.com:3000/static/js/0.chunk.js:64699:16)
    at workLoopSync (http://www.keepingtime.com:3000/static/js/0.chunk.js:64675:26)
    at performSyncWorkOnRoot (http://www.keepingtime.com:3000/static/js/0.chunk.js:64293:13)
    at http://www.keepingtime.com:3000/static/js/0.chunk.js:53813:28
    at unstable_runWithPriority (http://www.keepingtime.com:3000/static/js/0.chunk.js:106689:16)
    at runWithPriority$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:53759:14)
    at flushSyncCallbackQueueImpl (http://www.keepingtime.com:3000/static/js/0.chunk.js:53808:11)
    at flushSyncCallbackQueue (http://www.keepingtime.com:3000/static/js/0.chunk.js:53796:7)
    at discreteUpdates$1 (http://www.keepingtime.com:3000/static/js/0.chunk.js:64432:11)
    at discreteUpdates (http://www.keepingtime.com:3000/static/js/0.chunk.js:43494:16)
    at dispatchDiscreteEvent (http://www.keepingtime.com:3000/static/js/0.chunk.js:46893:7)

Any help in figuring out the problem would be much appreciated.
Also, is this the best way of going about it? I had an idea about putting a special CaptionsEditor in place of the EditorBlock, to allow for a more customized set of functions. The editor would then save its data to a data element in the entity. Is this too convoluted or would it be a viable option?

Source: Ask Javascript Questions

LEAVE A COMMENT