varconst editor = new SynapEditor(id, synapEditorConfig); // 사이냅 에디터 초기화
varconst collaboration = editor.plugins.collaboration; // 실시간 협업 플러그인 객체 접근
varconst EVENT_TYPE = collaboration.EVENT_TYPE;  // 이벤트 타입 (ON_SYNC, USER_CHANGED, USER_INFO_CHANGED)

collaboration.on(EVENT_TYPE.USER_CHANGED, function (users, added, removed) => {
    // 사용자 수가 변할 때 실행할 내용
    // users: 총 접속 중인 사용자 정보 
    // added: 추가된 사용자 id 배열
    // removed: 제거된 사용자 id 배열
});

collaboration.on(EVENT_TYPE.USER_CHANGED, function (users, added, removed) => {
    varconst collaboUserElement = document.getElementById('collabo-user-list');
    collaboUserElement.innerHTML = '';
    users.forEach((user) => {
        varconst userHTML = `<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>`;
        collaboUserElement.insertAdjacentHTML('beforeend', userHTML);
    });
});