mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-28 07:40:13 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

improve default node detection for floating menu

Browse Source
This commit is contained in:
Philipp Kühn 2021-04-01 15:33:37 +02:00
parent 007e6f855b
commit c55ebc7ea6
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/extension-floating-menu/src/floating-menu-plugin.ts
View File

@ -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`,
})
}