fix: only show bubble to textContent

This commit is contained in:
Aslam H
2024-10-28 11:10:25 +07:00
parent 8ee564e952
commit e9a8539305
2 changed files with 17 additions and 29 deletions

View File

@@ -1,24 +1,16 @@
import * as React from "react"
import { Editor } from "@tiptap/react"
import { ShouldShowProps } from "../types"
import { isCustomNodeSelected, isTextSelected } from "../lib/utils"
import { isTextSelected } from "../lib/utils"
export const useTextmenuStates = (editor: Editor) => {
const shouldShow = React.useCallback(
({ view, from }: ShouldShowProps) => {
({ view }: ShouldShowProps) => {
if (!view) {
return false
}
const domAtPos = view.domAtPos(from || 0).node as HTMLElement
const nodeDOM = view.nodeDOM(from || 0) as HTMLElement
const node = nodeDOM || domAtPos
if (isCustomNodeSelected(editor, node)) {
return false
}
return isTextSelected({ editor })
return isTextSelected(editor)
},
[editor],
)

View File

@@ -1,26 +1,22 @@
import { isTextSelection } from "@tiptap/core"
import { Editor } from "@tiptap/react"
export const isTextSelected = ({ editor }: { editor: Editor }) => {
const {
state: {
doc,
selection,
selection: { empty, from, to },
},
} = editor
// 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(selection)
if (empty || isEmptyTextBlock || !editor.isEditable) {
export const isTextSelected = (editor: Editor) => {
if (!editor.isEditable) {
return false
}
return true
const { selection } = editor.state
const { empty, from, to } = selection
// Don't check for selection type since we only care about text content
// Handle empty selections, including empty paragraphs
if (empty) {
return false
}
// Get text content and trim to handle whitespace-only selections
const text = editor.state.doc.textBetween(from, to, " ").trim()
return text.length > 0
}
export default isTextSelected