An Ember component for the excellent CodeMirror editor.
ember install ivy-codemirror # install:addon for Ember CLI < 0.2.3
If you are using a version of Ember prior to 2.3, you will also need to install the ember-hash-helper-polyfill
addon:
ember install ember-hash-helper-polyfill
This addon provides an ivy-codemirror
component which wraps a CodeMirror editor. You can set its value
property to the code that you want to be displayed:
In the spirit of Data Down, Actions Up, the value
will not be modified directly. Instead, when a CodeMirror change
event occurs, a valueUpdated
action will be sent, and will be given the new value as an argument. You might implement this action handler like so:
// app/controllers/index.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
updateMyCode(newCode) {
this.set('myCode', newCode);
}
}
});
However, for this simple use case, Ember provides the built-in mut
helper. You could use this helper in your template instead of writing the action handler yourself, like so:
ivy-codemirror
also allows passing options to CodeMirror via the options
property. The easiest way to do this is via Ember's built-in hash
helper, like so:
By default, only CodeMirror's default theme (found in codemirror.css
) is included. Additional themes can be included by specifying them in your ember-cli-build.js
file:
var app = new EmberApp({
codemirror: {
themes: ['solarized', 'twilight']
}
});
The example above would include themes/solarized.css
and themes/twilight.css
into vendor.css
.
In addition to themes, you can also include language modes and key maps via the modes
and keyMaps
options, respectively:
var app = new EmberApp({
codemirror: {
modes: ['javascript'],
keyMaps: ['vim']
}
});
The example above would include mode/javascript/javascript.js
and keymap/vim.js
into vendor.js
.
In addition to the above, you can also include any CodeMirror addon files like so:
var app = new EmberApp({
codemirror: {
addonFiles: ['lint/lint.css', 'lint/lint.js']
}
});
The above example would add lint/lint.css
to vendor.css
and lint/lint.js
to vendor.js
.
Fork this repo, make a new branch, and send a pull request. Make sure your change is tested or it won't be merged.
To run tests:
git clone # <this repo>
npm install
npm test
Or, to start a test server that continually runs (for development):
ember test --server