From 02e2eb09535c86e2463721eb95d4f73ed77a81f0 Mon Sep 17 00:00:00 2001 From: arnoudkooi Date: Mon, 8 Jul 2024 00:23:42 +0200 Subject: [PATCH] Version selection in code editor and #524 --- CHANGELOG.md | 7 +++ css/codeeditor.css | 2 +- inject.js | 17 +++--- js/monaco/codeeditor.js | 129 +++++++++++++++++++++++----------------- manifest.json | 2 +- 5 files changed, 91 insertions(+), 66 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1514517..929631d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # CHANGELOG.md +## 8.1.7.0 (2024-07-08) +Features: + - The Monaco code editor that opens when clicking the icon next to a script, now shows a select with versions. Selecting a version shows the diff editor with the selected version left and the current version right. + +Fixes / changes: + - Improve handling of sysid and search command hint clicks (Issue #524) + ## 8.1.5.7 (2024-07-03) Fixes / changes: - Update for issue snuLoadThemeVariables (Issue #523) diff --git a/css/codeeditor.css b/css/codeeditor.css index c2d6786..ed65c9c 100644 --- a/css/codeeditor.css +++ b/css/codeeditor.css @@ -179,7 +179,7 @@ button:hover { select.versions { - display: none; + /* display: none; */ min-width: 200px; padding: 5px; diff --git a/inject.js b/inject.js index a9a8e15..ff815cf 100644 --- a/inject.js +++ b/inject.js @@ -1361,7 +1361,7 @@ function snuSlashCommandShowHints(shortcut, selectFirst, snufilter, switchText, html += "
  • +" + (snuPropertyNames.length - snuMaxHints) + " ▼ show all
    • "; } else if (!html && shortcut.replace(/['" ]+/g, '').length == 32) { - html += "
  • /sys_id " + + html += "
  • /sysid " + "Instance search
    • " } else if (!html && /.*_([0-9a-fA-F]{32})$/.test(shortcut)) { @@ -1377,7 +1377,7 @@ function snuSlashCommandShowHints(shortcut, selectFirst, snufilter, switchText, // html += "
  • /" + shortcut + " " + // "Table search <encodedquery> (hit ► to search tables)
    • " } - if (snuPropertyNames.length == 0 && snufilter.length > 3) { + if (snuPropertyNames.length == 0 && snufilter.length > 3 && !/^\/?["']?([a-f0-9]{32})["']?$/.test(snufilter)) { html += "
  • /search " + "Search for: " + snufilter + "
    • "; } @@ -1402,18 +1402,19 @@ function snuSlashCommandShowHints(shortcut, selectFirst, snufilter, switchText, function setSnuFilter(ev) { var slshcmd = this.querySelector('.cmdkey').innerText; - if (!window.top.document.getElementById('snufilter').value.startsWith(slshcmd)) { - window.top.document.getElementById('snufilter').focus(); - window.top.document.getElementById('snufilter').value = slshcmd + ' '; - snuIndex = parseInt(this.dataset.index || 0); - } - else { + if (snufilter.value.startsWith(slshcmd) || snuPropertyNames.length == 0) { obj = { 'key': 'Enter' }; if (event.ctrlKey || event.metaKey) obj.ctrlKey = true; window.top.document.getElementById('snufilter').dispatchEvent(new KeyboardEvent('keydown', obj)); } + else { + snufilter.focus(); + snufilter.value = slshcmd + ' '; + snuIndex = parseInt(this.dataset.index || 0); + } } + function snuDiffXml(shortcut, instance = '') { var gsft = (document.querySelector("#gsft_main") || document.querySelector("[component-id]")?.shadowRoot.querySelector("#gsft_main")); var doc = gsft ? gsft.contentWindow : window; diff --git a/js/monaco/codeeditor.js b/js/monaco/codeeditor.js index 21ecd03..ca3199a 100644 --- a/js/monaco/codeeditor.js +++ b/js/monaco/codeeditor.js @@ -3,8 +3,10 @@ let data; let editor; let versionid; let theme; +let language = ''; chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { + console.log(message); if (message.event == 'fillcodeeditor') { if (hasLoaded) return; @@ -21,7 +23,7 @@ chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { }); - let theme = (message.command.snusettings?.slashtheme == "light") ? "vs-light" : "vs-dark"; + theme = (message.command.snusettings?.slashtheme == "light") ? "vs-light" : "vs-dark"; require(['vs/editor/editor.main'], () => { monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ noLib: true, @@ -77,27 +79,16 @@ chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { //monaco.languages.typescript.typescriptDefaults.setExtraLibs(libs.serverglobal); //doesnt work... - var lang = ''; - if (message.command.fieldType.includes('script')) lang = 'javascript'; - else if (message.command.fieldType.includes('json')) lang = 'json'; - else if (message.command.fieldType.includes('css')) lang = 'scss'; - else if (message.command.fieldType.includes('xml')) lang = 'xml'; - else if (message.command.fieldType.includes('html')) lang = 'html'; - else if (message.command.name.endsWith('psm1')) lang = 'powershell'; - - editor = monaco.editor.create(document.getElementById('container'), { - automaticLayout: true, - value: message.command.content, - language: lang, - theme: theme, - colorDecorators: true, - "bracketPairColorization.enabled": true - }); + + if (message.command.fieldType.includes('script')) language = 'javascript'; + else if (message.command.fieldType.includes('json')) language = 'json'; + else if (message.command.fieldType.includes('css')) language = 'scss'; + else if (message.command.fieldType.includes('xml')) language = 'xml'; + else if (message.command.fieldType.includes('html')) language = 'html'; + else if (message.command.name.endsWith('psm1')) language = 'powershell'; - addActions(editor); + changeToEditor(message.command.content); - editor.focus(); - versionid = editor.getModel().getAlternativeVersionId(); }); document.querySelector('#header').classList.add(theme); @@ -120,7 +111,7 @@ chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { document.title = data.instance.name + ' ' + data.table + ' ' + data.name; changeFavicon(sender.tab.favIconUrl); - //loadVersionSelect(); + loadVersionSelect(); } }); @@ -145,7 +136,7 @@ function addActions(editor) { contextMenuGroupId: "2_execution", precondition: "editorHasSelection", run: (editor) => { - let selection = editor.getModel().getValueInRange(editor.getSelection()); + let selection = getEditor().getModel().getValueInRange(editor.getSelection()); window.open('https://www.google.com/search?q=' + selection); } }) @@ -156,7 +147,7 @@ function addActions(editor) { label: "Set to Javascript", contextMenuGroupId: "3_lang", run: (editor) => { - monaco.editor.setModelLanguage(editor.getModel(), "javascript"); + monaco.editor.setModelLanguage(getEditor().getModel(), "javascript"); } }) editor.addAction({ @@ -164,7 +155,7 @@ function addActions(editor) { label: "Set to JSON", contextMenuGroupId: "3_lang", run: (editor) => { - monaco.editor.setModelLanguage(editor.getModel(), "json"); + monaco.editor.setModelLanguage(getEditor().getModel(), "json"); } }) editor.addAction({ @@ -172,7 +163,7 @@ function addActions(editor) { label: "Set to HTML", contextMenuGroupId: "3_lang", run: (editor) => { - monaco.editor.setModelLanguage(editor.getModel(), "html"); + monaco.editor.setModelLanguage(getEditor().getModel(), "html"); } }) editor.addAction({ @@ -180,7 +171,7 @@ function addActions(editor) { label: "Set to XML", contextMenuGroupId: "3_lang", run: (editor) => { - monaco.editor.setModelLanguage(editor.getModel(), "xml"); + monaco.editor.setModelLanguage(getEditor().getModel(), "xml"); } }) editor.addAction({ @@ -188,7 +179,7 @@ function addActions(editor) { label: "Set to CSS", contextMenuGroupId: "3_lang", run: (editor) => { - monaco.editor.setModelLanguage(editor.getModel(), "scss"); + monaco.editor.setModelLanguage(getEditor().getModel(), "scss"); } }) editor.addAction({ @@ -196,7 +187,7 @@ function addActions(editor) { label: "Set to GraphQL", contextMenuGroupId: "3_lang", run: (editor) => { - monaco.editor.setModelLanguage(editor.getModel(), "graphql"); + monaco.editor.setModelLanguage(getEditor().getModel(), "graphql"); } }) editor.addAction({ @@ -204,7 +195,7 @@ function addActions(editor) { label: "Set to Powershell", contextMenuGroupId: "3_lang", run: (editor) => { - monaco.editor.setModelLanguage(editor.getModel(), "powershell"); + monaco.editor.setModelLanguage(getEditor().getModel(), "powershell"); } }) editor.addAction({ @@ -212,13 +203,18 @@ function addActions(editor) { label: "Set to Plain text", contextMenuGroupId: "3_lang", run: (editor) => { - monaco.editor.setModelLanguage(editor.getModel(), "plain"); + monaco.editor.setModelLanguage(getEditor().getModel(), "plain"); } }) } +function getEditor() { + return (typeof editor.getValue !== 'undefined' )? + editor : editor.getModifiedEditor(); +} + async function loadVersionSelect(){ let myurl = data.instance.url + '/api/now/table/sys_update_version?sysparm_limit=250&sysparm_display_value=true&sysparm_fields=sys_id,sys_updated_on,sys_updated_by&sysparm_query=name=' + data.table + '_' + data.sys_id +'^ORDERBYDESCsys_updated_on'; @@ -246,24 +242,28 @@ async function loadVersionSelect(){ selectElement.addEventListener('change', async e => { let selected = e.target.value; - let url = data.instance.url + '/api/now/table/sys_update_version/' + selected + '?sysparm_fields=payload'; - let res = await snuFetchData(data.instance.g_ck, url); - let payload = res.result.payload; - - const parser = new DOMParser(); - const xmlDoc = parser.parseFromString(payload, "text/xml"); - - // Locate the