An Ember component for the excellent CodeMirror editor.
JavaScript HTML CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
CHANGELOG.md
LICENSE.md
README.md
bower.json
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

ivy-codemirror

Build Status Ember Observer Score

An Ember component for the excellent CodeMirror editor.

Installation

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

Usage

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:

{{ivy-codemirror value=myCode}}

Data Down, Actions Up

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/templates/index.hbs -->
{{ivy-codemirror value=myCode valueUpdated=(action "updateMyCode")}}
// 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:

<!-- app/templates/index.hbs -->
{{ivy-codemirror value=myCode valueUpdated=(action (mut myCode))}}

Options

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:

{{ivy-codemirror options=(hash lineNumbers=true mode="javascript")}}

Themes

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.

Modes & Key Maps

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.

Addons

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.

Contributing

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>
yarn install
yarn test

Or, to start a test server that continually runs (for development):

ember test --server