import { action } from '@ember/object'; import { bind } from '@ember/runloop'; import codemirror from 'codemirror'; import Modifier from 'ember-modifier'; import 'codemirror/addon/edit/matchbrackets'; import 'codemirror/addon/selection/active-line'; import 'codemirror/addon/lint/lint.js'; import 'codemirror/addon/lint/json-lint.js'; import 'codemirror/mode/javascript/javascript'; export default class CodeMirrorModifier extends Modifier { didInstall() { this._setup(); } didUpdateArguments() { this._editor.setOption('readOnly', this.args.named.readOnly); if (!this.args.named.content) { return; } if (this._editor.getValue() !== this.args.named.content) { this._editor.setValue(this.args.named.content); } } @action _onChange(editor) { this.args.named.onUpdate(editor.getValue(), this._editor); } _setup() { if (this.element) { const editor = codemirror(this.element, { gutters: this.args.named.gutters || ['CodeMirror-lint-markers'], matchBrackets: true, lint: { lintOnChange: true }, showCursorWhenSelecting: true, styleActiveLine: true, tabSize: 2, // all values we can pass into the modifier extraKeys: this.args.named.extraKeys || '', lineNumbers: this.args.named.lineNumbers || true, mode: this.args.named.mode || 'application/json', readOnly: this.args.named.readOnly || false, theme: this.args.named.theme || 'hashi', value: this.args.named.content || '', viewportMargin: this.args.named.viewportMargin || '', screenReaderLabel: this.args.named.screenReaderLabel || '', }); editor.on('change', bind(this, this._onChange)); this._editor = editor; } } }