Skip to content

WIP FEATURE: Sticky formatting toolbar for long editable areas - #4166

Draft
Sebobo wants to merge 1 commit into
9.2from
feature/sticky-formatting-toolbar
Draft

Sebobo wants to merge 1 commit into
9.2from
feature/sticky-formatting-toolbar

Conversation

@Sebobo

@Sebobo Sebobo commented Jul 14, 2026 •

Copy link
Copy Markdown
Member

What I did

Let the CKEditor toolbar become sticky in long editables when scrolling, similar to the NodeToolbar.
This change was made with some agentic help as the positioning is quite complex and has many edge cases.

How I did it

Todos:

  • Code still complex due to workarounds for browser errors with anchors and sticky positioning
  • Test with various browsers
  • Test with elements in various positions
  • Test with elements with multiple (styled) editables

How to verify it

CleanShot.2026-07-14.at.22.31.32.mp4

@Sebobo Sebobo added the 9.3 label Jul 14, 2026
@github-actions github-actions Bot added the 9.2 label Jul 14, 2026
@Sebobo
Sebobo requested a review from mhsdesign July 14, 2026 20:35
@Sebobo

Sebobo commented Jul 14, 2026 •

Copy link
Copy Markdown
Member Author

This change was initially not so complex, but after some scrolling chrome lost the connection between the visual and the interactive position of the toolbar and the interaction became madness. This is why the position in the sticky case is now calculated via JS instead of CSS. Maybe the browsers fix this until we release 9.3 and we could simplify it again?
We cannot ignore the position fallbacks as they are important for a toolbar of unknown size and features which was already hard to solve for the top/bottom position.

@Sebobo Sebobo removed the 9.2 label Sep 22, 2026

This branch has not been deployed

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

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant