From 60710953fef53202ba53d0ddabe5f2e33419ca6b Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 14 Apr 2023 16:27:20 +0200 Subject: [PATCH 1/3] Made all menus/toolbars scroll with page --- .../DraggableBlocks/DraggableBlocksPlugin.ts | 10 ++ .../FormattingToolbarPlugin.ts | 10 ++ .../HyperlinkToolbarPlugin.ts | 91 +++++++++++-------- .../plugins/suggestion/SuggestionPlugin.ts | 12 +++ 4 files changed, 86 insertions(+), 37 deletions(-) diff --git a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts index 2ac36d5f61..71fcef2e8e 100644 --- a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts +++ b/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); } diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts index 76a28554e0..18efb73f64 100644 --- a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts +++ b/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); } diff --git a/packages/core/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts b/packages/core/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts index 597427892e..c2301d984b 100644 --- a/packages/core/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts +++ b/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) => { diff --git a/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts b/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts index 966c5b9246..9e102ca186 100644 --- a/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts +++ b/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts @@ -127,8 +127,16 @@ class SuggestionPluginView { }; 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 { } } + destroy() { + document.removeEventListener("scroll", this.handleScroll); + } + getStaticParams(): SuggestionsMenuStaticParams { return { itemCallback: (item: T) => this.itemCallback(item), From 41d5daebbde95b1d954310f5a7e5900503c76d52 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 14 Apr 2023 16:44:30 +0200 Subject: [PATCH 2/3] Revert "Made all menus/toolbars scroll with page" This reverts commit 60710953fef53202ba53d0ddabe5f2e33419ca6b. --- .../DraggableBlocks/DraggableBlocksPlugin.ts | 10 -- .../FormattingToolbarPlugin.ts | 10 -- .../HyperlinkToolbarPlugin.ts | 91 ++++++++----------- .../plugins/suggestion/SuggestionPlugin.ts | 12 --- 4 files changed, 37 insertions(+), 86 deletions(-) diff --git a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts index 71fcef2e8e..2ac36d5f61 100644 --- a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts +++ b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts @@ -277,9 +277,6 @@ 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); @@ -424,12 +421,6 @@ export class BlockMenuView { } }; - onScroll = () => { - if (this.menuOpen) { - this.blockMenu.render(this.getDynamicParams(), false); - } - }; - destroy() { if (this.menuOpen) { this.menuOpen = false; @@ -439,7 +430,6 @@ 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); } diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts index 18efb73f64..76a28554e0 100644 --- a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts +++ b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts @@ -85,8 +85,6 @@ 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); } @@ -132,12 +130,6 @@ 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; @@ -221,8 +213,6 @@ 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); } diff --git a/packages/core/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts b/packages/core/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts index c2301d984b..597427892e 100644 --- a/packages/core/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts +++ b/packages/core/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts @@ -56,56 +56,47 @@ class HyperlinkToolbarView { return false; }; - 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; + 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.startMenuUpdateTimer(); + this.startMenuUpdateTimer(); - return false; - }; - - scrollHandler = () => { - if (this.hyperlinkMark !== undefined) { - this.hyperlinkToolbar.render(this.getDynamicParams(), false); - } - }; + return false; + }); + } update() { if (!this.editor.view.hasFocus()) { @@ -196,14 +187,6 @@ class HyperlinkToolbarView { } } - destroy() { - this.editor.view.dom.removeEventListener( - "mouseover", - this.mouseOverHandler - ); - document.removeEventListener("scroll", this.scrollHandler); - } - getStaticParams(): HyperlinkToolbarStaticParams { return { editHyperlink: (url: string, text: string) => { diff --git a/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts b/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts index 9e102ca186..966c5b9246 100644 --- a/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts +++ b/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts @@ -127,16 +127,8 @@ class SuggestionPluginView { }; 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); @@ -178,10 +170,6 @@ class SuggestionPluginView { } } - destroy() { - document.removeEventListener("scroll", this.handleScroll); - } - getStaticParams(): SuggestionsMenuStaticParams { return { itemCallback: (item: T) => this.itemCallback(item), From 1a66963f4e69aef79cdfe9e1129735c9ab2ee6c4 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 14 Apr 2023 16:27:20 +0200 Subject: [PATCH 3/3] Made all menus/toolbars scroll with page --- .../DraggableBlocks/DraggableBlocksPlugin.ts | 10 ++ .../FormattingToolbarPlugin.ts | 10 ++ .../HyperlinkToolbarPlugin.ts | 91 +++++++++++-------- .../plugins/suggestion/SuggestionPlugin.ts | 12 +++ 4 files changed, 86 insertions(+), 37 deletions(-) diff --git a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts index 2ac36d5f61..71fcef2e8e 100644 --- a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts +++ b/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); } diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts index 76a28554e0..18efb73f64 100644 --- a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts +++ b/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); } diff --git a/packages/core/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts b/packages/core/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts index 597427892e..c2301d984b 100644 --- a/packages/core/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts +++ b/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) => { diff --git a/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts b/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts index 966c5b9246..9e102ca186 100644 --- a/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts +++ b/packages/core/src/shared/plugins/suggestion/SuggestionPlugin.ts @@ -127,8 +127,16 @@ class SuggestionPluginView { }; 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 { } } + destroy() { + document.removeEventListener("scroll", this.handleScroll); + } + getStaticParams(): SuggestionsMenuStaticParams { return { itemCallback: (item: T) => this.itemCallback(item),