Trigger event when a certain element has been removed

Question

I'm building an editor using the excellent Slate editor, but I'm having trouble with a certain task. I've built a drag-and-drop image upload that successfully uploads images (via API, not related to Slate) and inserts them into the editor. However, I want to delete the image from the server if the user deletes it in the editor. Is there a way to trigger functions when a certain node type is removed from the state?

Answer 1

I've just started looking at slate and was looking into the same issue. My solution is to:

• create a plugin function for image handling (options) => { /* plugin object */}
• In this plugin function, in schema.nodes, return a wrapper around my main Image component that sets an onDelete prop from the options parameter.

//ImagePlugin function

export default function ImagePlugin(options) {
  return {
    schema: {
      nodes: {
        image: props => <Image
          {...Object.assign({ onDelete: options.onDelete }, props) } />
      }
    }
  }