Cameron Perera
c62eb751e4
* feat: 🎸 initial secret editor * feat: 🎸 Create Secret Editor for JSON Credentials ✅ Closes: ICU-6680 * style: 💄 Fix sass lint errors * style: 💄 Appease sass-lint rule for using --size in stylesheet * refactor: 💡 Set Icon size via component attribute * refactor: 💡 remove computed decorators for Secret Editor * refactor: 💡 update editor styles to using sizing variables * refactor: 💡 update styles and add comments * refactor: 💡 clean up styling for secret editor * refactor: 💡 update class names to be more verbose * chore: 🤖 move jsonlint import to rose index.js * refactor: 💡 remove duplicate margin style for skeleton body * refactor: 💡 add comments to SecretEditor component class * refactor: 💡 large updates to secret json editor * refactor: 💡 Move JSON Secret to form/field/ directory * style: 💄 fix padding for Secret Editor line numbers * chore: 🤖 disable property-sort-oder in .sasslintrc * refactor: 💡 reorder app.scss styles * test: 💍 Add integration tests for JSON Secret and Skeleton
95 lines
2.4 KiB
JavaScript
95 lines
2.4 KiB
JavaScript
import Modifier from 'ember-modifier';
|
|
import codemirror from 'codemirror';
|
|
|
|
import '../utilities/register-codemirror-hcl';
|
|
import 'codemirror/mode/go/go';
|
|
import 'codemirror/mode/javascript/javascript';
|
|
import 'codemirror/mode/shell/shell';
|
|
import 'codemirror/addon/edit/matchbrackets';
|
|
import 'codemirror/addon/edit/closebrackets';
|
|
import 'codemirror/addon/selection/active-line';
|
|
import 'codemirror/addon/display/autorefresh';
|
|
import 'codemirror/addon/lint/lint'
|
|
import 'codemirror/addon/lint/json-lint'
|
|
|
|
// Here we define default options for the editor.
|
|
// These should follow the codemirror configuration types
|
|
//
|
|
const _PRESET_DEFAULTS = {
|
|
theme: 'monokai',
|
|
lineNumbers: true,
|
|
cursorBlinkRate: 500,
|
|
matchBrackets: true,
|
|
autoCloseBrackets: true,
|
|
styleActiveLine: true,
|
|
mode: 'hcl',
|
|
};
|
|
|
|
/**
|
|
*
|
|
* `CodeMirror` implements a modifier that creates a CodeMirror instance on the provided element.
|
|
*
|
|
* The supported modes for the editor are currently: hcl, shell, go, javascript
|
|
* The supported themes are: monokai
|
|
*
|
|
* Sample usage:
|
|
* ```
|
|
* <div
|
|
* {{code-mirror value=@value onInput=@onInput options=@options}}
|
|
* />
|
|
* ```
|
|
*
|
|
* @class CodeMirror
|
|
*
|
|
*/
|
|
export default class CodeMirrorModifier extends Modifier {
|
|
_editor;
|
|
didSetup = false;
|
|
|
|
modify(element, _, named) {
|
|
if (!this.didSetup) {
|
|
this._setup(element, named);
|
|
this.didSetup = true;
|
|
}
|
|
|
|
if (this._editor?.getValue() !== named.value) {
|
|
this._editor?.setValue(named.value);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Called when editor contents change.
|
|
* @method CodeMirror#_onChange
|
|
* See documentation for the CodeMirror editor events, specifically 'change' event here https://codemirror.net/doc/manual.html#events.
|
|
*/
|
|
_onChange(editor, named) {
|
|
const { onInput } = named;
|
|
const newVal = editor.getValue();
|
|
|
|
onInput && onInput(newVal);
|
|
}
|
|
|
|
/**
|
|
* Initializes the editor with default configuration merged with consumer-provided configuration.
|
|
* Also registers a 'change' event on the editor.
|
|
* @method CodeMirror#_setup
|
|
*/
|
|
_setup(element, named) {
|
|
if (!element) {
|
|
throw new Error('CodeMirror modifier has no element');
|
|
}
|
|
|
|
const editor = codemirror(element, {
|
|
..._PRESET_DEFAULTS,
|
|
...(named.options || {}),
|
|
value: named.value,
|
|
});
|
|
|
|
editor.on('change', (editor) => {
|
|
this._onChange(editor, named);
|
|
});
|
|
|
|
this._editor = editor;
|
|
}
|
|
}
|