Added CodeMirror support

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "ace-builds"]
 	path = ace-builds
 	url = https://github.com/ajaxorg/ace-builds.git
+[submodule "codemirror"]
+	path = codemirror
+	url = https://github.com/marijnh/codemirror

README.md

@@ -1,7 +1,7 @@
 meteor-sharejs [![Build Status](https://travis-ci.org/mizzao/meteor-sharejs.svg)](https://travis-ci.org/mizzao/meteor-sharejs)
 ==============
 
-Meteor smart package for transparently adding [ShareJS](https://github.com/share/ShareJS) editors to an app. Includes the [Ace editor](http://ace.c9.io/).
+Meteor smart package for transparently adding [ShareJS](https://github.com/share/ShareJS) editors to an app. Includes [CodeMirror](http://codemirror.net/) and the [Ace editor](http://ace.c9.io/).
 
 Demo app: http://documents.meteor.com ([source](demo))
 
@@ -26,11 +26,16 @@ Use this helper to get an Ace editor. Make sure you specify a size (via CSS) on
 {{> sharejsAce docid=docid id="editor"}}
 ```
 
+Use this helper to get a CodeMirror editor. 
+```
+{{> sharejsCM docid=docid id="editor"}}
+```
+
 The templates will clean themselves up when re-rendered (i.e., you have several documents and docid changes.)
 
 ## Client Configuration
 
-For the Ace editor, you can define `onRender` and `onConnect` callbacks in the options hash and use it to configure the editor. `onRender` is called when the editor is initially rendered, and `onConnect` is called after each successful connection to a document.
+For the Ace and CodeMirror editors, you can define `onRender` and `onConnect` callbacks in the options hash and use it to configure the editor. `onRender` is called when the editor is initially rendered, and `onConnect` is called after each successful connection to a document.
 
 ```
 {{> sharejsAce docid=document onRender=config onConnect=setMode id="editor"}}
@@ -147,7 +152,29 @@ You can access the [ShareJS Server API](https://github.com/share/ShareJS/wiki/Se
 
 Please submit pull requests for better features and cooperation!
 
+## Problems Running Demo
+
+If you get an incompatibility error while installing or running the demo:
+```
+mizzao:sharejs: INCOMPATIBLE WITH METEOR 0.9.0 OR LATER
+```
+```
+W20140913-03:54:33.561(-4)? (STDERR) The package mizzao:sharejs at 0.6.0 is incompatible with Meteor 0.9.0 or later. 
+W20140913-03:54:33.897(-4)? (STDERR) If a new, compatible version of this package exists, running 'meteor update' should cause you to update.  
+```
+try cloning and running the demo like this instead:
+```
+git clone --recursive https://github.com/mizzao/meteor-sharejs
+mv meteor-sharejs/demo docs
+mkdir docs/packages
+mv meteor-sharejs docs/packages/mizzao:sharejs
+cd docs
+meteor
+```
+
+
 ## Contributors
 
 * Andrew Mao (https://github.com/mizzao/)
 * Karan Batra-Daitch (https://github.com/kbdaitch)
+* CJ Carr (https://github.com/cortexelus)

demo/client/client.coffee

@@ -48,10 +48,20 @@ Template.editor.events =
     Session.set("editorType", e.target.value)
 
 Template.editor.textarea = -> Session.equals("editorType", "textarea")
+Template.editor.cm = -> Session.equals("editorType", "cm")
+Template.editor.ace = -> Session.equals("editorType", "ace")
 
-Template.editor.config = ->
+Template.editor.configAce = ->
   (ace) ->
     # Set some reasonable options on the editor
     ace.setTheme('ace/theme/monokai')
     ace.setShowPrintMargin(false)
     ace.getSession().setUseWrapMode(true)
+
+Template.editor.configCM = ->
+  (cm) ->
+    cm.setOption("theme", "default")
+    cm.setOption("lineNumbers", true)
+    cm.setOption("lineWrapping", true)
+    cm.setOption("smartIndent", true)
+    cm.setOption("indentWithTabs", true)

demo/client/client.styl

@@ -19,8 +19,8 @@ body
 .editor-container
     position: relative
 
-#editor
-    box-shadow 0px 0px 5px 5px rgba(0, 0, 0, 0.4);
+#editor, .CodeMirror
+    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.4);
 
 #editor.shareJSAce
   position: absolute
@@ -29,6 +29,15 @@ body
   top: 60px
   bottom: 0
 
+.CodeMirror
+  position: absolute
+  left: 0
+  right: 0
+  top: 60px
+  width: 100%
+  height: 80%
+  bottom: 0
+
 #editor.shareJSText
   width: 100%
   height: 80%

demo/client/index.html

@@ -1,8 +1,9 @@
 <head>
   <title>Meteor Docs!</title>
+
 </head>
 
-<body>
+<body>  
     {{> forkme}}
     {{> main}}
 </body>
@@ -55,7 +56,11 @@ <h3>...or start a new one:</h3>
         {{#if textarea}}
             {{> sharejsText docid=this id="editor"}}
         {{else}}
-            {{> sharejsAce docid=this onRender=config id="editor"}}
+            {{#if cm}}
+                {{> sharejsCM docid=this onRender=configCM id="editor"}}
+            {{else}}
+                {{> sharejsAce docid=this onRender=configAce id="editor"}}
+            {{/if}}
         {{/if}}
     {{/with}}
 </template>
@@ -70,6 +75,9 @@ <h3>...or start a new one:</h3>
             <label class="radio-inline">
                 <input type="radio" name="editor" value="ace" checked={{editorType "ace"}}> Ace Editor
             </label>
+            <label class="radio-inline">
+                <input type="radio" name="editor" value="cm" checked={{editorType "cm"}}> CodeMirror
+            </label>
             <label class="radio-inline">
                 <input type="radio" name="editor" value="textarea" checked={{editorType "textarea"}}>Textarea
             </label>

package.js

@@ -79,10 +79,26 @@ Package.onUse(function (api) {
   var aceSettings = getFilesFromFolder("mizzao:sharejs", "ace-builds/src");
   api.addFiles(_.without(aceSettings, aceJS), 'client', {isAsset: true});
 
+  // CM editor for the client
+  api.addFiles([
+    'codemirror/lib/codemirror.js',
+    'codemirror/lib/codemirror.css',
+    'codemirror/theme/monokai.css',
+    'codemirror/addon/fold/foldgutter.css',
+    'codemirror/addon/fold/foldcode.js',
+    'codemirror/addon/fold/foldgutter.js',
+    'codemirror/addon/fold/indent-fold.js',
+    'codemirror/addon/hint/show-hint.js',
+    'codemirror/addon/display/placeholder.js',
+    'codemirror/addon/hint/show-hint.css'
+    /* include any extra codemirror ADDONS or MODES or THEMES here !!!! */
+  ], 'client', { bare: true });
+
   // Add the ShareJS connectors
   // TODO: a really smart package would not push both of these to the client depending on use case
   api.addFiles('.npm/package/node_modules/share/webclient/ace.js', 'client');
   api.addFiles('.npm/package/node_modules/share/webclient/textarea.js', 'client');
+  api.addFiles('.npm/package/node_modules/share/webclient/cm.js', 'client');
 
   // Our files
   api.addFiles([

sharejs-client.coffee

@@ -118,6 +118,41 @@ class ShareJSAceConnector extends ShareJSConnector
     @ace?.destroy()
     @ace = null
 
+class ShareJSCMConnector extends ShareJSConnector
+  constructor: (parentView) ->
+    super
+    params = Blaze.getData(parentView)
+    @configCallback = params.onRender || params.callback # back-compat
+    @connectCallback = params.onConnect
+
+  createView: ->
+    return Blaze.With(Blaze.getData, -> Template._sharejsCM)
+
+  rendered: (element) ->
+    super
+    @cm = CodeMirror.fromTextArea(element)
+    @configCallback?(@cm)
+
+  connect: ->
+    @cm.readOnly = true
+    super
+
+  attach: (doc) ->
+    super
+    doc.attach_cm(@cm)
+    @cm.readOnly = false
+    @connectCallback?(@cm)
+
+  disconnect: ->
+    @cm?.detach_share?()
+    super
+
+  destroy: ->
+    super
+    # Meteor._debug "destroying cm editor"
+    @cm?.toTextArea()
+    @cm = null
+
 class ShareJSTextConnector extends ShareJSConnector
   createView: ->
     return Blaze.With(Blaze.getData, -> Template._sharejsText)
@@ -148,6 +183,10 @@ UI.registerHelper "sharejsAce", new Template('sharejsAce', ->
   return new ShareJSAceConnector(this).create()
 )
 
+UI.registerHelper "sharejsCM", new Template('sharejsCM', ->
+  return new ShareJSCMConnector(this).create()
+)
+
 UI.registerHelper "sharejsText", new Template('sharejsText', ->
   return new ShareJSTextConnector(this).create()
 )

sharejs-templates.html

@@ -2,6 +2,10 @@
     <textarea id="{{id}}" data-docid="{{docid}}" class="shareJSText" disabled>Loading...</textarea>
 </template>
 
+<template name="_sharejsCM">
+    <textarea id="{{id}}" data-docid="{{docid}}" class="shareJSCM">Loading...</textarea>
+</template>
+
 <template name="_sharejsAce">
     <div id="{{id}}" data-docid="{{docid}}" class="shareJSAce">Loading...</div>
 </template>