[Collaboration] Custom User Info UI Guide
Build your own UI for the active-users list by listening to plugin events.
1. Attach Event Listener
After initializing the editor, access the collaboration plugin and attach a listener to USER_CHANGED.
const editor = new SynapEditor(id, synapEditorConfig);
const collaboration = editor.plugins.collaboration;
const EVENT_TYPE = collaboration.EVENT_TYPE; // ON_SYNC, USER_CHANGED, USER_INFO_CHANGED
collaboration.on(EVENT_TYPE.USER_CHANGED, (users, added, removed) => {
// users: all currently connected users
// added: array of newly joined client ids
// removed: array of disconnected client ids
});
2. Render the User List in the Listener
Use the listener to update your own DOM.
<html>
<style>
#collabo-user-list { padding: 5px; }
#collabo-user-list .collabo-user { display: inline-block; margin-right: 5px; color: #3c3c3c; padding: 2px 5px; border-radius: 8px; }
#collabo-user-list .collabo-self { background-color: #f4f4f4; }
#collabo-user-list .collabo-color { width: 12px; height: 12px; display: inline-block; border-radius: 4px; vertical-align: middle; }
#collabo-user-list .collabo-name { display: inline-block; font-size: 12px; }
</style>
<body>
<div id="collabo-user-list"></div> <!-- where the user list renders -->
<div id="synapeditor"></div> <!-- editor mount point -->
</body>
</html>
collaboration.on(EVENT_TYPE.USER_CHANGED, (users, added, removed) => {
const container = document.getElementById('collabo-user-list');
container.innerHTML = '';
users.forEach((user) => {
const html = `<div id="collabo-user-${user.id}" class="collabo-user ${user.self ? 'collabo-self' : ''}">
<span class="collabo-color" style="background-color: ${user.color}"></span>
<span class="collabo-name">${user.name}</span>
</div>`;
container.insertAdjacentHTML('beforeend', html);
});
});