cms-admin: Make TipTap rich text block toolbar sticky - #6210
Open
VPS-Andreas wants to merge 4 commits into
Open
Conversation
The toolbar scrolled away with the editor content on longer texts, unlike the previous Draft.js-based rich text editor where the toolbar stayed fixed at the top while scrolling. Add position: sticky to match the old behavior. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L9QpQ6ZCDhw22zaY7GtxMi
Member
|
please provide a link the the deployed storybook (pr deployment) where we can see it in action |
Member
|
maybe you can add an interactive storybook test that tests this new behaviour |
Add a play-function test that scrolls a constrained container and verifies the toolbar's bounding rect stays pinned while the editor content scrolls behind it, guarding the sticky positioning fix against regression. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L9QpQ6ZCDhw22zaY7GtxMi
The scroll container was queried once, synchronously, before Chromatic had mounted the story, so the play function crashed with "Cannot read properties of null". Query it inside waitFor so it retries until the component is mounted. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L9QpQ6ZCDhw22zaY7GtxMi
On a cold-loaded deployment (fresh assets, no cache), mounting and laying out the editor with 30 paragraphs took longer than the default waitFor timeout, failing the story on first load while a reload (warm cache) passed. Give every waitFor in the story the same 5s timeout already used for the initial "editor ready" check. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L9QpQ6ZCDhw22zaY7GtxMi
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Description
In the TipTap-based rich text block (
createTipTapRichTextBlock), the toolbar (Bold, Headline levels, etc.) scrolled away with the editor content on longer texts. The previous Draft.js-based rich text editor kept its toolbar fixed at the top while scrolling, so format options were always reachable.The toolbar's root
BoxinTipTapToolbar.tsxhad noposition: sticky. The equivalent Draft.js toolbar (@dextinity/admin-rte'sToolbar.styles.tsx) already usesposition: sticky; top: 0; z-index: 2, so this change mirrors that.Solution
Added
position: sticky,top: 0, andzIndex: 2to the toolbar's rootBoxsxinpackages/admin/cms-admin/src/blocks/tipTap/TipTapToolbar.tsx, matching the old Draft.js RTE toolbar behavior.Example
Rich Text (TipTap) or Headline Rich Text block in the admin: enter enough text to make the editor scrollable, then scroll down — the toolbar now stays fixed at the top.
Changeset
Added (
@dextinity/cms-admin, patch).Open TODOs/questions
None.
Generated by Claude Code