From c53a539fddd56ec922f809a03ead0441bed3926e Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Tue, 2 Nov 2021 02:35:59 +0800
Subject: [PATCH] Input code json (#9291)

* remove language selection for input code type JSON

* lint as json when type is json

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 app/src/interfaces/input-code/index.ts       | 87 ++++++++++++--------
 app/src/interfaces/input-code/input-code.vue |  2 +-
 2 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/app/src/interfaces/input-code/index.ts b/app/src/interfaces/input-code/index.ts
index 4994bebb84..a769024b56 100644
--- a/app/src/interfaces/input-code/index.ts
+++ b/app/src/interfaces/input-code/index.ts
@@ -1,3 +1,4 @@
+import { ExtensionsOptionsContext } from '@directus/shared/types';
 import { defineInterface } from '@directus/shared/utils';
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/meta';
@@ -37,43 +38,57 @@ export default defineInterface({
 	types: ['string', 'json', 'text', 'geometry'],
 	group: 'standard',
 	preview: PreviewSVG,
-	options: [
-		{
-			field: 'language',
-			name: '$t:language',
-			type: 'string',
-			meta: {
-				width: 'half',
-				interface: 'select-dropdown',
-				options: { choices },
-			},
-		},
-		{
-			field: 'lineNumber',
-			name: '$t:interfaces.input-code.line_number',
-			type: 'boolean',
-			meta: {
-				width: 'half',
-				interface: 'boolean',
-			},
-			schema: {
-				default_value: false,
-			},
-		},
-		{
-			field: 'template',
-			name: '$t:template',
-			type: 'text',
-			meta: {
-				width: 'full',
-				interface: 'input-code',
-				options: {
-					placeholder: '$t:interfaces.input-code.placeholder',
+	options: ({ field }: ExtensionsOptionsContext) => {
+		const sharedOptions = [
+			{
+				field: 'lineNumber',
+				name: '$t:interfaces.input-code.line_number',
+				type: 'boolean',
+				meta: {
+					width: 'half',
+					interface: 'boolean',
+				},
+				schema: {
+					default_value: false,
 				},
 			},
-			schema: {
-				default_value: null,
+			{
+				field: 'template',
+				name: '$t:template',
+				type: 'text',
+				meta: {
+					width: 'full',
+					interface: 'input-code',
+					options: {
+						placeholder: '$t:interfaces.input-code.placeholder',
+					},
+				},
+				schema: {
+					default_value: null,
+				},
 			},
-		},
-	],
+		];
+
+		const defaultOptions = [
+			{
+				field: 'language',
+				name: '$t:language',
+				type: 'string',
+				meta: {
+					width: 'half',
+					interface: 'select-dropdown',
+					options: { choices },
+				},
+			},
+			...sharedOptions,
+		];
+
+		const jsonOptions = [...sharedOptions];
+
+		if (field?.type === 'json') {
+			return jsonOptions;
+		}
+
+		return defaultOptions;
+	},
 });
diff --git a/app/src/interfaces/input-code/input-code.vue b/app/src/interfaces/input-code/input-code.vue
index 633ac0b093..47607d4aa1 100644
--- a/app/src/interfaces/input-code/input-code.vue
+++ b/app/src/interfaces/input-code/input-code.vue
@@ -135,7 +135,7 @@ export default defineComponent({
 			if (codemirror) {
 				const lang = props.language.toLowerCase();
 
-				if (lang === 'json') {
+				if (props.type === 'json' || lang === 'json') {
 					// @ts-ignore
 					await import('codemirror/mode/javascript/javascript.js');