Skip to content

Notes on CodeMirror

njx edited this page Oct 30, 2012 · 20 revisions

Note: This document is somewhat out of date. It will be updated once we've merged with CodeMirror v3. See CodeMirror v3 Integration for more info.

The Brackets fork of CodeMirror has a number of fixes and features that we've added in order to support Brackets. We're working with Marijn Haverbeke to get these into the main CodeMirror master.

Merged features

  • Block selection. Originally, if you selected multiple lines in CodeMirror, the right edge of the selection highlight was "ragged", following the right edge of each selected line. We submitted a pull request that makes block selection extend all the way to the right edge of the editor window as in other code editors, and it was merged into master (thanks Marijn!).
  • Flicker-free scrolling. CodeMirror has virtualized scrolling, meaning that it only renders the visible portion of the document (plus some amount of buffer above and below). Currently, this scrolling is flickery in some browsers. We've modified it to reduce flicker, and submitted a pull request which has been merged into CodeMirror master.

We've also had a few smaller bug fixes merged in.

Upcoming features

  • Inline widgets. In order to support the Quick Edit feature in Brackets, we added a way to insert "inline widgets" into a CodeMirror editor. Inline widgets are attached to a particular line, and move/scroll as the document is edited/scrolled. We're planning to submit a pull request for this as soon as the flicker-free scrolling code has been merged.

We've also made a number of smaller bug fixes and changes that we'll submit once inline editors are out of the way. Going forward, we intend to keep in much closer sync with CodeMirror master.

Future features

One other major feature we'd like to see in CodeMirror is a separation between the model and the view. In Brackets, we can't easily separate our document and editor architectures because the two are unified in the CodeMirror editor; being able to create a text model without view instantiation would be very helpful.

Resources

  • Substance Surface A similar project inspired by CodeMirror but dedicated to prose instead of code. Emphasis on separation of concerns (input, carret, positioning, state/events, rendering) as described in this document.

Why CodeMirror

A common question we get is why we chose to leverage CodeMirror editor over the equally awesome Ajax Cloud9 Editor (ACE) for Brackets.

Our original prototype ran completely in the browser and was powered by the ACE editor. ACE editor is great and we even contributed some bug fixes back to the project. However, we wanted to do our due diligence and also researched using CodeMirror.

In the end we choose CodeMirror because it is licensed under MIT and that is the license we ultimately wanted for Brackets. We've been working closely with Marijn, the creator of CodeMirror, and have been submitting pull requests back to the main project. Our fork of CodeMirror is public and we plan to submit all our changes back to the main project (including the inline widget functionality used by Brackets's "Quick Edit" feature).

Clone this wiki locally