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 <[email protected]>
codex-team · Dec 8, 2020 · 31920a7 · 31920a7
1 parent 43032eb
commit 31920a7
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 17 deletions.
diff --git a/dist/editor.js b/dist/editor.js
diff --git a/docs/CHANGELOG.md b/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)

diff --git a/src/components/core.ts b/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 || {};

diff --git a/src/components/modules/toolbar/blockSettings.ts b/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();
   }
 

diff --git a/src/components/modules/toolbar/conversion.ts b/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();
   }
 

diff --git a/src/components/modules/toolbar/index.ts b/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();
   }
 }
diff --git a/src/components/modules/toolbar/inline.ts b/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);
 
     /**

diff --git a/src/components/modules/toolbar/toolbox.ts b/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();
   }