fix: UI element position on scroll (#769)

* Fixed UI element position on scroll & minor fix for side menu

* Added comments

* Made add block button no longer freeze side menu

Author: matthewlipski

packages/core/src/extensions/FilePanel/FilePanelPlugin.ts

@@ -42,10 +42,12 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
     };
 
     pmView.dom.addEventListener("mousedown", this.mouseDownHandler);
-
     pmView.dom.addEventListener("dragstart", this.dragstartHandler);
 
-    document.addEventListener("scroll", this.scrollHandler);
+    // 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.
+    document.addEventListener("scroll", this.scrollHandler, true);
   }
 
   mouseDownHandler = () => {
@@ -119,7 +121,7 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
 
     this.pmView.dom.removeEventListener("dragstart", this.dragstartHandler);
 
-    document.removeEventListener("scroll", this.scrollHandler);
+    document.removeEventListener("scroll", this.scrollHandler, true);
   }
 }
 

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

@@ -60,7 +60,10 @@ export class FormattingToolbarView implements PluginView {
     pmView.dom.addEventListener("dragstart", this.dragHandler);
     pmView.dom.addEventListener("dragover", this.dragHandler);
 
-    document.addEventListener("scroll", this.scrollHandler);
+    // 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.
+    document.addEventListener("scroll", this.scrollHandler, true);
   }
 
   viewMousedownHandler = () => {
@@ -150,7 +153,7 @@ export class FormattingToolbarView implements PluginView {
     this.pmView.dom.removeEventListener("dragstart", this.dragHandler);
     this.pmView.dom.removeEventListener("dragover", this.dragHandler);
 
-    document.removeEventListener("scroll", this.scrollHandler);
+    document.removeEventListener("scroll", this.scrollHandler, true);
   }
 
   closeMenu = () => {

packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts

@@ -62,7 +62,11 @@ class LinkToolbarView implements PluginView {
 
     this.pmView.dom.addEventListener("mouseover", this.mouseOverHandler);
     document.addEventListener("click", this.clickHandler, true);
-    document.addEventListener("scroll", this.scrollHandler);
+
+    // 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.
+    document.addEventListener("scroll", this.scrollHandler, true);
   }
 
   mouseOverHandler = (event: MouseEvent) => {
@@ -267,7 +271,7 @@ class LinkToolbarView implements PluginView {
 
   destroy() {
     this.pmView.dom.removeEventListener("mouseover", this.mouseOverHandler);
-    document.removeEventListener("scroll", this.scrollHandler);
+    document.removeEventListener("scroll", this.scrollHandler, true);
     document.removeEventListener("click", this.clickHandler, true);
   }
 }

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

@@ -252,8 +252,8 @@ export class SideMenuView<
   S extends StyleSchema
 > implements PluginView
 {
-  private state?: SideMenuState<BSchema, I, S>;
-  private readonly emitUpdate: (state: SideMenuState<BSchema, I, S>) => void;
+  public state?: SideMenuState<BSchema, I, S>;
+  public readonly emitUpdate: (state: SideMenuState<BSchema, I, S>) => void;
 
   private needUpdate = false;
   private mousePos: { x: number; y: number } | undefined;
@@ -296,13 +296,15 @@ export class SideMenuView<
     // Shows or updates menu position whenever the cursor moves, if the menu isn't frozen.
     document.body.addEventListener("mousemove", this.onMouseMove, true);
 
-    // Makes menu scroll with the page.
-    document.addEventListener("scroll", this.onScroll);
-
-    // Unfreezes the menu whenever the user clicks anywhere.
-    document.body.addEventListener("mousedown", this.onMouseDown, true);
+    // Unfreezes the menu whenever the user clicks.
+    this.pmView.dom.addEventListener("mousedown", this.onMouseDown);
     // Hides and unfreezes the menu whenever the user presses a key.
     document.body.addEventListener("keydown", this.onKeyDown, true);
+
+    // 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.
+    document.addEventListener("scroll", this.onScroll, true);
   }
 
   updateState = () => {
@@ -456,12 +458,12 @@ export class SideMenuView<
     }
   };
 
-  onMouseDown = (_event: MouseEvent) => {
-    if (this.state && !this.state.show) {
-      this.state.show = true;
+  onMouseDown = () => {
+    if (this.state && this.state.show && this.menuFrozen) {
+      this.menuFrozen = false;
+      this.state.show = false;
       this.emitUpdate(this.state);
     }
-    this.menuFrozen = false;
   };
 
   onMouseMove = (event: MouseEvent) => {
@@ -552,8 +554,8 @@ export class SideMenuView<
     document.body.removeEventListener("dragover", this.onDragOver);
     this.pmView.dom.removeEventListener("dragstart", this.onDragStart);
     document.body.removeEventListener("drop", this.onDrop, true);
-    document.removeEventListener("scroll", this.onScroll);
-    document.body.removeEventListener("mousedown", this.onMouseDown, true);
+    document.removeEventListener("scroll", this.onScroll, true);
+    this.pmView.dom.removeEventListener("mousedown", this.onMouseDown);
     document.body.removeEventListener("keydown", this.onKeyDown, true);
   }
 
@@ -563,8 +565,6 @@ export class SideMenuView<
       this.emitUpdate(this.state);
     }
 
-    this.menuFrozen = true;
-
     const blockContent = this.hoveredBlock!.firstChild! as HTMLElement;
     const blockContentBoundingBox = blockContent.getBoundingClientRect();
 
@@ -674,5 +674,9 @@ export class SideMenuProsemirrorPlugin<
    * attached to the same block regardless of which block is hovered by the
    * mouse cursor.
    */
-  unfreezeMenu = () => (this.view!.menuFrozen = false);
+  unfreezeMenu = () => {
+    this.view!.menuFrozen = false;
+    this.view!.state!.show = false;
+    this.view!.emitUpdate(this.view!.state!);
+  };
 }

packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -37,7 +37,10 @@ class SuggestionMenuView<
       emitUpdate(menuName, this.state);
     };
 
-    document.addEventListener("scroll", this.handleScroll);
+    // 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.
+    document.addEventListener("scroll", this.handleScroll, true);
   }
 
   handleScroll = () => {
@@ -92,7 +95,7 @@ class SuggestionMenuView<
   }
 
   destroy() {
-    document.removeEventListener("scroll", this.handleScroll);
+    document.removeEventListener("scroll", this.handleScroll, true);
   }
 
   closeMenu = () => {

packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -119,7 +119,10 @@ export class TableHandlesView<
     document.addEventListener("dragover", this.dragOverHandler);
     document.addEventListener("drop", this.dropHandler);
 
-    document.addEventListener("scroll", this.scrollHandler);
+    // 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.
+    document.addEventListener("scroll", this.scrollHandler, true);
   }
 
   mouseMoveHandler = (event: MouseEvent) => {
@@ -361,7 +364,7 @@ export class TableHandlesView<
     document.removeEventListener("dragover", this.dragOverHandler);
     document.removeEventListener("drop", this.dropHandler);
 
-    document.removeEventListener("scroll", this.scrollHandler);
+    document.removeEventListener("scroll", this.scrollHandler, true);
   }
 }