convergencelabs / monaco-collab-ext Goto Github PK

View Code? Open in Web Editor NEW

208.0 8.0 25.0 1.26 MB

Adds collaborative editing capabilities to the Monaco Editor

Home Page: https://convergencelabs.com

License: MIT License

JavaScript 19.29% CSS 3.20% HTML 2.74% TypeScript 74.77%

monaco-editor realtime collaboration

monaco-collab-ext's Introduction

Monaco Collaborative Extensions

Enhances the Monaco Editor by adding the ability to render cues about what remote users are doing in the system.

Installation

Install package with NPM and add it to your development dependencies:

npm install --save-dev @convergencelabs/monaco-collab-ext

Demo

Go here 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 to handle the synchronization of data and user actions.

Usage

RemoteCursorManager

The RemoteCursorManager allows you to easily render the cursors of other users working in the same document. The cursor position can be represented as either a single linear index or as a 2-dimensional position in the form of {lineNumber: 0, column: 10}.

const editor = monaco.editor.create(document.getElementById("editor"), {
  value: "function helloWorld = () => { console.log('hello world!')",
  theme: "vs-dark'",
  language: 'javascript'
});

const remoteCursorManager = new MonacoCollabExt.RemoteCursorManager({
  editor: editor,
  tooltips: true,
  tooltipDuration: 2
});

const cursor = remoteCursorManager.addCursor("jDoe", "blue", "John Doe");

// Set the position of the cursor.
cursor.setOffset(4);

// Hide the cursor
cursor.hide();

// Show the cursor
cursor.show();

// Remove the cursor.
cursor.dispose();

RemoteSelectionManager

The RemoteSelectionManager allows you to easily render the selection of other users working in the same document.

const editor = monaco.editor.create(document.getElementById("editor"), {
  value: "function helloWorld = () => { console.log('hello world!')",
  theme: "vs-dark'",
  language: 'javascript'
});

const remoteSelectionManager = new MonacoCollabExt.RemoteSelectionManager({editor: editor});

const selection = remoteSelectionManager.addSelection("jDoe", "blue");

// Set the range of the selection using zero-based offsets.
selection.setOffsets(45, 55);

// Hide the selection
selection.hide();

// Show the selection
selection.show();

// Remove the selection.
selection.dispose();

EditorContentManager

The EditorContentManager simplifies dealing with local and remote changes to the editor.

const editor = monaco.editor.create(document.getElementById("editor"), {
  value: "function helloWorld = () => { console.log('hello world!')",
  theme: "vs-dark'",
  language: 'javascript'
});

const contentManager = new MonacoCollabExt.EditorContentManager({
  editor: editor,
  onInsert(index, text) {
    console.log("Insert", index, text);
  },
  onReplace(index, length, text) {
    console.log("Replace", index, length, text);
  },
  onDelete(index, length) {
    console.log("Delete", index, length);
  }
});

// Insert text into the editor at offset 5.
contentManager.insert(5, "some text");

// Replace the text in the editor at range 5 - 10.
contentManager.replace(5, 10, "some text");

// Delete the text in the editor at range 5 - 10.
contentManager.delete(5, 10);

// Release resources when done
contentManager.dispose();

monaco-collab-ext's People

Contributors

Stargazers

Watchers

monaco-collab-ext's Issues

monaco-editor in dependencies may be peerDependencies?

Would it be better to movemonaco-editor from dependencies to peerDependencies in package.json?

Also, monaco-editor-core might be better than monaco-editor?

Support Monaco >= 19.0.0

I ran on monaco 0.19.0 and cursors doesn't work:

“"cssMode.js?db4f:54 Uncaught (in promise) TypeError: monaco.languages.registerSelectionRangeProvider is not a function””

It’s may help: Monaco-editor did breaking changes: getConfiguration() is replaced by getRawOptions(), which returns the passed in editor options.

Tooltip overflow

When remote cursor is added at the last line of the editor (see red cursor at the screenshot) the tooltip is hidden:

Obviously it happens only when there is not enough space at the editor bottom. But I guess the behaviour in this particular case should be the same like with a completion menu. Tooltip shouldn't be cut by the editor borders.

There is a flag IContentWidget.allowEditorOverflow which could help to resolve the problem, however I'm not sure.

Use 'monaco-editor/esm/vs/editor/editor.api' in monaco import

Hello,
I am facing issue in building react application having this dependency. I am getting error in with the unnecessary monaco files which II guess not required for collab extension.

Module parse failed: Unexpected token (156:11)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     dispose() {
|       onLanguageListener.dispose();
>       mode?.dispose();
|       mode = void 0;
|     }

If I rebuild the monaco-collab-ext with replacing import * as monaco from "monaco-editor" with import * as monaco from "monaco-editor/esm/vs/editor/editor.api" Then the above issue is not coming and everything works fine. So, my suggestion is why not to just import monaco api's instead of whole heavy monaco editor installation. If other things not required.
Also, on searching everywhere the above error could also be solved by changing webpack configuration. But my doubt is why to go into hassle of changing/overriding webpack config, if it could easliy solve by importing monaco api only.

What is the opinion about this issue?

monaco-collab-ext script src load?

Hello, I have a question

Is there any way to load [monaco-collab-ext] through script src and use it?

Demo URL dead

Visiting https://examples.convergence.io/monaco/index.html referenced in Readme returns a 404.

Not compatible with [email protected] with [email protected]

The docs say that it's compatible with monaco-editor versions >=0.15.6 <=0.21.x but gives an error:
Type 'ICodeEditor' is missing the following properties from type 'ICodeEditor': onDidCompositionStart, onDidCompositionEnd, onDidAttemptReadOnlyEdit, onDidPaste, and 12 more.

I checked the function names are onCompositionStart, onCompositionEnd, onAttemptReadOnlyEdit, etc.

Support default export?

I have a project using this with Webpack and React.

Currently I'm importing by:

import * as MonacoCollabExt from "@convergencelabs/monaco-collab-ext";

This was counterintuitive, and took me a while of debugging Webpack errors to figure out.

I think it's more intuitive to import with

import MonacoCollabExt from "@convergencelabs/monaco-collab-ext";

or even

import { MonacoCollabExt } from "@convergencelabs/monaco-collab-ext";

Example site DNS not resolving

I tried to visit https://examples.convergence.io/examples/monaco/ (looks like https://docs.convergence.io/guide/ is also down) but DNS is not resolving the domain: