Merge pull request #2 from CGNonofr/remote-selection-hover

Remote selection hover label

src/css/monaco-collab-ext.css

@@ -37,8 +37,6 @@
 .monaco-remote-selection {
   position: absolute;
   pointer-events: auto;
-  z-index: 10;
   opacity: 0.3;
   background: blue;
-  z-index: 4000;
 }

src/ts/RemoteSelection.ts

@@ -85,6 +85,12 @@ export class RemoteSelection {
    */
   private readonly _styleElement: HTMLStyleElement;
 
+  /**
+   * The label to display on hover
+   * @internal
+   */
+  private readonly _label: string;
+
   /**
    * The Monaco editor instance to render selection into.
    * @internal
@@ -131,6 +137,7 @@ export class RemoteSelection {
     id: string,
     classId: number,
     color: string,
+    label: string,
     onDisposed: OnDisposed
   ) {
     this._editor = codeEditor;
@@ -138,6 +145,7 @@ export class RemoteSelection {
     const uniqueClassId = `monaco-remote-selection-${classId}`;
     this._className = `monaco-remote-selection ${uniqueClassId}`;
     this._styleElement = RemoteSelection._addDynamicStyleElement(uniqueClassId, color);
+    this._label = label;
     this._decorations = [];
     this._onDisposed = onDisposed;
   }
@@ -254,7 +262,10 @@ export class RemoteSelection {
             this._endPosition.column
           ),
           options: {
-            className: this._className
+            className: this._className,
+            hoverMessage: this._label != null ? {
+              value: this._label
+            } : null
           }
         }
       ]

src/ts/RemoteSelectionManager.ts

@@ -72,11 +72,11 @@ export class RemoteSelectionManager {
    * @param color
    *   The color to render the selection with.
    */
-  public addSelection(id: string, color: string): RemoteSelection {
+  public addSelection(id: string, color: string, label?: string): RemoteSelection {
     const onDisposed = () => {
       this.removeSelection(id);
     };
-    const selection = new RemoteSelection(this._options.editor, id, this._nextClassId++, color, onDisposed);
+    const selection = new RemoteSelection(this._options.editor, id, this._nextClassId++, color, label, onDisposed);
     this._remoteSelections.set(id, selection);
     return selection;
   }