0

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'
  }


Zhongwei Xu
  • 147
  • 9
  • 1
    need more code to reproduce the situation. [stackblitz](https://stackblitz.com/edit/react-draft-js?file=index.html) – Alan Yu Oct 31 '21 at 08:10
  • 1
    I don't yet have reputation to comment, but here it is [an answer for this in another question](https://stackoverflow.com/a/71804706/16283336). – Isaac Muniz Apr 09 '22 at 01:57

0 Answers0