fix: menu positioning when scrolling (#167)

* Made all menus/toolbars scroll with page

* Revert "Made all menus/toolbars scroll with page"

This reverts commit 6071095.

* Made all menus/toolbars scroll with page

Author: matthewlipski

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

@@ -277,6 +277,9 @@ export class BlockMenuView {
     // 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);
+
     // Hides and unfreezes the menu whenever the user selects the editor with the mouse or presses a key.
     // TODO: Better integration with suggestions menu and only editor scope?
     document.body.addEventListener("mousedown", this.onMouseDown, true);
@@ -421,6 +424,12 @@ export class BlockMenuView {
     }
   };
 
+  onScroll = () => {
+    if (this.menuOpen) {
+      this.blockMenu.render(this.getDynamicParams(), false);
+    }
+  };
+
   destroy() {
     if (this.menuOpen) {
       this.menuOpen = false;
@@ -430,6 +439,7 @@ export class BlockMenuView {
     document.body.removeEventListener("dragover", this.onDragOver);
     document.body.removeEventListener("drop", this.onDrop);
     document.body.removeEventListener("mousedown", this.onMouseDown);
+    document.removeEventListener("scroll", this.onScroll);
     document.body.removeEventListener("keydown", this.onKeyDown);
   }
 

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

@@ -85,6 +85,8 @@ export class FormattingToolbarView {
     this.view.dom.addEventListener("mouseup", this.viewMouseupHandler);
     this.view.dom.addEventListener("dragstart", this.dragstartHandler);
 
+    document.addEventListener("scroll", this.scrollHandler);
+
     this.editor.on("focus", this.focusHandler);
     this.editor.on("blur", this.blurHandler);
   }
@@ -130,6 +132,12 @@ export class FormattingToolbarView {
     }
   };
 
+  scrollHandler = () => {
+    if (this.toolbarIsOpen) {
+      this.formattingToolbar.render(this.getDynamicParams(), false);
+    }
+  };
+
   update(view: EditorView, oldState?: EditorState) {
     const { state, composing } = view;
     const { doc, selection } = state;
@@ -213,6 +221,8 @@ export class FormattingToolbarView {
     this.view.dom.removeEventListener("mouseup", this.viewMouseupHandler);
     this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
 
+    document.removeEventListener("scroll", this.scrollHandler);
+
     this.editor.off("focus", this.focusHandler);
     this.editor.off("blur", this.blurHandler);
   }

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

@@ -56,47 +56,56 @@ class HyperlinkToolbarView {
       return false;
     };
 
-    editor.view.dom.addEventListener("mouseover", (event) => {
-      // Resets the hyperlink mark currently hovered by the mouse cursor.
-      this.mouseHoveredHyperlinkMark = undefined;
-      this.mouseHoveredHyperlinkMarkRange = undefined;
-
-      this.stopMenuUpdateTimer();
-
-      if (
-        event.target instanceof HTMLAnchorElement &&
-        event.target.nodeName === "A"
-      ) {
-        // Finds link mark at the hovered element's position to update mouseHoveredHyperlinkMark and
-        // mouseHoveredHyperlinkMarkRange.
-        const hoveredHyperlinkElement = event.target;
-        const posInHoveredHyperlinkMark =
-          editor.view.posAtDOM(hoveredHyperlinkElement, 0) + 1;
-        const resolvedPosInHoveredHyperlinkMark = editor.state.doc.resolve(
-          posInHoveredHyperlinkMark
-        );
-        const marksAtPos = resolvedPosInHoveredHyperlinkMark.marks();
-
-        for (const mark of marksAtPos) {
-          if (mark.type.name === editor.schema.mark("link").type.name) {
-            this.mouseHoveredHyperlinkMark = mark;
-            this.mouseHoveredHyperlinkMarkRange =
-              getMarkRange(
-                resolvedPosInHoveredHyperlinkMark,
-                mark.type,
-                mark.attrs
-              ) || undefined;
-
-            break;
-          }
+    this.editor.view.dom.addEventListener("mouseover", this.mouseOverHandler);
+    document.addEventListener("scroll", this.scrollHandler);
+  }
+
+  mouseOverHandler = (event: MouseEvent) => {
+    // Resets the hyperlink mark currently hovered by the mouse cursor.
+    this.mouseHoveredHyperlinkMark = undefined;
+    this.mouseHoveredHyperlinkMarkRange = undefined;
+
+    this.stopMenuUpdateTimer();
+
+    if (
+      event.target instanceof HTMLAnchorElement &&
+      event.target.nodeName === "A"
+    ) {
+      // Finds link mark at the hovered element's position to update mouseHoveredHyperlinkMark and
+      // mouseHoveredHyperlinkMarkRange.
+      const hoveredHyperlinkElement = event.target;
+      const posInHoveredHyperlinkMark =
+        this.editor.view.posAtDOM(hoveredHyperlinkElement, 0) + 1;
+      const resolvedPosInHoveredHyperlinkMark = this.editor.state.doc.resolve(
+        posInHoveredHyperlinkMark
+      );
+      const marksAtPos = resolvedPosInHoveredHyperlinkMark.marks();
+
+      for (const mark of marksAtPos) {
+        if (mark.type.name === this.editor.schema.mark("link").type.name) {
+          this.mouseHoveredHyperlinkMark = mark;
+          this.mouseHoveredHyperlinkMarkRange =
+            getMarkRange(
+              resolvedPosInHoveredHyperlinkMark,
+              mark.type,
+              mark.attrs
+            ) || undefined;
+
+          break;
         }
       }
+    }
 
-      this.startMenuUpdateTimer();
+    this.startMenuUpdateTimer();
 
-      return false;
-    });
-  }
+    return false;
+  };
+
+  scrollHandler = () => {
+    if (this.hyperlinkMark !== undefined) {
+      this.hyperlinkToolbar.render(this.getDynamicParams(), false);
+    }
+  };
 
   update() {
     if (!this.editor.view.hasFocus()) {
@@ -187,6 +196,14 @@ class HyperlinkToolbarView {
     }
   }
 
+  destroy() {
+    this.editor.view.dom.removeEventListener(
+      "mouseover",
+      this.mouseOverHandler
+    );
+    document.removeEventListener("scroll", this.scrollHandler);
+  }
+
   getStaticParams(): HyperlinkToolbarStaticParams {
     return {
       editHyperlink: (url: string, text: string) => {

packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts

@@ -127,8 +127,16 @@ class SuggestionPluginView<T extends SuggestionItem> {
     };
 
     this.suggestionsMenu = suggestionsMenuFactory(this.getStaticParams());
+
+    document.addEventListener("scroll", this.handleScroll);
   }
 
+  handleScroll = () => {
+    if (this.pluginKey.getState(this.editor._tiptapEditor.state).active) {
+      this.suggestionsMenu.render(this.getDynamicParams(), false);
+    }
+  };
+
   update(view: EditorView, prevState: EditorState) {
     const prev = this.pluginKey.getState(prevState);
     const next = this.pluginKey.getState(view.state);
@@ -170,6 +178,10 @@ class SuggestionPluginView<T extends SuggestionItem> {
     }
   }
 
+  destroy() {
+    document.removeEventListener("scroll", this.handleScroll);
+  }
+
   getStaticParams(): SuggestionsMenuStaticParams<T> {
     return {
       itemCallback: (item: T) => this.itemCallback(item),