From c55ebc7ea6cab4cf471b0a59f83678e5b9106a00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 1 Apr 2021 15:33:37 +0200
Subject: [PATCH] improve default node detection for floating menu

---
 .../src/floating-menu-plugin.ts               | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/extension-floating-menu/src/floating-menu-plugin.ts b/packages/extension-floating-menu/src/floating-menu-plugin.ts
index 336c1d4b..98e3dad3 100644
--- a/packages/extension-floating-menu/src/floating-menu-plugin.ts
+++ b/packages/extension-floating-menu/src/floating-menu-plugin.ts
@@ -1,4 +1,4 @@
-import { Editor } from '@tiptap/core'
+import { Editor, isNodeEmpty } from '@tiptap/core'
 import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
 
@@ -22,6 +22,8 @@ export class FloatingMenuView {
 
   public top = 0
 
+  public left = 0
+
   public preventHide = false
 
   constructor({
@@ -73,13 +75,12 @@ export class FloatingMenuView {
       return
     }
 
-    const { anchor, empty } = selection
+    const { $anchor, anchor, empty } = selection
     const parent = this.element.offsetParent
-    const currentDom = view.domAtPos(anchor)
-    const currentElement = currentDom.node as Element
-    const isActive = currentElement.innerHTML === '<br>'
-      && currentElement.tagName === 'P'
-      && currentElement.parentNode === view.dom
+    const isRootDepth = $anchor.depth === 1
+    const isDefaultNodeType = $anchor.parent.type === state.doc.type.contentMatch.defaultType
+    const isDefaultNodeEmpty = isNodeEmpty(selection.$anchor.parent)
+    const isActive = isRootDepth && isDefaultNodeType && isDefaultNodeEmpty
 
     if (!empty || !parent || !isActive) {
       this.hide()
@@ -90,9 +91,11 @@ export class FloatingMenuView {
     const parentBox = parent.getBoundingClientRect()
     const cursorCoords = view.coordsAtPos(anchor)
     const top = cursorCoords.top - parentBox.top
+    const left = cursorCoords.left - parentBox.left
 
     this.isActive = true
     this.top = top
+    this.left = left
 
     this.render()
   }
@@ -103,9 +106,8 @@ export class FloatingMenuView {
       zIndex: 1,
       visibility: this.isActive ? 'visible' : 'hidden',
       opacity: this.isActive ? 1 : 0,
-      // left: `${this.left}px`,
+      left: `${this.left}px`,
       top: `${this.top}px`,
-      // bottom: `${this.bottom}px`,
     })
   }