Destroy method for every block.

[dimensi]

When trying to write code to clean up resources after deleting a block, I was very surprised when the destroy() method is called only when the editor.js itself calls the destroy() method, not when the block is removed from the editor. The problem is that if a block creates something in memory, it cannot clear it from memory if the block has been removed from the editor and as a result all garbage remains in dom or memory.

For example, you have an ajax library and it has a transport method which always creates a new input element in the dom, and if you try to optimize it somehow, it is logical to remove it from the dom after the change event. But there is also a case when the user cancels the file selection and then this input will hang in the dom always and if the Image block has been deleted, there is no way to clear all the input created when deleting it.

It would be nice to add a method that is called every time a block is deleted

[gohabereg]

Hi @dimensi !

We are planning to introduce Block lifecycle and methods you can use lifecycle hooks. At the moment its under the discussion and design.

[PaulKinlan]

Hey all, is there any update for this? I'm currently holding on to Blob URL's that have to be released when no longer needed (i.e, when the block is deleted).

[urielaero]

The easy way is to extend the Tool and override the "removed" method.
something like this (this example is for the image tool.):

import Image from '@editorjs/image';

export default class extends Image {
  removed() {
     
  }
}

[osain-az]

The easy way is to extend the Tool and override the "removed" method.
something like this (this example is for the image tool.):

import Image from '@editorjs/image';

export default class extends Image {
  removed() {
     
  }
}

@urielaero is it possible to provide more details about the 'removed' method like what data is passed to the method, give a case study or how is the original ''removed'' method implemented.
Thanks

[urielaero]

The easy way is to extend the Tool and override the "removed" method.
something like this (this example is for the image tool.):

import Image from '@editorjs/image';

export default class extends Image {
  removed() {
     
  }
}

@urielaero is it possible to provide more details about the 'removed' method like what data is passed to the method, give a case study or how is the original ''removed'' method implemented.
Thanks

The method is called without parameters, however you can access the data via this.data (https://github.com/editor-js/image#output-data).

// file: js/image_tool.js
import Image from '@editorjs/image';

export default class extends Image {
  removed() {
    const deleteFn = this.config.uploader.delete;
    if (deleteFn) {
      deleteFn(this.data.file).then(() => { /* something... */ });
    }
  }
}

Config example (https://github.com/editor-js/image#config-params)

// file js/editor_uploader_config.js
///...
{
  uploadByFile: (file) => {
    //...
  },
  uploadByUrl: (url) => {
    //...
  },
  delete: (data) => { /* This is not documented because it is never called as such in the original implementation, but to follow the convention of it being configurable, this is where I added it. */
    if (data.key) { // or data.url
      // call custom fn to remove the file from the server...
     }
  }
};

Finally remember to correctly register your own image_tool implementation (https://editorjs.io/configuration):

import ImageTool from '~/js/image_tool';
import uploaderConfig from '~/js/editor_uploader_config';
//...
    tools: {
      image: {
        class: ImageTool,
        config: {
          uploader: uploaderConfig
        }
     },

[osain-az]

@urielaero thanks for the information and help.