From 291c5154c61be8bd052d221f5b5c311562a8bcd2 Mon Sep 17 00:00:00 2001
From: Jan Oberhauser <jan.oberhauser@gmail.com>
Date: Mon, 20 Dec 2021 23:41:45 +0100
Subject: [PATCH] :zap: Change background color and add $json autocomplete

---
 .../editor-ui/src/components/CodeEdit.vue     | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/CodeEdit.vue b/packages/editor-ui/src/components/CodeEdit.vue
index bc4ac6fb45..990d04123d 100644
--- a/packages/editor-ui/src/components/CodeEdit.vue
+++ b/packages/editor-ui/src/components/CodeEdit.vue
@@ -14,8 +14,6 @@
 </template>
 
 <script lang="ts">
-// @ts-ignore
-// import PrismEditor from 'vue-prism-editor';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 import { genericHelpers } from '@/components/mixins/genericHelpers';
@@ -57,6 +55,16 @@ export default mixins(genericHelpers).extend({
 				readOnly: this.isReadOnly,
 			});
 
+			monaco.editor.defineTheme('myTheme', {
+				base: 'vs',
+				inherit: true,
+				rules: [{ background: 'f5f2f0' }],
+				colors: {
+					'editor.background': '#f5f2f0',
+				},
+			});
+			monaco.editor.setTheme('myTheme');
+
 			this.monacoInstance.onDidChangeModelContent(() => {
 				const model = this.monacoInstance!.getModel();
 
@@ -84,11 +92,17 @@ export default mixins(genericHelpers).extend({
 				}
 			}
 
+			const autoCompleteItems = [
+				`/**\n\`\`\`\nconst items = ${JSON.stringify(autocompleteData, null, 2)}\n\`\`\`\n*/`,
+				`const items = ${JSON.stringify(autocompleteData)}`,
+			];
+
+			if (autocompleteData.length) {
+				autoCompleteItems.push(`const $json = ${JSON.stringify(autocompleteData[0].json)}`);
+			}
+
 			this.monacoLibrary = monaco.languages.typescript.javascriptDefaults.addExtraLib(
-				[
-					`/**\n\`\`\`\nconst items = ${JSON.stringify(autocompleteData, null, 2)}\n\`\`\`\n*/`,
-					`const items = ${JSON.stringify(autocompleteData)}`,
-				].join('\n'),
+				autoCompleteItems.join('\n'),
 			);
 		},
 	},