Fix data node usage in HTML content (baserow#4379)

Author: jonadeline

changelog/entries/unreleased/bug/4377_fix_formulainputfield_display_with_mixed_content.json

@@ -0,0 +1,9 @@
+{
+    "type": "bug",
+    "message": "Resolved a bug which prevented formula fields from working correctly with HTML content.",
+    "issue_origin": "github",
+    "issue_number": 4377,
+    "domain": "core",
+    "bullet_points": [],
+    "created_at": "2025-12-03"
+}

web-frontend/modules/core/components/formula/FormulaInputContext.vue

@@ -14,7 +14,7 @@
       @node-selected="$emit('node-selected', $event)"
       @node-unselected="$emit('node-unselected')"
     />
-    <div class="formula-input-context__footer">
+    <div v-if="advancedModeEnabled" class="formula-input-context__footer">
       <ButtonText
         type="primary"
         icon="iconoir-input-field"
@@ -59,6 +59,7 @@
 <script>
 import context from '@baserow/modules/core/mixins/context'
 import NodeExplorer from '@baserow/modules/core/components/nodeExplorer/NodeExplorer'
+import { BASEROW_FORMULA_MODES } from '@baserow/modules/core/formula/constants'
 
 export default {
   name: 'FormulaInputContext',
@@ -87,7 +88,7 @@ export default {
       required: false,
       default: 'advanced',
       validator: (value) => {
-        return ['advanced', 'simple'].includes(value)
+        return BASEROW_FORMULA_MODES.includes(value)
       },
     },
     /**
@@ -105,6 +106,15 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * An array of Baserow formula modes which the parent formula input
+     * component allows to be used. By default, in `FormulaInputField`,
+     * we will allow all modes.
+     */
+    enabledModes: {
+      type: Array,
+      required: true,
+    },
   },
   data() {
     return {
@@ -118,6 +128,9 @@ export default {
     }
   },
   computed: {
+    advancedModeEnabled() {
+      return this.enabledModes.includes('advanced')
+    },
     isAdvancedMode() {
       return this.mode === 'advanced'
     },

web-frontend/modules/core/components/formula/FormulaInputField.vue

@@ -22,6 +22,7 @@
       :has-value="value.length > 0"
       :allow-node-selection="allowNodeSelection"
       :nodes-hierarchy="nodesHierarchy"
+      :enabled-modes="enabledModes"
       @node-selected="handleNodeSelected"
       @node-unselected="unSelectNode"
       @mode-changed="handleModeChange"
@@ -75,6 +76,7 @@ import FormulaInputContext from '@baserow/modules/core/components/formula/Formul
 import { isFormulaValid } from '@baserow/modules/core/formula'
 import NodeHelpTooltip from '@baserow/modules/core/components/nodeExplorer/NodeHelpTooltip'
 import { fixPropertyReactivityForProvide } from '@baserow/modules/core/utils/object'
+import { BASEROW_FORMULA_MODES } from '@baserow/modules/core/formula/constants'
 
 export default {
   name: 'FormulaInputField',
@@ -139,7 +141,7 @@ export default {
       required: false,
       default: 'simple',
       validator: (value) => {
-        return ['advanced', 'simple', 'raw'].includes(value)
+        return BASEROW_FORMULA_MODES.includes(value)
       },
     },
     contextPosition: {
@@ -150,6 +152,15 @@ export default {
         return ['bottom', 'left', 'right'].includes(value)
       },
     },
+    /**
+     * An array of Baserow formula modes which the parent formula input
+     * component allows to be used. By default, we will allow all modes.
+     */
+    enabledModes: {
+      type: Array,
+      required: false,
+      default: () => BASEROW_FORMULA_MODES,
+    },
   },
   data() {
     return {

web-frontend/modules/core/formula/constants.js

@@ -0,0 +1 @@
+export const BASEROW_FORMULA_MODES = ['raw', 'simple', 'advanced']

web-frontend/modules/core/runtimeFormulaTypes.js

@@ -227,7 +227,12 @@ export class RuntimeConcat extends RuntimeFormulaFunction {
     if (args.every((arg, index) => index % 2 === 0 || arg.type === 'newLine')) {
       return args
         .filter((arg, index) => index % 2 === 0) // Remove the new lines elements
-        .map((arg) => ({ type: 'wrapper', content: [arg].flat() }))
+        .map((arg) => {
+          // If arg is already a wrapper, extract its content; otherwise wrap it
+          const content =
+            arg?.type === 'wrapper' && arg.content ? arg.content : [arg].flat()
+          return { type: 'wrapper', content }
+        })
     }
     return { type: 'wrapper', content: args }
   }

web-frontend/modules/integrations/core/components/services/CoreHTTPRequestServiceForm.vue

@@ -168,6 +168,11 @@
     >
       <InjectedFormulaInput
         v-model="values.body_content"
+        :enabled-modes="
+          values.body_type === 'plain'
+            ? BASEROW_FORMULA_MODES
+            : ['raw', 'simple']
+        "
         :placeholder="$t('coreHTTPRequestServiceForm.bodyPlaceholder')"
       />
     </FormGroup>
@@ -261,6 +266,7 @@ import {
   helpers,
 } from '@vuelidate/validators'
 import { uuid } from '@baserow/modules/core/utils/string'
+import { BASEROW_FORMULA_MODES } from '@baserow/modules/core/formula/constants'
 
 export default {
   name: 'CoreHTTPRequestService',
@@ -295,6 +301,9 @@ export default {
     }
   },
   computed: {
+    BASEROW_FORMULA_MODES() {
+      return BASEROW_FORMULA_MODES
+    },
     methods() {
       return [
         { name: 'GET', value: 'GET' },

web-frontend/modules/integrations/core/components/services/CoreSMTPEmailServiceForm.vue

@@ -101,6 +101,11 @@
     >
       <InjectedFormulaInput
         v-model="values.body"
+        :enabled-modes="
+          values.body_type === 'plain'
+            ? BASEROW_FORMULA_MODES
+            : ['raw', 'simple']
+        "
         :placeholder="$t('smtpEmailForm.bodyPlaceholder')"
         textarea
       />
@@ -113,6 +118,7 @@ import form from '@baserow/modules/core/mixins/form'
 import InjectedFormulaInput from '@baserow/modules/core/components/formula/InjectedFormulaInput'
 import IntegrationDropdown from '@baserow/modules/core/components/integrations/IntegrationDropdown'
 import { SMTPIntegrationType } from '@baserow/modules/integrations/core/integrationTypes'
+import { BASEROW_FORMULA_MODES } from '@baserow/modules/core/formula/constants'
 
 export default {
   name: 'CoreSMTPEmailServiceForm',
@@ -160,6 +166,9 @@ export default {
     }
   },
   computed: {
+    BASEROW_FORMULA_MODES() {
+      return BASEROW_FORMULA_MODES
+    },
     integrations() {
       if (!this.application) {
         return []