App: Allow interpolation string as the only value on input-code int…

…erface (#22318)

Co-authored-by: Pascal Jufer <[email protected]>

.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>