72 lines
2.1 KiB
JavaScript
72 lines
2.1 KiB
JavaScript
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';
|
|
import 'codemirror/mode/ruby/ruby';
|
|
|
|
export default class CodeMirrorModifier extends Modifier {
|
|
get autofocus() {
|
|
if (Object.hasOwn({ ...this.args.named }, 'autofocus')) {
|
|
// spread (...) because proxy, and because Ember over-eagerly prevents named prop lookups for modifier args.
|
|
return this.args.named.autofocus;
|
|
} else {
|
|
return !this.args.named.readOnly;
|
|
}
|
|
}
|
|
|
|
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 || '',
|
|
});
|
|
|
|
if (this.autofocus) {
|
|
editor.focus();
|
|
}
|
|
|
|
editor.on('change', bind(this, this._onChange));
|
|
|
|
this._editor = editor;
|
|
}
|
|
}
|
|
}
|