Added CodeMirror syntax highlighting in backend editor

[kaffolder7]

I LOVE the simplicity of the new backend editor in version 0.8.2, but thought it could be enhanced by adding in live syntax highlighting. As of right now, before this pull request, there is no differentiation between HTML markup and regular text entered into the editor (the Admin panel's form textarea field). This pull request aims to resolve this.

I decided to fork the repo and add in the CodeMirror library. CodeMirror is a JavaScript component that provides a IDE–like code editor in the browser. It colors your code in real–time for the language you are coding in and also helps with indentation. Some real–world sites that utilize the CodeMirror library include jsbin.com, Light Table, Adobe Brackets, Google Apps Script, Codev, Prose.io, and WebGL playground, JSHint, SQLFiddle, and CSSDeck to name a few.

I have supported the following languages, as these in my opinion are most–likely to be used in Anchor's backend editor: XML, CSS, HTML, JavaScript, PHP, and general C-Like language support. Additional language support is possible, but I kept the number of supported languages down in my implementation to keep the size and number of files loaded in to a minimum.

[daviddarnes]

Nice, but there's a few problems with this. The Codemirror addition has almost doubled the file size of Anchor, its small footprint is one of its key attributes. Additionally the back end editor only allows HTML in the content (markdown is advised though), CSS and Javascript in their relevant custom fields. Syntax highlighting for other languages is pointless.

Best thing I can suggest is that you cut down the library to just CSS and Javascript in the relevant fields. HTML for the main content isn't needed as markdown is better for it.

Its a great idea to add, however we can't be dropping in massive libraries like this without careful assessment.

[kaffolder7]

Just to clarify, because I'm a little confused in your response. I agree entirely with you that Anchor's key attribute of remaining small is awesome, and that's one of its selling points in my opinion that made me even choose to use Anchor over other CMS' out there for my own personal blog.

Do you see any point in adding this feature of syntax highlighting, or do you think the benefit is negligible? You won't hurt my feelings if it does not get merged. I'm a loyal Anchor user and developer and can always keep my own fork going with stuff I want to add in to my personal installs. That's the whole benefit to open source, am I right? :)

I just figured I would send you a pull request since I see others benefiting from this functionality. I have gone ahead and cut corners as best I can and pushed updated code to the master branch on my fork. I minified the 'codemirror.css' file to save some space since it does not need touched and styles can be overwritten with the 'custom.css' theme file. I also pruned all of the supported languages and left only HTML per your advisement above. Totally agree with you that there's no point in supporting all of those language modes in the editor. (I think I just got carried away when I was adding modes.) I also combined the 'codemirror.js' library file and then the HTML mode javascript and minified those together. I used Google's Closure Compiler service to bring these down as much as I could in size.

I think you'll notice a big difference in file size to what I had originally, but again, it's completely up to you on whether this feature is merged or not. If you think it will benefit other users, feel free to include it! Thanks @daviddarnes !

[daviddarnes]

I think its a great addition, sorry I should have made that a little stronger in my response than blabbing negatively.

I didn't say that though? I said get rid of all but CSS and Javascript, and get rid of HTML too as Anchor mainly likes Markdown for the content.

Well done with the compression, noticed the reduction! Did you change the font in the Custom CSS and Custom JS fields to a mono-spaced font? I did a pull request for this in the dev branch because its easier to read code and see indentation. Also does Codemirror use any libraries or is it self contained?

You're welcome, sorry to harp on.

[saltandvinegarcrisps]

I think codemirror is a little over the top for the features it has, I think at most all we need is the ability to use the tab key in the textareas? We had a lot of talk about different syntax highlighters etc a while ago and ended up not going with either. #39

[daviddarnes]

Makes sense. I suppose the bloat of it out weighs the benefit, plus the coding options in posts are only for small additions and changes.

[saltandvinegarcrisps]

@kyleaffolder if you can submit a pull for just tab keys in textareas using zepto that would be awesome.

[kaffolder7]

@rwarasaurus I'm not familiar with the zepto library, but I'll take a look at it. I can't believe I had never heard of zepto until I looked into Anchor. This may very well be my jQuery replacement that I use on future projects here out!

I am familiar with how to support tab keys in textareas using good old JavaScript, but it is a little more complex. Maybe I can translate my JavaScript solution to a zepto solution. We'll see!

[kaffolder7]

@rwarasaurus @daviddarnes Where can I include textarea tab support javascript? I originally thought of placing it in the admin.js file, but that doesn't appear to be loading in when I go to author or edit a post. Thoughts? Where would you like me to put it specifically?

[daviddarnes]

Take a look at the add / edit files for posts. There's some being loaded in but I remember they are for the field descriptions and the yet to be completed drag 'n' drop file uploading. Suggest that they need to be combined together with your tabbing code for an edit post js file. I'd say tabbing is for the custom css and js fields. Other fields won't need it.