Currently I am building a react application that use draftjs as Editor
Particularly, I added a pasted image feature with the usage of onPastedFilesChange attributes and AtomicBlockUtils.insertAtomicBlock methods.
User can paste image into Editor and meanwhile the image is uploaded to file server.
But currently, I faced a problem. When user enter backspace key to delete the pasted image. I need to delete the image on the server.
So I need to know which content is deleted when user enter the backspace key.
I can capture the event by handleKeyCommand attributor, but I don't know how to catch the content deleted by entering backspace key.
Does anybody know how to capture the deleted content caused by backspace key?
Thank you so much
<Editor
handlePastedFiles={(e) => {
onPastedFilesChange(e).then()
return 'handled'
}}
handleKeyCommand={handleKeyCommand}
/>
const onPastedFilesChange = async (blobs: Blob[]) => {
....uploading blob to server....
const currentContent = editorState.getCurrentContent()
const entity = currentContent.createEntity(
PastedImageEntityType,
'IMMUTABLE',
{
src: `uploaded blob file url`,
id: id,
}
)
const newState = EditorState.set(editorState, {
currentContent: entity,
})
const entityKey = entity.getLastCreatedEntityKey()
setEditorState(
AtomicBlockUtils.insertAtomicBlock(newState, entityKey, ' ')
)
}
const handleKeyCommand = (command: string): DraftHandleValue => {
if (command === 'backspace') {
//ToDo remove uploaded image, we need to know the deleted content here
}
return 'not-handled'
}