From f63563aa93d5c51c78e6fff87108f8f454cdd316 Mon Sep 17 00:00:00 2001
From: Jonathan Adeline <jonathan@baserow.io>
Date: Tue, 5 May 2026 14:05:57 +0400
Subject: [PATCH] feat: `FormulaInputField` expert mode enhancements (#4866)

---
 .../scss/components/formula_input_field.scss  |  85 +-
 .../function_formula_component.scss           |   6 +-
 .../operator_formula_component.scss           |   5 +-
 .../formula/FormulaInputErrorContext.vue      |  41 +-
 .../components/formula/FormulaInputField.vue  | 255 ++++--
 .../extensions/ArrowKeyNavigationExtension.js |   5 +-
 .../extensions/ContextManagementExtension.js  | 195 ++---
 .../extensions/FormulaClipboardHandler.js     | 130 ++-
 .../formula/extensions/FormulaNodes.js        |  57 +-
 .../extensions/FunctionDetectionExtension.js  | 331 --------
 .../extensions/FunctionDowngradeExtension.js  | 158 ++++
 .../FunctionHelpTooltipExtension.js           |  58 +-
 .../extensions/GroupDetectionExtension.js     | 147 ----
 .../extensions/InputDetectionExtension.js     | 492 +++++++++++
 .../extensions/NodeSelectionExtension.js      |  23 +-
 .../extensions/OperatorDetectionExtension.js  | 209 -----
 .../ParenMatchHighlightExtension.js           |  97 +++
 .../extensions/SmartDeletionExtension.js      | 142 +++-
 .../extensions/ZWSManagementExtension.js      |  60 +-
 .../components/formula/extensions/helpers.js  | 200 +++++
 .../modules/core/formula/parser/parser.js     |   6 +-
 .../core/formula/tiptap/fromTipTapVisitor.js  |   9 +-
 .../core/formula/tiptap/toTipTapVisitor.js    | 184 ++--
 .../core/formula/FormulaInputField.spec.js    | 135 +++
 .../FunctionDowngradeExtension.spec.js        | 351 ++++++++
 .../core/formula/ParenMatchHighlight.spec.js  | 240 ++++++
 .../test/unit/core/formula/helpers.spec.js    | 784 ++++++++++++++++++
 .../unit/core/formula/toTipTapVisitor.spec.js | 110 +++
 28 files changed, 3372 insertions(+), 1143 deletions(-)
 delete mode 100644 web-frontend/modules/core/components/formula/extensions/FunctionDetectionExtension.js
 create mode 100644 web-frontend/modules/core/components/formula/extensions/FunctionDowngradeExtension.js
 delete mode 100644 web-frontend/modules/core/components/formula/extensions/GroupDetectionExtension.js
 create mode 100644 web-frontend/modules/core/components/formula/extensions/InputDetectionExtension.js
 delete mode 100644 web-frontend/modules/core/components/formula/extensions/OperatorDetectionExtension.js
 create mode 100644 web-frontend/modules/core/components/formula/extensions/ParenMatchHighlightExtension.js
 create mode 100644 web-frontend/modules/core/components/formula/extensions/helpers.js
 create mode 100644 web-frontend/test/unit/core/formula/FormulaInputField.spec.js
 create mode 100644 web-frontend/test/unit/core/formula/FunctionDowngradeExtension.spec.js
 create mode 100644 web-frontend/test/unit/core/formula/ParenMatchHighlight.spec.js
 create mode 100644 web-frontend/test/unit/core/formula/helpers.spec.js

diff --git a/web-frontend/modules/core/assets/scss/components/formula_input_field.scss b/web-frontend/modules/core/assets/scss/components/formula_input_field.scss
index 0810e75d95..c74fbc1c28 100644
--- a/web-frontend/modules/core/assets/scss/components/formula_input_field.scss
+++ b/web-frontend/modules/core/assets/scss/components/formula_input_field.scss
@@ -51,7 +51,7 @@
 // Atomic comma style
 .formula-input-field__comma,
 .formula-input-field__parenthesis {
-  color: $palette-cyan-800;
+  color: $palette-cyan-900;
   font-weight: 500;
   background-color: $palette-cyan-50;
   padding: 0 8px;
@@ -65,7 +65,7 @@
 
 // Group parenthesis style
 .formula-input-field__group-parenthesis {
-  color: $palette-purple-800;
+  color: $palette-purple-900;
   font-weight: 500;
   background-color: $palette-purple-50;
   padding: 0 8px;
@@ -82,56 +82,40 @@
   padding-left: 0;
 }
 
-// Add margin-right when a function component is followed by another function component
-.function-formula-component:has(+ .function-formula-component) {
-  margin-right: 4px;
-}
-
-// Add margin-right when a function component is followed by a group parenthesis
-.function-formula-component:has(+ .formula-input-field__group-parenthesis) {
-  margin-right: 4px;
-}
-
-// Add margin-right when a parenthesis is followed by another parenthesis
-.formula-input-field__parenthesis:has(+ .formula-input-field__parenthesis) {
-  margin-right: 4px;
-}
-
-// Add margin-right when a parenthesis is followed by a comma
-.formula-input-field__parenthesis:has(+ .formula-input-field__comma) {
-  margin-right: 4px;
-}
-
-// Add margin-right when a comma is followed by a function component
-.formula-input-field__comma:has(+ .function-formula-component) {
-  margin-right: 4px;
+// Spacing between adjacent formula atoms (closing parens, commas, group parens)
+.formula-input-field__parenthesis,
+.formula-input-field__comma,
+.formula-input-field__group-parenthesis {
+  &:has(
+    + :is(
+      .function-formula-component,
+      .formula-input-field__parenthesis,
+      .formula-input-field__comma,
+      .formula-input-field__group-parenthesis
+    )
+  ) {
+    margin-right: 4px;
+  }
 }
 
-// Add margin-right when a comma is followed by a parenthesis
-.formula-input-field__comma:has(+ .formula-input-field__parenthesis) {
+// Spacing after function components (but not before their own closing paren)
+.function-formula-component:has(
+  + :is(.function-formula-component, .formula-input-field__group-parenthesis)
+) {
   margin-right: 4px;
 }
 
-// Add margin-left when a comma is preceded by a function component
+// Spacing before commas preceded by function components
 .function-formula-component + .formula-input-field__comma {
   margin-left: 4px;
 }
 
-// Add margin-right when a comma is followed by another comma
-.formula-input-field__comma:has(+ .formula-input-field__comma) {
-  margin-right: 4px;
-}
-
-// Add margin-right when a group parenthesis is followed by another group parenthesis
-.formula-input-field__group-parenthesis:has(
-  + .formula-input-field__group-parenthesis
-) {
-  margin-right: 4px;
-}
-
-// Add margin-right when a group parenthesis is followed by a function/operator/comma
-.formula-input-field__group-parenthesis:has(+ .function-formula-component),
-.formula-input-field__group-parenthesis:has(+ .formula-input-field__comma) {
+// Spacing between closing parens and operators, and between operators and functions
+:is(
+  .formula-input-field__parenthesis[data-formula-closing-paren='true'],
+  .formula-input-field__group-parenthesis[data-group-closing-paren='true']
+):has(+ .operator-formula-component),
+.operator-formula-component:has(+ .function-formula-component) {
   margin-right: 4px;
 }
 
@@ -145,3 +129,18 @@
 .formula-input-field__view-full-error {
   margin-left: 5px;
 }
+
+// Paren match highlight on hover (disabled for no-arg functions)
+.formula-input-field__paren-highlight:not([data-no-args='true']) {
+  &.formula-input-field__parenthesis {
+    box-shadow: inset 0 0 0 1.5px $palette-cyan-800;
+  }
+
+  &.formula-input-field__group-parenthesis {
+    box-shadow: inset 0 0 0 1.5px $palette-purple-800;
+  }
+
+  &.function-formula-component .function-formula-component__name {
+    box-shadow: inset 0 0 0 1.5px $palette-cyan-800;
+  }
+}
diff --git a/web-frontend/modules/core/assets/scss/components/function_formula_component.scss b/web-frontend/modules/core/assets/scss/components/function_formula_component.scss
index c739891d6c..479423f1a5 100644
--- a/web-frontend/modules/core/assets/scss/components/function_formula_component.scss
+++ b/web-frontend/modules/core/assets/scss/components/function_formula_component.scss
@@ -2,10 +2,12 @@
   height: 24px;
   display: inline-block;
   vertical-align: top;
+  user-select: none;
+  caret-color: transparent;
 }
 
 .function-formula-component__name {
-  color: $palette-cyan-800;
+  color: $palette-cyan-900;
   font-weight: 500;
   background-color: $palette-cyan-50;
   padding: 0 8px;
@@ -21,7 +23,7 @@
 }
 
 .function-formula-component__parenthesis {
-  color: $palette-cyan-800;
+  color: $palette-cyan-900;
   font-weight: 500;
   background-color: $palette-cyan-50;
   padding: 0 8px;
diff --git a/web-frontend/modules/core/assets/scss/components/operator_formula_component.scss b/web-frontend/modules/core/assets/scss/components/operator_formula_component.scss
index 230be7de7d..f73c0f8ccb 100644
--- a/web-frontend/modules/core/assets/scss/components/operator_formula_component.scss
+++ b/web-frontend/modules/core/assets/scss/components/operator_formula_component.scss
@@ -2,12 +2,13 @@
   display: inline-block;
   vertical-align: top;
   white-space: normal;
-  user-select: none;
   cursor: default;
+  user-select: none;
+  caret-color: transparent;
 }
 
 .operator-formula-component__symbol {
-  color: $palette-green-800;
+  color: $palette-green-900;
   font-weight: 500;
   background-color: $palette-green-50;
   padding: 0 8px;
diff --git a/web-frontend/modules/core/components/formula/FormulaInputErrorContext.vue b/web-frontend/modules/core/components/formula/FormulaInputErrorContext.vue
index 9b2a15daf0..39962d6595 100644
--- a/web-frontend/modules/core/components/formula/FormulaInputErrorContext.vue
+++ b/web-frontend/modules/core/components/formula/FormulaInputErrorContext.vue
@@ -24,23 +24,43 @@ export default {
       type: Object,
       required: true,
     },
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+    target: {
+      type: Object,
+      default: null,
+      validator: (value) => value == null || value instanceof HTMLElement,
+    },
+  },
+  watch: {
+    visible: {
+      handler(isVisible) {
+        if (isVisible) {
+          this.show(this.target)
+        } else {
+          this.hide()
+        }
+      },
+    },
   },
   methods: {
     show(
-      targetElement,
-      verticalPosition = 'bottom',
+      targetElement = null,
+      verticalPosition = 'top',
       horizontalPosition = 'left',
-      verticalOffset = 0,
-      horizontalOffset = 0,
-      width = null
+      verticalOffset = 10,
+      horizontalOffset = 0
     ) {
-      // Ensure that the context's width is dynamically set
-      // to the targetElement's width, as it can be variable.
-      if (width !== null) {
-        this.$refs.context.$el.style.width = `${width}px`
+      const el = targetElement ?? this.target
+      if (!el || !this.$refs.context) {
+        return
       }
+      const { width } = el.getBoundingClientRect()
+      this.$refs.context.$el.style.width = `${width}px`
       return this.$refs.context.show(
-        targetElement,
+        el,
         verticalPosition,
         horizontalPosition,
         verticalOffset,
@@ -49,7 +69,6 @@ export default {
     },
     hide() {
       this.$refs.context.hide()
-      this.hideTooltip()
     },
   },
 }
diff --git a/web-frontend/modules/core/components/formula/FormulaInputField.vue b/web-frontend/modules/core/components/formula/FormulaInputField.vue
index 67935a3e0e..39ad54bc6e 100644
--- a/web-frontend/modules/core/components/formula/FormulaInputField.vue
+++ b/web-frontend/modules/core/components/formula/FormulaInputField.vue
@@ -1,6 +1,10 @@
 <template>
   <div ref="formulaInputRoot">
-    <div class="formula-input-field__editor" @click="handleEditorClick">
+    <div
+      ref="formulaEditorSurface"
+      class="formula-input-field__editor"
+      @click="handleEditorClick"
+    >
       <EditorContent
         :id="forInput"
         ref="editor"
@@ -9,14 +13,13 @@
         :class="classes"
         :editor="editor"
         :style="{ '--formula-placeholder': `'${placeholder}'` }"
-        @data-node-clicked="dataNodeClicked"
       />
     </div>
 
     <FormulaInputErrorContext
-      v-if="isFocused && !readOnly && isFormulaInvalid"
-      ref="formulaInputErrorContext"
+      :visible="showErrorContext"
       :formula-error-context="formulaErrorContext"
+      :target="$refs.formulaEditorSurface"
       @mousedown="onContextMouseDown"
     />
 
@@ -54,6 +57,7 @@ import { ArrowKeyNavigationExtension } from '@baserow/modules/core/components/fo
 import { SmartDeletionExtension } from '@baserow/modules/core/components/formula/extensions/SmartDeletionExtension'
 import { ZWSManagementExtension } from '@baserow/modules/core/components/formula/extensions/ZWSManagementExtension'
 import { FunctionHelpTooltipExtension } from '@baserow/modules/core/components/formula/extensions/FunctionHelpTooltipExtension'
+import { ParenMatchHighlightExtension } from '@baserow/modules/core/components/formula/extensions/ParenMatchHighlightExtension'
 import {
   FormulaInsertionExtension,
   FunctionFormulaComponentNode,
@@ -65,9 +69,8 @@ import {
 } from '@baserow/modules/core/components/formula/extensions/FormulaNodes'
 import { NodeSelectionExtension } from '@baserow/modules/core/components/formula/extensions/NodeSelectionExtension'
 import { ContextManagementExtension } from '@baserow/modules/core/components/formula/extensions/ContextManagementExtension'
-import { FunctionDetectionExtension } from '@baserow/modules/core/components/formula/extensions/FunctionDetectionExtension'
-import { GroupDetectionExtension } from '@baserow/modules/core/components/formula/extensions/GroupDetectionExtension'
-import { OperatorDetectionExtension } from '@baserow/modules/core/components/formula/extensions/OperatorDetectionExtension'
+import { InputDetectionExtension } from '@baserow/modules/core/components/formula/extensions/InputDetectionExtension'
+import { FunctionDowngradeExtension } from '@baserow/modules/core/components/formula/extensions/FunctionDowngradeExtension'
 import {
   createClipboardTextSerializer,
   createPasteHandler,
@@ -84,6 +87,56 @@ import { isFormulaValid } from '@baserow/modules/core/formula'
 import NodeHelpTooltip from '@baserow/modules/core/components/nodeExplorer/NodeHelpTooltip'
 import { BASEROW_FORMULA_MODES } from '@baserow/modules/core/formula/constants'
 
+/**
+ * The ANTLR lexer's INTEGER_LITERAL / NUMERIC_LITERAL rules include an
+ * optional leading '-', so the lexer greedily tokenizes e.g. ")-200" as
+ * CLOSE_PAREN INTEGER_LITERAL(-200) instead of CLOSE_PAREN MINUS
+ * INTEGER_LITERAL(200). This inserts a space before '-' when it acts as a
+ * binary operator (preceded by a character that ends an expression) so the
+ * lexer produces a separate MINUS token.
+ */
+export function disambiguateMinusOperator(formula) {
+  let result = ''
+  let inString = false
+  let quoteChar = null
+
+  for (let i = 0; i < formula.length; i++) {
+    const ch = formula[i]
+
+    if (inString) {
+      result += ch
+      if (ch === '\\' && i + 1 < formula.length) {
+        result += formula[++i]
+      } else if (ch === quoteChar) {
+        inString = false
+      }
+      continue
+    }
+
+    if (ch === "'" || ch === '"') {
+      inString = true
+      quoteChar = ch
+      result += ch
+      continue
+    }
+
+    if (
+      ch === '-' &&
+      i + 1 < formula.length &&
+      /\d/.test(formula[i + 1]) &&
+      i > 0 &&
+      /[)\d\w]/.test(formula[i - 1])
+    ) {
+      result += ' - '
+      continue
+    }
+
+    result += ch
+  }
+
+  return result
+}
+
 export default {
   name: 'FormulaInputField',
   components: {
@@ -169,7 +222,7 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ['input', 'update:mode', 'data-node-clicked'],
+  emits: ['input', 'update:mode'],
   data() {
     return {
       editor: null,
@@ -185,6 +238,9 @@ export default {
     }
   },
   computed: {
+    showErrorContext() {
+      return this.isFocused && !this.readOnly && this.isFormulaInvalid
+    },
     isFormulaEmpty() {
       if (!this.editor) return true
       const formula = this.toFormula(this.wrapperContent)
@@ -219,69 +275,27 @@ export default {
         },
       })
     },
-    functionNames() {
-      const extract = (nodes) => {
-        let names = []
-        if (!nodes) {
-          return names
-        }
-        for (const node of nodes) {
-          if (node.type === 'function' && node.signature) {
-            names.push(node.name)
-          }
-          const children = node.nodes
-          if (children) {
-            names = names.concat(extract(children))
-          }
-        }
-
-        return names
-      }
-
-      return extract(this.nodesHierarchy)
-    },
-    functionDefinitions() {
+    formulaRegistry() {
+      const names = []
       const definitions = {}
+      const operators = []
+
       const extract = (nodes) => {
-        if (!nodes) {
-          return
-        }
+        if (!nodes) return
         for (const node of nodes) {
           if (node.type === 'function' && node.signature) {
+            names.push(node.name)
             definitions[node.name.toLowerCase()] = node
           }
-          const children = node.nodes
-          if (children) {
-            extract(children)
+          if (node.type === 'operator' && node.signature?.operator) {
+            operators.push(node.signature.operator)
           }
+          if (node.nodes) extract(node.nodes)
         }
       }
 
       extract(this.nodesHierarchy)
-      return definitions
-    },
-    operators() {
-      const extract = (nodes) => {
-        let operators = []
-        if (!nodes) {
-          return operators
-        }
-        for (const node of nodes) {
-          if (
-            node.type === 'operator' &&
-            node.signature &&
-            node.signature.operator
-          ) {
-            operators.push(node.signature.operator)
-          }
-          const children = node.nodes
-          if (children) {
-            operators = operators.concat(extract(children))
-          }
-        }
-        return operators
-      }
-      return extract(this.nodesHierarchy)
+      return { names, definitions, operators }
     },
     extensions() {
       const DocumentNode = Document.extend()
@@ -297,21 +311,39 @@ export default {
         History.configure({
           depth: 100,
         }),
-        FormulaInsertionExtension.configure({
-          vueComponent: this,
-        }),
-        NodeSelectionExtension.configure({
-          vueComponent: this,
-        }),
+        FormulaInsertionExtension,
+        NodeSelectionExtension,
         ContextManagementExtension.configure({
-          vueComponent: this,
-          contextPosition: this.contextPosition,
-          disabled: this.disabled,
-          readOnly: this.readOnly,
+          getState: () => ({
+            isFocused: this.isFocused,
+            disabled: this.disabled,
+            readOnly: this.readOnly,
+          }),
+          setFocused: (val) => {
+            this.isFocused = val
+          },
+          getRootEl: () => this.$el,
+          getContextEl: () => this.$refs.formulaInputExplorerContext?.$el,
+          showExplorerContextMenu: () => {
+            this.$nextTick(() => {
+              if (!this.isFocused) return
+              this.positionAndShowExplorerContext()
+            })
+          },
+          hideContextMenu: () => {
+            this.$refs.formulaInputExplorerContext?.hide()
+          },
         }),
         FunctionHelpTooltipExtension.configure({
-          vueComponent: this,
-          functionDefinitions: this.functionDefinitions,
+          functionDefinitions: this.formulaRegistry.definitions,
+          onShowTooltip: (el, node) => {
+            this.hoveredFunctionNode = node
+            this.$refs.nodeHelpTooltip?.show(el, 'bottom', 'right', 6, 10)
+          },
+          onHideTooltip: () => {
+            this.$refs.nodeHelpTooltip?.hide()
+            this.hoveredFunctionNode = null
+          },
         }),
         ...this.formulaComponents,
       ]
@@ -333,18 +365,14 @@ export default {
           })
         )
         extensions.push(
-          FunctionDetectionExtension.configure({
-            functionNames: this.functionNames,
-            functionDefinitions: this.functionDefinitions,
-          }),
-          GroupDetectionExtension.configure({
-            functionNames: this.functionNames,
-          }),
-          OperatorDetectionExtension.configure({
-            operators: this.operators,
-            vueComponent: this,
+          InputDetectionExtension.configure({
+            functionNames: this.formulaRegistry.names,
+            functionDefinitions: this.formulaRegistry.definitions,
+            operators: this.formulaRegistry.operators,
           })
         )
+        extensions.push(FunctionDowngradeExtension)
+        extensions.push(ParenMatchHighlightExtension)
       }
 
       return extensions
@@ -460,6 +488,8 @@ export default {
         },
       })
       this.isEditorInitialized = true
+
+      this.editor.on('data-node-clicked', this.dataNodeClicked)
     },
     recreateEditor(formula = null) {
       const currentFormula =
@@ -523,6 +553,62 @@ export default {
     onContextMouseDown() {
       this.editor?.commands.handleContextMouseDown()
     },
+    positionAndShowExplorerContext() {
+      let config
+      switch (this.contextPosition) {
+        case 'left':
+          config = {
+            vertical: 'bottom',
+            horizontal: 'left',
+            needsDynamicOffset: true,
+          }
+          break
+        case 'right':
+          config = {
+            vertical: 'bottom',
+            horizontal: 'left',
+            needsDynamicOffset: true,
+          }
+          break
+        case 'bottom':
+        default:
+          config = {
+            vertical: 'bottom',
+            horizontal: 'left',
+            verticalOffset: 10,
+            horizontalOffset: 0,
+          }
+          break
+      }
+
+      const { vertical, horizontal } = config
+      let { verticalOffset = 0, horizontalOffset = 0 } = config
+
+      if (config.needsDynamicOffset) {
+        const inputRect = this.$el?.getBoundingClientRect()
+        const contextRect =
+          this.$refs.formulaInputExplorerContext?.$el?.getBoundingClientRect()
+
+        switch (this.contextPosition) {
+          case 'left':
+            verticalOffset = -inputRect?.height || 0
+            horizontalOffset = -(contextRect?.width || 0) - 10
+            break
+          case 'right':
+            verticalOffset = -inputRect?.height || 0
+            horizontalOffset = (inputRect?.width || 0) + 10
+            break
+        }
+      }
+
+      this.$refs.formulaInputExplorerContext?.show(
+        this.$refs.editor.$el,
+        vertical,
+        horizontal,
+        verticalOffset,
+        horizontalOffset
+      )
+    },
     toContent(formula) {
       if (!formula) {
         return {
@@ -537,7 +623,10 @@ export default {
       }
 
       try {
-        const tree = parseBaserowFormula(formula)
+        const tree = parseBaserowFormula(
+          disambiguateMinusOperator(formula),
+          false
+        )
         const functionCollection = new RuntimeFunctionCollection(this.$registry)
         const result = new ToTipTapVisitor(functionCollection, this.mode).visit(
           tree
diff --git a/web-frontend/modules/core/components/formula/extensions/ArrowKeyNavigationExtension.js b/web-frontend/modules/core/components/formula/extensions/ArrowKeyNavigationExtension.js
index f6dbd8a052..3114ba01cd 100644
--- a/web-frontend/modules/core/components/formula/extensions/ArrowKeyNavigationExtension.js
+++ b/web-frontend/modules/core/components/formula/extensions/ArrowKeyNavigationExtension.js
@@ -1,5 +1,6 @@
 import { Extension } from '@tiptap/core'
 import { TextSelection } from 'prosemirror-state'
+import { isZWSNode } from '@baserow/modules/core/components/formula/extensions/helpers'
 
 export const ArrowKeyNavigationExtension = Extension.create({
   name: 'arrowKeyNavigation',
@@ -130,7 +131,7 @@ export const ArrowKeyNavigationExtension = Extension.create({
           if (!nextNode) break
 
           // Always skip ZWS
-          if (nextNode.isText && nextNode.text === '\u200B') {
+          if (isZWSNode(nextNode)) {
             pos += nextNode.nodeSize
             moved = true
             continue
@@ -182,7 +183,7 @@ export const ArrowKeyNavigationExtension = Extension.create({
           if (!prevNode) break
 
           // Always skip ZWS
-          if (prevNode.isText && prevNode.text === '\u200B') {
+          if (isZWSNode(prevNode)) {
             pos -= prevNode.nodeSize
             moved = true
             continue
diff --git a/web-frontend/modules/core/components/formula/extensions/ContextManagementExtension.js b/web-frontend/modules/core/components/formula/extensions/ContextManagementExtension.js
index 5581b61cb2..fcb2fc9f6a 100644
--- a/web-frontend/modules/core/components/formula/extensions/ContextManagementExtension.js
+++ b/web-frontend/modules/core/components/formula/extensions/ContextManagementExtension.js
@@ -7,19 +7,34 @@ const contextManagementPluginKey = new PluginKey('contextManagement')
 /**
  * @name ContextManagementExtension
  * @description Manages the visibility and positioning of the formula input's
- * context menu (the data explorer and function list). It handles focus and blur
- * events to automatically show or hide the context menu. It also provides commands
- * to control the menu programmatically and reposition it based on the surrounding UI.
+ * explorer context menu (data explorer and function list). It handles focus and blur
+ * events to show or hide that menu, and repositions it when the document changes.
+ *
+ * Validation error UI is owned by the Vue host, not this extension.
+ *
+ * This extension is fully decoupled from Vue: it interacts with the host
+ * component exclusively through the callback/accessor options listed below.
  */
 export const ContextManagementExtension = Extension.create({
   name: 'contextManagement',
 
   addOptions() {
     return {
-      vueComponent: null,
-      contextPosition: 'bottom', // 'bottom', 'left', 'right'
-      disabled: false,
-      readOnly: false,
+      // State accessors — return current reactive values from the host.
+      getState: () => ({
+        isFocused: false,
+        disabled: false,
+        readOnly: false,
+      }),
+      setFocused: (_val) => {},
+
+      // DOM element accessors for click-outside detection.
+      getRootEl: () => null,
+      getContextEl: () => null,
+
+      // Explorer context menu — the host decides positioning.
+      showExplorerContextMenu: () => {},
+      hideContextMenu: () => {},
     }
   },
 
@@ -35,138 +50,34 @@ export const ContextManagementExtension = Extension.create({
       repositionContext:
         () =>
         ({ editor }) => {
-          const { vueComponent } = this.options
-
-          if (!vueComponent || !vueComponent.isFocused) {
-            return false
-          }
-
-          if (vueComponent && vueComponent.$nextTick) {
-            vueComponent.$nextTick(() => {
-              if (!vueComponent.isFocused) return
-
-              // Read directly from Vue component to get reactive value
-              const contextPosition =
-                vueComponent?.contextPosition ?? this.options.contextPosition
-              let config
-
-              switch (contextPosition) {
-                case 'left':
-                  config = {
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                    needsDynamicOffset: true,
-                  }
-                  break
-                case 'bottom':
-                  config = {
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                    verticalOffset: 10,
-                    horizontalOffset: 0,
-                  }
-                  break
-                case 'right':
-                  config = {
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                    needsDynamicOffset: true,
-                  }
-                  break
-                default:
-                  config = {
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                    verticalOffset: 0,
-                    horizontalOffset: -400,
-                  }
-              }
-
-              const { vertical, horizontal } = config
-              let { verticalOffset = 0, horizontalOffset = 0 } = config
-
-              // Calculate dynamic offsets if necessary
-              if (config.needsDynamicOffset) {
-                const inputRect = vueComponent.$el?.getBoundingClientRect()
-                const contextRect =
-                  vueComponent.$refs?.formulaInputExplorerContext?.$el?.getBoundingClientRect()
-
-                switch (contextPosition) {
-                  case 'left':
-                    verticalOffset = -inputRect?.height || 0
-                    horizontalOffset = -(contextRect?.width || 0) - 10
-                    break
-                  case 'right':
-                    verticalOffset = -inputRect?.height || 0
-                    horizontalOffset = (inputRect?.width || 0) + 10
-                    break
-                }
-              }
-
-              if (vueComponent.$refs?.formulaInputExplorerContext) {
-                vueComponent.$refs.formulaInputExplorerContext.show(
-                  vueComponent.$refs.editor.$el,
-                  vertical,
-                  horizontal,
-                  verticalOffset,
-                  horizontalOffset
-                )
-              }
-              if (vueComponent.$refs?.formulaInputErrorContext) {
-                const editorEl = vueComponent.$refs.editor.$el
-                const editorRect = editorEl.getBoundingClientRect()
-                vueComponent.$refs.formulaInputErrorContext.show(
-                  editorEl,
-                  'top',
-                  'left',
-                  10,
-                  0,
-                  editorRect.width
-                )
-              }
-            })
-          }
+          const { isFocused } = this.options.getState()
+          if (!isFocused) return false
 
+          this.options.showExplorerContextMenu()
           return true
         },
       showContext:
         () =>
         ({ editor }) => {
-          const { vueComponent } = this.options
+          const { disabled, readOnly } = this.options.getState()
+          if (readOnly || disabled) return false
 
-          // Read directly from Vue component to get reactive values
-          const disabled = vueComponent?.disabled ?? this.options.disabled
-          const readOnly = vueComponent?.readOnly ?? this.options.readOnly
+          this.options.setFocused(true)
 
-          if (!vueComponent || readOnly || disabled) {
-            return false
-          }
-
-          vueComponent.isFocused = true
-
-          if (vueComponent && vueComponent.$nextTick) {
-            vueComponent.$nextTick(() => {
-              if (!vueComponent.isFocused) return
-
-              editor.commands.unselectNode()
-
-              // Position the context
-              editor.commands.repositionContext()
-
-              if (vueComponent && vueComponent.$el) {
-                this.storage.clickOutsideEventCancel = onClickOutside(
-                  vueComponent.$el,
-                  (target, event) => {
-                    const isInsideContext = target.closest(
-                      '[data-formula-input-context]'
-                    )
-                    if (!isInsideContext) {
-                      editor.commands.hideContext()
-                    }
-                  }
-                )
+          editor.commands.unselectNode()
+          this.options.showExplorerContextMenu()
+
+          const rootEl = this.options.getRootEl()
+          if (rootEl) {
+            this.storage.clickOutsideEventCancel = onClickOutside(
+              rootEl,
+              (target, _event) => {
+                const contextEl = this.options.getContextEl()
+                if (!contextEl || !isElement(contextEl, target)) {
+                  editor.commands.hideContext()
+                }
               }
-            })
+            )
           }
 
           return true
@@ -174,15 +85,8 @@ export const ContextManagementExtension = Extension.create({
       hideContext:
         () =>
         ({ editor }) => {
-          const { vueComponent } = this.options
-
-          if (vueComponent) {
-            vueComponent.isFocused = false
-          }
-
-          if (vueComponent?.$refs?.formulaInputExplorerContext) {
-            vueComponent.$refs.formulaInputExplorerContext.hide()
-          }
+          this.options.setFocused(false)
+          this.options.hideContextMenu()
 
           editor.commands.unselectNode()
 
@@ -207,13 +111,14 @@ export const ContextManagementExtension = Extension.create({
         key: contextManagementPluginKey,
         props: {
           handleDOMEvents: {
-            focus: (view, event) => {
-              if (!this.options.disabled && !this.options.readOnly) {
+            focus: (_view, _event) => {
+              const { disabled, readOnly } = this.options.getState()
+              if (!disabled && !readOnly) {
                 this.editor.commands.showContext()
               }
               return false
             },
-            blur: (view, event) => {
+            blur: (_view, _event) => {
               if (this.storage.ignoreNextBlur) {
                 this.storage.ignoreNextBlur = false
                 return false
@@ -225,9 +130,8 @@ export const ContextManagementExtension = Extension.create({
         },
         view: () => ({
           update: (view, prevState) => {
-            // Reposition context when the document changes and context is visible
-            const { vueComponent } = this.options
-            if (vueComponent?.isFocused && view.state.doc !== prevState.doc) {
+            const { isFocused } = this.options.getState()
+            if (isFocused && view.state.doc !== prevState.doc) {
               this.editor.commands.repositionContext()
             }
           },
@@ -242,7 +146,6 @@ export const ContextManagementExtension = Extension.create({
   },
 
   onDestroy() {
-    // Clean up listeners
     if (this.storage.clickOutsideEventCancel) {
       this.storage.clickOutsideEventCancel()
       this.storage.clickOutsideEventCancel = null
diff --git a/web-frontend/modules/core/components/formula/extensions/FormulaClipboardHandler.js b/web-frontend/modules/core/components/formula/extensions/FormulaClipboardHandler.js
index 4c3701c70a..9e899ef414 100644
--- a/web-frontend/modules/core/components/formula/extensions/FormulaClipboardHandler.js
+++ b/web-frontend/modules/core/components/formula/extensions/FormulaClipboardHandler.js
@@ -1,3 +1,67 @@
+/**
+ * Counts unbalanced (unclosed) opening parentheses in a formula string,
+ * ignoring characters inside string literals.
+ */
+function countUnbalancedParens(text) {
+  let depth = 0
+  let inString = false
+  let quoteChar = null
+
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i]
+    if (inString) {
+      if (ch === '\\' && i + 1 < text.length) {
+        i++ // skip escaped character
+        continue
+      }
+      if (ch === quoteChar) inString = false
+      continue
+    }
+    if (ch === "'" || ch === '"') {
+      inString = true
+      quoteChar = ch
+      continue
+    }
+    if (ch === '(') depth++
+    else if (ch === ')') depth--
+  }
+
+  return Math.max(0, depth)
+}
+
+/**
+ * Removes the last `count` function-closing-paren nodes from a flat
+ * content array, along with their trailing ZWS separator. Used to strip
+ * the artificial closing parens that were added to make an incomplete
+ * formula parseable, so the cursor ends up inside the last open function
+ * ready for the user to type its argument.
+ */
+function stripTrailingClosingParens(nodes, count) {
+  const result = [...nodes]
+
+  for (let i = 0; i < count; i++) {
+    // Remove trailing ZWS separator that follows the closing paren
+    if (
+      result.length > 0 &&
+      result[result.length - 1].type === 'text' &&
+      result[result.length - 1].text === '\u200B'
+    ) {
+      result.pop()
+    }
+    // Remove the function-closing-paren itself
+    if (
+      result.length > 0 &&
+      result[result.length - 1].type === 'function-closing-paren'
+    ) {
+      result.pop()
+    } else {
+      break
+    }
+  }
+
+  return result
+}
+
 /**
  * Creates a clipboard text serializer for the formula editor
  * @param {Function} toFormula - Function to convert editor content to formula string
@@ -46,39 +110,47 @@ export function createPasteHandler({ toContent, getMode }) {
       return false
     }
 
-    // Try to parse it as a formula
-    try {
-      const content = toContent(text)
-      if (!content) {
-        return false
-      }
+    let wrapperContent = null
+    let extraParens = 0
 
-      // Get the wrapper content (skip doc and wrapper nodes)
-      const wrapperContent =
-        content.content && content.content[0] && content.content[0].content
-          ? content.content[0].content
-          : []
-
-      // Insert the parsed content at the current selection
-      if (wrapperContent.length > 0) {
-        const { tr } = view.state
-        const { from, to } = view.state.selection
-
-        // Create nodes from the content
-        const nodes = wrapperContent.map((item) =>
-          view.state.schema.nodeFromJSON(item)
-        )
-
-        // Replace the selection with the nodes
-        tr.replaceWith(from, to, nodes)
-        view.dispatch(tr)
-        return true
+    // First attempt: parse the formula as-is.
+    const directContent = toContent(text)
+    if (directContent) {
+      wrapperContent = directContent.content?.[0]?.content ?? []
+    } else {
+      // Direct parse failed — the formula is likely incomplete (e.g. a
+      // trailing open paren). Count unbalanced parens and complete the
+      // formula with the minimum number of closing parens so the parser
+      // can produce proper function/group nodes. We then strip those
+      // artificial parens from the content before inserting, which leaves
+      // the cursor inside the last open function's argument slot. The user
+      // can then type the argument and close with `)` normally.
+      extraParens = countUnbalancedParens(text)
+      if (extraParens > 0) {
+        const completedContent = toContent(text + ')'.repeat(extraParens))
+        if (completedContent) {
+          const raw = completedContent.content?.[0]?.content ?? []
+          wrapperContent = stripTrailingClosingParens(raw, extraParens)
+        }
       }
-    } catch (error) {
-      console.error('Error parsing pasted formula:', error)
+    }
+
+    if (!wrapperContent || wrapperContent.length === 0) {
       return false
     }
 
-    return false
+    try {
+      const { tr } = view.state
+      const { from, to } = view.state.selection
+      const nodes = wrapperContent.map((item) =>
+        view.state.schema.nodeFromJSON(item)
+      )
+      tr.replaceWith(from, to, nodes)
+      view.dispatch(tr)
+      return true
+    } catch (error) {
+      console.error('Error inserting pasted formula:', error)
+      return false
+    }
   }
 }
diff --git a/web-frontend/modules/core/components/formula/extensions/FormulaNodes.js b/web-frontend/modules/core/components/formula/extensions/FormulaNodes.js
index f4a5e1c04f..2f4833e35c 100644
--- a/web-frontend/modules/core/components/formula/extensions/FormulaNodes.js
+++ b/web-frontend/modules/core/components/formula/extensions/FormulaNodes.js
@@ -3,6 +3,7 @@ import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import GetFormulaComponent from '@baserow/modules/core/components/formula/GetFormulaComponent'
 import FunctionFormulaComponent from '@baserow/modules/core/components/formula/FunctionFormulaComponent'
 import OperatorFormulaComponent from '@baserow/modules/core/components/formula/OperatorFormulaComponent'
+import { zwsTextJSON } from '@baserow/modules/core/components/formula/extensions/helpers'
 
 export const GetFormulaComponentNode = Node.create({
   name: 'get-formula-component',
@@ -256,21 +257,39 @@ export const FormulaInsertionExtension = Extension.create({
     return {
       insertDataComponent:
         (path) =>
-        ({ editor, commands }) => {
-          commands.insertContent([
-            {
-              type: 'text',
-              text: '\u200B',
-            },
-            {
+        ({ editor, commands, state }) => {
+          // If a get-formula-component node is currently selected, replace it
+          // instead of inserting at the cursor position.
+          let selectedPos = null
+          let selectedSize = null
+
+          state.doc.descendants((node, pos) => {
+            if (selectedPos !== null) return false
+            if (
+              node.type.name === 'get-formula-component' &&
+              node.attrs.isSelected
+            ) {
+              selectedPos = pos
+              selectedSize = node.nodeSize
+            }
+          })
+
+          if (selectedPos !== null) {
+            commands.deleteRange({
+              from: selectedPos,
+              to: selectedPos + selectedSize,
+            })
+            commands.insertContent({
               type: 'get-formula-component',
               attrs: { path },
-            },
-            {
-              type: 'text',
-              text: '\u200B',
-            },
-          ])
+            })
+          } else {
+            commands.insertContent([
+              zwsTextJSON(),
+              { type: 'get-formula-component', attrs: { path } },
+              zwsTextJSON(),
+            ])
+          }
 
           commands.focus()
 
@@ -289,7 +308,7 @@ export const FormulaInsertionExtension = Extension.create({
           const contentToInsert = []
 
           // Add ZWS before the function component
-          contentToInsert.push({ type: 'text', text: '\u200B' })
+          contentToInsert.push(zwsTextJSON())
 
           // Add function component
           contentToInsert.push({
@@ -302,10 +321,10 @@ export const FormulaInsertionExtension = Extension.create({
 
           // Add argument placeholders if needed
           if (minArgs > 0) {
-            contentToInsert.push({ type: 'text', text: '\u200B' }) // First argument
+            contentToInsert.push(zwsTextJSON()) // First argument
             for (let i = 1; i < minArgs; i++) {
               contentToInsert.push({ type: 'function-argument-comma' })
-              contentToInsert.push({ type: 'text', text: '\u200B' }) // Subsequent arguments
+              contentToInsert.push(zwsTextJSON()) // Subsequent arguments
             }
           }
 
@@ -319,7 +338,7 @@ export const FormulaInsertionExtension = Extension.create({
 
           // Always add a ZWS after the whole function call
           // CleanupZWSExtension will remove any consecutive ZWS automatically
-          contentToInsert.push({ type: 'text', text: '\u200B' })
+          contentToInsert.push(zwsTextJSON())
 
           // Insert all content at once
           commands.insertContent(contentToInsert)
@@ -353,7 +372,7 @@ export const FormulaInsertionExtension = Extension.create({
 
           // Build content to insert
           const contentToInsert = [
-            { type: 'text', text: '\u200B' },
+            zwsTextJSON(),
             {
               type: 'operator-formula-component',
               attrs: {
@@ -367,7 +386,7 @@ export const FormulaInsertionExtension = Extension.create({
             contentToInsert.push({ type: 'text', text: ' ' })
           }
 
-          contentToInsert.push({ type: 'text', text: '\u200B' })
+          contentToInsert.push(zwsTextJSON())
 
           commands.insertContent(contentToInsert)
 
diff --git a/web-frontend/modules/core/components/formula/extensions/FunctionDetectionExtension.js b/web-frontend/modules/core/components/formula/extensions/FunctionDetectionExtension.js
deleted file mode 100644
index 4e576c93f7..0000000000
--- a/web-frontend/modules/core/components/formula/extensions/FunctionDetectionExtension.js
+++ /dev/null
@@ -1,331 +0,0 @@
-import { Extension } from '@tiptap/core'
-import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
-import { Fragment } from '@tiptap/pm/model'
-
-export const FunctionDetectionExtension = Extension.create({
-  name: 'functionDetection',
-
-  addOptions() {
-    return {
-      functionNames: [],
-      functionDefinitions: {},
-    }
-  },
-
-  addProseMirrorPlugins() {
-    const functionNames = this.options.functionNames
-    const functionDefinitions = this.options.functionDefinitions
-
-    function handleOpeningParenthesis(view, from, to) {
-      const { state } = view
-      const { doc } = state
-
-      // Get the text before the cursor, use comma as separator for nodes
-      const textBefore = doc.textBetween(Math.max(0, from - 50), from, ',')
-
-      // Check if the text before ends with a function name
-      // Look for function names that are either at the start or preceded by non-letter characters (including comma)
-      const functionPattern = new RegExp(
-        `(^|[^a-zA-Z])(${functionNames.join('|')})(\\s*)$`,
-        'i'
-      )
-      const match = textBefore.match(functionPattern)
-
-      if (match) {
-        const functionName = match[2]
-        const spacesBeforeParenthesis = match[3] || ''
-        const functionStart =
-          from - functionName.length - spacesBeforeParenthesis.length
-
-        // Find the function definition using the pre-computed map
-        const functionDef = functionDefinitions[functionName.toLowerCase()]
-
-        if (functionDef) {
-          const signature = functionDef.signature || {}
-          const minArgs = signature.minArgs || 0
-
-          // Create a transaction to replace the function text with the component
-          const tr = state.tr
-
-          // Build all nodes to insert
-          const nodesToInsert = []
-
-          // Add ZWS before the function component
-          nodesToInsert.push(state.schema.text('\u200B'))
-
-          // Insert function node (atomic)
-          const functionNode = state.schema.nodes[
-            'function-formula-component'
-          ].create({
-            functionName,
-            hasNoArgs: minArgs === 0,
-          })
-          nodesToInsert.push(functionNode)
-
-          if (minArgs > 0) {
-            nodesToInsert.push(state.schema.text('\u200B')) // First argument
-            for (let i = 1; i < minArgs; i++) {
-              nodesToInsert.push(
-                state.schema.nodes['function-argument-comma'].create()
-              )
-              nodesToInsert.push(state.schema.text('\u200B')) // Subsequent arguments
-            }
-          }
-
-          // Insert the closing parenthesis as atomic node
-          const closingParenNode = state.schema.nodes[
-            'function-closing-paren'
-          ].create({
-            noArgs: minArgs === 0,
-          })
-          nodesToInsert.push(closingParenNode)
-
-          // Always add a ZWS after the whole function call
-          // CleanupZWSExtension will remove any consecutive ZWS automatically
-          nodesToInsert.push(state.schema.text('\u200B'))
-
-          // Insert all nodes at once using Fragment.from
-          const fragment = Fragment.from(nodesToInsert)
-
-          // Replace the function name + opening parenthesis with our nodes
-          tr.replaceWith(functionStart, to, fragment)
-
-          // Position cursor:
-          // - If no arguments expected, place after closing paren (but before the final ZWS)
-          // - Otherwise, place right after the function component (in first argument slot)
-          let cursorPos
-          if (minArgs === 0) {
-            // ZWS (1) + functionNode (1) + closingParenNode (1) = 3
-            // We place cursor at position 3, which is after the closing paren but before the final ZWS
-            cursorPos = functionStart + 3
-          } else {
-            // ZWS (1) + functionNode (1) = 2 (in first argument slot)
-            cursorPos = functionStart + 2
-          }
-
-          tr.setSelection(TextSelection.create(tr.doc, cursorPos))
-
-          // Apply the transaction
-          view.dispatch(tr)
-          return true
-        }
-      }
-
-      return false
-    }
-
-    function handleComma(view, from, to) {
-      const { state } = view
-      const { doc } = state
-
-      // Check if we're inside a function
-      if (!isInsideFunction(doc, from)) {
-        return false
-      }
-
-      // Check if we're inside a string literal
-      if (isInsideStringLiteral(doc, from)) {
-        return false
-      }
-
-      // Create transaction
-      const tr = state.tr
-
-      // Create the atomic comma node and a ZWS for the next argument
-      const nodesToInsert = [
-        state.schema.nodes['function-argument-comma'].create(),
-        state.schema.text('\u200B'),
-      ]
-      const fragment = Fragment.from(nodesToInsert)
-
-      // Replace the typed comma with the atomic node
-      tr.replaceWith(from, to, fragment)
-
-      // Position cursor after the comma, in the new ZWS slot
-      const cursorPos = from + 1
-      tr.setSelection(TextSelection.create(tr.doc, cursorPos))
-
-      view.dispatch(tr)
-      return true
-    }
-
-    function isInsideFunction(doc, pos) {
-      // Get the resolved position
-      const $pos = doc.resolve(pos)
-
-      // Find the parent wrapper node
-      let $wrapper = null
-      for (let d = $pos.depth; d > 0; d--) {
-        if ($pos.node(d).type.name === 'wrapper') {
-          $wrapper = $pos.start(d)
-          break
-        }
-      }
-
-      if ($wrapper === null) return false
-
-      // Look for a function component before the cursor position
-      let foundFunction = false
-      let parenCount = 0
-
-      doc.nodesBetween($wrapper, pos, (node, nodePos) => {
-        if (nodePos >= pos) return false // Stop when we reach cursor position
-
-        if (node.type.name === 'function-formula-component') {
-          foundFunction = true
-          parenCount = 1 // Function component includes opening paren
-        } else if (node.type.name === 'text' && foundFunction) {
-          // Count parentheses in text nodes
-          const text = node.text
-          for (let i = 0; i < text.length; i++) {
-            // Only count characters before cursor position
-            if (nodePos + i >= pos) break
-
-            if (text[i] === '(') {
-              parenCount++
-            } else if (text[i] === ')') {
-              parenCount--
-              if (parenCount === 0) {
-                foundFunction = false // We've closed the function
-              }
-            }
-          }
-        }
-      })
-
-      return foundFunction && parenCount > 0
-    }
-
-    function isInsideStringLiteral(doc, pos) {
-      // Get text from start of current context to cursor position
-      const contextStart = Math.max(0, pos - 200) // Look back up to 200 chars
-      const textBefore = doc.textBetween(contextStart, pos, ' ')
-
-      // Count quotes to determine if we're inside a string
-      let singleQuoteCount = 0
-      let doubleQuoteCount = 0
-      let escaped = false
-
-      for (let i = 0; i < textBefore.length; i++) {
-        const char = textBefore[i]
-
-        if (escaped) {
-          escaped = false
-          continue
-        }
-
-        if (char === '\\') {
-          escaped = true
-        } else if (char === "'") {
-          singleQuoteCount++
-        } else if (char === '"') {
-          doubleQuoteCount++
-        }
-      }
-
-      // If odd number of quotes, we're inside a string
-      return singleQuoteCount % 2 === 1 || doubleQuoteCount % 2 === 1
-    }
-
-    function handleClosingParenthesis(view, from, to) {
-      const { state } = view
-      const { doc } = state
-
-      // Check if we're closing a function
-      if (!isClosingFunction(doc, from)) {
-        return false
-      }
-
-      // Check if we're inside a string literal
-      if (isInsideStringLiteral(doc, from)) {
-        return false
-      }
-
-      // Replace the closing parenthesis with an atomic node
-      const tr = state.tr
-      const closingParenNode =
-        state.schema.nodes['function-closing-paren'].create()
-
-      // Replace the typed closing paren with the atomic node
-      tr.replaceWith(from, to, closingParenNode)
-
-      // Position cursor after the closing paren
-      const cursorPos = from + 1
-      tr.setSelection(
-        state.selection.constructor.near(tr.doc.resolve(cursorPos))
-      )
-
-      view.dispatch(tr)
-      return true
-    }
-
-    function isClosingFunction(doc, pos) {
-      // Get the resolved position
-      const $pos = doc.resolve(pos)
-
-      // Find the parent wrapper node
-      let $wrapper = null
-      for (let d = $pos.depth; d > 0; d--) {
-        if ($pos.node(d).type.name === 'wrapper') {
-          $wrapper = $pos.start(d)
-          break
-        }
-      }
-
-      if ($wrapper === null) return false
-
-      // Count parentheses to see if we're closing a function
-      let parenCount = 0
-      let foundFunction = false
-
-      doc.nodesBetween($wrapper, pos, (node, nodePos) => {
-        if (nodePos >= pos) return false
-
-        if (node.type.name === 'function-formula-component') {
-          foundFunction = true
-          parenCount = 1 // Opening paren is part of the component
-        } else if (node.type.name === 'text') {
-          const text = node.text
-          for (let i = 0; i < text.length; i++) {
-            if (nodePos + i >= pos) break
-
-            if (text[i] === '(') {
-              parenCount++
-            } else if (text[i] === ')') {
-              parenCount--
-            }
-          }
-        }
-      })
-
-      // We're closing a function if we found one and have exactly 1 open paren
-      return foundFunction && parenCount === 1
-    }
-
-    return [
-      new Plugin({
-        key: new PluginKey('functionDetection'),
-        props: {
-          handleTextInput(view, from, to, text) {
-            // Process opening parenthesis for function detection
-            if (text === '(') {
-              return handleOpeningParenthesis(view, from, to)
-            }
-
-            // Process comma for argument separation
-            if (text === ',') {
-              return handleComma(view, from, to)
-            }
-
-            // Process closing parenthesis
-            if (text === ')') {
-              return handleClosingParenthesis(view, from, to)
-            }
-
-            return false
-          },
-        },
-      }),
-    ]
-  },
-})
diff --git a/web-frontend/modules/core/components/formula/extensions/FunctionDowngradeExtension.js b/web-frontend/modules/core/components/formula/extensions/FunctionDowngradeExtension.js
new file mode 100644
index 0000000000..b20068349c
--- /dev/null
+++ b/web-frontend/modules/core/components/formula/extensions/FunctionDowngradeExtension.js
@@ -0,0 +1,158 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Mapping } from '@tiptap/pm/transform'
+import { isZWSNode } from '@baserow/modules/core/components/formula/extensions/helpers'
+
+/**
+ * Walks `doc` with a stack and returns the list of (opener, closer)
+ * position pairs for every `function-formula-component` that has a
+ * matching `function-closing-paren`, plus the list of already-unmatched
+ * opener positions.
+ *
+ * The stack-based pairing mirrors how the formula parser itself groups
+ * parens (LIFO): the innermost opener pairs with the first closer that
+ * comes after it. This is the correct pairing for a balanced doc, which
+ * is the invariant the extension maintains.
+ */
+function collectFunctionPairs(doc) {
+  const stack = []
+  const pairs = []
+  const unmatched = []
+
+  doc.descendants((node, pos) => {
+    if (node.type.name === 'function-formula-component') {
+      stack.push(pos)
+    } else if (node.type.name === 'function-closing-paren') {
+      const openerPos = stack.pop()
+      if (openerPos !== undefined) {
+        pairs.push({ openerPos, closerPos: pos })
+      }
+    }
+  })
+
+  while (stack.length > 0) unmatched.push(stack.pop())
+  return { pairs, unmatched }
+}
+
+/**
+ * Combines the per-step maps of every transaction in `transactions`
+ * into a single `Mapping` object covering the whole oldState → newState
+ * delta. `tr.mapping` already aggregates the steps within one
+ * transaction, but appendTransaction receives an array of them and we
+ * need a single mapping to trace positions across the whole batch.
+ */
+function combinedMapping(transactions) {
+  const mapping = new Mapping()
+  for (const tr of transactions) {
+    for (const step of tr.steps) {
+      mapping.appendMap(step.getMap())
+    }
+  }
+  return mapping
+}
+
+/**
+ * Keeps the document consistent after a deletion: when a
+ * `function-closing-paren` has been removed (typically by Backspace right
+ * after it) and its matching `function-formula-component` no longer has a
+ * closer, the function opener is downgraded to plain text `funcName(`.
+ *
+ * This mirrors the rendering of a pasted unclosed `funcName(` — which the
+ * tolerant parser (`_renderPartialCall`) also leaves as plain text — so
+ * the visual state of a partial call stays consistent across both flows
+ * (highlighted only when balanced, plain text otherwise).
+ *
+ * The opener to downgrade is determined by looking at the (opener, closer)
+ * pairs in `oldState` and tracing each position forward through the
+ * current transactions. When a pair's closer was deleted but its opener
+ * survives, that opener becomes the downgrade target. This correctly
+ * handles nested calls like `concat(if(...),"lorem ipsum")`: deleting the inner
+ * `)` orphans `if(`, not `concat(` — which a simple newState-only stack
+ * walk would misattribute to the outer call.
+ *
+ * Typing ')' afterwards will still re-upgrade the text `funcName(` back
+ * to a proper highlighted function node via `upgradeTextFunctionOnClose`.
+ */
+export const FunctionDowngradeExtension = Extension.create({
+  name: 'functionDowngrade',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('functionDowngrade'),
+
+        appendTransaction(transactions, oldState, newState) {
+          if (!transactions.some((tr) => tr.docChanged)) return null
+
+          const { pairs, unmatched } = collectFunctionPairs(oldState.doc)
+          if (pairs.length === 0 && unmatched.length === 0) return null
+
+          const mapping = combinedMapping(transactions)
+
+          // Helper: map a position via the combined mapping and return
+          // both the new position and whether it was inside a deletion.
+          // `assoc` follows PM conventions — for the trailing edge of an
+          // atomic node (pos + 1) we bias left so the position is treated
+          // as deleted iff the atom itself was removed.
+          const mapPos = (pos, assoc) => mapping.mapResult(pos, assoc)
+
+          const orphanOpenersNewPos = []
+
+          for (const { openerPos, closerPos } of pairs) {
+            const openerRes = mapPos(openerPos + 1, -1)
+            const closerRes = mapPos(closerPos + 1, -1)
+            if (!openerRes.deleted && closerRes.deleted) {
+              // Opener new position: subtract 1 to go from "just after"
+              // back to "just before" the atom.
+              orphanOpenersNewPos.push(openerRes.pos - 1)
+            }
+          }
+
+          // Already-unmatched openers from oldState (defensive — the
+          // invariant is that oldState is consistent, but if an older
+          // transaction left a dangling opener, propagate it forward).
+          for (const openerPos of unmatched) {
+            const res = mapPos(openerPos + 1, -1)
+            if (!res.deleted) orphanOpenersNewPos.push(res.pos - 1)
+          }
+
+          if (orphanOpenersNewPos.length === 0) return null
+
+          // Process in reverse document order so earlier positions stay
+          // stable while we build the transaction.
+          orphanOpenersNewPos.sort((a, b) => b - a)
+
+          const { schema, doc } = newState
+          const tr = newState.tr
+
+          for (const pos of orphanOpenersNewPos) {
+            const node = doc.nodeAt(pos)
+            if (!node || node.type.name !== 'function-formula-component') {
+              continue
+            }
+            const functionName = node.attrs.functionName || ''
+            const text = `${functionName}(`
+
+            // Strip any ZWS immediately adjacent to the atomic node: it
+            // existed only as a cursor-positioning marker and becomes
+            // redundant once the opener is plain text.
+            let from = pos
+            let to = pos + node.nodeSize
+            const $before = doc.resolve(from)
+            if (isZWSNode($before.nodeBefore)) {
+              from -= $before.nodeBefore.nodeSize
+            }
+            const $after = doc.resolve(to)
+            if (isZWSNode($after.nodeAfter)) {
+              to += $after.nodeAfter.nodeSize
+            }
+
+            tr.replaceWith(from, to, schema.text(text))
+          }
+
+          return tr
+        },
+      }),
+    ]
+  },
+})
diff --git a/web-frontend/modules/core/components/formula/extensions/FunctionHelpTooltipExtension.js b/web-frontend/modules/core/components/formula/extensions/FunctionHelpTooltipExtension.js
index e8ccc37776..2fdfb7e787 100644
--- a/web-frontend/modules/core/components/formula/extensions/FunctionHelpTooltipExtension.js
+++ b/web-frontend/modules/core/components/formula/extensions/FunctionHelpTooltipExtension.js
@@ -8,26 +8,33 @@ export const FunctionHelpTooltipExtension = Extension.create({
 
   addOptions() {
     return {
-      vueComponent: null,
       functionDefinitions: {},
-      selector: '.function-name-highlight',
+      selector: '.function-formula-component',
       showDelay: 120,
       hideDelay: 60,
+      onShowTooltip: null,
+      onHideTooltip: null,
     }
   },
 
   addProseMirrorPlugins() {
     const {
-      vueComponent,
       functionDefinitions,
       selector,
       showDelay,
       hideDelay,
+      onShowTooltip,
+      onHideTooltip,
     } = this.options
     let lastEl = null
     let lastName = null
     let showTimer = null
     let hideTimer = null
+    // Element the user just clicked on. While the mouse stays on this
+    // element we suppress the hover tooltip, so small cursor movements
+    // after a click don't make it reappear. Cleared as soon as the mouse
+    // moves to a different element or leaves the editor.
+    let suppressedEl = null
 
     const findFunctionNodeByName = (name) => {
       const needle = (name || '').toLowerCase()
@@ -40,8 +47,7 @@ export const FunctionHelpTooltipExtension = Extension.create({
       showTimer = setTimeout(() => {
         const node = findFunctionNodeByName(fname)
         if (!node) return
-        vueComponent.hoveredFunctionNode = node
-        vueComponent.$refs.nodeHelpTooltip?.show(el, 'bottom', 'right', 6, 10)
+        onShowTooltip?.(el, node)
         lastEl = el
         lastName = fname
       }, showDelay)
@@ -51,22 +57,59 @@ export const FunctionHelpTooltipExtension = Extension.create({
       clearTimeout(showTimer)
       clearTimeout(hideTimer)
       hideTimer = setTimeout(() => {
-        vueComponent.$refs.nodeHelpTooltip?.hide()
-        vueComponent.hoveredFunctionNode = null
+        onHideTooltip?.()
         lastEl = null
         lastName = null
       }, hideDelay)
     }
 
+    const hideTooltipImmediately = () => {
+      clearTimeout(showTimer)
+      clearTimeout(hideTimer)
+      if (lastEl || showTimer) {
+        onHideTooltip?.()
+      }
+      lastEl = null
+      lastName = null
+    }
+
     return [
       new Plugin({
         key: functionHelpTooltipKey,
+        view(view) {
+          // `mousedown` events originating inside a Vue `NodeView` with
+          // `selectable: false` never reach `handleDOMEvents` because
+          // TipTap's default `stopEvent` returns true for them. We attach a
+          // native listener on `view.dom` (capture phase) so we reliably
+          // hide the tooltip whenever the user clicks anywhere inside the
+          // editor, including on a highlighted function.
+          const onMouseDown = (event) => {
+            hideTooltipImmediately()
+            const el = event.target?.closest?.(selector)
+            suppressedEl = el && view.dom.contains(el) ? el : null
+          }
+          view.dom.addEventListener('mousedown', onMouseDown, true)
+
+          return {
+            destroy() {
+              view.dom.removeEventListener('mousedown', onMouseDown, true)
+              hideTooltipImmediately()
+              suppressedEl = null
+            },
+          }
+        },
         props: {
           handleDOMEvents: {
             mousemove(view, event) {
               const root = view.dom
               const el = event.target?.closest?.(selector)
+              // Release suppression once the mouse moves to a different
+              // element (or outside the selector altogether).
+              if (suppressedEl && el !== suppressedEl) {
+                suppressedEl = null
+              }
               if (el && root.contains(el)) {
+                if (el === suppressedEl) return false
                 const text = (el.textContent || '').trim()
                 const m = text.match(/^([A-Za-z_][A-Za-z0-9_]*)/)
                 const fname = m ? m[1] : null
@@ -79,6 +122,7 @@ export const FunctionHelpTooltipExtension = Extension.create({
               return false
             },
             mouseleave() {
+              suppressedEl = null
               if (lastEl) hideTooltip()
               return false
             },
diff --git a/web-frontend/modules/core/components/formula/extensions/GroupDetectionExtension.js b/web-frontend/modules/core/components/formula/extensions/GroupDetectionExtension.js
deleted file mode 100644
index 949d382455..0000000000
--- a/web-frontend/modules/core/components/formula/extensions/GroupDetectionExtension.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import { Extension } from '@tiptap/core'
-import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
-import { Fragment } from '@tiptap/pm/model'
-
-export const GroupDetectionExtension = Extension.create({
-  name: 'groupDetection',
-
-  addOptions() {
-    return {
-      functionNames: [],
-    }
-  },
-
-  addProseMirrorPlugins() {
-    const functionNames = this.options.functionNames
-
-    function handleOpeningParenthesis(view, from, to) {
-      const { state } = view
-      const { doc } = state
-
-      // Check if we should create a group parenthesis
-      // A group parenthesis is created when:
-      // - The previous text does NOT match a known function name
-
-      const textBefore = doc.textBetween(Math.max(0, from - 50), from, ',')
-
-      // If we have function names, check if the text ends with one
-      if (functionNames.length > 0) {
-        const functionPattern = new RegExp(
-          `(^|[^a-zA-Z0-9_])(${functionNames.join('|')})(\\s*)$`,
-          'i'
-        )
-
-        if (functionPattern.test(textBefore)) {
-          // This is a function call, let FunctionDetectionExtension handle it
-          return false
-        }
-      }
-
-      // This is a grouping parenthesis
-      const tr = state.tr
-
-      // Create the group opening paren node with a ZWS after
-      const nodesToInsert = [
-        state.schema.text('\u200B'),
-        state.schema.nodes['group-opening-paren'].create(),
-        state.schema.text('\u200B'),
-      ]
-
-      const fragment = Fragment.from(nodesToInsert)
-      tr.replaceWith(from, to, fragment)
-
-      // Position cursor after the opening paren (in the ZWS)
-      const cursorPos = from + 2
-      tr.setSelection(TextSelection.create(tr.doc, cursorPos))
-
-      view.dispatch(tr)
-      return true
-    }
-
-    function handleClosingParenthesis(view, from, to) {
-      const { state } = view
-      const { doc } = state
-
-      // Check if we're closing a group by counting parentheses
-      if (!isClosingGroup(doc, from)) {
-        // Let other extensions handle function closing
-        return false
-      }
-
-      // This is closing a group
-      const tr = state.tr
-
-      // Create the group closing paren node
-      const closingParenNode =
-        state.schema.nodes['group-closing-paren'].create()
-
-      tr.replaceWith(from, to, closingParenNode)
-
-      // Position cursor after the closing paren
-      const cursorPos = from + 1
-      tr.setSelection(TextSelection.near(tr.doc.resolve(cursorPos)))
-
-      view.dispatch(tr)
-      return true
-    }
-
-    function isClosingGroup(doc, pos) {
-      // Count parentheses to determine if we're closing a group
-      let parenCount = 0
-      let foundGroupOpening = false
-
-      // Find the start of the wrapper
-      const $pos = doc.resolve(pos)
-      let wrapperStart = 0
-      for (let d = $pos.depth; d > 0; d--) {
-        if ($pos.node(d).type.name === 'wrapper') {
-          wrapperStart = $pos.start(d)
-          break
-        }
-      }
-
-      // Traverse from wrapper start to current position
-      doc.nodesBetween(wrapperStart, pos, (node, nodePos) => {
-        if (nodePos >= pos) return false
-
-        if (node.type.name === 'function-formula-component') {
-          parenCount = 1
-        } else if (node.type.name === 'group-opening-paren') {
-          foundGroupOpening = true
-          parenCount++
-        } else if (node.type.name === 'group-closing-paren') {
-          parenCount--
-          if (parenCount === 0) {
-            foundGroupOpening = false
-          }
-        } else if (node.type.name === 'function-closing-paren') {
-          parenCount--
-        }
-      })
-
-      // We're closing a group if we have an open group paren
-      return foundGroupOpening && parenCount > 0
-    }
-
-    return [
-      new Plugin({
-        key: new PluginKey('groupDetection'),
-        props: {
-          handleTextInput(view, from, to, text) {
-            // Process opening parenthesis for group detection
-            if (text === '(') {
-              return handleOpeningParenthesis(view, from, to)
-            }
-
-            // Process closing parenthesis for group detection
-            if (text === ')') {
-              return handleClosingParenthesis(view, from, to)
-            }
-
-            return false
-          },
-        },
-      }),
-    ]
-  },
-})
diff --git a/web-frontend/modules/core/components/formula/extensions/InputDetectionExtension.js b/web-frontend/modules/core/components/formula/extensions/InputDetectionExtension.js
new file mode 100644
index 0000000000..82240f3568
--- /dev/null
+++ b/web-frontend/modules/core/components/formula/extensions/InputDetectionExtension.js
@@ -0,0 +1,492 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
+import { Fragment } from '@tiptap/pm/model'
+import {
+  buildParenStack,
+  getTextBeforeCursor,
+  findNextNonZWSNode,
+  findInnermostUnclosedFunctionNode,
+  findPendingTextFunctionOpen,
+  zwsTextNode,
+} from '@baserow/modules/core/components/formula/extensions/helpers'
+
+/**
+ * Unified input detection extension that handles function calls,
+ * grouping parentheses, commas, and operators in a single plugin.
+ *
+ * Replaces the three separate extensions (FunctionDetection,
+ * GroupDetection, OperatorDetection) whose implicit ordering via
+ * ProseMirror plugin priority was fragile and error-prone.
+ */
+export const InputDetectionExtension = Extension.create({
+  name: 'inputDetection',
+
+  addOptions() {
+    return {
+      functionNames: [],
+      functionDefinitions: {},
+      operators: [],
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const { functionNames, functionDefinitions, operators } = this.options
+
+    // ── Shared utilities ──────────────────────────────────────────────
+
+    function getWrapperStart(doc, pos) {
+      const $pos = doc.resolve(pos)
+      for (let d = $pos.depth; d > 0; d--) {
+        if ($pos.node(d).type.name === 'wrapper') {
+          return $pos.start(d)
+        }
+      }
+      return null
+    }
+
+    function getParenStackTop(doc, pos) {
+      const wrapperStart = getWrapperStart(doc, pos)
+      if (wrapperStart === null) return null
+      const stack = buildParenStack(doc, wrapperStart, pos)
+      return stack.length > 0 ? stack[stack.length - 1] : null
+    }
+
+    function areParensBalanced(doc, type) {
+      let openers = 0
+      let closers = 0
+      const openerName =
+        type === 'function'
+          ? 'function-formula-component'
+          : 'group-opening-paren'
+      const closerName =
+        type === 'function' ? 'function-closing-paren' : 'group-closing-paren'
+      doc.descendants((node) => {
+        if (node.type.name === openerName) openers++
+        else if (node.type.name === closerName) closers++
+      })
+      return openers <= closers
+    }
+
+    function isInsideStringLiteral(doc, pos) {
+      const contextStart = Math.max(0, pos - 200)
+      const textBefore = doc.textBetween(contextStart, pos, ' ')
+
+      let singleQuoteCount = 0
+      let doubleQuoteCount = 0
+      let escaped = false
+
+      for (let i = 0; i < textBefore.length; i++) {
+        const char = textBefore[i]
+        if (escaped) {
+          escaped = false
+          continue
+        }
+        if (char === '\\') {
+          escaped = true
+        } else if (char === "'") {
+          singleQuoteCount++
+        } else if (char === '"') {
+          doubleQuoteCount++
+        }
+      }
+
+      return singleQuoteCount % 2 === 1 || doubleQuoteCount % 2 === 1
+    }
+
+    // ── Opening parenthesis ───────────────────────────────────────────
+
+    function handleOpenParen(view, from, to) {
+      if (isInsideStringLiteral(view.state.doc, from)) return false
+      return tryFunctionOpen(view, from, to) || handleGroupOpen(view, from, to)
+    }
+
+    function tryFunctionOpen(view, from, to) {
+      const { state } = view
+      const { doc } = state
+
+      if (functionNames.length === 0) return false
+
+      const textBefore = getTextBeforeCursor(doc, from)
+
+      const functionPattern = new RegExp(
+        `(^|[^a-zA-Z])(${functionNames.join('|')})(\\s*)$`,
+        'i'
+      )
+      const match = textBefore.match(functionPattern)
+      if (!match) return false
+
+      const functionName = match[2]
+      const spacesBeforeParenthesis = match[3] || ''
+      const functionStart =
+        from - functionName.length - spacesBeforeParenthesis.length
+
+      const functionDef = functionDefinitions[functionName.toLowerCase()]
+      if (!functionDef) return false
+
+      const signature = functionDef.signature || {}
+      const minArgs = signature.minArgs || 0
+      const tr = state.tr
+
+      const nodesToInsert = []
+      nodesToInsert.push(zwsTextNode(state.schema))
+
+      nodesToInsert.push(
+        state.schema.nodes['function-formula-component'].create({
+          functionName,
+          hasNoArgs: minArgs === 0,
+        })
+      )
+
+      if (minArgs > 0) {
+        nodesToInsert.push(zwsTextNode(state.schema))
+        for (let i = 1; i < minArgs; i++) {
+          nodesToInsert.push(
+            state.schema.nodes['function-argument-comma'].create()
+          )
+          nodesToInsert.push(zwsTextNode(state.schema))
+        }
+      }
+
+      nodesToInsert.push(
+        state.schema.nodes['function-closing-paren'].create({
+          noArgs: minArgs === 0,
+        })
+      )
+      nodesToInsert.push(zwsTextNode(state.schema))
+
+      tr.replaceWith(functionStart, to, Fragment.from(nodesToInsert))
+
+      const cursorPos = minArgs === 0 ? functionStart + 3 : functionStart + 2
+      tr.setSelection(TextSelection.create(tr.doc, cursorPos))
+
+      view.dispatch(tr)
+      return true
+    }
+
+    function handleGroupOpen(view, from, to) {
+      const { state } = view
+      const tr = state.tr
+
+      const nodesToInsert = [
+        zwsTextNode(state.schema),
+        state.schema.nodes['group-opening-paren'].create(),
+        zwsTextNode(state.schema),
+      ]
+
+      tr.replaceWith(from, to, Fragment.from(nodesToInsert))
+
+      const cursorPos = from + 2
+      tr.setSelection(TextSelection.create(tr.doc, cursorPos))
+
+      view.dispatch(tr)
+      return true
+    }
+
+    // ── Closing parenthesis ───────────────────────────────────────────
+
+    function handleCloseParen(view, from, to) {
+      const { state } = view
+      const { doc } = state
+
+      if (isInsideStringLiteral(doc, from)) return false
+
+      const stackTop = getParenStackTop(doc, from)
+
+      // Overtype: skip past an existing closing paren instead of inserting
+      // a duplicate. Three conditions must all be met:
+      //  1. The next non-ZWS node is a closing paren
+      //  2. Its type matches the stack top (function↔function, group↔group)
+      //  3. Parens of that type are balanced in the document (no missing closer)
+      const next = findNextNonZWSNode(doc, from)
+      if (next) {
+        const isMatchingFunction =
+          stackTop === 'function' &&
+          next.node.type.name === 'function-closing-paren'
+        const isMatchingGroup =
+          stackTop === 'group' && next.node.type.name === 'group-closing-paren'
+
+        if (
+          (isMatchingFunction || isMatchingGroup) &&
+          areParensBalanced(doc, stackTop)
+        ) {
+          const tr = state.tr
+          const cursorPos = next.pos + next.node.nodeSize
+          tr.setSelection(TextSelection.create(tr.doc, cursorPos))
+          view.dispatch(tr)
+          return true
+        }
+      }
+
+      // When the nearest unclosed `(` is a plain-text `(` preceded by a
+      // known function name (typically coming from pasted-but-unparseable
+      // content like `...+month(`), promote it to a proper function node
+      // and close it with a function-closing-paren — so the whole call
+      // becomes highlighted once the user closes it.
+      const wrapperStart = getWrapperStart(doc, from)
+      if (wrapperStart !== null) {
+        const pending = findPendingTextFunctionOpen(
+          doc,
+          wrapperStart,
+          from,
+          functionNames
+        )
+        if (pending) {
+          return upgradeTextFunctionOnClose(view, pending, from, to)
+        }
+      }
+
+      // Insert a new closing paren only when the opener doesn't have its
+      // closer yet. If parens are already balanced (e.g. typing ')' at an
+      // argument position inside `if(|, , )`), skip to avoid duplicates.
+      if (stackTop === 'function' && !areParensBalanced(doc, 'function')) {
+        // Mirror the `tryFunctionOpen` behaviour: if the unclosed opener
+        // is a 0-arg function and nothing (beyond ZWS) sits between it
+        // and the typed ')', tag the closing paren with `noArgs: true`
+        // so styling (tight spacing, paren-highlight) stays consistent.
+        const innermost =
+          wrapperStart !== null
+            ? findInnermostUnclosedFunctionNode(
+                doc,
+                wrapperStart,
+                from,
+                functionNames
+              )
+            : null
+        let isNoArgsCall = false
+        if (innermost && innermost.node?.attrs?.hasNoArgs) {
+          const between = doc
+            .textBetween(innermost.nodeEnd, from, '\uFFFD')
+            .replace(/\u200B/g, '')
+          isNoArgsCall = between.length === 0
+        }
+
+        const tr = state.tr
+        const closingNode = state.schema.nodes['function-closing-paren'].create(
+          {
+            noArgs: isNoArgsCall,
+          }
+        )
+        tr.replaceWith(from, to, closingNode)
+        const cursorPos = from + 1
+        tr.setSelection(
+          state.selection.constructor.near(tr.doc.resolve(cursorPos))
+        )
+        view.dispatch(tr)
+        return true
+      }
+
+      if (stackTop === 'group' && !areParensBalanced(doc, 'group')) {
+        const tr = state.tr
+        const closingNode = state.schema.nodes['group-closing-paren'].create()
+        tr.replaceWith(from, to, closingNode)
+        const cursorPos = from + 1
+        tr.setSelection(TextSelection.near(tr.doc.resolve(cursorPos)))
+        view.dispatch(tr)
+        return true
+      }
+
+      // Fallback: insert a group-closing-paren so ')' is always highlighted
+      // in mauve — whether typed standalone, inside a balanced function, or
+      // inside a balanced group.
+      const tr = state.tr
+      const closingNode = state.schema.nodes['group-closing-paren'].create()
+      tr.replaceWith(from, to, closingNode)
+      const cursorPos = from + 1
+      tr.setSelection(TextSelection.near(tr.doc.resolve(cursorPos)))
+      view.dispatch(tr)
+      return true
+    }
+
+    function upgradeTextFunctionOnClose(view, pending, from, to) {
+      const { state } = view
+      const { doc, schema } = state
+      const { functionName, functionStart, parenEnd } = pending
+      const functionDef = functionDefinitions[functionName.toLowerCase()]
+      const minArgs = functionDef?.signature?.minArgs || 0
+
+      // Treat the call as a no-args invocation only when the function
+      // takes no arguments AND nothing (beyond ZWS markers) sits between
+      // the `(` and the typed `)`. `\uFFFD` stands in for any atom node
+      // between those positions, keeping the check robust against
+      // already-parsed content like operator components.
+      const betweenText = doc
+        .textBetween(parenEnd, from, '\uFFFD')
+        .replace(/\u200B/g, '')
+      const isNoArgsCall = minArgs === 0 && betweenText.length === 0
+
+      const tr = state.tr
+
+      // Apply the higher-position replacement first so positions below
+      // remain stable while we build the transaction.
+      tr.replaceWith(
+        from,
+        to,
+        Fragment.from([
+          schema.nodes['function-closing-paren'].create({
+            noArgs: isNoArgsCall,
+          }),
+          zwsTextNode(schema),
+        ])
+      )
+      tr.replaceWith(
+        functionStart,
+        parenEnd,
+        Fragment.from([
+          zwsTextNode(schema),
+          schema.nodes['function-formula-component'].create({
+            functionName,
+            hasNoArgs: isNoArgsCall,
+          }),
+        ])
+      )
+
+      // Place the cursor right after the closing paren (before its
+      // trailing ZWS). `to` maps forward through both replacements to
+      // that position in the final document.
+      const cursorPos = tr.mapping.map(to, 1)
+      tr.setSelection(TextSelection.near(tr.doc.resolve(cursorPos)))
+
+      view.dispatch(tr)
+      return true
+    }
+
+    // ── Comma ─────────────────────────────────────────────────────────
+
+    function handleComma(view, from, to) {
+      const { state } = view
+      const { doc } = state
+
+      if (getParenStackTop(doc, from) !== 'function') return false
+      if (isInsideStringLiteral(doc, from)) return false
+
+      const tr = state.tr
+      const nodesToInsert = [
+        state.schema.nodes['function-argument-comma'].create(),
+        zwsTextNode(state.schema),
+      ]
+
+      tr.replaceWith(from, to, Fragment.from(nodesToInsert))
+
+      const cursorPos = from + 1
+      tr.setSelection(TextSelection.create(tr.doc, cursorPos))
+
+      view.dispatch(tr)
+      return true
+    }
+
+    // ── Operators ─────────────────────────────────────────────────────
+
+    function handleMinusWithSpace(view, from) {
+      const { state } = view
+      const { doc, schema, tr } = state
+
+      const $pos = doc.resolve(from)
+      const nodeBefore = $pos.nodeBefore
+
+      if (
+        !nodeBefore ||
+        !nodeBefore.isText ||
+        !nodeBefore.text ||
+        !nodeBefore.text.endsWith('-')
+      ) {
+        return false
+      }
+
+      const minusStartPos = from - 1
+      const nodesToInsert = [
+        schema.nodes['operator-formula-component'].create({
+          operatorSymbol: '-',
+        }),
+        schema.text(' '),
+        zwsTextNode(schema),
+      ]
+
+      tr.replaceWith(minusStartPos, from, Fragment.from(nodesToInsert))
+
+      const cursorPos = minusStartPos + 2
+      tr.setSelection(TextSelection.create(tr.doc, cursorPos))
+
+      view.dispatch(tr)
+      return true
+    }
+
+    function handleOperator(view, from, to, typedText) {
+      const { state } = view
+      const { doc, tr, schema } = state
+
+      if (isInsideStringLiteral(doc, from)) return false
+
+      let operatorText = typedText
+      let startPos = from
+      let endPos = from
+
+      const $pos = doc.resolve(from)
+      const nodeBefore = $pos.nodeBefore
+
+      if (nodeBefore && nodeBefore.type.name === 'operator-formula-component') {
+        const potential = nodeBefore.attrs.operatorSymbol + typedText
+        if (operators.includes(potential)) {
+          operatorText = potential
+          startPos = from - nodeBefore.nodeSize
+          endPos = from
+        }
+      } else {
+        const prevChar = doc.textBetween(Math.max(0, from - 1), from, '')
+        const potential = prevChar + typedText
+
+        if (prevChar && operators.includes(potential)) {
+          operatorText = potential
+          startPos = from - 1
+          endPos = from
+        } else if (operators.includes(typedText)) {
+          operatorText = typedText
+        }
+      }
+
+      if (!operators.includes(operatorText)) return false
+
+      const operatorNode = schema.nodes['operator-formula-component'].create({
+        operatorSymbol: operatorText,
+      })
+
+      tr.replaceWith(
+        startPos,
+        endPos,
+        Fragment.from([operatorNode, zwsTextNode(schema)])
+      )
+
+      const cursorPos = startPos + 1
+      tr.setSelection(TextSelection.create(tr.doc, cursorPos))
+
+      view.dispatch(tr)
+      return true
+    }
+
+    // ── Operator character set ────────────────────────────────────────
+
+    const operatorChars = new Set()
+    operators.forEach((op) => {
+      for (const ch of op) operatorChars.add(ch)
+    })
+
+    // ── Single plugin ─────────────────────────────────────────────────
+
+    return [
+      new Plugin({
+        key: new PluginKey('inputDetection'),
+        props: {
+          handleTextInput(view, from, to, text) {
+            if (text === '(') return handleOpenParen(view, from, to)
+            if (text === ')') return handleCloseParen(view, from, to)
+            if (text === ',') return handleComma(view, from, to)
+            if (text === '-') return false
+            if (text === ' ') return handleMinusWithSpace(view, from)
+            if (operatorChars.has(text))
+              return handleOperator(view, from, to, text)
+            return false
+          },
+        },
+      }),
+    ]
+  },
+})
diff --git a/web-frontend/modules/core/components/formula/extensions/NodeSelectionExtension.js b/web-frontend/modules/core/components/formula/extensions/NodeSelectionExtension.js
index 736b8cc06d..92a2e41890 100644
--- a/web-frontend/modules/core/components/formula/extensions/NodeSelectionExtension.js
+++ b/web-frontend/modules/core/components/formula/extensions/NodeSelectionExtension.js
@@ -14,7 +14,8 @@ export const NodeSelectionExtension = Extension.create({
 
   addOptions() {
     return {
-      vueComponent: null,
+      onNodeSelected: null,
+      onNodeUnselected: null,
     }
   },
 
@@ -35,13 +36,10 @@ export const NodeSelectionExtension = Extension.create({
             this.storage.selectedNode = node
             this.storage.selectedNode.attrs.isSelected = true
 
-            const { vueComponent } = this.options
-            if (vueComponent) {
-              vueComponent.$emit('node-selected', {
-                node: this.storage.selectedNode,
-                path: this.storage.selectedNode.attrs?.path || null,
-              })
-            }
+            this.options.onNodeSelected?.({
+              node: this.storage.selectedNode,
+              path: this.storage.selectedNode.attrs?.path || null,
+            })
           }
 
           return true
@@ -52,12 +50,9 @@ export const NodeSelectionExtension = Extension.create({
           if (this.storage.selectedNode) {
             this.storage.selectedNode.attrs.isSelected = false
 
-            const { vueComponent } = this.options
-            if (vueComponent) {
-              vueComponent.$emit('node-unselected', {
-                node: this.storage.selectedNode,
-              })
-            }
+            this.options.onNodeUnselected?.({
+              node: this.storage.selectedNode,
+            })
 
             this.storage.selectedNode = null
           }
diff --git a/web-frontend/modules/core/components/formula/extensions/OperatorDetectionExtension.js b/web-frontend/modules/core/components/formula/extensions/OperatorDetectionExtension.js
deleted file mode 100644
index cb8d3bf12e..0000000000
--- a/web-frontend/modules/core/components/formula/extensions/OperatorDetectionExtension.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import { Extension } from '@tiptap/core'
-import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
-import { Fragment } from '@tiptap/pm/model'
-
-export const OperatorDetectionExtension = Extension.create({
-  name: 'operatorDetection',
-
-  addOptions() {
-    return {
-      operators: [],
-      vueComponent: null,
-    }
-  },
-
-  addProseMirrorPlugins() {
-    const operators = this.options.operators
-
-    function isInsideStringLiteral(doc, pos) {
-      const text = doc.textBetween(0, pos, '\n')
-      let inString = false
-      let quoteChar = null
-
-      for (let i = 0; i < text.length; i++) {
-        const char = text[i]
-        if ((char === '"' || char === "'") && text[i - 1] !== '\\') {
-          if (!inString) {
-            inString = true
-            quoteChar = char
-          } else if (char === quoteChar) {
-            inString = false
-            quoteChar = null
-          }
-        }
-      }
-
-      return inString
-    }
-
-    /**
-     * Handles minus operator detection when space is typed
-     * Returns true if the minus was converted to an operator, false otherwise
-     */
-    function handleMinusOperatorWithSpace(view, from, to) {
-      const { state } = view
-      const { doc, schema, tr } = state
-
-      // Get the position and node before cursor
-      const $pos = doc.resolve(from)
-      const nodeBefore = $pos.nodeBefore
-
-      // Check if the node before is text ending with '-'
-      if (
-        nodeBefore &&
-        nodeBefore.isText &&
-        nodeBefore.text &&
-        nodeBefore.text.endsWith('-')
-      ) {
-        // The space will be consumed as part of the operator replacement
-        // Replace the minus at position from-1 to from (the minus character)
-        // and insert operator + space + ZWS
-        const minusStartPos = from - 1
-
-        const nodesToInsert = [
-          schema.nodes['operator-formula-component'].create({
-            operatorSymbol: '-',
-          }),
-          schema.text(' '),
-          schema.text('\u200B'),
-        ]
-
-        const fragment = Fragment.from(nodesToInsert)
-        tr.replaceWith(minusStartPos, from, fragment)
-
-        // Position cursor after the space, in the ZWS slot
-        const cursorPos = minusStartPos + 2
-        tr.setSelection(TextSelection.create(tr.doc, cursorPos))
-
-        view.dispatch(tr)
-        return true
-      }
-
-      return false
-    }
-
-    function shouldConvertOperator(view, from, to, typedChar) {
-      const { state } = view
-      const { doc } = state
-
-      // Don't convert if inside a string literal
-      if (isInsideStringLiteral(doc, from)) {
-        return false
-      }
-
-      return true
-    }
-
-    function handleOperatorTyped(view, from, to, typedText) {
-      const { state } = view
-      const { tr, schema } = state
-
-      let operatorText = typedText
-      let startPos = from
-      let endPos = from
-
-      // Unified handling for all compound operators (!=, >=, <=, &&, ||)
-      // Try to form a compound operator by looking at what's before the cursor
-
-      // First, check if there's an operator node right before the cursor
-      // This has priority because > and < are converted to nodes immediately
-      const $pos = state.doc.resolve(from)
-      const nodeBefore = $pos.nodeBefore
-
-      if (nodeBefore && nodeBefore.type.name === 'operator-formula-component') {
-        const prevOperator = nodeBefore.attrs.operatorSymbol
-        const potentialFromNode = prevOperator + typedText
-
-        if (operators.includes(potentialFromNode)) {
-          // Replace the previous operator node with the compound operator
-          operatorText = potentialFromNode
-          startPos = from - nodeBefore.nodeSize
-          endPos = from
-        }
-      } else {
-        // Check for text character before cursor
-        const prevChar = state.doc.textBetween(Math.max(0, from - 1), from, '')
-        const potentialOperator = prevChar + typedText
-
-        if (prevChar && operators.includes(potentialOperator)) {
-          // We can form a compound operator with the previous character
-          // Only if there actually IS a previous character
-          operatorText = potentialOperator
-          startPos = from - 1
-          endPos = from
-        } else if (operators.includes(typedText)) {
-          // Simple operator (like > or <), no need to look back
-          operatorText = typedText
-          // startPos and endPos already set to 'from'
-        }
-      }
-
-      // Check if the operator is in the allowed list
-      if (!operators.includes(operatorText)) {
-        return false
-      }
-
-      // Create operator node
-      const operatorNode = schema.nodes['operator-formula-component'].create({
-        operatorSymbol: operatorText,
-      })
-
-      // Build nodes to insert (operator + ZWS)
-      // Note: for minus, space is handled separately in space detection
-      const nodesToInsert = [operatorNode, schema.text('\u200B')]
-
-      const fragment = Fragment.from(nodesToInsert)
-
-      // Replace from startPos to endPos with the fragment
-      tr.replaceWith(startPos, endPos, fragment)
-
-      // Position cursor after the operator, in the ZWS slot
-      const cursorPos = startPos + 1
-      tr.setSelection(TextSelection.create(tr.doc, cursorPos))
-
-      view.dispatch(tr)
-      return true
-    }
-
-    // Extract all unique characters from the operators list
-    const operatorChars = new Set()
-    operators.forEach((op) => {
-      for (let i = 0; i < op.length; i++) {
-        operatorChars.add(op.charAt(i))
-      }
-    })
-
-    return [
-      new Plugin({
-        key: new PluginKey('operatorDetection'),
-        props: {
-          handleTextInput(view, from, to, text) {
-            // Special handling for minus operator
-            // Don't convert '-' immediately to allow typing negative numbers
-            if (text === '-') {
-              return false
-            }
-
-            // If space is typed, check if it's after a minus sign to convert it
-            if (text === ' ') {
-              return handleMinusOperatorWithSpace(view, from, to)
-            }
-
-            // Only handle operator characters (excluding minus and space)
-            if (!operatorChars.has(text)) {
-              return false
-            }
-
-            // Don't convert if we shouldn't
-            if (!shouldConvertOperator(view, from, to, text)) {
-              return false
-            }
-
-            // Handle the operator
-            return handleOperatorTyped(view, from, to, text)
-          },
-        },
-      }),
-    ]
-  },
-})
diff --git a/web-frontend/modules/core/components/formula/extensions/ParenMatchHighlightExtension.js b/web-frontend/modules/core/components/formula/extensions/ParenMatchHighlightExtension.js
new file mode 100644
index 0000000000..46bea8726c
--- /dev/null
+++ b/web-frontend/modules/core/components/formula/extensions/ParenMatchHighlightExtension.js
@@ -0,0 +1,97 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from 'prosemirror-state'
+
+const parenMatchHighlightKey = new PluginKey('parenMatchHighlight')
+
+const HIGHLIGHT_CLASS = 'formula-input-field__paren-highlight'
+const FUNC_OPENER = '.function-formula-component'
+const GROUP_OPENER = '[data-group-opening-paren]'
+const FUNC_CLOSER = '[data-formula-closing-paren]'
+const GROUP_CLOSER = '[data-group-closing-paren]'
+const OPENER_SELECTOR = `${FUNC_OPENER}, ${GROUP_OPENER}`
+const CLOSER_SELECTOR = `${FUNC_CLOSER}, ${GROUP_CLOSER}`
+const ALL_SELECTOR = `${OPENER_SELECTOR}, ${CLOSER_SELECTOR}`
+
+export function getParenType(el) {
+  if (el.matches(FUNC_OPENER) || el.matches(FUNC_CLOSER)) return 'function'
+  return 'group'
+}
+
+/**
+ * Walks all formula-related DOM elements in document order and pairs
+ * openers with closers using a stack, handling arbitrary nesting of
+ * function calls and grouping parentheses.
+ * Only pairs elements of matching types (function↔function, group↔group)
+ * so that a missing closer never causes a wrong highlight.
+ */
+export function collectDOMParenPairs(root) {
+  const elements = Array.from(root.querySelectorAll(ALL_SELECTOR))
+  const pairs = new Map()
+  const stack = []
+
+  for (const el of elements) {
+    if (el.matches(OPENER_SELECTOR)) {
+      stack.push(el)
+    } else if (stack.length > 0) {
+      const closerType = getParenType(el)
+      if (getParenType(stack[stack.length - 1]) === closerType) {
+        const opener = stack.pop()
+        pairs.set(opener, el)
+        pairs.set(el, opener)
+      }
+    }
+  }
+
+  return pairs
+}
+
+export const ParenMatchHighlightExtension = Extension.create({
+  name: 'parenMatchHighlight',
+
+  addProseMirrorPlugins() {
+    let highlightedEls = []
+
+    const clearHighlights = () => {
+      for (const el of highlightedEls) {
+        el.classList.remove(HIGHLIGHT_CLASS)
+      }
+      highlightedEls = []
+    }
+
+    return [
+      new Plugin({
+        key: parenMatchHighlightKey,
+        props: {
+          handleDOMEvents: {
+            mousemove(view, event) {
+              const el = event.target?.closest?.(ALL_SELECTOR)
+
+              if (!el || !view.dom.contains(el)) {
+                if (highlightedEls.length > 0) clearHighlights()
+                return false
+              }
+
+              if (highlightedEls.includes(el)) return false
+
+              clearHighlights()
+
+              const pairs = collectDOMParenPairs(view.dom)
+              const matched = pairs.get(el)
+              if (!matched) return false
+
+              el.classList.add(HIGHLIGHT_CLASS)
+              matched.classList.add(HIGHLIGHT_CLASS)
+              highlightedEls = [el, matched]
+
+              return false
+            },
+            mouseleave() {
+              clearHighlights()
+              return false
+            },
+          },
+        },
+      }),
+    ]
+  },
+})
diff --git a/web-frontend/modules/core/components/formula/extensions/SmartDeletionExtension.js b/web-frontend/modules/core/components/formula/extensions/SmartDeletionExtension.js
index ccc4a1fdfb..6fe4c8302c 100644
--- a/web-frontend/modules/core/components/formula/extensions/SmartDeletionExtension.js
+++ b/web-frontend/modules/core/components/formula/extensions/SmartDeletionExtension.js
@@ -1,9 +1,75 @@
 import { Extension } from '@tiptap/core'
+import { isZWSNode } from '@baserow/modules/core/components/formula/extensions/helpers'
+
+/**
+ * Scans forward from `afterFunctionPos` to find the function-closing-paren
+ * and all function-argument-comma nodes that directly belong to the deleted
+ * function-formula-component. Also includes the ZWS nodes immediately
+ * surrounding those structural nodes so that no stray invisible characters
+ * remain in the document after deletion.
+ *
+ * A Map keyed by position is used to deduplicate entries (e.g. a single ZWS
+ * that sits between two commas would otherwise be collected twice).
+ *
+ * Nested function calls are tracked so that their own commas and closing
+ * parens are not mistaken for direct children of the deleted function.
+ */
+function findMatchedFunctionStructure(doc, afterFunctionPos) {
+  const byPos = new Map()
+
+  const add = (pos, size) => {
+    if (!byPos.has(pos)) byPos.set(pos, { pos, size })
+  }
+
+  const addWithAdjacentZWS = (pos, size) => {
+    // ZWS immediately before this node
+    const $before = doc.resolve(pos)
+    const prevNode = $before.nodeBefore
+    if (prevNode && isZWSNode(prevNode)) {
+      add(pos - prevNode.nodeSize, prevNode.nodeSize)
+    }
+
+    add(pos, size)
+
+    // ZWS immediately after this node
+    const $after = doc.resolve(pos + size)
+    const nextNode = $after.nodeAfter
+    if (nextNode && isZWSNode(nextNode)) {
+      add(pos + size, nextNode.nodeSize)
+    }
+  }
+
+  let nestedDepth = 0
+  let closerFound = false
+
+  doc.nodesBetween(afterFunctionPos, doc.content.size, (node, pos) => {
+    if (closerFound) return
+    const name = node.type.name
+    if (name === 'function-formula-component') {
+      nestedDepth++
+    } else if (name === 'function-closing-paren') {
+      if (nestedDepth === 0) {
+        addWithAdjacentZWS(pos, node.nodeSize)
+        closerFound = true
+        return false
+      }
+      nestedDepth--
+    } else if (name === 'function-argument-comma' && nestedDepth === 0) {
+      addWithAdjacentZWS(pos, node.nodeSize)
+    }
+  })
+
+  return [...byPos.values()]
+}
 
 /**
  * Extension that provides smart deletion behavior for atomic nodes.
  * When deleting (Backspace or Delete) near an atomic node with adjacent ZWS,
  * both the node and the ZWS are deleted together in a single keystroke.
+ *
+ * For function-formula-component nodes, the deletion also cascades to the
+ * matched function-closing-paren and all direct function-argument-comma
+ * nodes, keeping only the argument content.
  */
 export const SmartDeletionExtension = Extension.create({
   name: 'smartDeletion',
@@ -49,12 +115,9 @@ export const SmartDeletionExtension = Extension.create({
             const nodeAfterSpace = $afterSpace.nodeAfter
 
             const deleteFrom = posOtherSideSpace - nodeOtherSideSpace.nodeSize
-            const deleteTo =
-              nodeAfterSpace &&
-              nodeAfterSpace.isText &&
-              nodeAfterSpace.text === '\u200B'
-                ? from + nodeAfterSpace.nodeSize
-                : from
+            const deleteTo = isZWSNode(nodeAfterSpace)
+              ? from + nodeAfterSpace.nodeSize
+              : from
 
             return { from: deleteFrom, to: deleteTo }
           }
@@ -101,12 +164,8 @@ export const SmartDeletionExtension = Extension.create({
       const $pos = state.doc.resolve(from)
       const adjacentNode = isBackward ? $pos.nodeBefore : $pos.nodeAfter
 
-      // Check if the adjacent node is a ZWS
-      if (
-        adjacentNode &&
-        adjacentNode.isText &&
-        adjacentNode.text === '\u200B'
-      ) {
+      // Case A: Adjacent node is a ZWS — check what's on the other side of it.
+      if (adjacentNode && isZWSNode(adjacentNode)) {
         // Get the position on the other side of the ZWS
         const posOtherSideZWS = isBackward
           ? from - adjacentNode.nodeSize
@@ -118,8 +177,6 @@ export const SmartDeletionExtension = Extension.create({
 
         // Check if the node on the other side is an atomic node
         if (nodeOtherSide && atomicNodes.includes(nodeOtherSide.type.name)) {
-          // Delete both the ZWS and the atomic node
-          const tr = state.tr
           const deleteFrom = isBackward
             ? posOtherSideZWS - nodeOtherSide.nodeSize
             : from
@@ -127,12 +184,67 @@ export const SmartDeletionExtension = Extension.create({
             ? from
             : posOtherSideZWS + nodeOtherSide.nodeSize
 
-          tr.delete(deleteFrom, deleteTo)
+          const tr = state.tr
+
+          if (nodeOtherSide.type.name === 'function-formula-component') {
+            // Cascade: scan from posOtherSideZWS (= end of function node) to
+            // find its matched closing paren and direct arg commas.
+            const extra = findMatchedFunctionStructure(
+              state.doc,
+              posOtherSideZWS
+            )
+            const allDeletions = [
+              { pos: deleteFrom, size: deleteTo - deleteFrom },
+              ...extra,
+            ].sort((a, b) => b.pos - a.pos)
+            for (const { pos, size } of allDeletions) {
+              tr.delete(pos, pos + size)
+            }
+          } else {
+            tr.delete(deleteFrom, deleteTo)
+          }
+
           dispatch(tr)
           return true
         }
       }
 
+      // Case B: Cursor is directly adjacent to a function-formula-component
+      // (no ZWS between them). This happens when loaded formulas have no ZWS
+      // after the function opener, or after the first argument slot's ZWS was
+      // consumed by typed content and then deleted.
+      if (
+        adjacentNode &&
+        !adjacentNode.isText &&
+        adjacentNode.type.name === 'function-formula-component'
+      ) {
+        const deleteFrom = isBackward ? from - adjacentNode.nodeSize : from
+        const deleteTo = isBackward ? from : from + adjacentNode.nodeSize
+        const tr = state.tr
+
+        const extra = findMatchedFunctionStructure(state.doc, deleteTo)
+
+        // In Case B we don't delete a trailing ZWS as part of the main range,
+        // so if there is a ZWS immediately after the function node include it.
+        const $afterFn = state.doc.resolve(deleteTo)
+        const nodeAfterFn = $afterFn.nodeAfter
+        const mainSize =
+          nodeAfterFn && isZWSNode(nodeAfterFn)
+            ? deleteTo - deleteFrom + nodeAfterFn.nodeSize
+            : deleteTo - deleteFrom
+
+        const allDeletions = [
+          { pos: deleteFrom, size: mainSize },
+          ...extra,
+        ].sort((a, b) => b.pos - a.pos)
+        for (const { pos, size } of allDeletions) {
+          tr.delete(pos, pos + size)
+        }
+
+        dispatch(tr)
+        return true
+      }
+
       return false
     }
 
diff --git a/web-frontend/modules/core/components/formula/extensions/ZWSManagementExtension.js b/web-frontend/modules/core/components/formula/extensions/ZWSManagementExtension.js
index d4d52a6ee7..14cd69aee7 100644
--- a/web-frontend/modules/core/components/formula/extensions/ZWSManagementExtension.js
+++ b/web-frontend/modules/core/components/formula/extensions/ZWSManagementExtension.js
@@ -1,5 +1,11 @@
 import { Extension } from '@tiptap/core'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
+import {
+  ZWS,
+  CONSECUTIVE_ZWS_REGEX,
+  isZWSNode,
+  zwsTextNode,
+} from '@baserow/modules/core/components/formula/extensions/helpers'
 
 /**
  * Extension that manages Zero-Width Spaces (ZWS) in the formula editor.
@@ -15,20 +21,19 @@ export const ZWSManagementExtension = Extension.create({
       new Plugin({
         key: new PluginKey('zwsManagement'),
         appendTransaction(transactions, oldState, newState) {
+          if (!transactions.some((t) => t.docChanged)) return null
+
           const tr = newState.tr
 
           // Phase 1: Clean up consecutive ZWS.
           // Collect replacements first, then apply in reverse order to avoid
-          // position drift: each insertText changes the document length, so
-          // positions calculated during iteration become invalid after the first
-          // modification. Applying in reverse (highest pos first) keeps earlier
-          // positions valid for subsequent operations.
+          // position drift.
           const zwsReplacements = []
           newState.doc.descendants((node, pos) => {
             if (node.isText && node.text) {
               const text = node.text
-              if (text.includes('\u200B\u200B')) {
-                const cleanedText = text.replace(/\u200B+/g, '\u200B')
+              if (text.includes(ZWS + ZWS)) {
+                const cleanedText = text.replace(CONSECUTIVE_ZWS_REGEX, ZWS)
                 if (cleanedText !== text) {
                   zwsReplacements.push({
                     cleanedText,
@@ -47,68 +52,71 @@ export const ZWSManagementExtension = Extension.create({
           // Apply cleanup changes before checking for missing ZWS
           const docAfterCleanup = modified ? tr.doc : newState.doc
 
-          // Phase 2: Ensure ZWS in empty argument slots
+          // Phase 2: Ensure ZWS in empty argument slots.
+          // Collect insertions and apply in reverse to avoid position drift.
           const argumentStartNodes = [
             'function-formula-component',
             'function-argument-comma',
             'operator-formula-component',
+            'group-opening-paren',
           ]
 
           const argumentEndNodes = [
             'function-argument-comma',
             'function-closing-paren',
+            'group-closing-paren',
           ]
 
           const needZWSBeforeNodes = [
             'operator-formula-component',
             'function-argument-comma',
             'function-closing-paren',
+            'group-closing-paren',
           ]
 
+          const insertions = []
+
           docAfterCleanup.descendants((node, pos) => {
-            // Check for ZWS after argument start nodes
             if (argumentStartNodes.includes(node.type.name)) {
               const afterNodePos = pos + node.nodeSize
               const $afterNode = docAfterCleanup.resolve(afterNodePos)
               const nextNode = $afterNode.nodeAfter
 
-              // Check if the next node is an argument end node (empty argument)
               if (nextNode && argumentEndNodes.includes(nextNode.type.name)) {
-                // Empty argument slot! Insert a ZWS
-                tr.insert(afterNodePos, newState.schema.text('\u200B'))
-                modified = true
+                insertions.push(afterNodePos)
               } else if (!nextNode) {
-                // End of document after argument start node
-                tr.insert(afterNodePos, newState.schema.text('\u200B'))
-                modified = true
+                insertions.push(afterNodePos)
               }
             }
 
-            // Check for ZWS before nodes that need it
             if (needZWSBeforeNodes.includes(node.type.name)) {
               const $beforeNode = docAfterCleanup.resolve(pos)
               const prevNode = $beforeNode.nodeBefore
 
-              // If the previous node is NOT a ZWS, we need to add one
-              if (
-                !prevNode ||
-                !(prevNode.isText && prevNode.text === '\u200B')
-              ) {
-                // Check if previous node is an atomic node that marks argument boundary
+              if (!prevNode || !isZWSNode(prevNode)) {
                 if (
                   !prevNode ||
                   prevNode.type.name === 'function-formula-component' ||
                   prevNode.type.name === 'function-argument-comma' ||
-                  prevNode.type.name === 'operator-formula-component'
+                  prevNode.type.name === 'operator-formula-component' ||
+                  prevNode.type.name === 'group-opening-paren'
                 ) {
-                  // Empty left argument! Insert a ZWS
-                  tr.insert(pos, newState.schema.text('\u200B'))
-                  modified = true
+                  insertions.push(pos)
                 }
               }
             }
           })
 
+          if (insertions.length > 0) {
+            modified = true
+            const uniquePositions = [...new Set(insertions)].sort(
+              (a, b) => b - a
+            )
+            for (const insertPos of uniquePositions) {
+              tr.insert(insertPos, zwsTextNode(newState.schema))
+            }
+          }
+
           return modified ? tr : null
         },
       }),
diff --git a/web-frontend/modules/core/components/formula/extensions/helpers.js b/web-frontend/modules/core/components/formula/extensions/helpers.js
new file mode 100644
index 0000000000..905eb8cc62
--- /dev/null
+++ b/web-frontend/modules/core/components/formula/extensions/helpers.js
@@ -0,0 +1,200 @@
+// ── ZWS constants and helpers ──────────────────────────────────────
+
+export const ZWS = '\u200B'
+export const ZWS_REGEX = /\u200B/g
+export const CONSECUTIVE_ZWS_REGEX = /\u200B+/g
+
+export function isZWSNode(node) {
+  return node?.isText && node.text && /^\u200B+$/.test(node.text)
+}
+
+export function zwsTextJSON() {
+  return { type: 'text', text: ZWS }
+}
+
+export function zwsTextNode(schema) {
+  return schema.text(ZWS)
+}
+
+// ── ProseMirror document helpers ───────────────────────────────────
+
+/**
+ * Returns the text content from the text node at the cursor position,
+ * up to the cursor offset. Uses $pos for direct node access instead
+ * of doc.textBetween, which skips atom nodes and produces a concatenated
+ * string whose character positions don't correspond to document positions.
+ */
+export function getTextBeforeCursor(doc, from) {
+  const $pos = doc.resolve(from)
+
+  if ($pos.textOffset > 0) {
+    const textNode = $pos.parent.child($pos.index())
+    return textNode.text.slice(0, $pos.textOffset)
+  }
+
+  if ($pos.nodeBefore && $pos.nodeBefore.isText) {
+    return $pos.nodeBefore.text
+  }
+
+  return ''
+}
+
+/**
+ * Scans forward from `from`, skipping over ZWS-only text nodes,
+ * and returns the first non-ZWS node found (with its position).
+ * Used for overtype behaviour: when the cursor is followed only by
+ * ZWS and then a closing paren, we move past it instead of inserting
+ * a duplicate.
+ */
+export function findNextNonZWSNode(doc, from) {
+  let pos = from
+  const $pos = doc.resolve(pos)
+
+  if ($pos.textOffset > 0) {
+    const textNode = $pos.parent.child($pos.index())
+    const remaining = textNode.text.slice($pos.textOffset)
+    if (!/^\u200B*$/.test(remaining)) return null
+    pos += remaining.length
+  }
+
+  let $current = doc.resolve(pos)
+  while ($current.nodeAfter) {
+    const next = $current.nodeAfter
+    if (next.isText && /^\u200B+$/.test(next.text)) {
+      pos += next.nodeSize
+      $current = doc.resolve(pos)
+      continue
+    }
+    return { node: next, pos }
+  }
+
+  return null
+}
+
+/**
+ * Builds a stack representing currently-open parentheses between
+ * wrapperStart and pos. Each entry is 'function' or 'group'.
+ * The top of the stack tells what the next ')' would close.
+ */
+export function buildParenStack(doc, wrapperStart, pos) {
+  const stack = []
+
+  doc.nodesBetween(wrapperStart, pos, (node, nodePos) => {
+    if (nodePos >= pos) return false
+
+    if (node.type.name === 'function-formula-component') {
+      stack.push('function')
+    } else if (node.type.name === 'group-opening-paren') {
+      stack.push('group')
+    } else if (
+      node.type.name === 'function-closing-paren' ||
+      node.type.name === 'group-closing-paren'
+    ) {
+      stack.pop()
+    } else if (node.isText && node.text) {
+      for (let i = 0; i < node.text.length; i++) {
+        if (nodePos + i >= pos) break
+        if (node.text[i] === '(') {
+          stack.push('group')
+        } else if (node.text[i] === ')') {
+          stack.pop()
+        }
+      }
+    }
+  })
+
+  return stack
+}
+
+export function buildDetailedParenStack(doc, wrapperStart, pos, functionNames) {
+  const stack = []
+  const lowerFns = new Set(
+    (functionNames || []).map((n) => (n || '').toLowerCase())
+  )
+  const trailingIdentifier = /[A-Za-z_][A-Za-z0-9_]*$/
+
+  doc.nodesBetween(wrapperStart, pos, (node, nodePos) => {
+    if (nodePos >= pos) return false
+
+    if (node.type.name === 'function-formula-component') {
+      stack.push({
+        kind: 'function',
+        node,
+        nodeStart: nodePos,
+        nodeEnd: nodePos + node.nodeSize,
+      })
+    } else if (node.type.name === 'group-opening-paren') {
+      stack.push({ kind: 'group' })
+    } else if (
+      node.type.name === 'function-closing-paren' ||
+      node.type.name === 'group-closing-paren'
+    ) {
+      stack.pop()
+    } else if (node.isText && node.text) {
+      for (let i = 0; i < node.text.length; i++) {
+        if (nodePos + i >= pos) break
+        const ch = node.text[i]
+        if (ch === '(') {
+          const match = node.text.slice(0, i).match(trailingIdentifier)
+          if (match && lowerFns.has(match[0].toLowerCase())) {
+            stack.push({
+              kind: 'text-function',
+              functionName: match[0],
+              functionStart: nodePos + i - match[0].length,
+              parenEnd: nodePos + i + 1,
+            })
+          } else {
+            stack.push({ kind: 'group' })
+          }
+        } else if (ch === ')') {
+          stack.pop()
+        }
+      }
+    }
+  })
+
+  return stack
+}
+
+/**
+ * Returns the description of the top-most unclosed opener when it is a
+ * text `(` preceded by a known function name. Returns `null` otherwise
+ * — including when the top opener is a proper `function-formula-component`
+ * / `group-opening-paren` node, or a plain-text `(` that isn't preceded
+ * by a function identifier.
+ *
+ * Typical use: on a typed ')', decide whether to upgrade a pasted
+ * `funcName(` text fragment into proper highlighted function nodes
+ * instead of closing it as a generic group.
+ */
+export function findPendingTextFunctionOpen(
+  doc,
+  wrapperStart,
+  pos,
+  functionNames
+) {
+  const stack = buildDetailedParenStack(doc, wrapperStart, pos, functionNames)
+  const top = stack.length > 0 ? stack[stack.length - 1] : null
+  return top && top.kind === 'text-function' ? top : null
+}
+
+/**
+ * Returns info about the innermost unclosed `function-formula-component`
+ * node when it sits at the top of the opener stack at `pos`. Returns
+ * `null` when the top opener is not a proper function node (group,
+ * text-function) or when no opener is pending.
+ *
+ * Typical use: on a typed ')', inherit the function's `hasNoArgs`
+ * attribute onto the new `function-closing-paren` so styling stays
+ * consistent with the `tryFunctionOpen` flow.
+ */
+export function findInnermostUnclosedFunctionNode(
+  doc,
+  wrapperStart,
+  pos,
+  functionNames
+) {
+  const stack = buildDetailedParenStack(doc, wrapperStart, pos, functionNames)
+  const top = stack.length > 0 ? stack[stack.length - 1] : null
+  return top && top.kind === 'function' ? top : null
+}
diff --git a/web-frontend/modules/core/formula/parser/parser.js b/web-frontend/modules/core/formula/parser/parser.js
index 1bffa43427..0d80261213 100644
--- a/web-frontend/modules/core/formula/parser/parser.js
+++ b/web-frontend/modules/core/formula/parser/parser.js
@@ -10,7 +10,7 @@ import { BaserowFormulaParserError } from '@baserow/modules/core/formula/parser/
  * @param formula
  * @return {*} The resulting antlr4 parse tree of the formula
  */
-export default function parseBaserowFormula(formula) {
+export default function parseBaserowFormula(formula, throwOnError = true) {
   const chars = new antlr4.InputStream(formula)
   const lexer = new BaserowFormulaLexer(chars)
   const tokens = new antlr4.CommonTokenStream(lexer)
@@ -19,7 +19,9 @@ export default function parseBaserowFormula(formula) {
   // noinspection JSUnusedLocalSymbols
   parser.addErrorListener({
     syntaxError: (recognizer, offendingSymbol, line, column, msg, err) => {
-      throw new BaserowFormulaParserError(offendingSymbol, line, column, msg)
+      if (throwOnError) {
+        throw new BaserowFormulaParserError(offendingSymbol, line, column, msg)
+      }
     },
   })
   parser.buildParseTrees = true
diff --git a/web-frontend/modules/core/formula/tiptap/fromTipTapVisitor.js b/web-frontend/modules/core/formula/tiptap/fromTipTapVisitor.js
index 685241c423..d79a68b692 100644
--- a/web-frontend/modules/core/formula/tiptap/fromTipTapVisitor.js
+++ b/web-frontend/modules/core/formula/tiptap/fromTipTapVisitor.js
@@ -1,3 +1,8 @@
+import {
+  ZWS,
+  ZWS_REGEX,
+} from '@baserow/modules/core/components/formula/extensions/helpers'
+
 const ZWS_MARKER = Symbol('zws_marker')
 
 export class FromTipTapVisitor {
@@ -171,11 +176,11 @@ export class FromTipTapVisitor {
   }
 
   visitText(node) {
-    if (node.text === '\u200B') {
+    if (node.text === ZWS) {
       return ZWS_MARKER
     }
     // Remove zero-width spaces used for cursor positioning
-    const cleanText = node.text.replace(/\u200B/g, '')
+    const cleanText = node.text.replace(ZWS_REGEX, '')
 
     if (this.mode === 'simple') {
       return `'${cleanText.replace(/'/g, "\\'")}'`
diff --git a/web-frontend/modules/core/formula/tiptap/toTipTapVisitor.js b/web-frontend/modules/core/formula/tiptap/toTipTapVisitor.js
index 8afc72da4e..265eeb66e5 100644
--- a/web-frontend/modules/core/formula/tiptap/toTipTapVisitor.js
+++ b/web-frontend/modules/core/formula/tiptap/toTipTapVisitor.js
@@ -1,6 +1,29 @@
 import BaserowFormulaVisitor from '@baserow/modules/core/formula/parser/generated/BaserowFormulaVisitor'
 import { UnknownOperatorError } from '@baserow/modules/core/formula/parser/errors'
 import _ from 'lodash'
+import {
+  ZWS,
+  zwsTextJSON,
+} from '@baserow/modules/core/components/formula/extensions/helpers'
+
+/**
+ * Returns true when the ANTLR node is absent or was injected by error
+ * recovery (e.g. `<missing ')'>`). The `FormulaInputField` parses formulas
+ * in tolerant mode so a partial AST can be rendered while the user is still
+ * typing/pasting; this helper lets the visitor degrade gracefully.
+ */
+const isErrorOrMissingNode = (node) => {
+  if (!node) return true
+  if (typeof node.isErrorNode === 'function' && node.isErrorNode()) return true
+  const text = node.getText?.()
+  return Boolean(text && text.startsWith('<missing'))
+}
+
+/** Character-stream start index for a rule context or terminal node. */
+const startIndexOf = (node) => node?.start?.start ?? node?.symbol?.start ?? -1
+
+/** Character-stream stop index for a rule context or terminal node. */
+const stopIndexOf = (node) => node?.stop?.stop ?? node?.symbol?.stop ?? -1
 
 export class ToTipTapVisitor extends BaserowFormulaVisitor {
   constructor(functions, mode = 'simple') {
@@ -72,12 +95,8 @@ export class ToTipTapVisitor extends BaserowFormulaVisitor {
    */
   _ensureStartsWithZWS(content) {
     const firstNode = content[0]
-    if (
-      !firstNode ||
-      firstNode.type !== 'text' ||
-      firstNode.text !== '\u200B'
-    ) {
-      content.unshift({ type: 'text', text: '\u200B' })
+    if (!firstNode || firstNode.type !== 'text' || firstNode.text !== ZWS) {
+      content.unshift(zwsTextJSON())
     }
   }
 
@@ -140,7 +159,7 @@ export class ToTipTapVisitor extends BaserowFormulaVisitor {
           return { type: 'text', text: processedString }
         } else {
           // Empty strings are represented as a special marker that won't be confused with line breaks
-          return { type: 'text', text: '\u200B' } // Zero-width space for empty strings
+          return zwsTextJSON() // Zero-width space for empty strings
         }
       }
     }
@@ -158,32 +177,34 @@ export class ToTipTapVisitor extends BaserowFormulaVisitor {
   visitBrackets(ctx) {
     const innerContent = ctx.expr().accept(this)
 
-    // In advanced mode, wrap the content with group parenthesis nodes
-    if (this.mode === 'advanced') {
-      const content = []
-
-      // Add opening group parenthesis
-      content.push({ type: 'text', text: '\u200B' })
-      content.push({ type: 'group-opening-paren' })
-      content.push({ type: 'text', text: '\u200B' })
+    // In simple mode, parentheses are implicit — just return the inner content.
+    if (this.mode !== 'advanced') {
+      return innerContent
+    }
 
-      // Add the inner content
-      if (Array.isArray(innerContent)) {
-        content.push(...innerContent)
-      } else {
-        content.push(innerContent)
-      }
+    const content = [
+      zwsTextJSON(),
+      { type: 'group-opening-paren' },
+      zwsTextJSON(),
+    ]
 
-      // Add closing group parenthesis
-      content.push({ type: 'text', text: '\u200B' })
-      content.push({ type: 'group-closing-paren' })
-      content.push({ type: 'text', text: '\u200B' })
+    if (Array.isArray(innerContent)) {
+      content.push(...innerContent)
+    } else if (innerContent) {
+      content.push(innerContent)
+    }
 
-      return content
+    // Skip the closing paren node when it was synthesized by error recovery,
+    // so the rest of the formula can keep highlighting normally.
+    if (!isErrorOrMissingNode(ctx.CLOSE_PAREN())) {
+      content.push(
+        zwsTextJSON(),
+        { type: 'group-closing-paren' },
+        zwsTextJSON()
+      )
     }
 
-    // In simple mode, just return the inner content without parentheses
-    return innerContent
+    return content
   }
 
   processString(ctx) {
@@ -201,9 +222,62 @@ export class ToTipTapVisitor extends BaserowFormulaVisitor {
 
   visitFunctionCall(ctx) {
     const functionName = this.visitFuncName(ctx.func_name()).toLowerCase()
-    const functionArgumentExpressions = ctx.expr()
 
-    return this.doFunc(functionArgumentExpressions, functionName)
+    // Tolerant paths: when a parenthesis was synthesized by error recovery
+    // (e.g. bare `month` or unclosed `month(` pasted into the editor), render
+    // the already-parsed prefix as plain text and splice whatever comes next
+    // straight from the source so surrounding operators are not dropped.
+    if (isErrorOrMissingNode(ctx.OPEN_PAREN())) {
+      return this._renderPartialCall(ctx, ctx.func_name(), functionName)
+    }
+    if (isErrorOrMissingNode(ctx.CLOSE_PAREN())) {
+      return this._renderPartialCall(ctx, ctx.OPEN_PAREN(), `${functionName}(`)
+    }
+
+    return this.doFunc(ctx.expr(), functionName)
+  }
+
+  /**
+   * Emits `prefixText` for the portion of the call that was already parsed
+   * (`func_name` or `func_name(`), then walks the remaining children while
+   * splicing any raw source the parser dropped during error recovery (for
+   * instance the `+` in `month + year(...)`). The gap text is read directly
+   * from the input stream since those tokens are no longer in the AST.
+   */
+  _renderPartialCall(ctx, prefixNode, prefixText) {
+    const parts = [{ type: 'text', text: prefixText }]
+    const inputStream = ctx.start?.getInputStream?.() ?? null
+    const funcNameNode = ctx.func_name()
+    let lastStopIndex = stopIndexOf(prefixNode)
+
+    const pushGap = (from, to) => {
+      if (!inputStream || from < 0 || to < from) return
+      const gapText = inputStream.getText(from, to)
+      if (gapText && !gapText.includes('<missing')) {
+        parts.push({ type: 'text', text: gapText })
+      }
+    }
+
+    for (const child of ctx.children ?? []) {
+      if (child === prefixNode || child === funcNameNode) continue
+      const childText = child.getText?.()
+      if (childText?.startsWith('<missing')) continue
+
+      pushGap(lastStopIndex + 1, startIndexOf(child) - 1)
+
+      try {
+        const result = child.accept(this)
+        if (Array.isArray(result)) parts.push(...result)
+        else if (result) parts.push(result)
+      } catch (e) {
+        if (childText) parts.push({ type: 'text', text: childText })
+      }
+
+      lastStopIndex = Math.max(lastStopIndex, stopIndexOf(child))
+    }
+
+    pushGap(lastStopIndex + 1, stopIndexOf(ctx))
+    return parts
   }
 
   /**
@@ -218,7 +292,7 @@ export class ToTipTapVisitor extends BaserowFormulaVisitor {
         ((arg.text.startsWith('"') && arg.text.endsWith('"')) ||
           (arg.text.startsWith("'") && arg.text.endsWith("'")))
 
-      if (isBoolean || isNumber || hasQuotes) {
+      if (isBoolean || isNumber || hasQuotes || this.mode === 'advanced') {
         return arg
       } else {
         // In simple mode, add quotes
@@ -275,7 +349,7 @@ export class ToTipTapVisitor extends BaserowFormulaVisitor {
    */
   buildFunctionContentAdvanced(functionName, args) {
     const result = [
-      { type: 'text', text: '\u200B' },
+      zwsTextJSON(),
       {
         type: 'function-formula-component',
         attrs: {
@@ -299,7 +373,7 @@ export class ToTipTapVisitor extends BaserowFormulaVisitor {
       attrs: { noArgs: args.length === 0 },
     })
 
-    result.push({ type: 'text', text: '\u200B' })
+    result.push(zwsTextJSON())
 
     return result
   }
@@ -324,46 +398,50 @@ export class ToTipTapVisitor extends BaserowFormulaVisitor {
   }
 
   doFunc(functionArgumentExpressions, functionName) {
-    const args = Array.from(functionArgumentExpressions, (expr) =>
-      expr.accept(this)
-    )
+    // Each argument is visited independently so a single broken sub-expression
+    // in a tolerant parse does not take the whole formula down with it.
+    const args = Array.from(functionArgumentExpressions, (expr) => {
+      try {
+        return expr.accept(this)
+      } catch (e) {
+        return { type: 'text', text: expr.getText() }
+      }
+    })
+
+    const formulaFunctionType = this.functions.get(functionName)
+    if (!formulaFunctionType) {
+      // Unknown function in a partial AST — render as plain text so the rest
+      // of the formula can keep highlighting normally.
+      const argsText = args.map((a) => a?.text ?? '').join(', ')
+      return { type: 'text', text: `${functionName}(${argsText})` }
+    }
 
-    // Preprocess arguments (special handling for 'get' in advanced mode)
     const processedArgs = this.preprocessGetArgs(args, functionName)
 
-    // Get the node from the runtime function
-    const formulaFunctionType = this.functions.get(functionName)
-    const node = formulaFunctionType.toNode(processedArgs, this.mode)
+    let node
+    try {
+      node = formulaFunctionType.toNode(processedArgs, this.mode)
+    } catch (e) {
+      return this.buildFallbackContent(args, functionName, formulaFunctionType)
+    }
 
-    // Early return: if it's a component that needs ZWS wrapping
     if (
       node?.type === 'get-formula-component' ||
       node?.type === 'function-formula-component'
     ) {
-      return [
-        { type: 'text', text: '\u200B' },
-        node,
-        { type: 'text', text: '\u200B' },
-      ]
+      return [zwsTextJSON(), node, zwsTextJSON()]
     }
-
-    // Early return: if it's already an array (e.g., concat with newlines)
     if (Array.isArray(node)) {
       return node
     }
-
-    // Flatten nested arrays in wrapper content
     if (node?.type === 'wrapper' && node.content) {
       node.content = node.content.flat()
       return node
     }
-
-    // Early return: if node is valid, use it
     if (node?.type) {
       return node
     }
 
-    // Fallback: build content manually when no proper TipTap component exists
     return this.buildFallbackContent(args, functionName, formulaFunctionType)
   }
 
diff --git a/web-frontend/test/unit/core/formula/FormulaInputField.spec.js b/web-frontend/test/unit/core/formula/FormulaInputField.spec.js
new file mode 100644
index 0000000000..2e20e411ec
--- /dev/null
+++ b/web-frontend/test/unit/core/formula/FormulaInputField.spec.js
@@ -0,0 +1,135 @@
+import { TestApp } from '@baserow/test/helpers/testApp'
+import { RuntimeFunctionCollection } from '@baserow/modules/core/functionCollection'
+import { ToTipTapVisitor } from '@baserow/modules/core/formula/tiptap/toTipTapVisitor'
+import { FromTipTapVisitor } from '@baserow/modules/core/formula/tiptap/fromTipTapVisitor'
+import parseBaserowFormula from '@baserow/modules/core/formula/parser/parser'
+import { disambiguateMinusOperator } from '@baserow/modules/core/components/formula/FormulaInputField.vue'
+
+// ── disambiguateMinusOperator ──────────────────────────────────────
+
+describe('disambiguateMinusOperator', () => {
+  it('inserts spaces around binary minus before a digit', () => {
+    expect(disambiguateMinusOperator('x-1')).toBe('x - 1')
+  })
+
+  it('does not touch minus at the start of formula', () => {
+    expect(disambiguateMinusOperator('-1')).toBe('-1')
+  })
+
+  it('disambiguates after a closing parenthesis', () => {
+    expect(disambiguateMinusOperator('today()-200')).toBe('today() - 200')
+  })
+
+  it('disambiguates multiple binary minuses', () => {
+    expect(disambiguateMinusOperator('a-1+b-2')).toBe('a - 1+b - 2')
+  })
+
+  it('does not touch minus inside single-quoted strings', () => {
+    expect(disambiguateMinusOperator("'x-1'")).toBe("'x-1'")
+  })
+
+  it('does not touch minus inside double-quoted strings', () => {
+    expect(disambiguateMinusOperator('"x-1"')).toBe('"x-1"')
+  })
+
+  it('handles escaped quotes inside strings', () => {
+    expect(disambiguateMinusOperator("'it\\'s-1'")).toBe("'it\\'s-1'")
+  })
+
+  it('does not disambiguate minus followed by non-digit', () => {
+    expect(disambiguateMinusOperator('x-y')).toBe('x-y')
+  })
+
+  it('disambiguates in complex formula', () => {
+    const input = '(Year(Today())-200)*100+Month(Today())'
+    const result = disambiguateMinusOperator(input)
+    expect(result).toBe('(Year(Today()) - 200)*100+Month(Today())')
+  })
+
+  it('returns empty string for empty input', () => {
+    expect(disambiguateMinusOperator('')).toBe('')
+  })
+
+  it('handles digit-minus-digit', () => {
+    expect(disambiguateMinusOperator('5-3')).toBe('5 - 3')
+  })
+})
+
+// ── Advanced-mode roundtrip ─────────────────────────────────────────
+// A "roundtrip" is the full conversion cycle:
+//   formula string → ANTLR parse → AST → ToTipTapVisitor → TipTap JSON
+//   → FromTipTapVisitor → formula string
+// These tests verify that a formula survives this cycle and comes back
+// semantically equivalent, catching bugs in either visitor.
+
+describe('Advanced mode formula roundtrip', () => {
+  let testApp = null
+
+  beforeEach(() => {
+    testApp = new TestApp()
+  })
+
+  function roundtrip(formula) {
+    const functionCollection = new RuntimeFunctionCollection(
+      testApp.store.$registry
+    )
+    const disambiguated = disambiguateMinusOperator(formula)
+    const tree = parseBaserowFormula(disambiguated)
+    const tipTapContent = new ToTipTapVisitor(
+      functionCollection,
+      'advanced'
+    ).visit(tree)
+    const result = new FromTipTapVisitor(functionCollection, 'advanced').visit(
+      tipTapContent
+    )
+    return result
+  }
+
+  it('roundtrips a simple function call', () => {
+    expect(roundtrip('today()')).toBe('today()')
+  })
+
+  it('roundtrips a function with arguments', () => {
+    // Advanced mode visitor drops whitespace around commas
+    expect(roundtrip("if(true, 'yes', 'no')")).toBe("if(true,'yes','no')")
+  })
+
+  it('roundtrips a formula with binary minus', () => {
+    // Minus operator adds a trailing space for disambiguation
+    expect(roundtrip('year(today())-200')).toBe('year(today())-  200')
+  })
+
+  it('roundtrips a complex formula with minus', () => {
+    const formula = '(year(today())-200)*100+month(today())'
+    const result = roundtrip(formula)
+    expect(result).toBe('(year(today())-  200)*100+month(today())')
+  })
+
+  it('roundtrips nested function calls', () => {
+    expect(roundtrip('year(today())')).toBe('year(today())')
+  })
+
+  it('roundtrips grouped expressions', () => {
+    expect(roundtrip('(1+2)*3')).toBe('(1+2)*3')
+  })
+
+  it('roundtrips addition', () => {
+    expect(roundtrip('1+2')).toBe('1+2')
+  })
+
+  it('roundtrips boolean literal', () => {
+    expect(roundtrip('true')).toBe('true')
+  })
+
+  it('roundtrips string literal', () => {
+    expect(roundtrip("'hello'")).toBe("'hello'")
+  })
+
+  it('roundtrips number literal', () => {
+    expect(roundtrip('42')).toBe('42')
+  })
+
+  it('roundtrips decimal literal', () => {
+    expect(roundtrip('3.14')).toBe('3.14')
+  })
+})
diff --git a/web-frontend/test/unit/core/formula/FunctionDowngradeExtension.spec.js b/web-frontend/test/unit/core/formula/FunctionDowngradeExtension.spec.js
new file mode 100644
index 0000000000..48e17dc2be
--- /dev/null
+++ b/web-frontend/test/unit/core/formula/FunctionDowngradeExtension.spec.js
@@ -0,0 +1,351 @@
+import { Editor, Node } from '@tiptap/core'
+import { Document } from '@tiptap/extension-document'
+import { Text } from '@tiptap/extension-text'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { FunctionDowngradeExtension } from '@baserow/modules/core/components/formula/extensions/FunctionDowngradeExtension'
+
+const FunctionFormulaComponent = Node.create({
+  name: 'function-formula-component',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  addAttributes() {
+    return { functionName: { default: null }, hasNoArgs: { default: false } }
+  },
+  renderHTML() {
+    return ['span', { 'data-type': 'function-formula-component' }]
+  },
+})
+
+const FunctionClosingParen = Node.create({
+  name: 'function-closing-paren',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  addAttributes() {
+    return { noArgs: { default: false } }
+  },
+  renderHTML() {
+    return ['span', ')']
+  },
+})
+
+const GroupOpeningParen = Node.create({
+  name: 'group-opening-paren',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  renderHTML() {
+    return ['span', '(']
+  },
+})
+
+const GroupClosingParen = Node.create({
+  name: 'group-closing-paren',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  renderHTML() {
+    return ['span', ')']
+  },
+})
+
+function createEditor(content) {
+  return new Editor({
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      FunctionFormulaComponent,
+      FunctionClosingParen,
+      GroupOpeningParen,
+      GroupClosingParen,
+      FunctionDowngradeExtension,
+    ],
+    content,
+  })
+}
+
+/**
+ * Deletes every `function-closing-paren` node currently in the doc by
+ * dispatching a single transaction. Done in reverse document order so
+ * earlier positions stay stable. Mirrors what SmartDeletionExtension
+ * does when the user presses Backspace right after a `)`.
+ */
+function deleteAllClosers(editor) {
+  const positions = []
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name === 'function-closing-paren') {
+      positions.push({ pos, size: node.nodeSize })
+    }
+  })
+  positions.sort((a, b) => b.pos - a.pos)
+  const tr = editor.state.tr
+  for (const { pos, size } of positions) {
+    tr.delete(pos, pos + size)
+  }
+  editor.view.dispatch(tr)
+}
+
+/**
+ * Serialises the paragraph contents into a compact string representation:
+ *   - `FN{name}` for function-formula-component
+ *   - `)` for function-closing-paren
+ *   - `GROUP(` / `GROUP)` for group parens
+ *   - raw text for text nodes (with ZWS as `Z`)
+ */
+function serialise(editor) {
+  const parts = []
+  editor.state.doc.descendants((node) => {
+    const name = node.type.name
+    if (name === 'function-formula-component') {
+      parts.push(`FN{${node.attrs.functionName}}`)
+    } else if (name === 'function-closing-paren') {
+      parts.push(')')
+    } else if (name === 'group-opening-paren') {
+      parts.push('GROUP(')
+    } else if (name === 'group-closing-paren') {
+      parts.push('GROUP)')
+    } else if (node.isText) {
+      parts.push(node.text.replace(/\u200B/g, 'Z'))
+    }
+  })
+  return parts.join('|')
+}
+
+describe('FunctionDowngradeExtension', () => {
+  let editor
+
+  afterEach(() => {
+    editor?.destroy()
+  })
+
+  it('downgrades a function opener to plain text when its closer is removed', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: '\u200B' },
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'today', hasNoArgs: true },
+            },
+            { type: 'text', text: '\u200B' },
+            { type: 'function-closing-paren', attrs: { noArgs: true } },
+            { type: 'text', text: '\u200B' },
+          ],
+        },
+      ],
+    })
+
+    deleteAllClosers(editor)
+
+    expect(serialise(editor)).not.toContain('FN{today}')
+    // Plain text `today(` remains (ZWS markers around the atom are
+    // stripped and surrounding ZWS text nodes merge).
+    expect(editor.state.doc.textContent.replace(/\u200B/g, '')).toBe('today(')
+  })
+
+  it('leaves a properly closed function untouched on unrelated doc changes', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: '\u200B' },
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'today', hasNoArgs: true },
+            },
+            { type: 'function-closing-paren', attrs: { noArgs: true } },
+            { type: 'text', text: '\u200B' },
+          ],
+        },
+      ],
+    })
+
+    // Dispatch a real doc-changing transaction that doesn't touch the
+    // function pair.
+    editor.view.dispatch(editor.state.tr.insertText('x', 1))
+
+    expect(serialise(editor)).toContain('FN{today}')
+    expect(serialise(editor)).toContain(')')
+  })
+
+  it('downgrades outer unmatched function while keeping inner balanced one', () => {
+    // `year(today())` — we remove only the outer closer.
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'year', hasNoArgs: false },
+            },
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'today', hasNoArgs: true },
+            },
+            { type: 'function-closing-paren', attrs: { noArgs: true } }, // inner
+            { type: 'function-closing-paren', attrs: { noArgs: false } }, // outer
+          ],
+        },
+      ],
+    })
+
+    // Remove only the outermost (= last) closing paren.
+    let lastPos = -1
+    let lastSize = 0
+    editor.state.doc.descendants((node, pos) => {
+      if (node.type.name === 'function-closing-paren') {
+        lastPos = pos
+        lastSize = node.nodeSize
+      }
+    })
+    editor.view.dispatch(editor.state.tr.delete(lastPos, lastPos + lastSize))
+
+    const out = serialise(editor)
+    expect(out).not.toContain('FN{year}')
+    expect(out).toContain('FN{today}')
+    // Exactly one closer (the inner one) must remain.
+    expect((out.match(/\)/g) || []).length).toBe(1)
+  })
+
+  it('downgrades both functions when both become unmatched', () => {
+    // `year(today())` — we remove both closers at once.
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'year', hasNoArgs: false },
+            },
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'today', hasNoArgs: true },
+            },
+            { type: 'function-closing-paren', attrs: { noArgs: true } },
+            { type: 'function-closing-paren', attrs: { noArgs: false } },
+          ],
+        },
+      ],
+    })
+
+    deleteAllClosers(editor)
+
+    const out = serialise(editor)
+    expect(out).not.toContain('FN{year}')
+    expect(out).not.toContain('FN{today}')
+    expect(editor.state.doc.textContent.replace(/\u200B/g, '')).toBe(
+      'year(today('
+    )
+  })
+
+  it('strips ZWS markers around the downgraded function atom', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: '\u200B' },
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'month', hasNoArgs: false },
+            },
+            { type: 'text', text: '\u200B' },
+            { type: 'function-closing-paren' },
+            { type: 'text', text: '\u200B' },
+          ],
+        },
+      ],
+    })
+
+    deleteAllClosers(editor)
+
+    // Without the ZWS stripping, the resulting text would contain
+    // stray ZWS characters inside the `month(` text. We want it clean.
+    expect(editor.state.doc.textContent).toBe('month(')
+  })
+
+  it('downgrades the inner function when its own closer is removed (nested)', () => {
+    // `concat(if(...),"lorem ipsum")` — we remove the INNER closer (the one
+    // that was paired with `if(`). The outer `concat(...)` stays fully
+    // balanced because its own closer is untouched, so it must remain
+    // highlighted while `if(` becomes plain text.
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'concat', hasNoArgs: false },
+            },
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'if', hasNoArgs: false },
+            },
+            { type: 'text', text: '5>2,"yes","no"' },
+            { type: 'function-closing-paren' }, // inner (if)
+            { type: 'text', text: ',"lorem ipsum"' },
+            { type: 'function-closing-paren' }, // outer (concat)
+          ],
+        },
+      ],
+    })
+
+    // Remove only the first function-closing-paren (inner, matches `if`).
+    let innerClosePos = -1
+    let innerCloseSize = 0
+    editor.state.doc.descendants((node, pos) => {
+      if (innerClosePos === -1 && node.type.name === 'function-closing-paren') {
+        innerClosePos = pos
+        innerCloseSize = node.nodeSize
+      }
+    })
+    editor.view.dispatch(
+      editor.state.tr.delete(innerClosePos, innerClosePos + innerCloseSize)
+    )
+
+    const out = serialise(editor)
+    // concat must stay highlighted (its own closer is still there).
+    expect(out).toContain('FN{concat}')
+    // if must be downgraded to plain text.
+    expect(out).not.toContain('FN{if}')
+    expect(out).toMatch(/if\(/)
+    // Exactly one closer remains — the one paired with concat.
+    expect((out.match(/\)/g) || []).length).toBe(1)
+  })
+
+  it('preserves a dangling group-opening-paren (not a function concern)', () => {
+    // The extension is function-specific: a bare unclosed group
+    // (legitimately produced by the tolerant parser on pastes like
+    // `(hello`) must be preserved.
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'group-opening-paren' },
+            { type: 'text', text: 'x' },
+          ],
+        },
+      ],
+    })
+
+    editor.view.dispatch(editor.state.tr.insertText('y', 3))
+
+    expect(serialise(editor)).toContain('GROUP(')
+  })
+})
diff --git a/web-frontend/test/unit/core/formula/ParenMatchHighlight.spec.js b/web-frontend/test/unit/core/formula/ParenMatchHighlight.spec.js
new file mode 100644
index 0000000000..4600752bd5
--- /dev/null
+++ b/web-frontend/test/unit/core/formula/ParenMatchHighlight.spec.js
@@ -0,0 +1,240 @@
+import {
+  getParenType,
+  collectDOMParenPairs,
+} from '@baserow/modules/core/components/formula/extensions/ParenMatchHighlightExtension'
+
+// ── DOM element helpers ─────────────────────────────────────────────
+
+function createFuncOpener(label = 'func(') {
+  const el = document.createElement('span')
+  el.classList.add('function-formula-component')
+  el.textContent = label
+  return el
+}
+
+function createFuncCloser() {
+  const el = document.createElement('span')
+  el.dataset.formulaClosingParen = 'true'
+  el.textContent = ')'
+  return el
+}
+
+function createGroupOpener() {
+  const el = document.createElement('span')
+  el.dataset.groupOpeningParen = 'true'
+  el.textContent = '('
+  return el
+}
+
+function createGroupCloser() {
+  const el = document.createElement('span')
+  el.dataset.groupClosingParen = 'true'
+  el.textContent = ')'
+  return el
+}
+
+function createContainer(...children) {
+  const root = document.createElement('div')
+  children.forEach((child) => root.appendChild(child))
+  return root
+}
+
+// ── getParenType ────────────────────────────────────────────────────
+
+describe('getParenType', () => {
+  it('returns "function" for a function opener', () => {
+    expect(getParenType(createFuncOpener())).toBe('function')
+  })
+
+  it('returns "function" for a function closer', () => {
+    expect(getParenType(createFuncCloser())).toBe('function')
+  })
+
+  it('returns "group" for a group opener', () => {
+    expect(getParenType(createGroupOpener())).toBe('group')
+  })
+
+  it('returns "group" for a group closer', () => {
+    expect(getParenType(createGroupCloser())).toBe('group')
+  })
+})
+
+// ── collectDOMParenPairs ────────────────────────────────────────────
+
+describe('collectDOMParenPairs', () => {
+  it('returns empty map when no paren elements exist', () => {
+    const root = createContainer(document.createElement('span'))
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.size).toBe(0)
+  })
+
+  it('pairs a function opener with its closer', () => {
+    const opener = createFuncOpener()
+    const closer = createFuncCloser()
+    const root = createContainer(opener, closer)
+
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.get(opener)).toBe(closer)
+    expect(pairs.get(closer)).toBe(opener)
+  })
+
+  it('pairs a group opener with its closer', () => {
+    const opener = createGroupOpener()
+    const closer = createGroupCloser()
+    const root = createContainer(opener, closer)
+
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.get(opener)).toBe(closer)
+    expect(pairs.get(closer)).toBe(opener)
+  })
+
+  it('does not pair a function opener with a group closer', () => {
+    const opener = createFuncOpener()
+    const closer = createGroupCloser()
+    const root = createContainer(opener, closer)
+
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.size).toBe(0)
+  })
+
+  it('does not pair a group opener with a function closer', () => {
+    const opener = createGroupOpener()
+    const closer = createFuncCloser()
+    const root = createContainer(opener, closer)
+
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.size).toBe(0)
+  })
+
+  it('handles nested function inside group: ( func() )', () => {
+    const groupOpen = createGroupOpener()
+    const funcOpen = createFuncOpener()
+    const funcClose = createFuncCloser()
+    const groupClose = createGroupCloser()
+    const root = createContainer(groupOpen, funcOpen, funcClose, groupClose)
+
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.get(funcOpen)).toBe(funcClose)
+    expect(pairs.get(funcClose)).toBe(funcOpen)
+    expect(pairs.get(groupOpen)).toBe(groupClose)
+    expect(pairs.get(groupClose)).toBe(groupOpen)
+    expect(pairs.size).toBe(4)
+  })
+
+  it('handles nested group inside function: func( (x) )', () => {
+    const funcOpen = createFuncOpener()
+    const groupOpen = createGroupOpener()
+    const groupClose = createGroupCloser()
+    const funcClose = createFuncCloser()
+    const root = createContainer(funcOpen, groupOpen, groupClose, funcClose)
+
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.get(funcOpen)).toBe(funcClose)
+    expect(pairs.get(groupOpen)).toBe(groupClose)
+    expect(pairs.size).toBe(4)
+  })
+
+  it('handles deeply nested: ( ( func( func() ) ) )', () => {
+    const g1 = createGroupOpener()
+    const g2 = createGroupOpener()
+    const f1 = createFuncOpener('outer(')
+    const f2 = createFuncOpener('inner(')
+    const f2c = createFuncCloser()
+    const f1c = createFuncCloser()
+    const g2c = createGroupCloser()
+    const g1c = createGroupCloser()
+    const root = createContainer(g1, g2, f1, f2, f2c, f1c, g2c, g1c)
+
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.get(g1)).toBe(g1c)
+    expect(pairs.get(g2)).toBe(g2c)
+    expect(pairs.get(f1)).toBe(f1c)
+    expect(pairs.get(f2)).toBe(f2c)
+    expect(pairs.size).toBe(8)
+  })
+
+  it('leaves unmatched opener unpaired when its closer is missing', () => {
+    const funcOpen = createFuncOpener()
+    const groupClose = createGroupCloser()
+    const root = createContainer(funcOpen, groupClose)
+
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.has(funcOpen)).toBe(false)
+    expect(pairs.has(groupClose)).toBe(false)
+  })
+
+  it('leaves orphan opener unpaired (no closer at all)', () => {
+    const opener = createFuncOpener()
+    const root = createContainer(opener)
+
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.size).toBe(0)
+  })
+
+  it('leaves orphan closer unpaired (no opener at all)', () => {
+    const closer = createFuncCloser()
+    const root = createContainer(closer)
+
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.size).toBe(0)
+  })
+
+  it('pairs siblings: func() func()', () => {
+    const f1 = createFuncOpener('a(')
+    const f1c = createFuncCloser()
+    const f2 = createFuncOpener('b(')
+    const f2c = createFuncCloser()
+    const root = createContainer(f1, f1c, f2, f2c)
+
+    const pairs = collectDOMParenPairs(root)
+    expect(pairs.get(f1)).toBe(f1c)
+    expect(pairs.get(f2)).toBe(f2c)
+    expect(pairs.size).toBe(4)
+  })
+
+  it('pairs correctly when missing inner closer: ( func( ) )', () => {
+    // func( has no matching function closer, only a group closer follows
+    const groupOpen = createGroupOpener()
+    const funcOpen = createFuncOpener()
+    const groupClose = createGroupCloser()
+    const root = createContainer(groupOpen, funcOpen, groupClose)
+
+    const pairs = collectDOMParenPairs(root)
+    // func( cannot pair with group closer (type mismatch)
+    // group opener cannot pair with group closer because func( is still on the stack
+    expect(pairs.has(funcOpen)).toBe(false)
+    expect(pairs.has(groupOpen)).toBe(false)
+    expect(pairs.size).toBe(0)
+  })
+
+  it('handles the if() regression case: ( ( if( today() ) ) )', () => {
+    // Missing if's closer — the group closers should still pair with group openers
+    const g1 = createGroupOpener()
+    const g2 = createGroupOpener()
+    const ifOpen = createFuncOpener('if(')
+    const todayOpen = createFuncOpener('today(')
+    const todayClose = createFuncCloser()
+    // if's closer is missing
+    const g2c = createGroupCloser()
+    const g1c = createGroupCloser()
+    const root = createContainer(
+      g1,
+      g2,
+      ifOpen,
+      todayOpen,
+      todayClose,
+      g2c,
+      g1c
+    )
+
+    const pairs = collectDOMParenPairs(root)
+    // today() should be paired
+    expect(pairs.get(todayOpen)).toBe(todayClose)
+    expect(pairs.get(todayClose)).toBe(todayOpen)
+    // if( has no matching function closer → unpaired
+    expect(pairs.has(ifOpen)).toBe(false)
+    // group closers can't match because if( is blocking the stack
+    expect(pairs.has(g1)).toBe(false)
+    expect(pairs.has(g2)).toBe(false)
+  })
+})
diff --git a/web-frontend/test/unit/core/formula/helpers.spec.js b/web-frontend/test/unit/core/formula/helpers.spec.js
new file mode 100644
index 0000000000..9fc3f4e89d
--- /dev/null
+++ b/web-frontend/test/unit/core/formula/helpers.spec.js
@@ -0,0 +1,784 @@
+import { Editor, Node } from '@tiptap/core'
+import { Document } from '@tiptap/extension-document'
+import { Text } from '@tiptap/extension-text'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import {
+  ZWS,
+  isZWSNode,
+  zwsTextJSON,
+  zwsTextNode,
+  getTextBeforeCursor,
+  findNextNonZWSNode,
+  buildParenStack,
+  findInnermostUnclosedFunctionNode,
+  findPendingTextFunctionOpen,
+} from '@baserow/modules/core/components/formula/extensions/helpers'
+
+const FunctionFormulaComponent = Node.create({
+  name: 'function-formula-component',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  addAttributes() {
+    return { functionName: { default: null }, hasNoArgs: { default: false } }
+  },
+  renderHTML() {
+    return ['span', { 'data-type': 'function-formula-component' }, 'fn(']
+  },
+})
+
+const FunctionClosingParen = Node.create({
+  name: 'function-closing-paren',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  renderHTML() {
+    return ['span', ')']
+  },
+})
+
+const GroupOpeningParen = Node.create({
+  name: 'group-opening-paren',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  renderHTML() {
+    return ['span', '(']
+  },
+})
+
+const GroupClosingParen = Node.create({
+  name: 'group-closing-paren',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  renderHTML() {
+    return ['span', ')']
+  },
+})
+
+function createEditor(content) {
+  return new Editor({
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      FunctionFormulaComponent,
+      FunctionClosingParen,
+      GroupOpeningParen,
+      GroupClosingParen,
+    ],
+    content,
+  })
+}
+
+// ── ZWS helpers ────────────────────────────────────────────────────
+
+describe('ZWS constants and helpers', () => {
+  describe('isZWSNode', () => {
+    it('returns true for a single ZWS text node', () => {
+      const node = { isText: true, text: '\u200B' }
+      expect(isZWSNode(node)).toBe(true)
+    })
+
+    it('returns true for multiple consecutive ZWS', () => {
+      const node = { isText: true, text: '\u200B\u200B\u200B' }
+      expect(isZWSNode(node)).toBe(true)
+    })
+
+    it('returns false for regular text', () => {
+      const node = { isText: true, text: 'hello' }
+      expect(isZWSNode(node)).toBe(false)
+    })
+
+    it('returns false for text containing ZWS mixed with other chars', () => {
+      const node = { isText: true, text: '\u200Bx' }
+      expect(isZWSNode(node)).toBe(false)
+    })
+
+    it('returns false for non-text nodes', () => {
+      const node = { isText: false, text: '\u200B' }
+      expect(isZWSNode(node)).toBe(false)
+    })
+
+    it('returns falsy for null/undefined', () => {
+      expect(isZWSNode(null)).toBeFalsy()
+      expect(isZWSNode(undefined)).toBeFalsy()
+    })
+
+    it('returns falsy for empty text', () => {
+      const node = { isText: true, text: '' }
+      expect(isZWSNode(node)).toBeFalsy()
+    })
+  })
+
+  describe('zwsTextJSON', () => {
+    it('returns a text node JSON with ZWS content', () => {
+      const result = zwsTextJSON()
+      expect(result).toEqual({ type: 'text', text: ZWS })
+    })
+
+    it('returns a new object each call', () => {
+      const a = zwsTextJSON()
+      const b = zwsTextJSON()
+      expect(a).not.toBe(b)
+      expect(a).toEqual(b)
+    })
+  })
+
+  describe('zwsTextNode', () => {
+    let editor
+
+    afterEach(() => {
+      editor?.destroy()
+    })
+
+    it('creates a ProseMirror text node containing ZWS', () => {
+      editor = createEditor('<p>test</p>')
+      const node = zwsTextNode(editor.schema)
+      expect(node.isText).toBe(true)
+      expect(node.text).toBe(ZWS)
+    })
+  })
+})
+
+// ── getTextBeforeCursor ────────────────────────────────────────────
+
+describe('getTextBeforeCursor', () => {
+  let editor
+
+  afterEach(() => {
+    editor?.destroy()
+  })
+
+  it('returns text before cursor in the middle of a text node', () => {
+    editor = createEditor('<p>hello world</p>')
+    const { doc } = editor.state
+    // Position 6 = after "hello" (pos 1=h, 2=e, 3=l, 4=l, 5=o, 6= )
+    const result = getTextBeforeCursor(doc, 6)
+    expect(result).toBe('hello')
+  })
+
+  it('returns full text when cursor is at end of text node', () => {
+    editor = createEditor('<p>abc</p>')
+    const { doc } = editor.state
+    // pos 1=a, 2=b, 3=c, 4=after c
+    const result = getTextBeforeCursor(doc, 4)
+    expect(result).toBe('abc')
+  })
+
+  it('returns empty string when cursor is at start of paragraph', () => {
+    editor = createEditor('<p>abc</p>')
+    const { doc } = editor.state
+    const result = getTextBeforeCursor(doc, 1)
+    expect(result).toBe('')
+  })
+
+  it('returns text before cursor when after an atom node followed by text', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'today', hasNoArgs: true },
+            },
+            { type: 'text', text: 'abc' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    // pos: 1=atom(1), 2=a, 3=b, 4=c
+    const result = getTextBeforeCursor(doc, 4)
+    expect(result).toBe('ab')
+  })
+})
+
+// ── findNextNonZWSNode ─────────────────────────────────────────────
+
+describe('findNextNonZWSNode', () => {
+  let editor
+
+  afterEach(() => {
+    editor?.destroy()
+  })
+
+  it('skips ZWS and returns the next atom node', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'x' },
+            { type: 'text', text: '\u200B' },
+            { type: 'function-closing-paren' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    // pos 1=x, 2=ZWS, 3=closing-paren
+    const result = findNextNonZWSNode(doc, 2)
+    expect(result).not.toBeNull()
+    expect(result.node.type.name).toBe('function-closing-paren')
+    expect(result.pos).toBe(3)
+  })
+
+  it('skips multiple ZWS text nodes', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'x' },
+            { type: 'text', text: '\u200B' },
+            { type: 'text', text: '\u200B' },
+            { type: 'group-closing-paren' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    const result = findNextNonZWSNode(doc, 2)
+    expect(result).not.toBeNull()
+    expect(result.node.type.name).toBe('group-closing-paren')
+  })
+
+  it('returns null when there is no next node', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'x' },
+            { type: 'text', text: '\u200B' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    const result = findNextNonZWSNode(doc, 2)
+    expect(result).toBeNull()
+  })
+
+  it('returns null when cursor is inside a non-ZWS text node', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [{ type: 'text', text: 'hello' }],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    const result = findNextNonZWSNode(doc, 3)
+    expect(result).toBeNull()
+  })
+
+  it('returns the next node when there is no ZWS to skip', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'group-opening-paren' },
+            { type: 'function-closing-paren' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    // After first atom (pos 2), next should be function-closing-paren
+    const result = findNextNonZWSNode(doc, 2)
+    expect(result).not.toBeNull()
+    expect(result.node.type.name).toBe('function-closing-paren')
+  })
+})
+
+// ── buildParenStack ────────────────────────────────────────────────
+
+describe('buildParenStack', () => {
+  let editor
+
+  afterEach(() => {
+    editor?.destroy()
+  })
+
+  it('returns empty stack for text without parentheses', () => {
+    editor = createEditor('<p>hello</p>')
+    const { doc } = editor.state
+    const stack = buildParenStack(doc, 1, 6)
+    expect(stack).toEqual([])
+  })
+
+  it('tracks a function component as function paren', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'year', hasNoArgs: false },
+            },
+            { type: 'text', text: 'arg' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    // wrapperStart=1, scan up to after 'arg'
+    const stack = buildParenStack(doc, 1, 5)
+    expect(stack).toEqual(['function'])
+  })
+
+  it('tracks a group-opening-paren as group paren', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'group-opening-paren' },
+            { type: 'text', text: 'x' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    const stack = buildParenStack(doc, 1, 3)
+    expect(stack).toEqual(['group'])
+  })
+
+  it('pops stack on function-closing-paren', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'today', hasNoArgs: true },
+            },
+            { type: 'function-closing-paren' },
+            { type: 'text', text: 'x' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    const stack = buildParenStack(doc, 1, 4)
+    expect(stack).toEqual([])
+  })
+
+  it('pops stack on group-closing-paren', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'group-opening-paren' },
+            { type: 'text', text: '1' },
+            { type: 'group-closing-paren' },
+            { type: 'text', text: 'x' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    const stack = buildParenStack(doc, 1, 5)
+    expect(stack).toEqual([])
+  })
+
+  it('handles nested function inside group', () => {
+    // (year(...) ...)
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'group-opening-paren' },
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'year', hasNoArgs: false },
+            },
+            { type: 'text', text: 'arg' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    const stack = buildParenStack(doc, 1, 6)
+    expect(stack).toEqual(['group', 'function'])
+  })
+
+  it('handles nested function closed inside group', () => {
+    // (year(arg) ...)
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'group-opening-paren' },
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'year', hasNoArgs: false },
+            },
+            { type: 'text', text: 'arg' },
+            { type: 'function-closing-paren' },
+            { type: 'text', text: 'x' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    // After closing paren + 'x', only group is open
+    const stack = buildParenStack(doc, 1, 7)
+    expect(stack).toEqual(['group'])
+  })
+
+  it('tracks plain text parentheses as group', () => {
+    editor = createEditor('<p>(hello</p>')
+    const { doc } = editor.state
+    const stack = buildParenStack(doc, 1, 7)
+    expect(stack).toEqual(['group'])
+  })
+
+  it('pops plain text closing parentheses', () => {
+    editor = createEditor('<p>(hello)</p>')
+    const { doc } = editor.state
+    const stack = buildParenStack(doc, 1, 8)
+    expect(stack).toEqual([])
+  })
+})
+
+// ── findPendingTextFunctionOpen ────────────────────────────────────
+
+describe('findPendingTextFunctionOpen', () => {
+  let editor
+
+  afterEach(() => {
+    editor?.destroy()
+  })
+
+  const FUNCTION_NAMES = ['month', 'year', 'concat', 'today']
+
+  it('returns null for an empty document', () => {
+    editor = createEditor('<p></p>')
+    const { doc } = editor.state
+    expect(findPendingTextFunctionOpen(doc, 1, 1, FUNCTION_NAMES)).toBeNull()
+  })
+
+  it('returns null when there are no unclosed parens', () => {
+    editor = createEditor('<p>month(x)</p>')
+    const { doc } = editor.state
+    expect(findPendingTextFunctionOpen(doc, 1, 10, FUNCTION_NAMES)).toBeNull()
+  })
+
+  it('returns descriptor for an unclosed `funcName(` in text', () => {
+    editor = createEditor('<p>month(</p>')
+    const { doc } = editor.state
+    // Positions: 1=m, 2=o, 3=n, 4=t, 5=h, 6=(, cursor at 7
+    const result = findPendingTextFunctionOpen(doc, 1, 7, FUNCTION_NAMES)
+    expect(result).toMatchObject({
+      kind: 'text-function',
+      functionName: 'month',
+      functionStart: 1,
+      parenEnd: 7,
+    })
+  })
+
+  it('matches case-insensitively against the known function list', () => {
+    editor = createEditor('<p>MONTH(</p>')
+    const { doc } = editor.state
+    const result = findPendingTextFunctionOpen(doc, 1, 7, FUNCTION_NAMES)
+    expect(result).toMatchObject({
+      kind: 'text-function',
+      functionName: 'MONTH',
+    })
+  })
+
+  it('returns null when the `(` is preceded by an unknown identifier', () => {
+    editor = createEditor('<p>foobar(</p>')
+    const { doc } = editor.state
+    expect(findPendingTextFunctionOpen(doc, 1, 8, FUNCTION_NAMES)).toBeNull()
+  })
+
+  it('returns null for a bare plain-text `(` (no preceding identifier)', () => {
+    editor = createEditor('<p>(hello</p>')
+    const { doc } = editor.state
+    expect(findPendingTextFunctionOpen(doc, 1, 7, FUNCTION_NAMES)).toBeNull()
+  })
+
+  it('returns null when the top opener is a proper function node', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'year', hasNoArgs: false },
+            },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    expect(findPendingTextFunctionOpen(doc, 1, 2, FUNCTION_NAMES)).toBeNull()
+  })
+
+  it('returns null when the top opener is a proper group-opening-paren', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'group-opening-paren' },
+            { type: 'text', text: 'x' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    expect(findPendingTextFunctionOpen(doc, 1, 3, FUNCTION_NAMES)).toBeNull()
+  })
+
+  it('returns descriptor when the unclosed `funcName(` is nested after a closed proper group', () => {
+    // `(year(x)) + month(`
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'group-opening-paren' },
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'year', hasNoArgs: false },
+            },
+            { type: 'text', text: 'x' },
+            { type: 'function-closing-paren' },
+            { type: 'group-closing-paren' },
+            { type: 'text', text: ' + month(' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    // Cursor at end of document
+    const end = doc.content.size - 1
+    const result = findPendingTextFunctionOpen(doc, 1, end, FUNCTION_NAMES)
+    expect(result).toMatchObject({
+      kind: 'text-function',
+      functionName: 'month',
+    })
+  })
+
+  it('ignores matched text parens before the pending `funcName(`', () => {
+    // `(1+2)+month(`: the leading group is closed, only month is pending
+    editor = createEditor('<p>(1+2)+month(</p>')
+    const { doc } = editor.state
+    const end = doc.content.size - 1
+    const result = findPendingTextFunctionOpen(doc, 1, end, FUNCTION_NAMES)
+    expect(result).toMatchObject({
+      kind: 'text-function',
+      functionName: 'month',
+    })
+  })
+
+  it('returns null when an outer bare `(` is still the top unclosed opener', () => {
+    // `(month(x)`: month is closed, the leading `(` is still pending but it
+    // is a bare group paren, not a function one, so we do not upgrade.
+    editor = createEditor('<p>(month(x)</p>')
+    const { doc } = editor.state
+    const end = doc.content.size - 1
+    expect(findPendingTextFunctionOpen(doc, 1, end, FUNCTION_NAMES)).toBeNull()
+  })
+
+  it('identifies the deepest pending text function when two are nested', () => {
+    // `concat(month(` — both are pending, top of stack is month.
+    editor = createEditor('<p>concat(month(</p>')
+    const { doc } = editor.state
+    const end = doc.content.size - 1
+    const result = findPendingTextFunctionOpen(doc, 1, end, FUNCTION_NAMES)
+    expect(result).toMatchObject({
+      kind: 'text-function',
+      functionName: 'month',
+    })
+  })
+})
+
+// ── findInnermostUnclosedFunctionNode ──────────────────────────────
+
+describe('findInnermostUnclosedFunctionNode', () => {
+  let editor
+
+  afterEach(() => {
+    editor?.destroy()
+  })
+
+  const FUNCTION_NAMES = ['month', 'year', 'concat', 'today']
+
+  it('returns null for an empty document', () => {
+    editor = createEditor('<p></p>')
+    const { doc } = editor.state
+    expect(
+      findInnermostUnclosedFunctionNode(doc, 1, 1, FUNCTION_NAMES)
+    ).toBeNull()
+  })
+
+  it('returns descriptor for an unclosed `function-formula-component`', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'today', hasNoArgs: true },
+            },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    const result = findInnermostUnclosedFunctionNode(doc, 1, 2, FUNCTION_NAMES)
+    expect(result).toMatchObject({
+      kind: 'function',
+      nodeStart: 1,
+      nodeEnd: 2,
+    })
+    expect(result.node.attrs.functionName).toBe('today')
+    expect(result.node.attrs.hasNoArgs).toBe(true)
+  })
+
+  it('returns null when the function is already closed', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'today', hasNoArgs: true },
+            },
+            { type: 'function-closing-paren' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    expect(
+      findInnermostUnclosedFunctionNode(doc, 1, 3, FUNCTION_NAMES)
+    ).toBeNull()
+  })
+
+  it('returns null when the top opener is a group-opening-paren', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'group-opening-paren' },
+            { type: 'text', text: 'x' },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    expect(
+      findInnermostUnclosedFunctionNode(doc, 1, 3, FUNCTION_NAMES)
+    ).toBeNull()
+  })
+
+  it('returns null when the top opener is a text-function (plain text `funcName(`)', () => {
+    editor = createEditor('<p>month(</p>')
+    const { doc } = editor.state
+    expect(
+      findInnermostUnclosedFunctionNode(doc, 1, 7, FUNCTION_NAMES)
+    ).toBeNull()
+  })
+
+  it('returns the innermost unclosed function when nested inside a closed group', () => {
+    // `(x) + today(` — outer group closed, today is the innermost unclosed.
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'group-opening-paren' },
+            { type: 'text', text: 'x' },
+            { type: 'group-closing-paren' },
+            { type: 'text', text: ' + ' },
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'today', hasNoArgs: true },
+            },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    const end = doc.content.size - 1
+    const result = findInnermostUnclosedFunctionNode(
+      doc,
+      1,
+      end,
+      FUNCTION_NAMES
+    )
+    expect(result).toMatchObject({ kind: 'function' })
+    expect(result.node.attrs.functionName).toBe('today')
+    expect(result.node.attrs.hasNoArgs).toBe(true)
+  })
+
+  it('returns null when a group is still open above the unclosed function', () => {
+    // `(today(` — top of the stack is the inner function, but it's after
+    // the bare group. The innermost is the function itself, so a
+    // descriptor is returned; we treat the group case separately.
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'group-opening-paren' },
+            {
+              type: 'function-formula-component',
+              attrs: { functionName: 'today', hasNoArgs: true },
+            },
+          ],
+        },
+      ],
+    })
+    const { doc } = editor.state
+    const end = doc.content.size - 1
+    const result = findInnermostUnclosedFunctionNode(
+      doc,
+      1,
+      end,
+      FUNCTION_NAMES
+    )
+    expect(result).toMatchObject({ kind: 'function' })
+    expect(result.node.attrs.functionName).toBe('today')
+  })
+})
diff --git a/web-frontend/test/unit/core/formula/toTipTapVisitor.spec.js b/web-frontend/test/unit/core/formula/toTipTapVisitor.spec.js
index 9b48122601..0ea51b1f26 100644
--- a/web-frontend/test/unit/core/formula/toTipTapVisitor.spec.js
+++ b/web-frontend/test/unit/core/formula/toTipTapVisitor.spec.js
@@ -23,4 +23,114 @@ describe('toTipTapVisitor', () => {
       }
     })
   })
