Draft-js: insert image in examples/draft-0-10-0/media bug

[findxc]

I find a bug when playing with examples/draft-0-10-0/media/media.html

Steps to reproduce

1. Open media.html in browser
2. Add the provided media.png into editor
3. Inspect element and set the image (media.png) width from default 100% to 50%

1. Click white space in the right of image in editor, and you will not see the cursor (the anchor and focus is actually in the start of the image block, this is not a bug but the editor's default behavior)
2. Then I add another image ("https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") and error shows up "Uncaught Error: Unknown DraftEntity key: null."

Expected behavior
The old image is replaced by the new one. Or whatever, there should be no error console.

My attempts

• By logState I find the src in entityMap has already been replaced. However, the blocks has one, whose type is atomic but entityRanges is empty array, maybe this leads to the error "Unknown DraftEntity key: null".
• I guess this bug has something to do with AtomicBlockUtils.insertAtomicBlock. It need to check if the anchor and focus is in the start of atomic block and do some additional things.

The latest commit in my local draft.js master branch is 0a89522, and I run the example in OS X,
chrome.

[flarnie]

Thanks for reporting this and including so much detail! @aadsm was able to reproduce this using your steps. If you do end up finding a solution, then we're happy to review a PR. Does this affect your own use of Draft.js? I'm hoping it's a corner case, not sure when this was introduced.

[findxc]

I am building a rich text editor able to insert images. The width of images are not set as 100% of the editor's. So I find this bug.

It is common that images are set as 80% or 70% width, in the center of editor. So I think it is not a corner case.

I used a not that good way to handle with this. Later I will try to better work it out and raise a MR.

[liangwenzhu]

朋友，你是怎么解决这个问题的？不管图片是不是100%，我只要按回车立马就有你这个报错：
Unknown DraftEntity key: null.
除非将img外面那层figure 的宽度设为0。让他永远也选不中才勉强解决？
盼复。

[liangwenzhu]

i‘v been met the same problem,how can I fixed it?? @flarnie 。
1st：upload a image；（and the image’s width is not 100%）
2nd：click and focus the right blank of the image：
3rd：press the enter key；
4th：BOOM,you will see the bug Unknown DraftEntity key: null

help~~~~

[liangwenzhu]

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

    let media;
    if (type === 'audio') {
        media = <Audio src={src} />;
    } else if (type === 'image') {
        media = <Image src={src} />;
    } else if (type === 'video') {
        media = <Video src={src} />;
    }

    return media;
};

const entity = props.contentState.getEntity(props.block.getEntityAt(0)); cause the Bug ; @flarnie

[findxc]

@liangwenzhu 这个问题不太好解决，时间太久了我记不清具体过程了（当时基于draft开发的编辑器最终也没上线）。如果你要想解决这个问题，需要去看看源码，然后在源码的基础上去把报错的地方给修正下。比如去监听 onEnter 事件，判断下当前光标是否在图片上，如果在图片上就额外怎么处理下。别的比如 delete，backspace 可能也需要做额外处理。