From 4de607919bf3fded72e356685523e6aa1044185c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Varela?= <joselcvarela@gmail.com>
Date: Fri, 3 May 2024 14:07:03 +0100
Subject: [PATCH] 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                |  5 +++++
 app/src/interfaces/input-code/input-code.vue | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 .changeset/wise-donuts-sit.md

diff --git a/.changeset/wise-donuts-sit.md b/.changeset/wise-donuts-sit.md
new file mode 100644
index 0000000000..6f42bce901
--- /dev/null
+++ b/.changeset/wise-donuts-sit.md
@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Added support to define single interpolation value in code interface
diff --git a/app/src/interfaces/input-code/input-code.vue b/app/src/interfaces/input-code/input-code.vue
index 711e064a10..924526ae52 100644
--- a/app/src/interfaces/input-code/input-code.vue
+++ b/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>