A problem about Draft when remove images by Backspace key
See original GitHub issueFinally I decide to report it after all my try. I do not know whether it’s a bug when you use backspace key to remove a image that created by AtomicBlockUtils. Draftjs just remove the atomic block in contentState but the image’s entity still in the EntityMap:
this is my code to insert a image:
hdl_addImage2EditerState(ediorState) {
const contentState = ediorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
"IMAGE",
"IMMUTABLE",
{ src: "https://avatars2.githubusercontent.com/u/9550456?v=4&s=460" }
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const editorStateWithEntity = EditorState.set(ediorState, {
currentContent: contentStateWithEntity
});
const newEditorState = AtomicBlockUtils.insertAtomicBlock(
editorStateWithEntity,
entityKey,
' '//can't remove this character because the cursor jumps before it....
);
return EditorState.forceSelection(
newEditorState,
newEditorState.getCurrentContent().getSelectionAfter()
);
}
and when I replace the ' '
with the image’s url:
const newEditorState = AtomicBlockUtils.insertAtomicBlock(
editorStateWithEntity,
entityKey,
"https://avatars2.githubusercontent.com/u/9550456?v=4&s=460"
);
you will see:
the browser is Chrome 62 the OS is win7 the vision of Draft is 0.10.4
and it’s similar happened in draft-js-plugin’s example…
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:17 (2 by maintainers)
Top Results From Across the Web
A problem about Draft when remove images by Backspace key
When deleting an image with text in the draft.js editor for image upload, occasionally the IMAGE entity remains even though the image was ......
Read more >Send or delete an email stuck in your outbox - Microsoft Support
Just select it and press Delete. Drag the message to your drafts folder, double-click to open the message, delete the attachment (click it...
Read more >Create, edit, manage, or delete a post - Blogger Help
You can write, edit, or delete posts and drafts any time. Write a new post Sign in to Blogger. Click New Post.
Read more >How do I delete one or more Draft posts?
Hover over any draft you'd like to delete and select the check box in the top right corner of the image. You can...
Read more >How To Delete Drafts On TikTok! (2022) - YouTube
Get The Cheapest iPhones Here: https://amzn.to/3JTnWArGet The Cheapest Androids Here: https://amzn.to/3r2k1stFollow Me On Twitter: ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
hi,希望能解决你的问题
3.set EditorState
I believe this is the same issue as #1354, #915, #483, (https://github.com/facebook/draft-js/issues/1681#issuecomment-371087387).
The solution is to use
RichUtils.handleKeyCommand
in thehandleKeyCommand
handler, so it can properly handlebackspace
on atomic blocks. Further details: https://github.com/facebook/draft-js/issues/1681#issuecomment-371143376.