Implement participant indicator for sessions (#2948)

* Added classes for cursors UI

* Added basic implementation of participant cursors

* Added support for multiple cursors

* Added more info to user presence

* Added user name and color identifier into cursors

* Fixed formatting

* added functions to check for cursors and clean up cursors when user exits sessions

* Added random colour generator

* Passed cursor manager to ShareAce binding instead of handling in frontend

* Removed comments and added credits

* Install `ace-collab-ext` dependency

* Replace files with those from library

* Restore CSS import

* Fix hooks warning

---------

Co-authored-by: wrjgold <trexwrj@gmail.com>
Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

Author: 3 people

package.json

@@ -104,6 +104,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-typescript": "^7.24.1",
     "@babel/runtime": "^7.24.5",
+    "@convergencelabs/ace-collab-ext": "^0.6.0",
     "@craco/craco": "^7.1.0",
     "@svgr/webpack": "^8.0.0",
     "@testing-library/jest-dom": "^6.0.0",

src/commons/editor/UseShareAce.tsx

@@ -1,8 +1,12 @@
+import '@convergencelabs/ace-collab-ext/dist/css/ace-collab-ext.css';
+
+import { AceMultiCursorManager } from '@convergencelabs/ace-collab-ext';
 import * as Sentry from '@sentry/browser';
 import sharedbAce from '@sourceacademy/sharedb-ace';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { getDocInfoFromSessionId, getSessionUrl } from '../collabEditing/CollabEditingHelper';
+import { useSession } from '../utils/Hooks';
 import { showSuccessMessage } from '../utils/notifications/NotificationsHelper';
 import { EditorHook } from './Editor';
 
@@ -21,20 +25,27 @@ const useShareAce: EditorHook = (inProps, outProps, keyBindings, reactAceRef) =>
 
   const { editorSessionId, sessionDetails } = inProps;
 
+  const { name } = useSession();
+
+  const user = useMemo(() => ({ name, color: getColor() }), [name]);
+
   React.useEffect(() => {
     if (!editorSessionId || !sessionDetails) {
       return;
     }
 
     const editor = reactAceRef.current!.editor;
+    const cursorManager = new AceMultiCursorManager(editor.getSession());
     const ShareAce = new sharedbAce(sessionDetails.docId, {
+      user,
+      cursorManager,
       WsUrl: getSessionUrl(editorSessionId, true),
       pluginWsUrl: null,
       namespace: 'sa'
     });
 
     ShareAce.on('ready', () => {
-      ShareAce.add(editor, ['contents'], []);
+      ShareAce.add(editor, cursorManager, ['contents'], []);
       propsRef.current.handleSetSharedbConnected!(true);
 
       // Disables editor in a read-only session
@@ -87,8 +98,23 @@ const useShareAce: EditorHook = (inProps, outProps, keyBindings, reactAceRef) =>
 
       // Resets editor to normal after leaving the session
       editor.setReadOnly(false);
+
+      // Removes all cursors
+      cursorManager.removeAll();
     };
-  }, [editorSessionId, sessionDetails, reactAceRef]);
+  }, [editorSessionId, sessionDetails, reactAceRef, user]);
 };
 
+function getColor() {
+  return (
+    'hsl(' +
+    360 * Math.random() +
+    ',' +
+    (25 + 70 * Math.random()) +
+    '%,' +
+    (50 + 20 * Math.random()) +
+    '%)'
+  );
+}
+
 export default useShareAce;

yarn.lock

@@ -1286,6 +1286,13 @@
   resolved "https://registry.yarnpkg.com/@commander-js/extra-typings/-/extra-typings-12.0.1.tgz#4a74a9ccf1d19ef24e71df59359c6d90a605a469"
   integrity sha512-OvkMobb1eMqOCuJdbuSin/KJkkZr7n24/UNV+Lcz/0Dhepf3r2p9PaGwpRpAWej7A+gQnny4h8mGhpFl4giKkg==
 
+"@convergencelabs/ace-collab-ext@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@convergencelabs/ace-collab-ext/-/ace-collab-ext-0.6.0.tgz#dc914080f84312916940ed1e0d476fed7582a691"
+  integrity sha512-QizJXn66bHu688jrMD6X18YmePu0YXmL8a/4EOxMOPFepDioS34oz1TTmL7oq1AHRBhCRAxKHJao53LbqyJ8vQ==
+  dependencies:
+    ace-builds "^1.4.12"
+
 "@craco/craco@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-7.1.0.tgz#12bd394c7f0334e214302e4d35a1768f68042fbb"
@@ -3684,7 +3691,7 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
-ace-builds@^1.4.14:
+ace-builds@^1.4.12, ace-builds@^1.4.14:
   version "1.15.3"
   resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.15.3.tgz#9e35d174acb80297c6f236be2c8bb8574786f719"
   integrity sha512-hq8+4DfQcUYcUyAF3vF7UoGFXwNxXST5A2IdarUOp9/Xg1thWTfxusPI2HAlTvXRTVjLDQOj9O34uPoTehEs0A==