ui: [BUGFIX] Fix KV Code Editor syntax loading (#10605)
This commit adds a bit of string wrangling to avoid the keys in our javascript source file also being transformed. Additionally, whilst looking at this we decided that Maps are a better dictionary than javascript objects, so we moved to use those here also (but this doesn't affect the issue)
This commit is contained in:
parent
af0e6be943
commit
4f6674f16f
|
@ -0,0 +1,3 @@
|
||||||
|
```release-note:bug
|
||||||
|
ui: Fix KV editor syntax highlighting
|
||||||
|
```
|
|
@ -3,17 +3,19 @@ export function initialize(application) {
|
||||||
const appName = application.application.name;
|
const appName = application.application.name;
|
||||||
const doc = application.lookup('service:-document');
|
const doc = application.lookup('service:-document');
|
||||||
// pick codemirror syntax highlighting paths out of index.html
|
// pick codemirror syntax highlighting paths out of index.html
|
||||||
const fs = JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent);
|
const fs = new Map(
|
||||||
|
Object.entries(JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent))
|
||||||
|
);
|
||||||
// configure syntax highlighting for CodeMirror
|
// configure syntax highlighting for CodeMirror
|
||||||
CodeMirror.modeURL = {
|
CodeMirror.modeURL = {
|
||||||
replace: function(n, mode) {
|
replace: function(n, mode) {
|
||||||
switch (mode) {
|
switch (mode.trim()) {
|
||||||
case 'javascript':
|
case 'javascript':
|
||||||
return fs['codemirror/mode/javascript/javascript.js'];
|
return fs.get(['codemirror', 'mode', 'javascript', 'javascript.js'].join('/'));
|
||||||
case 'ruby':
|
case 'ruby':
|
||||||
return fs['codemirror/mode/ruby/ruby.js'];
|
return fs.get(['codemirror', 'mode', 'ruby', 'ruby.js'].join('/'));
|
||||||
case 'yaml':
|
case 'yaml':
|
||||||
return fs['codemirror/mode/yaml/yaml.js'];
|
return fs.get(['codemirror', 'mode', 'yaml', 'yaml.js'].join('/'));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -34,7 +34,7 @@ ${environment === 'production' ? `{{jsonEncode .}}` : JSON.stringify(config.oper
|
||||||
<script type="application/json" data-consul-ui-fs>
|
<script type="application/json" data-consul-ui-fs>
|
||||||
{
|
{
|
||||||
"text-encoding/encoding-indexes.js": "${rootURL}assets/encoding-indexes.js",
|
"text-encoding/encoding-indexes.js": "${rootURL}assets/encoding-indexes.js",
|
||||||
"text-encoding/encoding.js": "${rootURL}assets/encoding-indexes.js",
|
"text-encoding/encoding.js": "${rootURL}assets/encoding.js",
|
||||||
"css.escape/css.escape.js": "${rootURL}assets/css.escape.js",
|
"css.escape/css.escape.js": "${rootURL}assets/css.escape.js",
|
||||||
"codemirror/mode/javascript/javascript.js": "${rootURL}assets/codemirror/mode/javascript/javascript.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/ruby/ruby.js": "${rootURL}assets/codemirror/mode/ruby/ruby.js",
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
(function(doc, appName) {
|
(function(doc, appName) {
|
||||||
const fs = JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent);
|
const fs = new Map(
|
||||||
|
Object.entries(JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent))
|
||||||
|
);
|
||||||
const appendScript = function(src) {
|
const appendScript = function(src) {
|
||||||
var $script = doc.createElement('script');
|
var $script = doc.createElement('script');
|
||||||
$script.src = src;
|
$script.src = src;
|
||||||
|
@ -8,11 +10,11 @@
|
||||||
|
|
||||||
// polyfills
|
// polyfills
|
||||||
if (!('TextDecoder' in window)) {
|
if (!('TextDecoder' in window)) {
|
||||||
appendScript(fs['text-encoding/encoding-indexes.js']);
|
appendScript(fs.get(`${['text-encoding', 'encoding-indexes'].join('/')}.js`));
|
||||||
appendScript(fs['text-encoding/encoding.js']);
|
appendScript(fs.get(`${['text-encoding', 'encoding'].join('/')}.js`));
|
||||||
}
|
}
|
||||||
if (!(window.CSS && window.CSS.escape)) {
|
if (!(window.CSS && window.CSS.escape)) {
|
||||||
appendScript(fs['css.escape/css.escape.js']);
|
appendScript(fs.get(`${['css.escape', 'css.escape'].join('/')}.js`));
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|
Loading…
Reference in New Issue