Enhances the Ace Editor by adding the ability to render cues about what remote users are doing in the system.
Install package with NPM and add it to your development dependencies:
For versions >= 0.5.0 (current):
npm install --save-dev @convergencelabs/ace-collab-ext
For versions <= 0.4.0 (previous):
npm install --save-dev @convergence/ace-collab-ext
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.
Be sure to include one of CSS files located in the css directory of the node modules:
css/ace-collab-ext.css
css/ace-collab-ext.min.css
How to do this will depend on how you are packaging and distributing your application. For example if you are bundling your css / sass / less you might be able to use an @import
statement or you might require
it. If you are hotlinking, you might need to at a <link>
tag to your document.
If you forget to include the styles, its likely that the remote cursors / selections will either not show up, or they will not properly move.
The multi cursor manager 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
{row: 0, column: 10}
.
const editor = ace.edit("editor");
const curMgr = new AceCollabExt.AceMultiCursorManager(editor.getSession());
// Add a new remote cursor with an id of "uid1", and a color of orange.
curMgr.addCursor("uid1", "User 1", "orange", {row: 0, column: 10});
// Set cursor for "uid1" to index 10.
curMgr.setCursor("uid1", 10);
// Clear the remote cursor for "uid1" without removing it.
curMgr.clearCursor("uid1");
// Remove the remote cursor for "uid1".
curMgr.removeCursor("uid1");
The multi selection manager allows you to easily render the selection of other users working in the same document. Selection is represented by an array of AceRanges. A single range is common for normal selection, but multiple ranges are needed to support block selection.
const AceRange = ace.require("ace/range");
const editor = ace.edit("editor");
const selMgr = new AceCollabExt.AceMultiSelectionManager(editor.getSession());
// A two-line block selection
const initialRanges = [
new AceRange(0, 0, 0, 10),
new AceRange(1, 0, 1, 10),
];
// Add a new remote view indicator with an id of "uid1", and a color of orange.
selMgr.addSelection("uid1", "User 1", "orange", initialRanges);
// Set the selection to a new range.
selMgr.setSelection("uid1", new AceRange(10, 0, 11, 10));