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:
John Cowen 2021-07-14 18:55:35 +01:00 committed by GitHub
parent af0e6be943
commit 4f6674f16f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 10 deletions

3
.changelog/10605.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:bug
ui: Fix KV editor syntax highlighting
```

View File

@ -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('/'));
} }
}, },
}; };

View File

@ -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",

View File

@ -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 {