Ember component for CodeMirror.
npm install ivy-codemirror
An Ember component for the excellent CodeMirror editor.
``sh`
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:
`sh`
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:
`handlebars`
{{ivy-codemirror value=myCode}}
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:
`handlebars`
{{ivy-codemirror value=myCode valueUpdated=(action "updateMyCode")}}
`javascript
// 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:
`handlebars`
{{ivy-codemirror value=myCode valueUpdated=(action (mut myCode))}}
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:
`handlebars`
{{ivy-codemirror options=(hash lineNumbers=true mode="javascript")}}
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:
`js`
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:
`js`
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:
`js`
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:
`sh`
git clone #
npm install
npm test
Or, to start a test server that continually runs (for development):
`sh``
ember test --server