fix: Side menu showing when editor isn't focused. (#230)

* Made block side menu only show if the editor or menu is focused.

* Temp changes

* Revert "Temp changes"

This reverts commit 805b6fa.

* Changed behaviour so side menu hides if the cursor is over the editor but the hovered element is not its descendant

* Added additional condition and comments

* Small fixes

* Small fix

Author: matthewlipski

packages/core/src/BlockNoteEditor.ts

@@ -154,6 +154,10 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     return this._tiptapEditor.view.dom as HTMLDivElement;
   }
 
+  public isFocused() {
+    return this._tiptapEditor.view.hasFocus();
+  }
+
   public focus() {
     this._tiptapEditor.view.focus();
   }

packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts

@@ -375,11 +375,45 @@ export class BlockMenuView<BSchema extends BlockSchema> {
       return;
     }
 
-    // Editor itself may have padding or other styling which affects size/position, so we get the boundingRect of
-    // the first child (i.e. the blockGroup that wraps all blocks in the editor) for a more accurate bounding box.
+    // Editor itself may have padding or other styling which affects
+    // size/position, so we get the boundingRect of the first child (i.e. the
+    // blockGroup that wraps all blocks in the editor) for more accurate side
+    // menu placement.
     const editorBoundingBox = (
       this.ttEditor.view.dom.firstChild! as HTMLElement
     ).getBoundingClientRect();
+    // We want the full area of the editor to check if the cursor is hovering
+    // above it though.
+    const editorOuterBoundingBox =
+      this.ttEditor.view.dom.getBoundingClientRect();
+    const cursorWithinEditor =
+      event.clientX >= editorOuterBoundingBox.left &&
+      event.clientX <= editorOuterBoundingBox.right &&
+      event.clientY >= editorOuterBoundingBox.top &&
+      event.clientY <= editorOuterBoundingBox.bottom;
+
+    // Doesn't update if the mouse hovers an element that's over the editor but
+    // isn't a part of it or the side menu.
+    if (
+      // Cursor is within the editor area
+      cursorWithinEditor &&
+      // An element is hovered
+      event &&
+      event.target &&
+      // Element is outside the editor
+      this.ttEditor.view.dom !== event.target &&
+      !this.ttEditor.view.dom.contains(event.target as HTMLElement) &&
+      // Element is outside the side menu
+      this.blockMenu.element !== event.target &&
+      !this.blockMenu.element?.contains(event.target as HTMLElement)
+    ) {
+      if (this.menuOpen) {
+        this.menuOpen = false;
+        this.blockMenu.hide();
+      }
+
+      return;
+    }
 
     this.horizontalPosAnchor = editorBoundingBox.x;