fix: Formatting Toolbar not hiding when clicking on elements outside it (#233)

* Fixed condition which checks if the formatting toolbar is being clicked

* Made hyperlink toolbar hide when editor loses focus

* Removed unnecessary listeners & made link button popup child of formatting toolbar

* Added comments

Author: matthewlipski

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

@@ -110,11 +110,15 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
       return;
     }
 
+    // Checks if the focus is moving to an element outside the editor. If it is,
+    // the toolbar is hidden.
     if (
-      event?.relatedTarget &&
-      this.formattingToolbar.element?.parentNode?.contains(
-        event.relatedTarget as Node
-      )
+      // An element is clicked.
+      event &&
+      event.relatedTarget &&
+      // Element is outside the toolbar.
+      (this.formattingToolbar.element === (event.relatedTarget as Node) ||
+        this.formattingToolbar.element?.contains(event.relatedTarget as Node))
     ) {
       return;
     }
@@ -169,12 +173,6 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
       this.formattingToolbar.render(this.getDynamicParams(), true);
       this.toolbarIsOpen = true;
 
-      // TODO: Is this necessary? Also for other menu plugins.
-      // Listener stops focus moving to the menu on click.
-      this.formattingToolbar.element!.addEventListener("mousedown", (event) =>
-        event.preventDefault()
-      );
-
       return;
     }
 
@@ -197,12 +195,6 @@ export class FormattingToolbarView<BSchema extends BlockSchema> {
       this.formattingToolbar.hide();
       this.toolbarIsOpen = false;
 
-      // Listener stops focus moving to the menu on click.
-      this.formattingToolbar.element!.removeEventListener(
-        "mousedown",
-        (event) => event.preventDefault()
-      );
-
       return;
     }
   }

packages/core/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts

@@ -57,6 +57,7 @@ class HyperlinkToolbarView {
     };
 
     this.editor.view.dom.addEventListener("mouseover", this.mouseOverHandler);
+    document.addEventListener("click", this.clickHandler, true);
     document.addEventListener("scroll", this.scrollHandler);
   }
 
@@ -101,6 +102,24 @@ class HyperlinkToolbarView {
     return false;
   };
 
+  clickHandler = (event: MouseEvent) => {
+    if (
+      // Toolbar is open.
+      this.hyperlinkMark &&
+      // An element is clicked.
+      event &&
+      event.target &&
+      // Element is outside the editor.
+      this.editor.view.dom !== (event.target as Node) &&
+      !this.editor.view.dom.contains(event.target as Node) &&
+      // Element is outside the toolbar.
+      this.hyperlinkToolbar.element !== (event.target as Node) &&
+      !this.hyperlinkToolbar.element?.contains(event.target as Node)
+    ) {
+      this.hyperlinkToolbar.hide();
+    }
+  };
+
   scrollHandler = () => {
     if (this.hyperlinkMark !== undefined) {
       this.hyperlinkToolbar.render(this.getDynamicParams(), false);

packages/react/src/FormattingToolbar/components/LinkToolbarButton.tsx

@@ -62,7 +62,6 @@ export const LinkToolbarButton = (props: HyperlinkButtonProps) => {
 
   return (
     <Tippy
-      appendTo={document.body}
       content={creationMenu}
       onShow={updateCreationMenu}
       interactive={true}