Skip to content

Commit 09d9757

Browse files
jonadelinejonadeline
authored
Improve formula editor
1 parent 4b9ae07 commit 09d9757

24 files changed

+1396
-745
lines changed

‎changelog/entries/unreleased/refactor/improve_formula_editor.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "refactor",
3+
"message": "Improve formula editor",
4+
"issue_origin": "github",
5+
"issue_number": null,
6+
"domain": "core",
7+
"bullet_points": [],
8+
"created_at": "2025-11-25"
9+
}

‎tests/cases/tip_tap_visitor_cases.json‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,12 @@
1414
"formula": "'hello'",
1515
"content": {
1616
"type": "doc",
17-
"content": [{ "text": "hello", "type": "text" }]
17+
"content": [
18+
{
19+
"type": "wrapper",
20+
"content": [{ "text": "hello", "type": "text" }]
21+
}
22+
]
1823
}
1924
},
2025
{
@@ -53,9 +58,17 @@
5358
"content": {
5459
"type": "doc",
5560
"content": [
61+
{
62+
"type": "text",
63+
"text": "\u200B"
64+
},
5665
{
5766
"type": "get-formula-component",
5867
"attrs": { "path": "data_source.hello.there", "isSelected": false }
68+
},
69+
{
70+
"type": "text",
71+
"text": "\u200B"
5972
}
6073
]
6174
}
@@ -68,13 +81,21 @@
6881
{
6982
"type": "wrapper",
7083
"content": [
84+
{
85+
"type": "text",
86+
"text": "\u200B"
87+
},
7188
{
7289
"type": "get-formula-component",
7390
"attrs": {
7491
"path": "data_source.hello.there",
7592
"isSelected": false
7693
}
7794
},
95+
{
96+
"type": "text",
97+
"text": "\u200B"
98+
},
7899
{ "type": "text", "text": "friend :)" }
79100
]
80101
}
@@ -125,12 +146,20 @@
125146
{
126147
"type": "wrapper",
127148
"content": [
149+
{
150+
"type": "text",
151+
"text": "\u200B"
152+
},
128153
{
129154
"type": "get-formula-component",
130155
"attrs": {
131156
"path": "data_source.hello.there",
132157
"isSelected": false
133158
}
159+
},
160+
{
161+
"type": "text",
162+
"text": "\u200B"
134163
}
135164
]
136165
}

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,82 @@
6262

6363
@include rounded;
6464
}
65+
66+
// Group parenthesis style
67+
.formula-input-field__group-parenthesis {
68+
color: $palette-purple-800;
69+
font-weight: 500;
70+
background-color: $palette-purple-50;
71+
padding: 0 8px;
72+
height: 24px;
73+
box-sizing: border-box;
74+
display: inline-block;
75+
vertical-align: top;
76+
77+
@include rounded;
78+
}
79+
80+
// Remove left padding for closing parenthesis of functions with no arguments
81+
.formula-input-field__parenthesis[data-no-args='true'] {
82+
padding-left: 0;
83+
}
84+
85+
// Add margin-right when a function component is followed by another function component
86+
.function-formula-component:has(+ .function-formula-component) {
87+
margin-right: 4px;
88+
}
89+
90+
// Add margin-right when a function component is followed by a group parenthesis
91+
.function-formula-component:has(+ .formula-input-field__group-parenthesis) {
92+
margin-right: 4px;
93+
}
94+
95+
// Add margin-right when a parenthesis is followed by another parenthesis
96+
.formula-input-field__parenthesis:has(+ .formula-input-field__parenthesis) {
97+
margin-right: 4px;
98+
}
99+
100+
// Add margin-right when a parenthesis is followed by a comma
101+
.formula-input-field__parenthesis:has(+ .formula-input-field__comma) {
102+
margin-right: 4px;
103+
}
104+
105+
// Add margin-right when a comma is followed by a function component
106+
.formula-input-field__comma:has(+ .function-formula-component) {
107+
margin-right: 4px;
108+
}
109+
110+
// Add margin-right when a comma is followed by a parenthesis
111+
.formula-input-field__comma:has(+ .formula-input-field__parenthesis) {
112+
margin-right: 4px;
113+
}
114+
115+
// Add margin-left when a comma is preceded by a function component
116+
.function-formula-component + .formula-input-field__comma {
117+
margin-left: 4px;
118+
}
119+
120+
// Add margin-right when a comma is followed by another comma
121+
.formula-input-field__comma:has(+ .formula-input-field__comma) {
122+
margin-right: 4px;
123+
}
124+
125+
// Add margin-right when a group parenthesis is followed by another group parenthesis
126+
.formula-input-field__group-parenthesis:has(
127+
+ .formula-input-field__group-parenthesis
128+
) {
129+
margin-right: 4px;
130+
}
131+
132+
// Add margin-right when a group parenthesis is followed by a function/operator/comma
133+
.formula-input-field__group-parenthesis:has(+ .function-formula-component),
134+
.formula-input-field__group-parenthesis:has(+ .formula-input-field__comma) {
135+
margin-right: 4px;
136+
}
137+
138+
// Remove right padding for function components with no arguments
139+
.function-formula-component[data-no-args='true'] {
140+
.function-formula-component__name {
141+
padding-right: 2px;
142+
}
143+
}

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@
1414
height: 24px;
1515

1616
@include rounded;
17-
18-
.function-formula-component:has(+ .function-formula-component) & {
19-
padding-right: 0;
20-
}
2117
}
2218

2319
.function-formula-component__parenthesis {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
white-space: normal;
55
user-select: none;
66
cursor: default;
7+
margin: 0 2px;
78
}
89

910
.operator-formula-component__symbol {

0 commit comments

Comments
 (0)