App: Allow interpolation string as the only value on input-code interface (#22318)

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

.changeset/wise-donuts-sit.md

@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Added support to define single interpolation value in code interface

app/src/interfaces/input-code/input-code.vue

@@ -19,6 +19,9 @@ import 'codemirror/addon/search/searchcursor.js';
 
 import 'codemirror/keymap/sublime.js';
 
+/** Regex to check for interpolation, e.g. `{{ $trigger }}` */
+const INTERPOLATION_REGEX = /^\{\{\s*[^}\s]+\s*\}\}$/;
+
 const props = withDefaults(
 	defineProps<{
 		value?: string | Record<string, unknown> | unknown[] | boolean | number | null;
@@ -76,6 +79,10 @@ onMounted(async () => {
 					return emit('input', null);
 				}
 
+				if (isInterpolation(content)) {
+					return emit('input', content);
+				}
+
 				try {
 					const parsedJson = JSON.parse(content);
 					if (typeof parsedJson !== 'string') return emit('input', parsedJson);
@@ -93,6 +100,8 @@ onMounted(async () => {
 const stringValue = computed(() => {
 	if (props.value === null || props.value === undefined) return '';
 
+	if (props.type === 'json' && isInterpolation(props.value)) return props.value;
+
 	return getStringifiedValue(props.value, props.type === 'json');
 });
 
@@ -126,6 +135,9 @@ async function setLanguage() {
 
 			CodeMirror.registerHelper('lint', 'json', (text: string) => {
 				const found: Record<string, any>[] = [];
+
+				if (isInterpolation(text)) return found;
+
 				const parser = jsonlint.parser;
 
 				parser.parseError = (str: string, hash: any) => {
@@ -278,6 +290,10 @@ function fillTemplate() {
 		emit('input', props.template);
 	}
 }
+
+function isInterpolation(value: any) {
+	return typeof value === 'string' && value.match(INTERPOLATION_REGEX);
+}
 </script>
 
 <template>