RTC: Add collaborator selection highlighting in rich text#76107
Merged
alecgeatches merged 18 commits intotrunkfrom Mar 11, 2026
Merged
RTC: Add collaborator selection highlighting in rich text#76107alecgeatches merged 18 commits intotrunkfrom
alecgeatches merged 18 commits intotrunkfrom
Conversation
github-actions
bot
added
[Package] Core data
|
Size Change: +1.24 kB (+0.02%) Total Size: 6.89 MB
ℹ️ View Unchanged
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
alecgeatches
added
[Feature] Real-time Collaboration
alecgeatches
changed the title
alecgeatches
changed the title
Contributor
Author
|
Tagging @dabowman on this PR because I can't mark as an assignee or reviewer. |
alecgeatches
assigned
maxschmeling and
chriszarate and unassigned
maxschmeling and
chriszarate
maxschmeling
approved these changes
Mar 4, 2026
chriszarate
reviewed
Mar 4, 2026
Comment on lines
+66
to
+67
| editorDocument: blockEditorDocument, | ||
| overlay: overlayElement, |
Contributor
There was a problem hiding this comment.
instead of passing these DOM elements down the call stack (and encouraging uncached DOM operations), can we extract the info we need once and set it here? (e.g., bounding client rect)
Contributor
Author
There was a problem hiding this comment.
overlay is now passed as a pre-computed value, but I wasn't able to easily extract editorDocument, as it's needed for all of the lower-level calculations for creating ranges and tree-walking.
chriszarate
reviewed
Mar 4, 2026
| return null; | ||
| } | ||
|
|
||
| const overlayRect = overlay.getBoundingClientRect(); |
Contributor
There was a problem hiding this comment.
Here too, seems like this can be calculated once per tick / render cycle
Contributor
Author
There was a problem hiding this comment.
Good call, moved this outside of the loop:
.
chriszarate
reviewed
Mar 4, 2026
| const range = editorDocument.createRange(); | ||
| range.selectNodeContents( blockElement ); | ||
|
|
||
| const overlayRect = overlay.getBoundingClientRect(); |
Contributor
Author
There was a problem hiding this comment.
overlayRect is now received as a parameter.
|
Flaky tests detected in cb3d1dc. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22967909981
|
ingeniumed
added
the
Backport to WP 7.0 Beta/RC
Contributor
Author
|
@chriszarate Please have another look when you get a chance. I was able to reduce the number of |
chriszarate
reviewed
Mar 11, 2026
| // scrollable elements like cursor indicators. | ||
| return ( | ||
| <div className="collaborators-overlay-full" ref={ mergedRef }> | ||
| <style>{ AVATAR_IFRAME_STYLES + OVERLAY_IFRAME_STYLES }</style> |
Contributor
There was a problem hiding this comment.
Is this intentional and works ok in all editor instances (iframed or not)?
Contributor
Author
There was a problem hiding this comment.
This was intentional to ensure this PR kept working: #75700. I saw the styles break in the same way illustrated in that PR locally when I merged, so I re-fixed this.
Contributor
Author
There was a problem hiding this comment.
I'll give it a test with non-iframed real quick.
Contributor
Author
There was a problem hiding this comment.
Tested by returning false from useShouldIframe() and styling still works properly. Should be good on that front!
chriszarate
approved these changes
Mar 11, 2026
Contributor
chriszarate
left a comment
chriszarate
left a comment
There was a problem hiding this comment.
Thanks for improvements and E2E tests. Would be nice to have unit tests for all the new functions, but definitely not a blocker.
|
There was a conflict while trying to cherry-pick the commit to the wp/7.0 branch. Please resolve the conflict manually and create a PR to the wp/7.0 branch. PRs to wp/7.0 are similar to PRs to trunk, but you should base your PR on the wp/7.0 branch instead of trunk. |
alecgeatches
added
Backport to WP 7.0 Beta/RC
github-actions
bot
removed
the
Backport to WP 7.0 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Mar 11, 2026
* Add full-selection highlighting * Fix backwards selection cursor placement and selection across blocks * Add selection range tests * Export ResolvedSelection from core-data for use in overlay * Refactor useRenderCursors() into three files, split on DOM and selection tasks. * Fix type export * Fix selection direction when using undo/redo * Add e2e tests for full selection awareness * Reduce opacity of selection rectangle in overlay * Pre-compute overlayRect, pre-compute DOM elements where possible * Rename "CursorContext" to "OverlayContext" * Extract CursorCoords type, add rect collection types for readability * Fix type error * Remerge collaborator styling fix from #75700 * Deduplicate selection rects when text is formatted * Fix merge of view.getComputedStyle() fix from #75652 Co-authored-by: alecgeatches <[email protected]> Co-authored-by: maxschmeling <[email protected]> Co-authored-by: chriszarate <[email protected]>
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 3a23862 |
github-actions
bot
added
the
Backported to WP Core
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Mar 12, 2026
This updates the pinned hash from the `gutenberg` from `9b8144036fa5faf75de43d4502ff9809fcf689ad` to `8c78d87453509661a9f28f978ba2c242d515563b`. The following changes are included: - Navigation Editor: Allow any blocks to be inserted by gating contentOnly insertion rules to section blocks (WordPress/gutenberg#76189) - Add `fetchpriority=low` to `IMG` tags in collapsed Details blocks (WordPress/gutenberg#76269) - Connectors: Add logo URL support for custom AI providers (WordPress/gutenberg#76190) - Cover Block: Add a playlist parameter to loop YouTube background videos. (WordPress/gutenberg#76004) - Connectors: Memoize getConnectors selector (WordPress/gutenberg#76339) - HTML Block: Fix broken layout (WordPress/gutenberg#76278) - Tests: Skip connector logo URL tests when AI Client is unavailable (WordPress/gutenberg#76343) - Navigation Overlay: Explicitly set fetchpriority for images (WordPress/gutenberg#76208) - Connectors: Show API key source for env vars and wp-config constants (WordPress/gutenberg#76355) - Connectors: Move API key validation and masking to REST dispatch level (WordPress/gutenberg#76327) - Connectors: Replace apiFetch with core-data store selectors (WordPress/gutenberg#76333) - Do not sync local attributes (WordPress/gutenberg#76267) - Add `fetchpriority=low` to `IMG` tags in collapsed Accordion Item blocks (WordPress/gutenberg#76336) - Implement disconnection debounce after initial connection (WordPress/gutenberg#76114) - Allow Post Content to be edited when 'Show template' is active and Post content is nested in a Template Part (WordPress/gutenberg#76305) - Fix: Document Bar: Back button flickers (WordPress/gutenberg#76320) - RTC: Move event hooks from editor to core-data (WordPress/gutenberg#76358) - fix(navigation): prevent right-justified submenu overflow in custom overlays (WordPress/gutenberg#76360) - Connectors: Add connectors registry for extensibility (WordPress/gutenberg#76364) - Connectors: Add empty state when no connectors are registered (WordPress/gutenberg#76375) - Temp: Disable RTC in the site editor (WordPress/gutenberg#76223) - Connectors: Add AI Experiments plugin callout with install/activate functionality (WordPress/gutenberg#76379) - Editor: Polish real-time collaboration presence UI and move Avatar to editor package (WordPress/gutenberg#75652) (WordPress/gutenberg#76365) - RTC: Add collaborator selection highlighting in rich text (WordPress/gutenberg#76107) - Sync changes from `wp_enqueue_global_styles()` to Gutenberg override (WordPress/gutenberg#76127) - [RTC] Fix performance regression on post save (WordPress/gutenberg#76370) - Media: Enable AVIF support for client-side uploads (WordPress/gutenberg#76371) - Connectors: Move plugin status computation to script module data (WordPress/gutenberg#76409) - Revisions: Skip rendered fields in REST API responses (WordPress/gutenberg#76347) - E2E Tests: Add connector setup flow tests with test AI provider (WordPress/gutenberg#76433) - RTC: Place sync connection modal in front of popover (WordPress/gutenberg#76431) - Connectors: Sync PHP code with WordPress Core (WordPress/gutenberg#76443) - Editor: Show own presence in collaborative editing sessions (WordPress/gutenberg#76413) (WordPress/gutenberg#76445) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/9b8144036fa5faf75de43d4502ff9809fcf689ad…8c78d87453509661a9f28f978ba2c242d515563b. Log created with: git log --reverse --format="- %s" 9b8144036fa5faf75de43d4502ff9809fcf689ad..8c78d87453509661a9f28f978ba2c242d515563b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@61988 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Mar 12, 2026
This updates the pinned hash from the `gutenberg` from `9b8144036fa5faf75de43d4502ff9809fcf689ad` to `8c78d87453509661a9f28f978ba2c242d515563b`. The following changes are included: - Navigation Editor: Allow any blocks to be inserted by gating contentOnly insertion rules to section blocks (WordPress/gutenberg#76189) - Add `fetchpriority=low` to `IMG` tags in collapsed Details blocks (WordPress/gutenberg#76269) - Connectors: Add logo URL support for custom AI providers (WordPress/gutenberg#76190) - Cover Block: Add a playlist parameter to loop YouTube background videos. (WordPress/gutenberg#76004) - Connectors: Memoize getConnectors selector (WordPress/gutenberg#76339) - HTML Block: Fix broken layout (WordPress/gutenberg#76278) - Tests: Skip connector logo URL tests when AI Client is unavailable (WordPress/gutenberg#76343) - Navigation Overlay: Explicitly set fetchpriority for images (WordPress/gutenberg#76208) - Connectors: Show API key source for env vars and wp-config constants (WordPress/gutenberg#76355) - Connectors: Move API key validation and masking to REST dispatch level (WordPress/gutenberg#76327) - Connectors: Replace apiFetch with core-data store selectors (WordPress/gutenberg#76333) - Do not sync local attributes (WordPress/gutenberg#76267) - Add `fetchpriority=low` to `IMG` tags in collapsed Accordion Item blocks (WordPress/gutenberg#76336) - Implement disconnection debounce after initial connection (WordPress/gutenberg#76114) - Allow Post Content to be edited when 'Show template' is active and Post content is nested in a Template Part (WordPress/gutenberg#76305) - Fix: Document Bar: Back button flickers (WordPress/gutenberg#76320) - RTC: Move event hooks from editor to core-data (WordPress/gutenberg#76358) - fix(navigation): prevent right-justified submenu overflow in custom overlays (WordPress/gutenberg#76360) - Connectors: Add connectors registry for extensibility (WordPress/gutenberg#76364) - Connectors: Add empty state when no connectors are registered (WordPress/gutenberg#76375) - Temp: Disable RTC in the site editor (WordPress/gutenberg#76223) - Connectors: Add AI Experiments plugin callout with install/activate functionality (WordPress/gutenberg#76379) - Editor: Polish real-time collaboration presence UI and move Avatar to editor package (WordPress/gutenberg#75652) (WordPress/gutenberg#76365) - RTC: Add collaborator selection highlighting in rich text (WordPress/gutenberg#76107) - Sync changes from `wp_enqueue_global_styles()` to Gutenberg override (WordPress/gutenberg#76127) - [RTC] Fix performance regression on post save (WordPress/gutenberg#76370) - Media: Enable AVIF support for client-side uploads (WordPress/gutenberg#76371) - Connectors: Move plugin status computation to script module data (WordPress/gutenberg#76409) - Revisions: Skip rendered fields in REST API responses (WordPress/gutenberg#76347) - E2E Tests: Add connector setup flow tests with test AI provider (WordPress/gutenberg#76433) - RTC: Place sync connection modal in front of popover (WordPress/gutenberg#76431) - Connectors: Sync PHP code with WordPress Core (WordPress/gutenberg#76443) - Editor: Show own presence in collaborative editing sessions (WordPress/gutenberg#76413) (WordPress/gutenberg#76445) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/9b8144036fa5faf75de43d4502ff9809fcf689ad…8c78d87453509661a9f28f978ba2c242d515563b. Log created with: git log --reverse --format="- %s" 9b8144036fa5faf75de43d4502ff9809fcf689ad..8c78d87453509661a9f28f978ba2c242d515563b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/trunk@61988 git-svn-id: http://core.svn.wordpress.org/trunk@61270 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
5 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.
What?
Closes #74710
Screen.Recording.2026-03-03.at.1.23.32.PM.mov
This PR adds selection highlighting to real-time collaboration awareness. Previously, collaborators could only see each other's cursor positions (
selectionStart). Now, when a user selects text, other users see highlights showing the full selection range.Why?
If a user has text selected, it's in active use by them and important for other users to be aware about. This is expected behavior in other collaborative tools.
How?
There are two major updates to how we share selection state:
On the sending side in
post-editor-awareness.tswe now detect selection direction (forward vs. backward) by comparing selection state before and after changes to selection are made. This direction info is included in the selection state broadcast over awareness.On the rendering side, the previously huge
use-render-cursors.tshas been expanded and refactored into three files.compute-selection.tshandles converting raw selection ranges into visual coordinates.cursor-dom-utils.tsprovides low-level DOM measurement utilities to calculate pixel positions for highlight rectangles, which mostly relies on browser range APIs.What's missing?
Selection states are still handled differently when multiple blocks, including non-text whole blocks are selected:
Screen.Recording.2026-03-03.at.1.27.03.PM.mov
This is a bit trickier to handle, since blocks positions are encoded differently than text positions (
Y.RelativePositionin aY.Textversus parent inner blocksY.Array). Also, Gutenberg can report multiple-block selections in different ways. This will require some more code changes to address, but I think this PR is big enough already and handles everyday use-cases for selections.Note that this PR does not add text highlighting or awareness within the code editor at all. This was originally part of the issue referenced above:
We still don't have full code-editor support or awareness state at all within that text. We may add this later, but for now this only applies to the regular block editor, not code editor.
Testing Instructions
Also see end-to-end tests via: