dotCMS/core#22029 Doing a selection moving up is broken

dotCMS · Apr 14, 2022 · d04013c · d04013c
1 parent d102e95
commit d04013c
Show file tree

Hide file tree

Showing 4 changed files with 1,245 additions and 48,446 deletions.
diff --git a/apps/dotcms-block-editor/src/app/dot-block-editor/dot-block-editor.component.scss b/apps/dotcms-block-editor/src/app/dot-block-editor/dot-block-editor.component.scss
@@ -30,7 +30,7 @@
             display: block;
             min-height: 100%;
             outline: none;
-            padding: $spacing-8;
+            padding: $spacing-3 $spacing-8;
             font: 14px/1.3;
 
             ul,

diff --git a/libs/block-editor/src/lib/plugins/dot-bubble-menu.plugin.ts b/libs/block-editor/src/lib/plugins/dot-bubble-menu.plugin.ts
@@ -27,7 +27,7 @@ export const DotBubbleMenuPlugin = (options: DotBubbleMenuPluginProps) => {
     const component = options.component.instance;
     const changeTo = options.changeToComponent.instance;
 
-    return new Plugin({
+    return new Plugin<DotBubbleMenuPluginProps>({
         key:
             typeof options.pluginKey === 'string'
                 ? new PluginKey(options.pluginKey)
@@ -70,6 +70,8 @@ export class DotBubbleMenuPluginView extends BubbleMenuView {
 
     public tippyChangeTo: Instance | undefined;
 
+    private shouldShowProp = false;
+
     /* @Overrrider */
     constructor(props: DotBubbleMenuViewProps) {
         // Inherit the parent class
@@ -94,6 +96,16 @@ export class DotBubbleMenuPluginView extends BubbleMenuView {
 
         // We need to also react to page scrolling.
         document.body.addEventListener('scroll', this.hanlderScroll.bind(this), true);
+        document.body.addEventListener('mouseup', this.handleMouseUp.bind(this), true);
+    }
+
+    handleMouseUp() {
+        if (this.shouldShowProp) {
+            this.tippyChangeTo?.setProps({
+                getReferenceClientRect: () => this.tippy?.popper.getBoundingClientRect()
+            });
+            this.show();
+        }
     }
 
     /* @Overrrider */
@@ -114,7 +126,7 @@ export class DotBubbleMenuPluginView extends BubbleMenuView {
         const from = Math.min(...ranges.map((range) => range.$from.pos));
         const to = Math.max(...ranges.map((range) => range.$to.pos));
 
-        const shouldShow = this.shouldShow?.({
+        this.shouldShowProp = this.shouldShow?.({
             editor: this.editor,
             view,
             state,
@@ -123,7 +135,7 @@ export class DotBubbleMenuPluginView extends BubbleMenuView {
             to
         });
 
-        if (!shouldShow) {
+        if (!this.shouldShowProp) {
             this.hide();
             this.tippyChangeTo?.hide();
             return;
@@ -144,13 +156,8 @@ export class DotBubbleMenuPluginView extends BubbleMenuView {
             }
         });
 
-        this.tippyChangeTo?.setProps({
-            getReferenceClientRect: () => this.tippy?.popper.getBoundingClientRect()
-        });
-
         this.updateComponent();
         this.setMenuItems(doc, from);
-        this.show();
     }
 
     /* @Overrrider */
@@ -170,6 +177,7 @@ export class DotBubbleMenuPluginView extends BubbleMenuView {
         this.changeTo.destroy();
 
         document.body.removeEventListener('scroll', this.hanlderScroll.bind(this), true);
+        document.body.removeEventListener('mouseup', this.handleMouseUp.bind(this), true);
     }
 
     /* Update Component */

diff --git a/libs/block-editor/src/lib/utils/bubble-menu.utils.ts b/libs/block-editor/src/lib/utils/bubble-menu.utils.ts
@@ -14,12 +14,17 @@ export const shouldShowBubbleMenu = ({ editor, state, from, to }: ShouldShowProp
     // Current selected node
     const node = editor.state.doc.nodeAt(editor.state.selection.from);
 
+    if (!node) {
+        return false;
+    }
+
     // Sometime check for `empty` is not enough.
     // Doubleclick an empty paragraph returns a node size of 2.
     // So we check also for an empty text size.
     const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
 
     // If it's empty or the current node is type dotContent, it will not open.
+    // if (!editor.isActive('dotContent')) { // this might be the same as the condition below
     if (!editor.isFocused || empty || isEmptyTextBlock || node.type.name == 'dotContent') {
         return false;
     }