Feat(extension-invisible-characters): show tabs and non-breaking spaces - #8099
Feat(extension-invisible-characters): show tabs and non-breaking spaces#8099devvaannsh wants to merge 5 commits into
Conversation
…rlapping update ranges
…breaking space builders
🦋 Changeset detectedLatest commit: d95baef The changes in this PR will be included in the next version bump. This PR includes changesets to release 74 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 project configuration. |
📝 WalkthroughWalkthroughThe invisible-characters extension now provides opt-in builders for tab and non-breaking-space characters, renders them with dedicated decorations and styles, and exposes them publicly. Tests cover editor updates and cleanup, while React and Vue demos configure and demonstrate the new builders. ChangesInvisible character builders
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Editor
participant InvisibleCharacters
participant DecorationSet
participant CSS
Editor->>InvisibleCharacters: configure tab and non-breaking-space builders
Editor->>InvisibleCharacters: insert or update document content
InvisibleCharacters->>DecorationSet: create character decorations
DecorationSet->>CSS: render tab or non-breaking-space glyph
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Comment |
coderabbitai
Bot
added
area: core
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Overall: Approve. Clean, consistent with existing patterns, well-tested.
The dedup change to InvisibleCharacter.createDecoration is a nice catch —
it also fixes a pre-existing duplicate-widget bug for the space character
on multi-step transactions, not just the new builders.
Nits (none blocking):
-
Missing JSDoc on the two new classes (TabCharacter,
NonBreakingSpaceCharacter). The repo's CLAUDE.md asks for JSDoc on every
class/type. The existing sibling builders (SpaceCharacter, HardBreakNode)
also lack them, so it's consistent with current code — but a one-line
JSDoc on each new public export would satisfy the standard. -
Docs not updated. Out of scope for this OSS PR (docs live in the separate
docs repo), but the new builders should be documented on the
invisible-characters page as a follow-up. Worth noting in the PR description. -
The
°(degree sign) glyph for non-breaking space is unconventional —
most editors use something like⍽,⎵, or a shaded box;°reads as
"degree" to many users. Purely cosmetic and CSS-overridable, but worth
confirming it's the intended symbol.
Non-issue, just flagging:
- The new find/remove/add runs for every matching character on every update,
even single-step cases where nothing needs removing. It's bounded by the
updated range (not the whole doc) and matches the existing InvisibleNode
approach, so the cost is fine — just slightly more allocation per char.
2 participants
Fixes #7954
Changes and Review
Currently, the invisible characters extension can show spaces, paragraphs and line breaks, but tabs and non-breaking spaces stay invisible. This PR adds two new builders,
TabCharacterandNonBreakingSpaceCharacter, so those show up too (→for tabs and°for non-breaking spaces).They are opt-in, so nothing changes for existing setups.
Before
After
Checklist
Responsibility