CodeMirror integration

[mizzao]

As attempted by @robert-boulanger - however, he e-mailed me a bunch of files and I suggested he make a GitHub fork of this package instead.

Hi Andrew,

Your' right, it wasn't too hard to integrate it. I already was at this state when I wrote you yesterday. The reason it didn't work was the cm.js in the sharejs/webclient directory. It didn't work. I changed it with a different version and voila, all works now like expected.

Attached you find 
cm.js -> should replace the current one in sharejs/.npm/node_modules/share/webclient
package.js, sharejs-client.coffee, sharejs-templates.html  which I extended to handle CodeMirror as well
and client.coffee and index.html from your demo with CM integrated instead of ACE

It's up to you to integrate it into your current package. Packaging CodeMirror in the same way like Ace is a bit tricky, since the CM Checkout contains tons of html files meteor doesn't like. So I just integrated codemirror.js within the package and put the mode, css and keymap files into the client directory of the webapp.

However using CM instead of Ace allows you to create a collaborative texteditor also with non-monospaced fonts and allows simple formatting like we know from etherpad, which is great to write novels ;)

Thanks for your time and of course for developing sharejs-meteor in general.

Best regards

Robert 

My comments on the above:

• CM comes in an NPM package so we can just use that instead of the submodule for Ace
• Both Ace and CM should be served as assets and not sent to clients until requested
• Please clarify what you mean by "different version". What worked and what didn't?

[robert-boulanger]

My comments on the above:

• CM comes in an NPM package so we can just use that instead of the submodule for Ace

Whatever makes most sense, I agree

• Both Ace and CM should be served as assets and not sent to clients until requested

Sounds good, both components are really huge, so this makes sense as well

• Please clarify what you mean by "different version". What worked and what didn't?

After I integrated CM in package.js, sharejs-client.coffee, sharejs-templates.html I noticed, it was loaded and also texts have been loaded into the editor, but no change was written back. Due debugging I found out, that the eventhandler which is defined in share/webclient/cm.js was not triggered. Since I have a solution here based on pure sharejs ansd codemirror which works, I compared the cm.js which was installed by meteor-sharejs with the one I'm using. So I replaced it by the version which is working in the pure sharejs solution and voila, now it works in sharejs -meteor as well.

[mizzao]

Hi @robert-boulanger, would you please fork this package, add the files you e-mailed me into the fork, and commit that? I would really appreciate it.

This will also allow me to look over the code and attach line-comments before I attempt integration myself.

[mizzao]

It doesn't look like CodeMirror supports arbitrary rich text formatting, but more like dynamic rendering of a given syntax like Markdown. Is that how you're planning to use it?

[robert-boulanger]

Yes thats the way I'm using it. I'm using markdown syntax to write. Makes easy to find headings and comments. Headings will be in larger fonts as you type, Using fonts like Helvetica or Times makes it easier to read.

BTW: It's forked now and my changes are committed

[cben]

CodeMirror does support arbitrary classes on ranges of text: http://codemirror.net/doc/manual.html#markText It's successfully used by Firepad for quite good WYSIWYG: http://www.firepad.io/examples

(my own use case [http://mathdown.net] is also without formatting, just markdown that's syntax highlighted by CM; I'm currently using firepad by watching meteor-sharejs as possible open-backend replacement...)

On Thu, Jun 5, 2014 at 7:05 AM, robert-boulanger notifications@github.com wrote:

Yes thats the way I'm using it. I'm using markdown syntax to write. Makes easy to find headings and comments. Headings will be in larger fonts as you type, Using fonts like Helvetica or Times makes it easier to read.

BTW: It's forked now and my changes are committed

— Reply to this email directly or view it on GitHub https://github.com/mizzao/meteor-sharejs/issues/14#issuecomment-45222858 .

[mizzao]

This is mostly a note to myself - just took another look at this today, and I don't really want to tackle it without a better way to deal with deferred loading on Meteor. Sending both the (currently) 588k Ace code and 318k CM code (uncompressed) to the client is just a lot of unnecessary traffic.

A future approach will probably have the {{> shareJSAce}} or {{> shareJSCM}} helpers trigger a deferred load, and then render the actual editor when the client-side JS is ready.

We'll also need a way to make available all the auxiliary files in /addon, /mode, and /theme (probably using {isAsset: true} as we currently do for Ace). There are a bunch of irrelevant files in those directories as well, which we'll need to cull from inclusion.

[mizzao]

This is implemented via #27, and the package has been refactored to use sub-packages for the different editors, so that only the editor being used is being sent to the client.

Some issues still need to be ironed out - see https://github.com/mizzao/meteor-sharejs/pull/27#issuecomment-60039671.

[mizzao]

An acceptable package has been published to mizzao:sharejs-codemirror and can be currently used; see http://documents.meteor.com/. Please report any other problems in a new issue.