[pull] develop from baserow:develop

web-frontend/modules/builder/components/event/WorkflowAction.vue

@@ -105,7 +105,7 @@ export default {
         await this.actionUpdateWorkflowAction({
           page: this.elementPage,
           workflowAction: this.workflowAction,
-          values,
+          values: differences,
         })
       } catch (error) {
         this.$refs.actionForm?.reset()

web-frontend/modules/builder/store/builderWorkflowAction.js

@@ -60,21 +60,19 @@ const mutations = {
       order,
     } = page.workflowActions[index]
 
-    const newValue = overwrite
-      ? populateWorkflowAction({
-          id,
-          page_id: pageId,
-          element_id: elementId,
-          event,
-          order,
-          ...values,
-        })
-      : {
-          ...page.workflowActions[index],
-          ...values,
-        }
-
-    page.workflowActions.splice(index, 1, newValue)
+    if (overwrite) {
+      const newValue = populateWorkflowAction({
+        id,
+        page_id: pageId,
+        element_id: elementId,
+        event,
+        order,
+        ...values,
+      })
+      page.workflowActions.splice(index, 1, newValue)
+    } else {
+      Object.assign(page.workflowActions[index], values)
+    }
   },
   SET_ITEM(state, { page, workflowAction: workflowActionToSet, values }) {
     page.workflowActions = page.workflowActions.map((workflowAction) =>

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

@@ -169,6 +169,8 @@
 @import 'formula_input_field';
 @import 'node_help_tooltip';
 @import 'get_formula_component';
+@import 'function_formula_component';
+@import 'operator_formula_component';
 @import 'color_input';
 @import 'group_bys';
 @import 'node_explorer/node_explorer';

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

@@ -1,60 +1,9 @@
-.function-name-highlight {
-  color: $palette-cyan-800;
-  font-weight: 500;
-  background-color: $palette-cyan-50;
-  padding: 4px 8px;
-  height: 24px;
-  display: inline-block;
-  vertical-align: top;
-
-  @include rounded;
-}
-
-.operator-highlight {
-  color: $palette-green-800;
-  font-weight: 500;
-  background-color: $palette-green-50;
-  padding: 3px 8px;
-  height: 24px;
-  box-sizing: border-box;
-  display: inline-block;
-  vertical-align: top;
-
-  @include rounded;
-}
-
-.text-segment {
-  min-height: 24px;
-  display: inline-block;
-  vertical-align: top;
-  padding: 3px 0;
-  margin-right: 4px;
-  line-height: 18px;
-}
-
-.function-comma-highlight {
-  margin-right: 4px;
-}
-
-.function-comma-highlight,
-.function-paren-highlight {
-  color: $palette-cyan-800;
-  font-weight: 500;
-  background-color: $palette-cyan-50;
-  padding: 4px 8px;
-  height: 24px;
-  box-sizing: border-box;
-  display: inline-block;
-  vertical-align: top;
-
-  @include rounded;
-}
-
 .formula-input-field {
   height: auto;
   font-size: 13px;
   min-height: 36px;
-  padding: 5px 12px 1px;
+  line-height: 25px;
+  padding: 5px 12px;
 
   // If the field is empty, then give it the
   // same padding as a normal form input field.
@@ -68,27 +17,13 @@
     padding: 10px 12px;
     min-height: 48px;
   }
-
-  // Remove margin from the last element to avoid trailing space
-  /* stylelint-disable-next-line selector-class-pattern */
-  .ProseMirror {
-    span:last-child {
-      margin-right: 0;
-    }
-
-    > div {
-      > span:not(.text-segment) {
-        margin: 0 4px 4px 0;
-      }
-    }
-  }
 }
 
 .formula-input-field--focused {
   border-color: $palette-blue-500;
 
   &.formula-input-field--error {
-    border-color: $palette-red-400;
+    border-color: $palette-red-400 !important;
   }
 }
 
@@ -112,3 +47,18 @@
   pointer-events: none;
   height: 0;
 }
