Merge pull request convergencelabs#2 from CGNonofr/remote-selection-h…

…over

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,13 +137,15 @@ export class RemoteSelection {
  id: string,
  classId: number,
  color: string,
+ label: string,
  onDisposed: OnDisposed
  ) {
  this._editor = codeEditor;
  this._id = id;
  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;
  }