fix: Formatting Toolbar not hiding when clicking on elements outside it (TypeCellOS#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}