Archives/convergencelabs_monaco-collab-ext
1
0
Fork 0
mirror of https://github.com/convergencelabs/monaco-collab-ext.git synced 2024-10-27 20:34:17 +00:00
Code Issues Projects Releases Wiki Activity

add additional elements class names

Browse Source
This commit is contained in:
Samuel Olivier 2022-05-19 17:01:09 +02:00
parent 6ece72028e
commit 91bdec1bb7
2 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/ts/RemoteCursorManager.ts
View File

@ -23,6 +23,11 @@ export interface IRemoteCursorManagerOptions {
*/
editor: monaco.editor.ICodeEditor;
/**
* 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.
*/
@ -33,6 +38,11 @@ export interface IRemoteCursorManagerOptions {
* it was last moved.
*/
tooltipDuration?: number;
/**
* An additional class name for the tooltip element, to tweak the default style
*/
tooltipClassName?: string;
}
/**
@ -116,10 +126,12 @@ export class RemoteCursorManager {
const cursorWidget = new RemoteCursorWidget(
this._options.editor,
widgetId,
this._options.className,
color,
label,
this._options.tooltips,
tooltipDurationMs,
this._options.tooltipClassName,
() => this.removeCursor(id));
this._cursorWidgets.set(id, cursorWidget);

10
src/ts/RemoteCursorWidget.ts
View File

@ -51,10 +51,12 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable {
constructor(codeEditor: editor.ICodeEditor,
widgetId: string,
className: string | undefined,
color: string,
label: string,
tooltipEnabled: boolean,
tooltipDuration: number,
tooltipClassName: string | undefined,
onDisposed: OnDisposed) {
this._editor = codeEditor;
this._tooltipDuration = tooltipDuration;
@ -64,14 +66,14 @@ 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._domNode.appendChild(this._tooltipNode);
@ -243,3 +245,7 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable {
}
}
}
function classNames(...names: (string|undefined|null)[]) {
return names.filter(className => className != null && className.length > 0).join(' ')
}