share · enjalot · Oct 11, 2013 · Dec 3, 2013 · Dec 4, 2013 · Apr 10, 2014
diff --git a/README.md b/README.md
@@ -1,14 +1,47 @@
 # Share-CodeMirror [![Build Status](https://secure.travis-ci.org/share/share-codemirror.png)](http://travis-ci.org/share/share-codemirror) [![Dependencies](https://david-dm.org/share/share-codemirror.png)](https://david-dm.org/share/share-codemirror) [![devDependency Status](https://david-dm.org/share/share-codemirror/dev-status.png)](https://david-dm.org/share/share-codemirror#info=devDependencies)
 CodeMirror bindings for ShareJS >= 0.7.x.
 
+## Dependencies
+
+You need [lodash](http://lodash.com/) loaded before this library.
+
 ## Usage
 
 ```javascript
 var cm = CodeMirror.fromTextArea(elem);
-shareDoc.attachCodeMirror(cm);
+
+var ctx = shareDoc.createContext();
+shareDoc.attachCodeMirror(cm, ctx);
+shareDoc.attachCodeMirrorCursor(cm, ctx);
 ```
 
-That's it. You now have 2-way sync between your ShareJS and CodeMirror. 
+That's it. You now have 2-way sync between your ShareJS and CodeMirror.
+
+### Configuration
+
+The `attachCodeMirrorCursor` takes an optional 3rd `options` argument where the
+following options may be set:
+
+* `inactiveTimeout` - how long the "name" part of a cursor is visible after inactivity
+* `color` - the color of the cursor
+* `selectionColor` - the color of text selection
+* `textColor` - the color of the "name" text
+
+These attributes can also be set on a per-user basis with presence properties:
+
+```javascript
+shareDoc.setPresenceProperty("name", name);
+shareDoc.setPresenceProperty("color", color);
+shareDoc.setPresenceProperty("selectionColor", selectionColor);
+shareDoc.setPresenceProperty("textColor", textColor);
+shareDoc.setPresenceProperty("inactiveTimeout", 10000);
+```
+
+Share-Codemirror will provide default values for all of these properties if you
+don't set them explicitly. You may want to use a color library such as
+[TinyColor](http://bgrins.github.io/TinyColor/)
+to manipulate colors, for example setting `selectionColor` a bit brighter than
+`color`, or finding a legible `textColor` based on `color`.
 
 ## Install with Bower
 
@@ -22,7 +55,7 @@ bower install share-codemirror
 npm install share-codemirror
 ```
 
-On Node.js you can mount the `scriptsDir` (where `share-codemirror.js` lives) as a static resource 
+On Node.js you can mount the `scriptsDir` (where `share-codemirror.js` lives) as a static resource
 in your web server:
 
 ```javascript
@@ -41,6 +74,7 @@ In the HTML:
 
 ```
 npm install
+npm test
 node examples/server.js
 # in a couple of browsers...
 open http://localhost:7007
@@ -78,4 +112,3 @@ git push --tags
 ```
 
 There is no `bower publish` - the existance of a git tag is enough.
-
diff --git a/examples/index.html b/examples/index.html
@@ -1,66 +1,89 @@
 <!DOCTYPE html>
 <html>
 <head>
-<link rel="stylesheet" href="/codemirror.css">
-<script src="/codemirror.js"></script>
-<script src="/channel/bcsocket.js"></script>
-<script src="/share.uncompressed.js"></script>
-<script src="/share-codemirror.js"></script>
+    <link rel="stylesheet" href="/codemirror.css">
+    <script src="/lodash.min.js"></script>
+    <script src="/codemirror.js"></script>
+    <script src="/channel/bcsocket.js"></script>
+    <script src="/share.uncompressed.js"></script>
+    <script src="/share-codemirror.js"></script>
+    <script src="/share-codemirror-cursor.js"></script>
+    <script src="/tinycolor-min.js"></script>
+
+    <style>
+
+        .user-name {
+            color: white;
+            font-size: 10px;
+            line-height: 1;
+            padding: 1px 3px;
+
+            -webkit-border-radius: 3px;
+            -moz-border-radius: 3px;
+            border-radius: 3px;
+        }
+
+        .user-cursor {
+            background: black;
+        }
+
+        #users input {
+            width: 250px;
+        }
+    </style>
 </head>
 <body>
 <textarea id="pad">Connecting...</textarea>
-<button id="monkey">Infinite Monkey</button>
+
+<div id="myself">
+    <input value="">
+</div>
+<div id="users"></div>
 <script>
-var elem = document.getElementById('pad');
-var cm = CodeMirror.fromTextArea(elem, {
-  mode: "text/plain"
-});
+    var elem = document.getElementById('pad');
+    var cm = CodeMirror.fromTextArea(elem, {
+        mode: "text/plain"
+    });
+
+    var bcs = new BCSocket(null, {reconnect: true});
+    var sjs = new window.sharejs.Connection(bcs);
+    sjs.debug = false;
+
+    var doc = sjs.get('users', 'sephx');
 
-var s = new BCSocket(null, {reconnect: true});
-var sjs = new window.sharejs.Connection(s);
-var doc = sjs.get('users', 'sephx');
+    doc.subscribe();
+    doc.whenReady(function () {
+        if (!doc.type) doc.create('text');
+        if (doc.type && doc.type.name === 'text') {
+            var ctx = doc.createContext();
+            doc.attachCodeMirror(cm, ctx);
+            doc.attachCodeMirrorCursor(cm, ctx, {inactiveTimeout: 2000});
 
-doc.subscribe();
-doc.whenReady(function () {
-  if (!doc.type) doc.create('text');
-  if (doc.type && doc.type.name === 'text') {
-    doc.attachCodeMirror(cm);
-  }
-});
+            // set the color for our session
+            var sessionIds = Object.keys(ctx.getPresence());
+            // colorbrewer
+            var colors = [
+                "#8dd3c7", "#bebada", "#fb8072", "#80b1d3", "#fdb462", "#b3de69", "#fccde5", "#d9d9d9", "#bc80bd", "#ccebc5"
+            ];
+            var color = colors[sessionIds.length % colors.length];
+            doc.setPresenceProperty("color", color);
 
-document.getElementById('monkey').onclick = function() {
-  setInterval(monkeyType, 50);
-};
+            var selectionColor = tinycolor.lighten(color).toHexString();
+            doc.setPresenceProperty("selectionColor", selectionColor);
 
-function monkeyType() {
-  var textLength = cm.getValue().length;
-  var pos = Math.floor(Math.random()*textLength);
-  var from = cm.posFromIndex(pos);
-  var editLength = randomInt(10)
-  if(Math.random() < 0.9) {
-    // Add text
-    var text =  randomString(editLength);
-    cm.replaceRange(text, cm.posFromIndex(pos));
-  } else {
-    var endIndex = Math.max(pos + editLength, textLength-1);
-    var to = cm.posFromIndex(endIndex);
-    cm.replaceRange('', from, to);
-  }
-}
+            var textColor = tinycolor.mostReadable(color, ['black', 'white']).toHexString();
+            doc.setPresenceProperty("textColor", textColor);
 
-function randomString(len) {
-	var chars = "0123456789\nABCDEF\nGHIJKLM\nNOPQRSTUVWXTZ\nabcde\nfghiklmnop\nqrstuvwxyz";
-	var result = '';
-	for (var i=0; i<len; i++) {
-		var rnum = randomInt(chars.length);
-		result += chars.substring(rnum, rnum+1);
-	}
-  return result;
-}
+            var myself = document.getElementById('myself');
+            myself.style.background = color;
+            var input = myself.getElementsByTagName("input")[0];
+            input.value = doc.connection.id;
+            input.onkeyup = function () {
+                doc.setPresenceProperty("name", input.value);
+            };
+        }
+    });
 
-function randomInt(max) {
-  return Math.floor(Math.random()*max);
-}
 
 </script>
 </body>

diff --git a/examples/server.js b/examples/server.js
@@ -10,6 +10,8 @@ var webserver = connect(
   connect["static"](__dirname),
   connect["static"](shareCodeMirror.scriptsDir),
   connect["static"](__dirname + '/../node_modules/codemirror/lib'),
+  connect["static"](__dirname + '/../node_modules/tinycolor2/dist'),
+  connect["static"](__dirname + '/../node_modules/lodash/dist'),
   connect["static"](sharejs.scriptsDir)
 );
 
@@ -19,7 +21,12 @@ var backend = livedb.client(livedbMongo('localhost:27017/test?auto_reconnect', {
 
 var share = sharejs.server.createClient({backend: backend});
 
-webserver.use(browserChannel({webserver: webserver}, function (client) {
+var clientsById = {};
+
+webserver.use(browserChannel({webserver: webserver, sessionTimeoutInterval: 5000}, function (client) {
+  clientsById[client.id] = client;
+  //client.send({_type: 'connectionId', connectionId: client.id});
+
   var stream = new Duplex({objectMode: true});
   stream._write = function (chunk, encoding, callback) {
     if (client.state !== 'closed') {
@@ -35,12 +42,15 @@ webserver.use(browserChannel({webserver: webserver}, function (client) {
     stream.push(data);
   });
   stream.on('error', function (msg) {
+    console.log('ERROR', msg, client.id);
     client.stop();
   });
   client.on('close', function (reason) {
+    console.log('CLOSE', reason, client.id);
     stream.emit('close');
     stream.emit('end');
     stream.end();
+    delete clientsById[client.id];
   });
   return share.listen(stream);
 }));

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "CodeMirror bindings for ShareJS",
   "main": "share-codemirror.js",
   "scripts": {
-    "pretest": "cd node_modules/share && npm install",
+    "pretest": "cd node_modules/share && UGLIFY=../../node_modules/.bin/uglifyjs make webclient/share.uncompressed.js",
     "test": "node_modules/.bin/mocha"
   },
   "repository": {
@@ -21,14 +21,17 @@
     "url": "https://github.com/share/share-codemirror/issues"
   },
   "devDependencies": {
-    "share": "v0.7.0-alpha9",
-    "codemirror": "~4.0.3",
+    "browserchannel": "~1.2.0",
+    "codemirror": "~4.2.0",
     "connect": "~2.11.0",
-    "browserchannel": "~1.0.8",
-    "livedb": "~0.2.6",
-    "livedb-mongo": "~0.2.5",
-    "mocha": "~1.14.0",
-    "jsdom": "~0.8.8",
-    "istanbul": "~0.1.44"
+    "istanbul": "~0.2.10",
+    "jsdom": "~0.10.6",
+    "livedb": "git://github.com/share/livedb.git#f03086cdf51ffc80c725f105c7236c2997d74eac",
+    "livedb-mongo": "~0.3.2",
+    "lodash": "~2.4.1",
+    "mocha": "~1.20.0",
+    "share": "git://github.com/share/ShareJS.git#94dd9e0659c9b6953ba888f5dde8ce223a71f2ec",
+    "tinycolor2": "^0.10.0",
+    "uglify-js": "~2.4.13"
   }
 }