diff --git a/src/ts/RemoteCursorManager.ts b/src/ts/RemoteCursorManager.ts index 3d10649..4765615 100644 --- a/src/ts/RemoteCursorManager.ts +++ b/src/ts/RemoteCursorManager.ts @@ -24,7 +24,12 @@ export interface IRemoteCursorManagerOptions { editor: monaco.editor.ICodeEditor; /** - * Determines if tooltips will be shown when the cursor is moved or hovered. + * An additional class name for the cursor element, to tweak the default style + */ + className?: string; + + /** + * Determines if tooltips will be shown when the cursor is moved. */ tooltips?: boolean; @@ -38,6 +43,11 @@ export interface IRemoteCursorManagerOptions { * Show the tooltip when the cursor is hovered */ showTooltipOnHover?: boolean; + + /** + * An additional class name for the tooltip element, to tweak the default style + */ + tooltipClassName?: string; } /** @@ -121,11 +131,13 @@ export class RemoteCursorManager { const cursorWidget = new RemoteCursorWidget( this._options.editor, widgetId, + this._options.className, color, label, this._options.tooltips, tooltipDurationMs, this._options.showTooltipOnHover, + this._options.tooltipClassName, () => this.removeCursor(id)); this._cursorWidgets.set(id, cursorWidget); diff --git a/src/ts/RemoteCursorWidget.ts b/src/ts/RemoteCursorWidget.ts index 1b5685f..93752e4 100644 --- a/src/ts/RemoteCursorWidget.ts +++ b/src/ts/RemoteCursorWidget.ts @@ -51,11 +51,13 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable { constructor(codeEditor: editor.ICodeEditor, widgetId: string, + className: string | undefined, color: string, label: string, tooltipEnabled: boolean, tooltipDuration: number, showTooltipOnHover: boolean, + tooltipClassName: string | undefined, onDisposed: OnDisposed) { this._editor = codeEditor; this._tooltipDuration = tooltipDuration; @@ -65,16 +67,16 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable { // Create the main node for the cursor element. const {lineHeight} = getConfiguration(this._editor); this._domNode = document.createElement("div"); - this._domNode.className = "monaco-remote-cursor"; + this._domNode.className = classNames('monaco-remote-cursor', className) this._domNode.style.background = color; this._domNode.style.height = `${lineHeight}px`; // Create the tooltip element if the tooltip is enabled. if (tooltipEnabled) { this._tooltipNode = document.createElement("div"); - this._tooltipNode.className = "monaco-remote-cursor-tooltip"; + this._tooltipNode.className = classNames('monaco-remote-cursor-tooltip', tooltipClassName) this._tooltipNode.style.background = color; - this._tooltipNode.innerHTML = label; + this._tooltipNode.innerText = label; this._domNode.appendChild(this._tooltipNode); // we only need to listen to scroll positions to update the @@ -252,3 +254,7 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable { } } } + +function classNames(...names: (string|undefined|null)[]) { + return names.filter(className => className != null && className.length > 0).join(' ') +} \ No newline at end of file