Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

214
Views
draftjs handle backspace deleted content

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


about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!