Using CodeMirror Version 5 in Ember

Last reviewed on March 19, 2023

This post covers how to wire up CodeMirror version 5 in an Ember application.

npm i codemirror@5
ember install ember-modifier
ember g component javascript-editor
ember g modifier codemirror

First, let's update the ember-cli-build.js file to include the CodeMirror CSS.

ember-cli-build.js

app.import('node_modules/codemirror/lib/codemirror.css');

Next, we'll invoke the component that we generated which will contain the JavaScript editor that we'll create through CodeMirror.

app/templates/application.hbs

<JavascriptEditor />

Let's update our component's template with a textarea and a codemirror modifier that we'll create.

app/templates/application.hbs

<textarea {{codemirror}}>const name = 'David';</textarea>

Finally, here is our codemirror modifier.

app/modifiers/codemirror.js

import { modifier } from 'ember-modifier';
import CodeMirror from 'codemirror';

export default modifier(function codemirror(textarea) {
  CodeMirror.fromTextArea(textarea, {
    lineNumbers: true,
  });
});

Screenshot of CodeMirror in Ember demo

Code: https://github.com/iamdtang/codemirror-v5-in-ember