Tools destroy called when the editor is destroyed

docs/CHANGELOG.md

@@ -7,6 +7,8 @@
 - `Improvements` - The `initialBlock` property of Editor config is deprecated. Use the `defaultBlock` instead. [#993](https://github.com/codex-team/editor.js/issues/993)
 - `Fix` - Fixed the issue of toolbar not disappearing on entering input in Chinese, Hindi and some other languages. [#1196](https://github.com/codex-team/editor.js/issues/1196)
 - `Improvements` - BlockAPI `call()` method now returns the result of calling method, thus allowing it to expose arbitrary data as needed [#1205](https://github.com/codex-team/editor.js/pull/1205)
+- `Fix` - Tool's `destroy` method is not invoked when `editor.destroy()` is called. [#1047](https://github.com/codex-team/editor.js/issues/1047)
+- `Improvements` - Tool's `reset` static method added to the API to clean up any data added by Tool on initialization
 - `Improvements` - Unuseful log about missed i18n section has been removed  [#1269](https://github.com/codex-team/editor.js/issues/1269)
 
 ### 2.18

docs/tools.md

@@ -89,6 +89,36 @@ There are few options available by Editor.js.
 | `inlineToolbar` | _Boolean/Array_ | `false` | Pass `true` to enable the Inline Toolbar with all Tools, or pass an array with specified Tools list |
 | `config` | _Object_ | `null` | User's configuration for Plugin.
 
+## Tool prepare and reset
+
+If you need to prepare some data for Tool (eg. load external script, create HTML nodes in the document, etc) you can use static prepare method.
+
+It accepts tools config passed on Editor's initialization as an argument:
+
+```javascript
+class Tool {
+  static prepare(config) {
+    loadScript();
+    insertNodes();
+    ...
+  }
+}
+```
+
+On Editor destroy you can use an opposite method `reset` to clean up all prepared data:
+
+```javascript
+class Tool {
+  static reset() {
+    cleanUpScripts();
+    deleteNodes();
+    ...
+  }
+}
+```
+
+Both methods might be async.
+
 ## Paste handling
 
 Editor.js handles paste on Blocks and provides API for Tools to process the pasted data.

src/components/modules/blockManager.ts

@@ -667,6 +667,18 @@ export default class BlockManager extends Module {
     this.Editor.UI.checkEmptiness();
   }
 
+  /**
+   * Cleans up all the block tools' resources
+   * This is called when editor is destroyed
+   */
+  public async destroy(): Promise<void> {
+    await Promise.all(this.blocks.map((block) => {
+      if (_.isFunction(block.tool.destroy)) {
+        return block.tool.destroy();
+      }
+    }));
+  }
+
   /**
    * Bind Events
    *

src/components/modules/tools.ts

@@ -392,6 +392,17 @@ export default class Tools extends Module {
     };
   }
 
+  /**
+   * Calls each Tool reset method to clean up anything set by Tool
+   */
+  public destroy(): void {
+    Object.values(this.available).forEach(async tool => {
+      if (_.isFunction(tool.reset)) {
+        await tool.reset();
+      }
+    });
+  }
+
   /**
    * Binds prepare function of plugins with user or default config
    *

types/tools/block-tool.d.ts

@@ -49,6 +49,12 @@ export interface BlockTool extends BaseTool {
    */
   onPaste?(event: PasteEvent): void;
 
+  /**
+   * Cleanup resources used by your tool here
+   * Called when the editor is destroyed
+   */
+  destroy?(): void;
+
   /**
    * Lifecycle hooks
    */

types/tools/tool.d.ts

@@ -40,4 +40,9 @@ export interface BaseToolConstructable {
    * @param data
    */
   prepare?(data: {toolName: string, config: ToolConfig}): void | Promise<void>;
+
+  /**
+   * Tool`s reset method to clean up anything set by prepare. Can be async
+   */
+  reset?(): void | Promise<void>;
 }