fix: Formatting toolbar opening on drop (#944)

* WIP fix for formatting toolbar appearing on drop

* Re-added focus event handling for formatting toolbar

* Removed focus handler

Author: matthewlipski

packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -58,13 +58,45 @@ export class FormattingToolbarView implements PluginView {
     pmView.dom.addEventListener("mouseup", this.viewMouseupHandler);
     pmView.dom.addEventListener("dragstart", this.dragHandler);
     pmView.dom.addEventListener("dragover", this.dragHandler);
+    pmView.dom.addEventListener("blur", this.blurHandler);
 
     // Setting capture=true ensures that any parent container of the editor that
     // gets scrolled will trigger the scroll event. Scroll events do not bubble
     // and so won't propagate to the document by default.
     pmView.root.addEventListener("scroll", this.scrollHandler, true);
   }
 
+  blurHandler = (event: FocusEvent) => {
+    if (this.preventHide) {
+      this.preventHide = false;
+
+      return;
+    }
+
+    const editorWrapper = this.pmView.dom.parentElement!;
+
+    // Checks if the focus is moving to an element outside the editor. If it is,
+    // the toolbar is hidden.
+    if (
+      // An element is clicked.
+      event &&
+      event.relatedTarget &&
+      // Element is inside the editor.
+      (editorWrapper === (event.relatedTarget as Node) ||
+        editorWrapper.contains(event.relatedTarget as Node) ||
+        (event.relatedTarget as HTMLElement).matches(
+          ".bn-ui-container, .bn-ui-container *"
+        ))
+    ) {
+      return;
+    }
+
+    if (this.state?.show) {
+      this.state.show = false;
+      this.emitUpdate();
+    }
+  };
+
   viewMousedownHandler = () => {
     this.preventShow = true;
   };
@@ -90,6 +122,10 @@ export class FormattingToolbarView implements PluginView {
   };
 
   update(view: EditorView, oldState?: EditorState) {
+    // Delays the update to handle edge case with drag and drop, where the view
+    // is blurred asynchronously and happens only after the state update.
+    // Wrapping in a setTimeout gives enough time to wait for the blur event to
+    // occur before updating the toolbar.
     const { state, composing } = view;
     const { doc, selection } = state;
     const isSame =
@@ -146,6 +182,7 @@ export class FormattingToolbarView implements PluginView {
     this.pmView.dom.removeEventListener("mouseup", this.viewMouseupHandler);
     this.pmView.dom.removeEventListener("dragstart", this.dragHandler);
     this.pmView.dom.removeEventListener("dragover", this.dragHandler);
+    this.pmView.dom.removeEventListener("blur", this.blurHandler);
 
     this.pmView.root.removeEventListener("scroll", this.scrollHandler, true);
   }