Skip to content

fix(react): mount editable inline content inside its contentRef - #3252

Closed
advance-hub wants to merge 1 commit into
TypeCellOS:mainfrom
advance-hub:codex/fix-editable-inline-content
Closed

advance-hub wants to merge 1 commit into
TypeCellOS:mainfrom
advance-hub:codex/fix-editable-inline-content

Conversation

@advance-hub

@advance-hub advance-hub commented Oct 24, 2026 •

Copy link
Copy Markdown

Summary

Fixes #2142. Newly inserted editable React inline content now renders and edits inside its contentRef element, keeping the visible text and editor.document in sync.

Rationale

The first React ref can run before Tiptap creates the content DOM. Without a node-view content marker, Tiptap appends that DOM beside the React wrapper. Inserting a custom tag with text then leaves its intended editable element empty.

Changes

  • Mark the live contentRef element as Tiptap's content target, matching React blocks.
  • Add integration coverage for styled and plain inline content.
  • Add browser coverage for initial content, a newly inserted empty tag, and a newly inserted tag with text.

Impact

This repairs the live content-DOM attachment for editable React inline content. The browser fixture uses the visible inline-block dimensions from the issue's reproduction.

Testing

  • React package unit suite: 6 files, 23 tests passed.
  • Docker Chromium, Firefox and WebKit: 9 tests passed without retries; assertions check the current DOM and the complete inline-content model.
  • Removing only the marker makes the inserted-text case fail in all three browsers (3 failed, 6 passed); restoring it passes all 9 cases.
  • Targeted type-aware lint with type checking, formatting and git diff --check passed.

The full workspace suite was not run.

Screenshots/Video

Not applicable; the browser tests cover rendering and editing behavior.

Checklist

  • Code follows the project's coding standards.
  • Unit tests covering the fix have been added.
  • All existing tests pass.
  • The documentation has been updated to reflect the new feature.

Additional Notes

The related React unit suite and targeted browser tests pass. A documentation update is not needed for this bug fix.

AI disclosure: Codex assisted with investigation, implementation, tests and this PR description.

Summary by CodeRabbit

  • Bug Fixes
    • Improved text editing in React inline tags. Text entered in a tag’s content area now appears consistently in the editor and document, including when the tag starts empty or already contains text.

@vercel

vercel Bot commented Oct 24, 2026

Copy link
Copy Markdown

@advance-hub is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Oct 24, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: ff2c757d-fa3a-4d7a-b815-1a49b7877b6a
Commits

Reviewing files that changed from the base of the PR and between 2812869 and 7ecbea7.

Files selected for processing: 3
  • packages/react/src/schema/ReactInlineContentSpec.browser.test.tsx
  • packages/react/src/schema/ReactInlineContentSpec.test.tsx
  • packages/react/src/schema/ReactInlineContentSpec.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Walkthrough

The React inline-content node-view callback now marks its contentRef target with data-node-view-content. Tests cover styled and plain specs, plus text updates in rendered content and editor.document for existing and inserted tags.

Changes: React inline-content target and validation

Layer / File(s) Summary
Mark and validate inline content targets
packages/react/src/schema/ReactInlineContentSpec.tsx, packages/react/src/schema/ReactInlineContentSpec.test.tsx, packages/react/src/schema/ReactInlineContentSpec.browser.test.tsx
The contentRef callback adds data-node-view-content to its target. Tests cover styled and plain specs, and check rendered content and editor.document after text is added to inline tags.

Priority: Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Medium

Possibly related PRs

  • TypeCellOS/BlockNote#3251: Sets the same marker on the contentRef element and also changes inline-spec extension registration.

Suggested reviewers: nperez0111

Merge Risk: Minimal · up to 7ecbe

The inline-content fix is ready to merge after normal checks; no outstanding defect is established.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 3 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Title check Passed The title clearly and concisely describes the primary fix: mounting editable React inline content inside its contentRef.
Description check Passed The description includes the required summary, rationale, changes, impact, testing, checklist, and additional notes. It clearly documents the unrun full workspace suite and explains why documentation …
Linked Issues check Passed Issue #2142 requires newly inserted custom inline content to remain editable and to export its text in the editor document. ReactInlineContentSpec.tsx marks the live contentRef target with `data-n…
Out of Scope Changes check Passed The implementation change directly addresses issue #2142. The added unit and browser tests verify the required rendering and document synchronization behavior. No unrelated production changes are show…
Full details: Description check

Explanation

The description includes the required summary, rationale, changes, impact, testing, checklist, and additional notes. It clearly documents the unrun full workspace suite and explains why documentation was not updated.

Full details: Linked Issues check

Explanation

Issue #2142 requires newly inserted custom inline content to remain editable and to export its text in the editor document. ReactInlineContentSpec.tsx marks the live contentRef target with data-node-view-content and data-editable. The added unit test covers styled and plain inline content. The browser test covers initial content, inserted empty content, and inserted text, and verifies both visible text and editor.document content.

Full details: Out of Scope Changes check

Explanation

The implementation change directly addresses issue #2142. The added unit and browser tests verify the required rendering and document synchronization behavior. No unrelated production changes are shown in the reviewed files.

Finishing Touches: 💡 1
🛠️ Fix failing CI checks: 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • 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.

❤️ Share

A rabbit taps the tag with care,
New letters settle, bright and clear.
The view reflects each typed-in line,
The document keeps the same design.
Then hops away, content in tow.

Comment @coderabbitai help to get the list of available commands.

@nperez0111

Copy link
Copy Markdown
Contributor

This was fiexed by #3251 independently

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom inline content not updating in the document

2 participants