From 9e17110021bbfc33d62b7b330a9fdbfcdd4dfe12 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 2 Jun 2023 13:16:43 +0200 Subject: [PATCH 1/7] Made block side menu only show if the editor or menu is focused. --- packages/core/src/BlockNoteEditor.ts | 4 ++++ .../DraggableBlocks/DraggableBlocksPlugin.ts | 15 +++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/packages/core/src/BlockNoteEditor.ts b/packages/core/src/BlockNoteEditor.ts index aa872fc467..5b86a5aaa4 100644 --- a/packages/core/src/BlockNoteEditor.ts +++ b/packages/core/src/BlockNoteEditor.ts @@ -154,6 +154,10 @@ export class BlockNoteEditor { return this._tiptapEditor.view.dom as HTMLDivElement; } + public isFocused() { + return this._tiptapEditor.view.hasFocus(); + } + public focus() { this._tiptapEditor.view.focus(); } diff --git a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts index 51d7b823d8..c4dc8f0db7 100644 --- a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts +++ b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts @@ -375,6 +375,21 @@ export class BlockMenuView { return; } + // Checks if the block side menu should be hidden when the editor isn't + // focused. + if ( + // Either editor should be focused + !this.editor.isFocused() && + // Or the block side menu should be focused (e.g. dragging, clicking) + document.activeElement !== this.blockMenu.element && + !this.blockMenu.element?.contains(document.activeElement) && + // And the menu should be open + this.menuOpen + ) { + this.blockMenu.hide(); + return; + } + // Editor itself may have padding or other styling which affects size/position, so we get the boundingRect of // the first child (i.e. the blockGroup that wraps all blocks in the editor) for a more accurate bounding box. const editorBoundingBox = ( From 805b6fa996ff33dc2f87cf6b569037a3ba6f30b9 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 2 Jun 2023 15:50:19 +0200 Subject: [PATCH 2/7] Temp changes --- .../FormattingToolbar/components/FormattingToolbar.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx b/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx index 85b3650d0b..60293f74de 100644 --- a/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx +++ b/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx @@ -7,7 +7,7 @@ import { UnnestBlockButton, } from "./DefaultButtons/NestBlockButtons"; import { TextAlignButton } from "./DefaultButtons/TextAlignButton"; -import { ToggledStyleButton } from "./DefaultButtons/ToggledStyleButton"; +// import { ToggledStyleButton } from "./DefaultButtons/ToggledStyleButton"; import { BlockTypeDropdown } from "./DefaultDropdowns/BlockTypeDropdown"; export const FormattingToolbar = (props: { @@ -17,10 +17,10 @@ export const FormattingToolbar = (props: { - - - - + {/**/} + {/**/} + {/**/} + {/**/} From 9e7d6e051f987ea48ba58a14d31861f4c98b14bf Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 2 Jun 2023 15:51:10 +0200 Subject: [PATCH 3/7] Revert "Temp changes" This reverts commit 805b6fa996ff33dc2f87cf6b569037a3ba6f30b9. --- .../FormattingToolbar/components/FormattingToolbar.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx b/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx index 60293f74de..85b3650d0b 100644 --- a/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx +++ b/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx @@ -7,7 +7,7 @@ import { UnnestBlockButton, } from "./DefaultButtons/NestBlockButtons"; import { TextAlignButton } from "./DefaultButtons/TextAlignButton"; -// import { ToggledStyleButton } from "./DefaultButtons/ToggledStyleButton"; +import { ToggledStyleButton } from "./DefaultButtons/ToggledStyleButton"; import { BlockTypeDropdown } from "./DefaultDropdowns/BlockTypeDropdown"; export const FormattingToolbar = (props: { @@ -17,10 +17,10 @@ export const FormattingToolbar = (props: { - {/**/} - {/**/} - {/**/} - {/**/} + + + + From b7a9f16dbdec38fdca0afc8224f3bd455dbbad48 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 9 Jun 2023 19:32:36 +0200 Subject: [PATCH 4/7] Changed behaviour so side menu hides if the cursor is over the editor but the hovered element is not its descendant --- .../DraggableBlocks/DraggableBlocksPlugin.ts | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts index c4dc8f0db7..7066d2aef2 100644 --- a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts +++ b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts @@ -375,18 +375,24 @@ export class BlockMenuView { return; } - // Checks if the block side menu should be hidden when the editor isn't - // focused. + const editorOuterBoundingBox = + this.ttEditor.view.dom.getBoundingClientRect(); + const cursorWithinEditor = + event.clientX >= editorOuterBoundingBox.left && + event.clientX <= editorOuterBoundingBox.right && + event.clientY >= editorOuterBoundingBox.top && + event.clientY <= editorOuterBoundingBox.bottom; + if ( - // Either editor should be focused - !this.editor.isFocused() && - // Or the block side menu should be focused (e.g. dragging, clicking) - document.activeElement !== this.blockMenu.element && - !this.blockMenu.element?.contains(document.activeElement) && - // And the menu should be open - this.menuOpen + cursorWithinEditor && + this.ttEditor.view.dom !== event.target && + !this.ttEditor.view.dom.contains(event.target as HTMLElement) ) { - this.blockMenu.hide(); + if (this.menuOpen) { + this.menuOpen = false; + this.blockMenu.hide(); + } + return; } @@ -437,8 +443,10 @@ export class BlockMenuView { if (this.editor.isEditable) { if (!this.menuOpen) { this.menuOpen = true; + console.log("RENDER 1"); this.blockMenu.render(this.getDynamicParams(), true); } else { + console.log("RENDER 2"); this.blockMenu.render(this.getDynamicParams(), false); } } From ed84aaa282fd9d9640a5e40cd35ab2efdf0e8a63 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 14 Jun 2023 17:54:13 +0200 Subject: [PATCH 5/7] Added additional condition and comments --- .../DraggableBlocks/DraggableBlocksPlugin.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts index 7066d2aef2..3446de2b1e 100644 --- a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts +++ b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts @@ -383,10 +383,20 @@ export class BlockMenuView { event.clientY >= editorOuterBoundingBox.top && event.clientY <= editorOuterBoundingBox.bottom; + // Doesn't update if the mouse hovers an element that's over the editor but + // isn't a part of it or the side menu. if ( + // Cursor is within the editor area cursorWithinEditor && + // An element is clicked + event && + event.target && + // Element is outside the editor this.ttEditor.view.dom !== event.target && - !this.ttEditor.view.dom.contains(event.target as HTMLElement) + !this.ttEditor.view.dom.contains(event.target as HTMLElement) && + // Element is outside the side menu + this.blockMenu.element !== event.target && + !this.blockMenu.element?.contains(event.target as HTMLElement) ) { if (this.menuOpen) { this.menuOpen = false; From 1cad5ddb3bc92bcb2ff14d89724cb0366c26996d Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Thu, 15 Jun 2023 16:18:45 +0200 Subject: [PATCH 6/7] Small fixes --- .../src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts index 3446de2b1e..fa9c72125e 100644 --- a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts +++ b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts @@ -388,7 +388,7 @@ export class BlockMenuView { if ( // Cursor is within the editor area cursorWithinEditor && - // An element is clicked + // An element is hovered event && event.target && // Element is outside the editor @@ -453,10 +453,8 @@ export class BlockMenuView { if (this.editor.isEditable) { if (!this.menuOpen) { this.menuOpen = true; - console.log("RENDER 1"); this.blockMenu.render(this.getDynamicParams(), true); } else { - console.log("RENDER 2"); this.blockMenu.render(this.getDynamicParams(), false); } } From 5152592e004435d8e7a479b6bd18dc23a4744e12 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Thu, 15 Jun 2023 17:01:51 +0200 Subject: [PATCH 7/7] Small fix --- .../DraggableBlocks/DraggableBlocksPlugin.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts index fa9c72125e..b076f00dd8 100644 --- a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts +++ b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts @@ -375,6 +375,15 @@ export class BlockMenuView { return; } + // Editor itself may have padding or other styling which affects + // size/position, so we get the boundingRect of the first child (i.e. the + // blockGroup that wraps all blocks in the editor) for more accurate side + // menu placement. + const editorBoundingBox = ( + this.ttEditor.view.dom.firstChild! as HTMLElement + ).getBoundingClientRect(); + // We want the full area of the editor to check if the cursor is hovering + // above it though. const editorOuterBoundingBox = this.ttEditor.view.dom.getBoundingClientRect(); const cursorWithinEditor = @@ -406,12 +415,6 @@ export class BlockMenuView { return; } - // Editor itself may have padding or other styling which affects size/position, so we get the boundingRect of - // the first child (i.e. the blockGroup that wraps all blocks in the editor) for a more accurate bounding box. - const editorBoundingBox = ( - this.ttEditor.view.dom.firstChild! as HTMLElement - ).getBoundingClientRect(); - this.horizontalPosAnchor = editorBoundingBox.x; // Gets block at mouse cursor's vertical position.