github.com/DerekStrickland/consul@v1.4.5/ui-v2/app/components/code-editor.js (about) 1 import Component from '@ember/component'; 2 import { get, set } from '@ember/object'; 3 import { inject as service } from '@ember/service'; 4 const DEFAULTS = { 5 tabSize: 2, 6 lineNumbers: true, 7 theme: 'hashi', 8 showCursorWhenSelecting: true, 9 gutters: ['CodeMirror-lint-markers'], 10 lint: true, 11 }; 12 export default Component.extend({ 13 settings: service('settings'), 14 helper: service('code-mirror'), 15 classNames: ['code-editor'], 16 syntax: '', 17 onchange: function(value) { 18 get(this, 'settings').persist({ 19 'code-editor': value, 20 }); 21 this.setMode(value); 22 }, 23 onkeyup: function() {}, 24 init: function() { 25 this._super(...arguments); 26 set(this, 'modes', get(this, 'helper').modes()); 27 }, 28 setMode: function(mode) { 29 set(this, 'options', { 30 ...DEFAULTS, 31 mode: mode.mime, 32 }); 33 const editor = get(this, 'editor'); 34 editor.setOption('mode', mode.mime); 35 get(this, 'helper').lint(editor, mode.mode); 36 set(this, 'mode', mode); 37 }, 38 didInsertElement: function() { 39 set(this, 'editor', get(this, 'helper').getEditor(this.element)); 40 get(this, 'settings') 41 .findBySlug('code-editor') 42 .then(mode => { 43 const modes = get(this, 'modes'); 44 const syntax = get(this, 'syntax'); 45 if (syntax) { 46 mode = modes.find(function(item) { 47 return item.name.toLowerCase() == syntax.toLowerCase(); 48 }); 49 } 50 mode = !mode ? modes[0] : mode; 51 this.setMode(mode); 52 }); 53 }, 54 didAppear: function() { 55 get(this, 'editor').refresh(); 56 }, 57 });