From 0e02c412dd918d3c6839bd46e81c985ca6f7c466 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Mangeonjean?= <loic@codingame.com>
Date: Wed, 8 Jan 2020 15:05:38 +0100
Subject: [PATCH 1/2] Add label to remote selection

---
 src/ts/RemoteSelection.ts        | 13 ++++++++++++-
 src/ts/RemoteSelectionManager.ts |  4 ++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/ts/RemoteSelection.ts b/src/ts/RemoteSelection.ts
index 4b62f05..70897c9 100644
--- a/src/ts/RemoteSelection.ts
+++ b/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
           }
         }
       ]
diff --git a/src/ts/RemoteSelectionManager.ts b/src/ts/RemoteSelectionManager.ts
index 47d1d06..46e40c6 100644
--- a/src/ts/RemoteSelectionManager.ts
+++ b/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;
   }

From b58283899b4499551487c7ab3a652fa31f5b9eca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Mangeonjean?= <loic@codingame.com>
Date: Wed, 8 Jan 2020 15:06:21 +0100
Subject: [PATCH 2/2] Remove z-index that makes the hover not working

---
 src/css/monaco-collab-ext.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/css/monaco-collab-ext.css b/src/css/monaco-collab-ext.css
index 71f147b..07a1187 100644
--- a/src/css/monaco-collab-ext.css
+++ b/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;
 }