This issue has been created
There are 3 updates.
 
 
XWiki Platform / cid:jira-generated-image-avatar-8ce406ca-4f8d-43c9-b773-f531f0e7bc81 XWIKI-24648 Open

Realtime user list in CKEditor and wiki editor flickers when other users move the caret

 
View issue   ยท   Add comment
 

Issue created

 
cid:jira-generated-image-avatar-c6219915-a51a-4613-a07e-a9ad3e37001c Michael Hamann created this issue on 30/Jul/26 16:30
 
Summary: Realtime user list in CKEditor flickers when other users move the caret
Issue Type: cid:jira-generated-image-avatar-8ce406ca-4f8d-43c9-b773-f531f0e7bc81 Bug
Affects Versions: 16.10.0
Assignee: Unassigned
Attachments: Bildschirmaufnahme_20260730_161930.webm
Components: Realtime
Created: 30/Jul/26 16:30
Labels: UX
Priority: cid:jira-generated-image-static-major-87796c26-e463-47a2-9367-d87ad362bac7 Major
Reporter: Michael Hamann
Description:

Steps to reproduce:

  1. On a page with several paragraphs of content, open the realtime editor in five browser tabs (can be the same user account).
  2. In one of the tabs, run the following snippet to simulate moving the cursor to a different element every second:
    {
      const editable = CKEDITOR.instances[Object.keys(CKEDITOR.instances)[0]].editable().$;
      const doc = editable.ownerDocument;
      let i = 0;
      globalThis.caretWalk = setInterval(() => {
        const blocks = editable.querySelectorAll('p, h1, h2, h3, li');
        if (blocks.length < 2) {
          return console.warn('Need at least two blocks in the content.');
        }
        const range = doc.createRange();
        range.selectNodeContents(blocks[i++ % blocks.length]);
        range.collapse(true);
        const selection = doc.defaultView.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
      }, 1000);
    }
    
  3. Observe the list of co-editors and the dropdown in another tab

Expected result:

There isn't any visible flickering as the list of co-editors stays the same.

Actual result:

The list flickers visibly every ~3 seconds as shown in the attached screen recording. Navigating the dropdown by keyboard focus doesn't really work as focus is reset every ~3 seconds.

 
 

3 updates

 
cid:jira-generated-image-avatar-c6219915-a51a-4613-a07e-a9ad3e37001c Changes by Michael Hamann on 30/Jul/26 16:30
 
Summary: Realtime user list in CKEditor and wiki editor flickers when other users move the caret
Description: *Steps to reproduce:*

# On a page with several paragraphs of content, open the realtime editor in five browser tabs (can be the same user account).
# In one of the tabs, run the following snippet to simulate moving the cursor to a different element every second:
{code:javascript}
{
  const editable = CKEDITOR.instances[Object.keys(CKEDITOR.instances)[0]].editable().$;
  const doc = editable.ownerDocument;
  let i = 0;
  globalThis.caretWalk = setInterval(() => {
    const blocks = editable.querySelectorAll('p, h1, h2, h3, li');
    if (blocks.length < 2) {
      return console.warn('Need at least two blocks in the content.');
    }
    const range = doc.createRange();
    range.selectNodeContents(blocks[i++ % blocks.length]);
    range.collapse(true);
    const selection = doc.defaultView.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  }, 1000);
}
{code}
# Observe the list of co-editors and the dropdown in another tab
# You can stop the code for moving the cursor with {{clearInterval(caretWalk)}}

*Expected result:*

There isn't any visible flickering as the list of co-editors stays the same.

*Actual result:*

The list flickers visibly every ~3 seconds as shown in the attached screen recording. Navigating the dropdown by keyboard focus doesn't really work as focus is reset every ~3 seconds.
Assignee: Michael Hamann