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; }