Use JSON editor for JSON field type default value (directus#6171)

Fixes directus#6088
baranelitez · Jun 9, 2021 · e20ad6c · e20ad6c
1 parent 927b9f8
commit e20ad6c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/app/src/interfaces/input-code/input-code.vue b/app/src/interfaces/input-code/input-code.vue
@@ -10,9 +10,9 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import CodeMirror from 'codemirror';
+import CodeMirror, { ModeSpec } from 'codemirror';
 
-import { defineComponent, computed, ref, onMounted, watch } from 'vue';
+import { defineComponent, computed, ref, onMounted, watch, PropType } from 'vue';
 
 import 'codemirror/mode/meta';
 import 'codemirror/addon/search/searchcursor.js';
@@ -37,7 +37,7 @@ export default defineComponent({
 			default: false,
 		},
 		value: {
-			type: [String, Object, Array],
+			type: [String, Object, Array] as PropType<string | Record<string, any> | any[]>,
 			default: null,
 		},
 		altOptions: {
@@ -108,14 +108,14 @@ export default defineComponent({
 			}
 		});
 
-		const stringValue = computed(() => {
-			if (props.value == null) return '';
+		const stringValue = computed<string>(() => {
+			if (props.value === null) return '';
 
 			if (props.type === 'json') {
 				return JSON.stringify(props.value, null, 4);
 			}
 
-			return props.value;
+			return props.value as string;
 		});
 
 		watch(
@@ -141,7 +141,7 @@ export default defineComponent({
 
 					const jsonlint = (await import('jsonlint-mod')) as any;
 
-					codemirror.setOption('mode', { name: 'javascript', json: true });
+					codemirror.setOption('mode', { name: 'javascript', json: true } as ModeSpec<{ json: boolean }>);
 
 					CodeMirror.registerHelper('lint', 'json', (text: string) => {
 						const found: Record<string, any>[] = [];
@@ -155,17 +155,18 @@ export default defineComponent({
 								message: str,
 							});
 						};
+
 						if (text.length > 0) {
 							try {
 								jsonlint.parse(text);
-							} finally {
+							} catch {
 								// Do nothing
 							}
 						}
 						return found;
 					});
 				} else if (lang === 'plaintext') {
-					codemirror.setOption('mode', { name: null });
+					codemirror.setOption('mode', { name: 'plaintext' });
 				} else {
 					await importCodemirrorMode(lang);
 					codemirror.setOption('mode', { name: lang });

diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
@@ -89,7 +89,7 @@
 					placeholder="NULL"
 				/>
 				<v-textarea
-					v-else-if="['text', 'json'].includes(fieldData.type)"
+					v-else-if="['text'].includes(fieldData.type)"
 					class="monospace"
 					v-model="defaultValue"
 					placeholder="NULL"
@@ -126,6 +126,14 @@
 						},
 					]"
 				/>
+				<interface-input-code
+					v-else-if="fieldData.type === 'json'"
+					@input="defaultValue = $event"
+					:value="defaultValue || ''"
+					language="JSON"
+					placeholder="NULL"
+					type="json"
+				/>
 				<v-input v-else class="monospace" v-model="defaultValue" disabled placeholder="NULL" />
 			</div>