[pull] develop from baserow:develop

changelog/entries/unreleased/refactor/improve_formula_editor.json

@@ -0,0 +1,9 @@
+{
+    "type": "refactor",
+    "message": "Improve formula editor",
+    "issue_origin": "github",
+    "issue_number": null,
+    "domain": "core",
+    "bullet_points": [],
+    "created_at": "2025-11-25"
+}

tests/cases/tip_tap_visitor_cases.json

@@ -14,7 +14,12 @@
     "formula": "'hello'",
     "content": {
       "type": "doc",
-      "content": [{ "text": "hello", "type": "text" }]
+      "content": [
+        {
+          "type": "wrapper",
+          "content": [{ "text": "hello", "type": "text" }]
+        }
+      ]
     }
   },
   {
@@ -53,9 +58,17 @@
     "content": {
       "type": "doc",
       "content": [
+        {
+          "type": "text",
+          "text": "\u200B"
+        },
         {
           "type": "get-formula-component",
           "attrs": { "path": "data_source.hello.there", "isSelected": false }
+        },
+        {
+          "type": "text",
+          "text": "\u200B"
         }
       ]
     }
@@ -68,13 +81,21 @@
         {
           "type": "wrapper",
           "content": [
+            {
+              "type": "text",
+              "text": "\u200B"
+            },
             {
               "type": "get-formula-component",
               "attrs": {
                 "path": "data_source.hello.there",
                 "isSelected": false
               }
             },
+            {
+              "type": "text",
+              "text": "\u200B"
+            },
             { "type": "text", "text": "friend :)" }
           ]
         }
@@ -125,12 +146,20 @@
         {
           "type": "wrapper",
           "content": [
+            {
+              "type": "text",
+              "text": "\u200B"
+            },
             {
               "type": "get-formula-component",
               "attrs": {
                 "path": "data_source.hello.there",
                 "isSelected": false
               }
+            },
+            {
+              "type": "text",
+              "text": "\u200B"
             }
           ]
         }

web-frontend/modules/core/assets/scss/components/formula_input_field.scss

@@ -62,3 +62,82 @@
 
   @include rounded;
 }
+
+// Group parenthesis style
+.formula-input-field__group-parenthesis {
+  color: $palette-purple-800;
+  font-weight: 500;
+  background-color: $palette-purple-50;
+  padding: 0 8px;
+  height: 24px;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: top;
+
+  @include rounded;
+}
+
+// Remove left padding for closing parenthesis of functions with no arguments
+.formula-input-field__parenthesis[data-no-args='true'] {
+  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;
+}
+
+// Add margin-right when a comma is followed by a parenthesis
+.formula-input-field__comma:has(+ .formula-input-field__parenthesis) {
+  margin-right: 4px;
+}
+
+// Add margin-left when a comma is preceded by a function component
+.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) {
+  margin-right: 4px;
+}
+
+// Remove right padding for function components with no arguments
+.function-formula-component[data-no-args='true'] {
+  .function-formula-component__name {
+    padding-right: 2px;
+  }
+}

web-frontend/modules/core/assets/scss/components/function_formula_component.scss

@@ -14,10 +14,6 @@
   height: 24px;
 
   @include rounded;
-
-  .function-formula-component:has(+ .function-formula-component) & {
-    padding-right: 0;
-  }
 }
 
 .function-formula-component__parenthesis {

web-frontend/modules/core/assets/scss/components/operator_formula_component.scss

@@ -4,6 +4,7 @@
   white-space: normal;
   user-select: none;
   cursor: default;
+  margin: 0 2px;
 }
 
 .operator-formula-component__symbol {