selvagsz / ivy-codemirror

An Ember component for the excellent CodeMirror editor.

ivy-codemirror

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