CHANGELOG.md

@@ -1,19 +1,4 @@
 # Change Log
-## [v0.3.1](https://github.com/convergencelabs/monaco-collab-ext/tree/0.3.1) (2020-11-08)
-
-- Add support for Monaco >= 0.21
-
-## [v0.3.0](https://github.com/convergencelabs/monaco-collab-ext/tree/0.3.0) (2020-03-06)
-
-- Add support for Monaco >= 0.19.0. [#3](https://github.com/convergencelabs/monaco-collab-ext/issues/3)
-
-## [v0.2.0](https://github.com/convergencelabs/monaco-collab-ext/tree/0.2.0) (2020-01-08)
-
-- Added remote select hover labels. [#2](https://github.com/convergencelabs/monaco-collab-ext/pull/2)
-
-## [v0.1.1](https://github.com/convergencelabs/monaco-collab-ext/tree/0.1.0) (2019-03-12)
-
-- Fixed an exception when removing a remote selection.
 
 ## [v0.1.0](https://github.com/convergencelabs/monaco-collab-ext/tree/0.1.0) (2019-03-03)
 

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019 Convergence Labs, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

LICENSE.txt

@@ -0,0 +1,18 @@
+Copyright (c) 2019 Convergence Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
+THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -12,7 +12,7 @@ Install package with NPM and add it to your development dependencies:
 ```npm install --save-dev @convergencelabs/monaco-collab-ext```
 
 ## Demo
-Go [here](https://examples.convergence.io/examples/monaco/) to see a live demo of multiple cursors, multiple selections, and remote scrollbars (Visit on multiple browsers, or even better, point a friend to it too).  This uses [Convergence](https://convergence.io) to handle the synchronization of data and user actions. 
+Go [here](https://examples.convergence.io/monaco/index.html) to see a live demo of multiple cursors, multiple selections, and remote scrollbars (Visit on multiple browsers, or even better, point a friend to it too).  This uses [Convergence](https://convergence.io) to handle the synchronization of data and user actions. 
 
 ## Usage
 
@@ -24,7 +24,7 @@ a single linear index or as a 2-dimensional position in the form of
 
 ```JavaScript
 const editor = monaco.editor.create(document.getElementById("editor"), {
-  value: "function helloWorld = () => { console.log('hello world!')",
+  value: "function helloWolrd = () => { console.log('hello world!')",
   theme: "vs-dark'",
   language: 'javascript'
 });
@@ -56,7 +56,7 @@ users working in the same document.
 
 ```JavaScript
 const editor = monaco.editor.create(document.getElementById("editor"), {
-  value: "function helloWorld = () => { console.log('hello world!')",
+  value: "function helloWolrd = () => { console.log('hello world!')",
   theme: "vs-dark'",
   language: 'javascript'
 });
@@ -84,7 +84,7 @@ to the editor.
 
 ```JavaScript
 const editor = monaco.editor.create(document.getElementById("editor"), {
-  value: "function helloWorld = () => { console.log('hello world!')",
+  value: "function helloWolrd = () => { console.log('hello world!')",
   theme: "vs-dark'",
   language: 'javascript'
 });

example/example.css

@@ -48,4 +48,6 @@ h2 {
 .editor {
   height: 500px;
   border: 1px solid grey;
+  flex: 1;
+
 }

example/example.js

@@ -32,8 +32,8 @@ require(['vs/editor/editor.main', 'MonacoCollabExt'], function(m, MonacoCollabEx
   const staticUserCursor = remoteCursorManager.addCursor(staticUser.id, staticUser.color, staticUser.label);
 
   const remoteSelectionManager = new MonacoCollabExt.RemoteSelectionManager({editor: target});
-  remoteSelectionManager.addSelection(sourceUser.id, sourceUser.color, sourceUser.label);
-  remoteSelectionManager.addSelection(staticUser.id, staticUser.color, staticUser.label);
+  remoteSelectionManager.addSelection(sourceUser.id, sourceUser.color);
+  remoteSelectionManager.addSelection(staticUser.id, staticUser.color);
 
   const targetContentManager = new MonacoCollabExt.EditorContentManager({
     editor: target

gulpfile.babel.js

@@ -22,7 +22,7 @@ const tsProject = gulpTypescript.createProject("tsconfig.json", {
 const exportFilter = "export {};";
 
 const copyFiles = () =>
-  src(["README.md", "LICENSE", "package.json"])
+  src(["README.md", "LICENSE.txt", "package.json"])
     .pipe(dest("dist"));
 
 const copyDocs = () =>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@convergencelabs/monaco-collab-ext",
-  "version": "0.3.2",
+  "version": "0.1.1",
   "title": "Monaco Editor Collaborative Extensions",
   "description": "Collaborative Extensions for the Monaco Editor",
   "keywords": [
@@ -30,23 +30,23 @@
     "access": "public"
   },
   "dependencies": {
-    "monaco-editor": ">=0.15.6"
+    "monaco-editor": "^0.15.6"
   },
   "devDependencies": {
-    "@babel/cli": "7.13.14",
-    "@babel/core": "7.13.15",
-    "@babel/node": "7.13.13",
-    "@babel/preset-env": "7.13.15",
-    "@babel/preset-stage-3": "7.8.3",
-    "@babel/preset-typescript": "7.13.0",
-    "@babel/register": "7.13.14",
-    "babel-plugin-module-resolver": "4.1.0",
+    "@babel/cli": "7.2.3",
+    "@babel/core": "7.2.2",
+    "@babel/node": "7.2.2",
+    "@babel/preset-env": "7.2.3",
+    "@babel/preset-stage-3": "7.0.0",
+    "@babel/preset-typescript": "7.1.0",
+    "@babel/register": "7.0.0",
+    "babel-plugin-module-resolver": "3.1.1",
     "babel-plugin-transform-class-properties": "6.24.1",
-    "del": "6.0.0",
-    "gulp": "4.0.2",
+    "del": "3.0.0",
+    "gulp": "4.0.0",
     "gulp-babel": "8.0.0",
-    "gulp-bump": "3.2.0",
-    "gulp-clean-css": "4.3.0",
+    "gulp-bump": "3.1.1",
+    "gulp-clean-css": "4.0.0",
     "gulp-filter-each": "1.0.1",
     "gulp-header": "2.0.7",
     "gulp-insert": "0.5.0",
@@ -57,7 +57,7 @@
     "trim": "0.0.1",
     "ts-loader": "5.3.3",
     "tslint": "5.12.0",
-    "typescript": "3.7.4",
+    "typescript": "3.3.3333",
     "webpack": "4.28.1",
     "webpack-stream": "5.2.1"
   },

src/css/monaco-collab-ext.css

@@ -37,6 +37,8 @@
 .monaco-remote-selection {
   position: absolute;
   pointer-events: auto;
+  z-index: 10;
   opacity: 0.3;
   background: blue;
+  z-index: 4000;
 }

src/ts/EditorContentManager.ts

@@ -1,12 +1,3 @@
-/*
- * Copyright (c) 2019 Convergence Labs, Inc.
- *
- * This file is part of the Monaco Collaborative Extensions, which is
- * released under the terms of the MIT license. A copy of the MIT license
- * is usually provided as part of this source code package in the LICENCE
- * file. If it was not, please see <https://opensource.org/licenses/MIT>
- */
-
 import * as monaco from "monaco-editor";
 import {editor, IDisposable} from "monaco-editor";
 import {Validation} from "./Validation";

src/ts/OnDisposed.ts

@@ -1,12 +1,3 @@
-/*
- * Copyright (c) 2019 Convergence Labs, Inc.
- *
- * This file is part of the Monaco Collaborative Extensions, which is
- * released under the terms of the MIT license. A copy of the MIT license
- * is usually provided as part of this source code package in the LICENCE
- * file. If it was not, please see <https://opensource.org/licenses/MIT>
- */
-
 /**
  * A simple callback type that signifies a resource has been disposed.
  *

src/ts/RemoteCursor.ts

@@ -1,12 +1,3 @@
-/*
- * Copyright (c) 2019 Convergence Labs, Inc.
- *
- * This file is part of the Monaco Collaborative Extensions, which is
- * released under the terms of the MIT license. A copy of the MIT license
- * is usually provided as part of this source code package in the LICENCE
- * file. If it was not, please see <https://opensource.org/licenses/MIT>
- */
-
 import {IPosition} from "monaco-editor";
 import {RemoteCursorWidget} from "./RemoteCursorWidget";
 

src/ts/RemoteCursorManager.ts

@@ -1,12 +1,3 @@
-/*
- * Copyright (c) 2019 Convergence Labs, Inc.
- *
- * This file is part of the Monaco Collaborative Extensions, which is
- * released under the terms of the MIT license. A copy of the MIT license
- * is usually provided as part of this source code package in the LICENCE
- * file. If it was not, please see <https://opensource.org/licenses/MIT>
- */
-
 import * as monaco from "monaco-editor";
 import {IPosition} from "monaco-editor";
 import {RemoteCursor} from "./RemoteCursor";
@@ -23,11 +14,6 @@ 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.
    */
@@ -38,16 +24,6 @@ export interface IRemoteCursorManagerOptions {
    * it was last moved.
    */
   tooltipDuration?: number;
-
-  /**
-   * 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;
 }
 
 /**
@@ -62,7 +38,7 @@ export class RemoteCursorManager {
    * The default values for optional parameters.
    * @internal
    */
-  private static readonly DEFAULT_OPTIONS: Partial<IRemoteCursorManagerOptions> = {tooltips: true, tooltipDuration: 1, showTooltipOnHover: false};
+  private static readonly DEFAULT_OPTIONS = {tooltips: true, tooltipDuration: 1};
 
   /**
    * A counter that generates unique ids for the cursor widgets.
@@ -131,13 +107,10 @@ 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);
 

src/ts/RemoteCursorWidget.ts

@@ -1,32 +1,8 @@
-/*
- * Copyright (c) 2019 Convergence Labs, Inc.
- *
- * This file is part of the Monaco Collaborative Extensions, which is
- * released under the terms of the MIT license. A copy of the MIT license
- * is usually provided as part of this source code package in the LICENCE
- * file. If it was not, please see <https://opensource.org/licenses/MIT>
- */
-
 import {editor, IDisposable, IPosition} from "monaco-editor";
 import {EditorContentManager} from "./EditorContentManager";
 import {OnDisposed} from "./OnDisposed";
 import {Validation} from "./Validation";
 
-interface IConfiguration {
-  readonly lineHeight: number;
-}
-
-function getConfiguration(editorInstance: editor.ICodeEditor): IConfiguration {
-  // Support for Monaco < 0.19.0
-  if (typeof (editorInstance as any).getConfiguration === "function") {
-    return (editorInstance as any).getConfiguration();
-  }
-
-  return {
-    lineHeight: editorInstance.getOption(editor.EditorOption.lineHeight)
-  };
-}
-
 /**
  * This class implements a Monaco Content Widget to render a remote user's
  * cursor, and an optional tooltip.
@@ -51,13 +27,10 @@ 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,18 +38,18 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable {
     this._onDisposed = onDisposed;
 
     // Create the main node for the cursor element.
-    const {lineHeight} = getConfiguration(this._editor);
+    const {lineHeight} = this._editor.getConfiguration();
     this._domNode = document.createElement("div");
-    this._domNode.className = classNames('monaco-remote-cursor', className)
+    this._domNode.className = "monaco-remote-cursor";
     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 = classNames('monaco-remote-cursor-tooltip', tooltipClassName)
+      this._tooltipNode.className = "monaco-remote-cursor-tooltip";
       this._tooltipNode.style.background = color;
-      this._tooltipNode.innerText = label;
+      this._tooltipNode.innerHTML = label;
       this._domNode.appendChild(this._tooltipNode);
 
       // we only need to listen to scroll positions to update the
@@ -84,16 +57,6 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable {
       this._scrollListener = this._editor.onDidScrollChange(() => {
         this._updateTooltipPosition();
       });
-
-      if (showTooltipOnHover) {
-        this._domNode.style.pointerEvents = 'auto';
-        this._domNode.addEventListener('mouseover', () => {
-          this._setTooltipVisible(true);
-        })
-        this._domNode.addEventListener('mouseout', () => {
-          this._setTooltipVisible(false);
-        })
-      }
     } else {
       this._tooltipNode = null;
       this._scrollListener = null;
@@ -184,10 +147,17 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable {
   }
 
   private _showTooltip(): void {
-    this._setTooltipVisible(true);
+    this._updateTooltipPosition();
+
+    if (this._hideTimer !== null) {
+      clearTimeout(this._hideTimer);
+    } else {
+      this._setTooltipVisible(true);
+    }
 
     this._hideTimer = setTimeout(() => {
       this._setTooltipVisible(false);
+      this._hideTimer = null;
     }, this._tooltipDuration);
   }
 
@@ -203,12 +173,7 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable {
   }
 
   private _setTooltipVisible(visible: boolean): void {
-    if (this._hideTimer !== null) {
-      clearTimeout(this._hideTimer);
-      this._hideTimer = null;
-    }
     if (visible) {
-      this._updateTooltipPosition();
       this._tooltipNode.style.opacity = "1.0";
     } else {
       this._tooltipNode.style.opacity = "0";
@@ -254,7 +219,3 @@ export class RemoteCursorWidget implements editor.IContentWidget, IDisposable {
     }
   }
 }
-
-function classNames(...names: (string|undefined|null)[]) {
-  return names.filter(className => className != null && className.length > 0).join(' ')
-}

src/ts/RemoteSelection.ts

@@ -1,12 +1,3 @@
-/*
- * Copyright (c) 2019 Convergence Labs, Inc.
- *
- * This file is part of the Monaco Collaborative Extensions, which is
- * released under the terms of the MIT license. A copy of the MIT license
- * is usually provided as part of this source code package in the LICENCE
- * file. If it was not, please see <https://opensource.org/licenses/MIT>
- */
-
 import * as monaco from "monaco-editor";
 import {editor, IPosition} from "monaco-editor";
 import {OnDisposed} from "./OnDisposed";
@@ -86,13 +77,7 @@ 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.
+   * The Monaco editor isntance to render selection into.
    * @internal
    */
   private readonly _editor: editor.ICodeEditor;
@@ -137,7 +122,6 @@ export class RemoteSelection {
     id: string,
     classId: number,
     color: string,
-    label: string,
     onDisposed: OnDisposed
   ) {
     this._editor = codeEditor;
@@ -145,7 +129,6 @@ 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;
   }
@@ -262,10 +245,7 @@ export class RemoteSelection {
             this._endPosition.column
           ),
           options: {
-            className: this._className,
-            hoverMessage: this._label != null ? {
-              value: this._label
-            } : null
+            className: this._className
           }
         }
       ]

src/ts/RemoteSelectionManager.ts

@@ -1,12 +1,3 @@
-/*
- * Copyright (c) 2019 Convergence Labs, Inc.
- *
- * This file is part of the Monaco Collaborative Extensions, which is
- * released under the terms of the MIT license. A copy of the MIT license
- * is usually provided as part of this source code package in the LICENCE
- * file. If it was not, please see <https://opensource.org/licenses/MIT>
- */
-
 import * as monaco from "monaco-editor";
 import {IPosition} from "monaco-editor";
 import {RemoteSelection} from "./RemoteSelection";
@@ -18,7 +9,7 @@ import {Validation} from "./Validation";
  */
 export interface IRemoteSelectionManagerOptions {
   /**
-   * The Monaco Editor instance to render the remote selections into.
+   * The Monaco Editor instace to render the remote selections into.
    */
   editor: monaco.editor.ICodeEditor;
 }
@@ -72,11 +63,11 @@ export class RemoteSelectionManager {
    * @param color
    *   The color to render the selection with.
    */
-  public addSelection(id: string, color: string, label?: string): RemoteSelection {
+  public addSelection(id: string, color: string): RemoteSelection {
     const onDisposed = () => {
       this.removeSelection(id);
     };
-    const selection = new RemoteSelection(this._options.editor, id, this._nextClassId++, color, label, onDisposed);
+    const selection = new RemoteSelection(this._options.editor, id, this._nextClassId++, color, onDisposed);
     this._remoteSelections.set(id, selection);
     return selection;
   }

src/ts/Validation.ts

@@ -1,12 +1,3 @@
-/*
- * Copyright (c) 2019 Convergence Labs, Inc.
- *
- * This file is part of the Monaco Collaborative Extensions, which is
- * released under the terms of the MIT license. A copy of the MIT license
- * is usually provided as part of this source code package in the LICENCE
- * file. If it was not, please see <https://opensource.org/licenses/MIT>
- */
-
 /**
  * A helper class to aid in input validation.
  *

src/ts/index.ts

@@ -1,12 +1,3 @@
-/*
- * Copyright (c) 2019 Convergence Labs, Inc.
- *
- * This file is part of the Monaco Collaborative Extensions, which is
- * released under the terms of the MIT license. A copy of the MIT license
- * is usually provided as part of this source code package in the LICENCE
- * file. If it was not, please see <https://opensource.org/licenses/MIT>
- */
-
 export * from "./RemoteCursorManager";
 export * from "./RemoteSelectionManager";
 export * from "./EditorContentManager";