fix emptyTextBlock detection to handle leaf nodes too #5838
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: dce2bf0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 54 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for tiptap-embed ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
I wonder if this fix is still valid #4444 |
|
Your check is similar, but I think that one covers more cases (like a node specifying a way to render to text) |
|
Do we need to be that specific in that case though? I thought about it and I couldn't find a reason why a node should be considered empty even when it has any child nodes. Do you have any thing in mind that would cause a node to have child content but still should be considered empty for the floating menu? |
I think you understood me in reverse, if a node is something that can serialize to text (e.g. a mention), which has no child nodes, then to the floating menu it will be considered empy. I did this in the current version to show what I mean (which obviously should not happen). Note: this happened after completing the mention and backspacing once to remove the added space character. You can apply this diff in your project to see if your fix addresses this too, but I'm pretty sure the other fix addresses this: diff --git a/demos/src/Nodes/Mention/React/index.jsx b/demos/src/Nodes/Mention/React/index.jsx
index 8d40a8d4d..ef78a95b6 100644
--- a/demos/src/Nodes/Mention/React/index.jsx
+++ b/demos/src/Nodes/Mention/React/index.jsx
@@ -4,7 +4,7 @@ import Document from '@tiptap/extension-document'
import Mention from '@tiptap/extension-mention'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
-import { EditorContent, useEditor } from '@tiptap/react'
+import { EditorContent, FloatingMenu, useEditor } from '@tiptap/react'
import React from 'react'
import suggestion from './suggestion.js'
@@ -35,5 +35,28 @@ export default () => {
return null
}
- return <EditorContent editor={editor} />
+ return <div>
+ {editor && <FloatingMenu editor={editor} tippyOptions={{ duration: 100 }}>
+ <div className="floating-menu">
+ <button
+ onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+ className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+ >
+ H1
+ </button>
+ <button
+ onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+ className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+ >
+ H2
+ </button>
+ <button
+ onClick={() => editor.chain().focus().toggleBulletList().run()}
+ className={editor.isActive('bulletList') ? 'is-active' : ''}
+ >
+ Bullet list
+ </button>
+ </div>
+ </FloatingMenu>}
+ <EditorContent editor={editor} /></div>
} |
|
No worries, sometimes I may sound a bit to annoyed/harsh but I was just curious about the differences. I'll try your diff and report back. Pretty sure this should also work as the mention will still be counted as a child node of the paragraph parent increasing the childCount to 1. I'm also fine parsing the text content via the node schema if needed. |
|
If yours works, then I'd go with the simpler one which is yours |
bdbch
force-pushed
the
bdbch/fix-4327
branch
from
bdc3eef
to
dce2bf0
Compare
@tiptap/core
@tiptap/extension-bold
@tiptap/extension-blockquote
@tiptap/extension-bubble-menu
@tiptap/extension-character-count
@tiptap/extension-bullet-list
@tiptap/extension-code
@tiptap/extension-code-block
@tiptap/extension-code-block-lowlight
@tiptap/extension-collaboration
@tiptap/extension-collaboration-cursor
@tiptap/extension-color
@tiptap/extension-document
@tiptap/extension-dropcursor
@tiptap/extension-floating-menu
@tiptap/extension-focus
@tiptap/extension-font-family
@tiptap/extension-gapcursor
@tiptap/extension-hard-break
@tiptap/extension-heading
@tiptap/extension-highlight
@tiptap/extension-history
@tiptap/extension-horizontal-rule
@tiptap/extension-image
@tiptap/extension-italic
@tiptap/extension-link
@tiptap/extension-list-item
@tiptap/extension-list-keymap
@tiptap/extension-mention
@tiptap/extension-ordered-list
@tiptap/extension-paragraph
@tiptap/extension-placeholder
@tiptap/extension-strike
@tiptap/extension-subscript
@tiptap/extension-superscript
@tiptap/extension-table
@tiptap/extension-table-cell
@tiptap/extension-table-header
@tiptap/extension-table-row
@tiptap/extension-task-item
@tiptap/extension-task-list
@tiptap/extension-text-align
@tiptap/extension-text
@tiptap/extension-text-style
@tiptap/extension-typography
@tiptap/extension-underline
@tiptap/extension-youtube
@tiptap/html
@tiptap/react
@tiptap/pm
@tiptap/starter-kit
@tiptap/suggestion
@tiptap/vue-2
@tiptap/vue-3
commit: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes Overview
This pull request includes a small but significant change to the
FloatingMenuViewclass in thepackages/extension-floating-menu/src/floating-menu-plugin.tsfile. The change ensures that theisEmptyTextBlockcondition also checks if the parent node has no children (childCount === 0).This fixes a bug (see #4327) causing leaf nodes not to be counted as content of a node. It also deprecates the PR #4444
Changes in
FloatingMenuView:isEmptyTextBlockcondition to include a check forchildCount === 0to ensure the block is truly empty.Checklist
Related Issues
renderTextdoes not propagate toNodeSpec.leafTextandextension-floating-menuusesNode.textContentwhich usesNodeSpec.leafText#4327