luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Add XML syntax highlighting to key/value editor (#11785) 

* ui: Add XML syntax highlighting to key/value editor

* ui: Make explicit options that are specific to XML for clarity
This commit is contained in:
James Tran 2022-01-04 11:24:09 -05:00 committed by GitHub
parent 1779246257
commit 91abfe4b01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 31 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/packages/consul-ui/app/components/code-editor/index.js
View File

@ -31,11 +31,18 @@ export default Component.extend({
}
},
setMode: function(mode) {
set(this, 'options', {
let options = {
...DEFAULTS,
mode: mode.mime,
readOnly: this.readonly,
});
};
if (mode.name === 'XML') {
options.htmlMode = mode.htmlMode;
options.matchClosing = mode.matchClosing;
options.alignCDATA = mode.alignCDATA;
}
set(this, 'options', options);
const editor = this.editor;
editor.setOption('mode', mode.mime);
this.helper.lint(editor, mode.mode);

4
ui/packages/consul-ui/app/components/code-editor/skin.scss
View File

@ -128,6 +128,10 @@ $syntax-dark-gray: #535f73;
color: var(--syntax-packer);
}
span.cm-error {
color: var(--syntax-red);
}
span.cm-attribute {
color: #9fca56;
}

2
ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js
View File

@ -16,6 +16,8 @@ export function initialize(application) {
return fs.get(['codemirror', 'mode', 'ruby', 'ruby.js'].join('/'));
case 'yaml':
return fs.get(['codemirror', 'mode', 'yaml', 'yaml.js'].join('/'));
case 'xml':
return fs.get(['codemirror', 'mode', 'xml', 'xml.js'].join('/'));
}
},
};

10
ui/packages/consul-ui/app/services/code-mirror/linter.js
View File

@ -16,6 +16,16 @@ const MODES = [
alias: ['jruby', 'macruby', 'rake', 'rb', 'rbx'],
},
{ name: 'YAML', mime: 'text/x-yaml', mode: 'yaml', ext: ['yaml', 'yml'], alias: ['yml'] },
{
name: 'XML',
mime: 'application/xml',
mode: 'xml',
htmlMode: false,
matchClosing: true,
alignCDATA: false,
ext: ['xml'],
alias: ['xml'],
},
];
export default class LinterService extends Service {

4
ui/packages/consul-ui/ember-cli-build.js
View File

@ -206,6 +206,10 @@ module.exports = function(defaults, $ = process.env) {
app.import('node_modules/codemirror/mode/yaml/yaml.js', {
outputFile: 'assets/codemirror/mode/yaml/yaml.js',
});
// XML linting support. Possibly dynamically loaded via CodeMirror linting. See services/code-mirror/linter.js
app.import('node_modules/codemirror/mode/xml/xml.js', {
outputFile: 'assets/codemirror/mode/xml/xml.js',
});
// metrics-providers
app.import('vendor/metrics-providers/consul.js', {
outputFile: 'assets/metrics-providers/consul.js',

3
ui/packages/consul-ui/lib/startup/templates/body.html.js
View File

@ -38,7 +38,8 @@ ${environment === 'production' ? `{{jsonEncode .}}` : JSON.stringify(config.oper
"css.escape/css.escape.js": "${rootURL}assets/css.escape.js",
"codemirror/mode/javascript/javascript.js": "${rootURL}assets/codemirror/mode/javascript/javascript.js",
"codemirror/mode/ruby/ruby.js": "${rootURL}assets/codemirror/mode/ruby/ruby.js",
"codemirror/mode/yaml/yaml.js": "${rootURL}assets/codemirror/mode/yaml/yaml.js"
"codemirror/mode/yaml/yaml.js": "${rootURL}assets/codemirror/mode/yaml/yaml.js",
"codemirror/mode/xml/xml.js": "${rootURL}assets/codemirror/mode/xml/xml.js"
}
</script>
<script data-app-name="${appName}" data-${appName}-services src="${rootURL}assets/consul-ui/services.js"></script>