From 197f13aec369f1093d2ad4789a1246489f1abaa0 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Mon, 27 May 2024 18:55:12 +0200 Subject: [PATCH 1/3] Fixed UI element position on scroll & minor fix for side menu --- .../extensions/FilePanel/FilePanelPlugin.ts | 4 +-- .../FormattingToolbarPlugin.ts | 4 +-- .../LinkToolbar/LinkToolbarPlugin.ts | 4 +-- .../src/extensions/SideMenu/SideMenuPlugin.ts | 28 +++++++++++-------- .../SuggestionMenu/SuggestionPlugin.ts | 4 +-- .../TableHandles/TableHandlesPlugin.ts | 4 +-- 6 files changed, 26 insertions(+), 22 deletions(-) diff --git a/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts b/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts index 35a4c1d640..3daaa65c13 100644 --- a/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts +++ b/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts @@ -45,7 +45,7 @@ export class FilePanelView pmView.dom.addEventListener("dragstart", this.dragstartHandler); - document.addEventListener("scroll", this.scrollHandler); + document.addEventListener("scroll", this.scrollHandler, true); } mouseDownHandler = () => { @@ -119,7 +119,7 @@ export class FilePanelView this.pmView.dom.removeEventListener("dragstart", this.dragstartHandler); - document.removeEventListener("scroll", this.scrollHandler); + document.removeEventListener("scroll", this.scrollHandler, true); } } diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts index 25114a64f7..d21b10a06f 100644 --- a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts +++ b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts @@ -60,7 +60,7 @@ export class FormattingToolbarView implements PluginView { pmView.dom.addEventListener("dragstart", this.dragHandler); pmView.dom.addEventListener("dragover", this.dragHandler); - document.addEventListener("scroll", this.scrollHandler); + document.addEventListener("scroll", this.scrollHandler, true); } viewMousedownHandler = () => { @@ -150,7 +150,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 = () => { diff --git a/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts b/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts index a50e0d78a5..72ef142ec8 100644 --- a/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts +++ b/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts @@ -62,7 +62,7 @@ class LinkToolbarView implements PluginView { this.pmView.dom.addEventListener("mouseover", this.mouseOverHandler); document.addEventListener("click", this.clickHandler, true); - document.addEventListener("scroll", this.scrollHandler); + document.addEventListener("scroll", this.scrollHandler, true); } mouseOverHandler = (event: MouseEvent) => { @@ -267,7 +267,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); } } diff --git a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts index 58cf687c58..edca993f3a 100644 --- a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts +++ b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts @@ -252,8 +252,8 @@ export class SideMenuView< S extends StyleSchema > implements PluginView { - private state?: SideMenuState; - private readonly emitUpdate: (state: SideMenuState) => void; + public state?: SideMenuState; + public readonly emitUpdate: (state: SideMenuState) => void; // When true, the drag handle with be anchored at the same level as root elements // When false, the drag handle with be just to the left of the element @@ -294,10 +294,10 @@ export class SideMenuView< document.body.addEventListener("mousemove", this.onMouseMove, true); // Makes menu scroll with the page. - document.addEventListener("scroll", this.onScroll); + document.addEventListener("scroll", this.onScroll, true); - // 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); } @@ -381,12 +381,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) => { @@ -520,8 +520,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); } @@ -642,5 +642,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!); + }; } diff --git a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts index b2a9056d0d..30cc94e2f1 100644 --- a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts +++ b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts @@ -37,7 +37,7 @@ class SuggestionMenuView< emitUpdate(menuName, this.state); }; - document.addEventListener("scroll", this.handleScroll); + document.addEventListener("scroll", this.handleScroll, true); } handleScroll = () => { @@ -92,7 +92,7 @@ class SuggestionMenuView< } destroy() { - document.removeEventListener("scroll", this.handleScroll); + document.removeEventListener("scroll", this.handleScroll, true); } closeMenu = () => { diff --git a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts index e0bf2bbe2e..df8cf8ed8c 100644 --- a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts +++ b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts @@ -119,7 +119,7 @@ export class TableHandlesView< document.addEventListener("dragover", this.dragOverHandler); document.addEventListener("drop", this.dropHandler); - document.addEventListener("scroll", this.scrollHandler); + document.addEventListener("scroll", this.scrollHandler, true); } mouseMoveHandler = (event: MouseEvent) => { @@ -361,7 +361,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); } } From 93914b7659c8ebe53b19ec6377dbd2937fdb03b8 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 29 May 2024 14:55:12 +0200 Subject: [PATCH 2/3] Added comments --- packages/core/src/extensions/FilePanel/FilePanelPlugin.ts | 4 +++- .../FormattingToolbar/FormattingToolbarPlugin.ts | 3 +++ .../core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts | 4 ++++ packages/core/src/extensions/SideMenu/SideMenuPlugin.ts | 8 +++++--- .../src/extensions/SuggestionMenu/SuggestionPlugin.ts | 3 +++ .../src/extensions/TableHandles/TableHandlesPlugin.ts | 3 +++ 6 files changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts b/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts index 3daaa65c13..cb2862cfb1 100644 --- a/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts +++ b/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts @@ -42,9 +42,11 @@ export class FilePanelView }; pmView.dom.addEventListener("mousedown", this.mouseDownHandler); - pmView.dom.addEventListener("dragstart", this.dragstartHandler); + // 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); } diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts index d21b10a06f..804ff07202 100644 --- a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts +++ b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts @@ -60,6 +60,9 @@ export class FormattingToolbarView implements PluginView { pmView.dom.addEventListener("dragstart", this.dragHandler); pmView.dom.addEventListener("dragover", this.dragHandler); + // 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); } diff --git a/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts b/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts index 72ef142ec8..95e1156c2d 100644 --- a/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts +++ b/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts @@ -62,6 +62,10 @@ class LinkToolbarView implements PluginView { this.pmView.dom.addEventListener("mouseover", this.mouseOverHandler); document.addEventListener("click", this.clickHandler, 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.scrollHandler, true); } diff --git a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts index edca993f3a..8bc42eed46 100644 --- a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts +++ b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts @@ -293,13 +293,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, 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); } /** diff --git a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts index 30cc94e2f1..a557b165d3 100644 --- a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts +++ b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts @@ -37,6 +37,9 @@ class SuggestionMenuView< emitUpdate(menuName, this.state); }; + // 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); } diff --git a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts index df8cf8ed8c..eb5172769a 100644 --- a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts +++ b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts @@ -119,6 +119,9 @@ export class TableHandlesView< document.addEventListener("dragover", this.dragOverHandler); document.addEventListener("drop", this.dropHandler); + // 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); } From c086a7e4fbab633c1314b1baa15ae6803850abc5 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Tue, 4 Jun 2024 18:54:06 +0200 Subject: [PATCH 3/3] Made add block button no longer freeze side menu --- packages/core/src/extensions/SideMenu/SideMenuPlugin.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts index 8bc42eed46..f5ebc45cdb 100644 --- a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts +++ b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts @@ -533,8 +533,6 @@ export class SideMenuView< this.emitUpdate(this.state); } - this.menuFrozen = true; - const blockContent = this.hoveredBlock!.firstChild! as HTMLElement; const blockContentBoundingBox = blockContent.getBoundingClientRect();