ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.32k stars 3.68k forks source link

Presence List on Active Editor if there are more than one editor instance on same page. #7792

Closed harish9312 closed 3 years ago

harish9312 commented 4 years ago

📝 Currently we have the Presence List feature implemented, and the improvement which I want is if there is more then one instance of the CKEditor on a single page, then I want to show the Presence List only on the Currently active Editor. As whichever editor is the user is focused and typing I just want to show the Presence List on that.

Current Workflow: Currently if we add the Presence List plugin and add more then one editor on the same page it shows the Users on top of all the editors, and improvement I want is to show the list of active users on the correctly active editor.

📃 Other details

Here is the minimal POC https://github.com/harish9312/ck-sample I have created to show the demo, I am pushing the Presence List plugin on the currently active Editor and then assigning it to the plugins again but it does not seem to work.

I would like to get suggestions on this if someone has faced a similar problem on the same.

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

Mgsy commented 4 years ago

Hello, thank you for the report. I believe, the most suitable solution for your use case will be simple hiding/showing the presence list on blur/focus. By default, the presence list element will be set to display:none and after focusing the editable (making the editor active), the property will be changed to display:block

As you use React, you can use one of the component properties - onFocus and onBlur. See the example below:

.presence {
    display: 'none'
}
onBlur={ (event, editor ) => {
    console.log("Blur.", editor);
    this.presenceListElementRef.current.style.display = 'none';
} }
onFocus={ (event, editor ) => {
    console.log("Focus.", editor);
    this.presenceListElementRef.current.style.display = 'block';
} }

However, if you're using multiple editor instances, you'll need to make sure that your editor has a correct reference to presenceListElementRef related to this specific editor.

Also, as Presence list is one of our commercial plugins and this repository is dedicated to an open-source part of the project, I'd kindly ask you to send your further reports via support channel. Our dedicated support team will handle your requests and assist you in solving any query.