Clear focus on multiple editor instances (#632)

* Clear focus on multiple editor instances

* update

* update bundles

* close inline toolbar

README.md

@@ -19,6 +19,7 @@ Welcome to testing stage. Please, join a [public Telegram-chat](//t.me/codex_edi
 
 ### 2.7-2.9 changelog
 
+- `Fix` - Clear focus when click is outside the Editor instance    
 - `Fix` — Fix CMD+A Selection on multiple Editor instances
 - `New` — Toolbox now have beautiful helpers with Tool names and shortcuts
 - `Improvements` — Prevent navigating back on Firefox when Block is removing by backspace 

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.11.4
+
+- `Fix` - Clear focus when click is outside the Editor instance
+
 ### 2.11.3
 
 - `Fix` — Fix CMD+A Selection on multiple Editor instances

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.11.3",
+  "version": "2.11.4",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",

src/components/modules/ui.ts

@@ -190,7 +190,7 @@ export default class UI extends Module {
       false,
     );
     this.Editor.Listeners.on(document, 'keydown', (event) => this.documentKeydown(event as KeyboardEvent), true);
-    this.Editor.Listeners.on(document, 'click', (event) => this.documentClicked(event as MouseEvent), false);
+    this.Editor.Listeners.on(document, 'click', (event) => this.documentClicked(event as MouseEvent), true);
   }
 
   /**
@@ -328,24 +328,31 @@ export default class UI extends Module {
      */
     const target = event.target as HTMLElement;
     const clickedOnInlineToolbarButton = target.closest(`.${this.Editor.InlineToolbar.CSS.inlineToolbar}`);
-    const clickedInsideofEditor = target.closest(`.${UI.CSS.editorWrapper}`);
+    const clickedInsideofEditor = target.closest(`#${this.config.holderId}`);
 
-    /** Clear highlightings and pointer on BlockManager */
-    if (!clickedInsideofEditor && !Selection.isAtEditor) {
+    if (!clickedInsideofEditor) {
+      /**
+       * Clear highlightings and pointer on BlockManager
+       *
+       * Current page might contain several instances
+       * Click between instances MUST clear focus, pointers and close toolbars
+       */
       this.Editor.BlockManager.dropPointer();
+      this.Editor.InlineToolbar.close();
       this.Editor.Toolbar.close();
-    }
+      this.Editor.BlockSelection.clearSelection();
 
-    if (!clickedOnInlineToolbarButton) {
+    } else if (!clickedOnInlineToolbarButton) {
+      /**
+       * Move inline toolbar to the focused Block
+       */
       this.Editor.InlineToolbar.handleShowingEvent(event);
-    }
-
-    if (Selection.isAtEditor) {
+    } else if (Selection.isAtEditor) {
+      /**
+       * Focus clicked Block
+       */
       this.Editor.BlockManager.setCurrentBlockByChildNode(Selection.anchorNode);
     }
-
-    /** Clear selection */
-    this.Editor.BlockSelection.clearSelection();
   }
 
   /**