Advanced formula editor fixings (baserow#4203)

Author: jonadeline

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
+  }
+}

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

@@ -42,13 +42,23 @@ import { Placeholder } from '@tiptap/extension-placeholder'
 import { Document } from '@tiptap/extension-document'
 import { Text } from '@tiptap/extension-text'
 import { History } from '@tiptap/extension-history'
-import { FunctionHighlightExtension } from '@baserow/modules/core/components/formula/FunctionHighlightExtension'
-import { FunctionAutoCompleteExtension } from '@baserow/modules/core/components/formula/FunctionAutoCompleteExtension'
-import { FunctionDeletionExtension } from '@baserow/modules/core/components/formula/FunctionDeletionExtension'
+import { HardBreak } from '@tiptap/extension-hard-break'
 import { FunctionHelpTooltipExtension } from '@baserow/modules/core/components/formula/FunctionHelpTooltipExtension'
-import { FormulaInsertionExtension } from '@baserow/modules/core/components/formula/FormulaInsertionExtension'
+import {
+  FormulaInsertionExtension,
+  FunctionFormulaComponentNode,
+  FunctionArgumentCommaNode,
+  FunctionClosingParenNode,
+  OperatorFormulaComponentNode,
+} from '@baserow/modules/core/components/formula/FormulaInsertionExtension'
 import { NodeSelectionExtension } from '@baserow/modules/core/components/formula/NodeSelectionExtension'
 import { ContextManagementExtension } from '@baserow/modules/core/components/formula/ContextManagementExtension'
+import { FunctionDetectionExtension } from '@baserow/modules/core/components/formula/FunctionDetectionExtension'
+import { OperatorDetectionExtension } from '@baserow/modules/core/components/formula/OperatorDetectionExtension'
+import {
+  createClipboardTextSerializer,
+  createPasteHandler,
+} from '@baserow/modules/core/components/formula/FormulaClipboardHandler'
 import _ from 'lodash'
 import parseBaserowFormula from '@baserow/modules/core/formula/parser/parser'
 import { ToTipTapVisitor } from '@baserow/modules/core/formula/tiptap/toTipTapVisitor'
@@ -254,20 +264,31 @@ export default {
         FunctionHelpTooltipExtension.configure({
           vueComponent: this,
         }),
-        FunctionHighlightExtension.configure({
-          functionNames: this.mode === 'advanced' ? this.functionNames : [],
-          operators: this.mode === 'advanced' ? this.operators : [],
-        }),
         ...this.formulaComponents,
       ]
 
       if (this.mode === 'advanced') {
+        extensions.push(FunctionFormulaComponentNode)
+        extensions.push(FunctionArgumentCommaNode)
+        extensions.push(FunctionClosingParenNode)
+        extensions.push(OperatorFormulaComponentNode)
+        extensions.push(
+          HardBreak.extend({
+            addKeyboardShortcuts() {
+              return {
+                Enter: () => this.editor.commands.setHardBreak(),
+              }
+            },
+          })
+        )
         extensions.push(
-          FunctionAutoCompleteExtension.configure({
+          FunctionDetectionExtension.configure({
             functionNames: this.functionNames,
+            vueComponent: this,
           }),
-          FunctionDeletionExtension.configure({
-            functionNames: this.functionNames,
+          OperatorDetectionExtension.configure({
+            operators: this.operators,
+            vueComponent: this,
           })
         )
       }
@@ -382,11 +403,18 @@ export default {
         parseOptions: {
           preserveWhitespace: 'full',
         },
-        editorProps: {},
+        editorProps: {
+          clipboardTextSerializer: createClipboardTextSerializer(
+            this.toFormula.bind(this)
+          ),
+          handlePaste: createPasteHandler({
+            toContent: this.toContent.bind(this),
+            getMode: () => this.mode,
+          }),
+        },
       })
     },
     recreateEditor(formula = null) {
-      // If no formula is provided, save the current formula before destroying the editor
       const currentFormula =
         formula ||
         (this.editor ? this.toFormula(this.wrapperContent) : this.value)
@@ -435,23 +463,6 @@ export default {
         }
       }
 
-      if (this.readOnly) {
-        return {
-          type: 'doc',
-          content: [
-            {
-              type: 'wrapper',
-              content: [
-                {
-                  type: 'text',
-                  text: formula,
-                },
-              ],
-            },
-          ],
-        }
-      }
-
       try {
         const tree = parseBaserowFormula(formula)
         const functionCollection = new RuntimeFunctionCollection(this.$registry)