Repository navigation
Fix native input in empty React inline content - #3254
nperez0111 wants to merge 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review.
 |
| Layer / File(s) | Summary |
|---|---|
Empty-content layout and editing validation packages/react/src/editor/styles.css, packages/react/src/schema/ReactInlineContentSpec.browser.test.tsx |
Empty editable content uses an inline-block layout and inherits minimum height and width. The browser test checks native input and document content with inline-block and inline-flex layouts. |
Priority:
Estimated code review effort: 2 (Simple) | ~10 minutes
Change: Bug fix · Severity of issue fixed: Medium
Possibly related PRs
- TypeCellOS/BlockNote#3251: Marks the React inline content element as TipTap contentDOM and fixes mounting after insertion.
- TypeCellOS/BlockNote#3252: Mounts editable inline content inside the React contentRef by setting the TipTap content marker.
- TypeCellOS/BlockNote#3240: Fixes native insertion and deletion for empty inline math source content.
Suggested reviewers: matthewlipski
Merge Risk: 
0f7da
-
The change is mergeable after normal checks; no actionable risk remains identified.
Pre-merge checks: 
-
Check name Status Explanation Title check The title clearly and concisely describes the primary change: fixing native input in empty React inline content. Description check The description provides detailed context, rationale, change scope, regression coverage, validation results, and impact information. It does not use every template heading and omits the checklist, but… Linked Issues check Issue #2142is closed and supplies historical context only. No active directly linked issue remains, so this pull request has no linked-issue coding requirements.Out of Scope Changes check The changes stay within the stated fix. The CSS changes size empty React inline content and preserve populated display behavior. The browser tests cover the reported native-input regression and relate… Docstring Coverage No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1… Full details: Description check
-
Explanation
The description provides detailed context, rationale, change scope, regression coverage, validation results, and impact information. It does not use every template heading and omits the checklist, but it is substantially complete and directly relevant.
Full details: Out of Scope Changes check
-
Explanation
The changes stay within the stated fix. The CSS changes size empty React inline content and preserve populated display behavior. The browser tests cover the reported native-input regression and related layout cases. No unrelated change is identified.
Full details: Docstring Coverage
-
Explanation
No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files. (1 skipped: 1 unsupported.)
-
Finishing Touches
-
📝 Generate docstrings
-
- Commit to this branch
- Create a new PR
🧪 Generate unit tests (beta)
-
- Commit to this branch
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
A rabbit clicks the empty space,
Then types a letter in its place.
The content finds an inline line,
And shows its text in the design.
The document keeps each word in view,
The rabbit hops, delighted too.
Comment @coderabbitai help to get the list of available commands.
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/diagram-block
@blocknote/mantine
@blocknote/math-block
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-docx-exporter
@blocknote/xl-email-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
@blocknote/xl-typst-exporter
commit: |
|
Summary
Fixes #2142. Follow-up to #3251.
#3251 fixed where TipTap mounts the editable content of React inline nodes, but an empty contentDOM can still have zero width inside the consumer's sized
contentRef. Clicking that empty area and inserting text through native browser editing can put visible text beside contentDOM, leavingeditor.documentempty.We also needed CSS to make editable inline content easier for consumers to handle without styling TipTap's internal content element themselves. Give the empty contentDOM its parent's minimum dimensions and an inline-block box. Apply this only while empty so populated text retains its normal wrapping and does not inherit a consumer's flex/grid layout. Keep the selector low-specificity so specialized layouts, including the inline math popup, retain their own rules.
This builds on @nperez0111's investigation and reproduction diff, which identified the CSS aspect of the issue and helped guide this fix.
Regression coverage
editor.document, plus the populated contentDOM's normal display behavior. Keyboard-only insertion does not reproduce this failure because ProseMirror handles it directly.Validation
Summary by CodeRabbit