+
+// Atomic comma style
+.formula-input-field__comma,
+.formula-input-field__parenthesis {
+  color: $palette-cyan-800;
+  font-weight: 500;
+  background-color: $palette-cyan-50;
+  padding: 0 8px;
+  height: 24px;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: top;
+
+  @include rounded;
+}

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

@@ -0,0 +1,34 @@
+.function-formula-component {
+  height: 24px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.function-formula-component__name {
+  color: $palette-cyan-800;
+  font-weight: 500;
+  background-color: $palette-cyan-50;
+  padding: 0 8px;
+  display: inline-block;
+  vertical-align: top;
+  height: 24px;
+
+  @include rounded;
+
+  .function-formula-component:has(+ .function-formula-component) & {
+    padding-right: 0;
+  }
+}
+
+.function-formula-component__parenthesis {
+  color: $palette-cyan-800;
+  font-weight: 500;
+  background-color: $palette-cyan-50;
+  padding: 0 8px;
+  height: 24px;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: top;
+
+  @include rounded;
+}

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

@@ -1,7 +1,7 @@
 .get-formula-component {
   cursor: pointer;
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: top;
   background-color: $palette-neutral-100;
   font-size: 12px;
   border-radius: 3px;

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

@@ -0,0 +1,20 @@
+.operator-formula-component {
+  display: inline-block;
+  vertical-align: top;
+  white-space: normal;
+  user-select: none;
+  cursor: default;
+}
+
+.operator-formula-component__symbol {
+  color: $palette-green-800;
+  font-weight: 500;
+  background-color: $palette-green-50;
+  padding: 0 8px;
+  height: 24px;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: top;
+
+  @include rounded;
+}

web-frontend/modules/core/components/formula/ContextManagementExtension.js

@@ -52,7 +52,7 @@ export const ContextManagementExtension = Extension.create({
               switch (contextPosition) {
                 case 'left':
                   config = {
-                    vertical: 'top',
+                    vertical: 'bottom',
                     horizontal: 'left',
                     needsDynamicOffset: true,
                   }
@@ -67,7 +67,7 @@ export const ContextManagementExtension = Extension.create({
                   break
                 case 'right':
                   config = {
-                    vertical: 'top',
+                    vertical: 'bottom',
                     horizontal: 'left',
                     needsDynamicOffset: true,
                   }

web-frontend/modules/core/components/formula/FormulaClipboardHandler.js

@@ -0,0 +1,84 @@
+/**
+ * Creates a clipboard text serializer for the formula editor
+ * @param {Function} toFormula - Function to convert editor content to formula string
+ * @returns {Function} Serializer function
+ */
+export function createClipboardTextSerializer(toFormula) {
+  return (slice) => {
+    // Serialize the slice to formula text
+    const content = {
+      type: 'doc',
+      content: [{ type: 'wrapper', content: [] }],
+    }
+
+    // Extract nodes from the slice
+    const nodes = []
+    slice.content.forEach((node) => {
+      nodes.push(node.toJSON())
+    })
+
+    content.content[0].content = nodes
+
+    // Convert to formula string
+    const formula = toFormula(content)
+
+    return formula || ''
+  }
+}
+
+/**
+ * Creates a paste handler for the formula editor
+ * @param {Object} options - Handler options
+ * @param {Function} options.toContent - Function to parse formula string to editor content
+ * @param {Function} options.getMode - Function to get current editor mode
+ * @returns {Function} Paste handler function
+ */
+export function createPasteHandler({ toContent, getMode }) {
+  return (view, event, slice) => {
+    // Only handle paste in advanced mode
+    if (getMode() !== 'advanced') {
+      return false
+    }
+
+    // Get the pasted text
+    const text = event.clipboardData.getData('text/plain')
+    if (!text) {
+      return false
+    }
+
+    // Try to parse it as a formula
+    try {
+      const content = toContent(text)
+      if (!content) {
+        return false
+      }
+
+      // 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
+      }
+    } catch (error) {
+      console.error('Error parsing pasted formula:', error)
+      return false
+    }
+
+    return false
+  }
+}