+
+  describe('tolerant parsing (partial / pasted formulas)', () => {
+    const visitTolerantly = (formula, mode = 'simple') => {
+      const functionCollection = new RuntimeFunctionCollection(
+        testApp.store.$registry
+      )
+      const tree = parseBaserowFormula(formula, false)
+      return new ToTipTapVisitor(functionCollection, mode).visit(tree)
+    }
+
+    /**
+     * Recursively collects every `{type, text}` leaf in a TipTap doc so tests
+     * can assert on structural properties without pinning the exact tree
+     * shape (which is sensitive to ANTLR's error recovery choices).
+     */
+    const flattenLeaves = (node, out = []) => {
+      if (!node) return out
+      if (Array.isArray(node)) {
+        node.forEach((child) => flattenLeaves(child, out))
+        return out
+      }
+      if (Array.isArray(node.content)) {
+        flattenLeaves(node.content, out)
+      } else if (node.type) {
+        out.push({ type: node.type, text: node.text, attrs: node.attrs })
+      }
+      return out
+    }
+
+    const allText = (doc) =>
+      flattenLeaves(doc)
+        .filter((n) => n.type === 'text' && typeof n.text === 'string')
+        .map((n) => n.text)
+        .join('')
+
+    const componentTypes = (doc) =>
+      flattenLeaves(doc)
+        .map((n) => n.type)
+        .filter((t) => t !== 'text')
+
+    const functionNames = (doc) =>
+      flattenLeaves(doc)
+        .filter((n) => n.type === 'function-formula-component')
+        .map((n) => n.attrs?.functionName)
+
+    it.each([
+      'month',
+      'month(',
+      'year(today()',
+      'month + year(today())',
+      'concat("a", month)',
+      'year(today())- 200*100+month + year(today())',
+    ])('does not throw and produces a valid doc for %s', (formula) => {
+      const simpleResult = visitTolerantly(formula, 'simple')
+      const advancedResult = visitTolerantly(formula, 'advanced')
+
+      expect(simpleResult?.type).toBe('doc')
+      expect(advancedResult?.type).toBe('doc')
+      // Synthetic "<missing 'X'>" markers must never leak into rendered text.
+      expect(allText(simpleResult)).not.toMatch(/<missing/)
+      expect(allText(advancedResult)).not.toMatch(/<missing/)
+    })
+
+    it('renders a bare identifier (`month`) as plain text', () => {
+      const simple = visitTolerantly('month', 'simple')
+      expect(allText(simple)).toBe('month')
+      expect(componentTypes(simple)).toEqual([])
+    })
+
+    it('renders a dangling `month(` prefix as plain text without highlighting', () => {
+      const simple = visitTolerantly('month(', 'simple')
+      expect(allText(simple)).toBe('month(')
+      expect(functionNames(simple)).toEqual([])
+    })
+
+    it('keeps the inner call highlighted when the outer paren is missing', () => {
+      const simple = visitTolerantly('year(today()', 'simple')
+      expect(allText(simple)).toContain('year(')
+
+      const advanced = visitTolerantly('year(today()', 'advanced')
+      // `today()` is a full valid sub-expression, it must keep its component.
+      expect(functionNames(advanced)).toContain('today')
+    })
+
+    it('keeps valid siblings highlighted around a broken identifier', () => {
+      const advanced = visitTolerantly('concat("a", month)', 'advanced')
+      // `month` survives as plain text; the enclosing `concat(` prefix too.
+      expect(allText(advanced)).toContain('month')
+      expect(allText(advanced)).toContain('concat(')
+    })
+
+    it('highlights the valid prefix of a complex pasted formula', () => {
+      const formula = 'year(today())- 200*100+month + year(today())'
+      const advanced = visitTolerantly(formula, 'advanced')
+
+      // All valid function calls are still rendered as components.
+      expect(functionNames(advanced).filter((n) => n === 'year')).toHaveLength(
+        2
+      )
+      expect(functionNames(advanced).filter((n) => n === 'today')).toHaveLength(
+        2
+      )
+      // Operators detected before the broken identifier are preserved.
+      const text = allText(advanced)
+      expect(text).toContain('200')
+      expect(text).toContain('100')
+      expect(text).toContain('month')
+      expect(componentTypes(advanced)).toContain('operator-formula-component')
+    })
+  })
 })