Resolve editor.destroy() Problem (#1404)

* Resolve editor.destroy() Problem

* Resolve this.flipper undefined in inline.ts in readonly mode

* fix destroy methods

* destroy conversion toolbar on toggling read-only

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.19.1
+
+- `Fix` - The problem with destroy() method [#1380](https://github.com/codex-team/editor.js/issues/1380)
+
 ### 2.19
 
 - `New` - Read-only mode 🥳 [#837](https://github.com/codex-team/editor.js/issues/837)

src/components/core.ts

@@ -185,7 +185,6 @@ export default class Core {
       a: true,
     } as SanitizerConfig;
 
-
     this.config.hideToolbar = this.config.hideToolbar ? this.config.hideToolbar : false;
     this.config.tools = this.config.tools || {};
     this.config.i18n = this.config.i18n || {};

src/components/modules/toolbar/blockSettings.ts

@@ -107,8 +107,14 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
    * Destroys module
    */
   public destroy(): void {
-    this.flipper.deactivate();
-    this.flipper = null;
+    /**
+     * Sometimes (in read-only mode) there is no Flipper
+     */
+    if (this.flipper) {
+      this.flipper.deactivate();
+      this.flipper = null;
+    }
+
     this.removeAllNodes();
   }
 

src/components/modules/toolbar/conversion.ts

@@ -95,8 +95,14 @@ export default class ConversionToolbar extends Module<ConversionToolbarNodes> {
    * Deactivates flipper and removes all nodes
    */
   public destroy(): void {
-    this.flipper.deactivate();
-    this.flipper = null;
+    /**
+     * Sometimes (in read-only mode) there is no Flipper
+     */
+    if (this.flipper) {
+      this.flipper.deactivate();
+      this.flipper = null;
+    }
+
     this.removeAllNodes();
   }
 

src/components/modules/toolbar/index.ts

@@ -77,7 +77,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
    *
    * @returns {object}
    */
-  public get CSS(): {[name: string]: string} {
+  public get CSS(): { [name: string]: string } {
     return {
       toolbar: 'ce-toolbar',
       content: 'ce-toolbar__content',
@@ -111,7 +111,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
    *
    * @returns {{hide: function(): void, show: function(): void}}
    */
-  public get plusButton(): {hide: () => void; show: () => void} {
+  public get plusButton(): { hide: () => void; show: () => void } {
     return {
       hide: (): void => this.nodes.plusButton.classList.add(this.CSS.plusButtonHidden),
       show: (): void => {
@@ -128,7 +128,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
    *
    * @returns {{hide: function(): void, show: function(): void}}
    */
-  private get blockActions(): {hide: () => void; show: () => void} {
+  private get blockActions(): { hide: () => void; show: () => void } {
     return {
       hide: (): void => {
         this.nodes.actions.classList.remove(this.CSS.actionsOpened);
@@ -150,6 +150,8 @@ export default class Toolbar extends Module<ToolbarNodes> {
       this.enableModuleBindings();
     } else {
       this.destroy();
+      this.Editor.Toolbox.destroy();
+      this.Editor.BlockSettings.destroy();
       this.disableModuleBindings();
     }
   }
@@ -381,8 +383,6 @@ export default class Toolbar extends Module<ToolbarNodes> {
    * It is used in Read-Only mode
    */
   private destroy(): void {
-    this.Editor.Toolbox.destroy();
-    this.Editor.BlockSettings.destroy();
     this.removeAllNodes();
   }
 }

src/components/modules/toolbar/inline.ts

@@ -97,6 +97,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
       this.make();
     } else {
       this.destroy();
+      this.Editor.ConversionToolbar.destroy();
     }
   }
 
@@ -255,10 +256,15 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
    * Removes UI and its components
    */
   public destroy(): void {
-    this.flipper.deactivate();
-    this.flipper = null;
+    /**
+     * Sometimes (in read-only mode) there is no Flipper
+     */
+    if (this.flipper) {
+      this.flipper.deactivate();
+      this.flipper = null;
+    }
 
-    this.Editor.ConversionToolbar.destroy();
+    this.removeAllNodes();
   }
 
   /**
@@ -267,7 +273,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
    * @param {string} toolName - user specified name of tool
    * @returns - array of ordered tool names or false
    */
-  private getInlineToolbarSettings(toolName): string[]|boolean {
+  private getInlineToolbarSettings(toolName): string[] | boolean {
     const toolSettings = this.Editor.Tools.getToolSettings(toolName);
 
     /**

src/components/modules/toolbar/toolbox.ts

@@ -96,8 +96,14 @@ export default class Toolbox extends Module<ToolboxNodes> {
    * Destroy Module
    */
   public destroy(): void {
-    this.flipper.deactivate();
-    this.flipper = null;
+    /**
+     * Sometimes (in read-only mode) there is no Flipper
+     */
+    if (this.flipper) {
+      this.flipper.deactivate();
+      this.flipper = null;
+    }
+
     this.removeAllNodes();
     this.removeAllShortcuts();
   }