Create form field number (#8634)

- Refactor VariableTagInput to have a reusable low-level TipTap editor - Create three primitive form fields: - Text - Number - Boolean ## Notes - We should automatically recognize the placeholder to use for every FormFieldInput, as it's done for FieldInputs. ## Design decisions Our main challenge was for variables and inputs to be able to communicate between each other. We chose an API that adds some duplication but remains simple and doesn't rely on "hacks" to work. Common styles are centralized. ## Demo "Workflow" mode with variables: ![CleanShot 2024-11-26 at 10 43 25@2x](https://github.com/user-attachments/assets/cc17098a-ca27-4f97-b86a-bf88593e53db) FormFieldInput mode, without variables: ![CleanShot 2024-11-26 at 10 44 26@2x](https://github.com/user-attachments/assets/fec07c36-5944-4a1d-a863-516fd77c8f55) Behavior difference between fields that can contain variables and static content, and inputs that can have either a variable value or a static value: ![CleanShot 2024-11-26 at 10 47 13@2x](https://github.com/user-attachments/assets/1e562cd8-c362-46d0-b438-481215159da9)
2024-11-28 18:03:24 +01:00
parent 3573d89c3c
commit d73dc1a728
32 changed files with 951 additions and 332 deletions
--- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx
+++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx
@ -9,7 +9,6 @@ import { useAvailableVariablesInWorkflowStep } from '@/workflow/search-variables
 import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Editor } from '@tiptap/react';
 import { useState } from 'react';
 import { IconVariablePlus } from 'twenty-ui';

@ -29,11 +28,11 @@ const StyledDropdownVariableButtonContainer = styled(

 const SearchVariablesDropdown = ({
  inputId,
-  editor,
+  onVariableSelect,
  disabled,
 }: {
  inputId: string;
-  editor: Editor;
+  onVariableSelect: (variableName: string) => void;
  disabled?: boolean;
 }) => {
  const theme = useTheme();
@ -52,10 +51,6 @@ const SearchVariablesDropdown = ({
    StepOutputSchema | undefined
  >(initialStep);

-  const insertVariableTag = (variable: string) => {
-    editor.commands.insertVariableTag(variable);
-  };
-
  const handleStepSelect = (stepId: string) => {
    setSelectedStep(
      availableVariablesInWorkflowStep.find((step) => step.id === stepId),
@ -63,7 +58,7 @@ const SearchVariablesDropdown = ({
  };

  const handleSubItemSelect = (subItem: string) => {
-    insertVariableTag(subItem);
+    onVariableSelect(subItem);
  };

  const handleBack = () => {
--- a/packages/twenty-front/src/modules/workflow/search-variables/components/VariableTagInput.tsx
+++ b/packages/twenty-front/src/modules/workflow/search-variables/components/VariableTagInput.tsx
@ -1,236 +0,0 @@
-import SearchVariablesDropdown from '@/workflow/search-variables/components/SearchVariablesDropdown';
-import { initializeEditorContent } from '@/workflow/search-variables/utils/initializeEditorContent';
-import { parseEditorContent } from '@/workflow/search-variables/utils/parseEditorContent';
-import { VariableTag } from '@/workflow/search-variables/utils/variableTag';
-import styled from '@emotion/styled';
-import Document from '@tiptap/extension-document';
-import HardBreak from '@tiptap/extension-hard-break';
-import Paragraph from '@tiptap/extension-paragraph';
-import Placeholder from '@tiptap/extension-placeholder';
-import Text from '@tiptap/extension-text';
-import { EditorContent, useEditor } from '@tiptap/react';
-import { isDefined } from 'twenty-ui';
-import { useDebouncedCallback } from 'use-debounce';
-
-const LINE_HEIGHT = 24;
-
-const StyledContainer = styled.div`
-  display: inline-flex;
-  flex-direction: column;
-`;
-
-const StyledLabel = styled.div`
-  color: ${({ theme }) => theme.font.color.light};
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin-bottom: ${({ theme }) => theme.spacing(1)};
-`;
-
-const StyledInputContainer = styled.div<{
-  multiline?: boolean;
-}>`
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  line-height: ${({ multiline }) => (multiline ? `${LINE_HEIGHT}px` : 'auto')};
-  min-height: ${({ multiline }) =>
-    multiline ? `${3 * LINE_HEIGHT}px` : 'auto'};
-  max-height: ${({ multiline }) =>
-    multiline ? `${5 * LINE_HEIGHT}px` : 'auto'};
-`;
-
-const StyledSearchVariablesDropdownContainer = styled.div<{
-  multiline?: boolean;
-  readonly?: boolean;
-}>`
-  align-items: center;
-  display: flex;
-  justify-content: center;
-
-  ${({ theme, readonly }) =>
-    !readonly &&
-    `
-      :hover {
-        background-color: ${theme.background.transparent.light};
-      }`}
-
-  ${({ theme, multiline }) =>
-    multiline
-      ? `
-        position: absolute;
-        top: ${theme.spacing(0)};
-        right: ${theme.spacing(0)};
-        padding: ${theme.spacing(0.5)} ${theme.spacing(0)};
-        border-radius: ${theme.border.radius.sm};
-      `
-      : `
-        background-color: ${theme.background.transparent.lighter};
-        border-top-right-radius: ${theme.border.radius.sm};
-        border-bottom-right-radius: ${theme.border.radius.sm};
-        border: 1px solid ${theme.border.color.medium};
-      `}
-`;
-
-const StyledEditor = styled.div<{ multiline?: boolean; readonly?: boolean }>`
-  display: flex;
-  width: 100%;
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
-  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
-  box-sizing: border-box;
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
-  border-bottom-right-radius: ${({ multiline, theme }) =>
-    multiline ? theme.border.radius.sm : 'none'};
-  border-top-right-radius: ${({ multiline, theme }) =>
-    multiline ? theme.border.radius.sm : 'none'};
-  border-right: ${({ multiline }) => (multiline ? 'auto' : 'none')};
-  padding-right: ${({ multiline, theme }) =>
-    multiline ? theme.spacing(6) : theme.spacing(2)};
-  overflow: ${({ multiline }) => (multiline ? 'auto' : 'hidden')};
-  height: ${({ multiline }) => (multiline ? 'auto' : `${1.5 * LINE_HEIGHT}px`)};
-
-  .editor-content {
-    width: 100%;
-  }
-
-  .tiptap {
-    display: flex;
-    height: 100%;
-    color: ${({ theme, readonly }) =>
-      readonly ? theme.font.color.light : theme.font.color.primary};
-    font-family: ${({ theme }) => theme.font.family};
-    font-weight: ${({ theme }) => theme.font.weight.regular};
-    border: none !important;
-    align-items: ${({ multiline }) => (multiline ? 'top' : 'center')};
-    white-space: ${({ multiline }) => (multiline ? 'pre-wrap' : 'nowrap')};
-    word-wrap: ${({ multiline }) => (multiline ? 'break-word' : 'normal')};
-
-    p.is-editor-empty:first-of-type::before {
-      content: attr(data-placeholder);
-      color: ${({ theme }) => theme.font.color.light};
-      float: left;
-      height: 0;
-      pointer-events: none;
-    }
-
-    p {
-      margin: 0;
-    }
-
-    .variable-tag {
-      color: ${({ theme }) => theme.color.blue};
-      background-color: ${({ theme }) => theme.color.blue10};
-      padding: ${({ theme }) => theme.spacing(1)};
-      border-radius: ${({ theme }) => theme.border.radius.sm};
-    }
-  }
-
-  .ProseMirror-focused {
-    outline: none;
-  }
-`;
-
-interface VariableTagInputProps {
-  inputId: string;
-  label?: string;
-  value?: string;
-  placeholder?: string;
-  multiline?: boolean;
-  onChange?: (content: string) => void;
-  readonly?: boolean;
-}
-
-export const VariableTagInput = ({
-  inputId,
-  label,
-  value,
-  placeholder,
-  multiline,
-  onChange,
-  readonly,
-}: VariableTagInputProps) => {
-  const deboucedOnUpdate = useDebouncedCallback((editor) => {
-    const jsonContent = editor.getJSON();
-    const parsedContent = parseEditorContent(jsonContent);
-    onChange?.(parsedContent);
-  }, 500);
-
-  const editor = useEditor({
-    extensions: [
-      Document,
-      Paragraph,
-      Text,
-      Placeholder.configure({
-        placeholder,
-      }),
-      VariableTag,
-      ...(multiline
-        ? [
-            HardBreak.configure({
-              keepMarks: false,
-            }),
-          ]
-        : []),
-    ],
-    editable: !readonly,
-    onCreate: ({ editor }) => {
-      if (isDefined(value)) {
-        initializeEditorContent(editor, value);
-      }
-    },
-    onUpdate: ({ editor }) => {
-      deboucedOnUpdate(editor);
-    },
-    editorProps: {
-      handleKeyDown: (view, event) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
-          event.preventDefault();
-
-          const { state } = view;
-          const { tr } = state;
-
-          // Insert hard break using the view's state and dispatch
-          const transaction = tr.replaceSelectionWith(
-            state.schema.nodes.hardBreak.create(),
-          );
-
-          view.dispatch(transaction);
-
-          return true;
-        }
-        return false;
-      },
-    },
-    enableInputRules: false,
-    enablePasteRules: false,
-    injectCSS: false,
-  });
-
-  if (!editor) {
-    return null;
-  }
-
-  return (
-    <StyledContainer>
-      {label && <StyledLabel>{label}</StyledLabel>}
-      <StyledInputContainer multiline={multiline}>
-        <StyledEditor multiline={multiline} readonly={readonly}>
-          <EditorContent className="editor-content" editor={editor} />
-        </StyledEditor>
-        <StyledSearchVariablesDropdownContainer
-          multiline={multiline}
-          readonly={readonly}
-        >
-          <SearchVariablesDropdown
-            inputId={inputId}
-            editor={editor}
-            disabled={readonly}
-          />
-        </StyledSearchVariablesDropdownContainer>
-      </StyledInputContainer>
-    </StyledContainer>
-  );
-};
-
-export default VariableTagInput;
--- a/packages/twenty-front/src/modules/workflow/search-variables/utils/tests/extractVariableLabel.test.ts
+++ b/packages/twenty-front/src/modules/workflow/search-variables/utils/tests/extractVariableLabel.test.ts
@ -0,0 +1,13 @@
+import { extractVariableLabel } from '../extractVariableLabel';
+
+it('returns the last part of a properly formatted variable', () => {
+  const rawVariable = '{{a.b.c}}';
+
+  expect(extractVariableLabel(rawVariable)).toBe('c');
+});
+
+it('stops on unclosed variables', () => {
+  const rawVariable = '{{ test {{a.b.c}}';
+
+  expect(extractVariableLabel(rawVariable)).toBe('c');
+});
--- a/packages/twenty-front/src/modules/workflow/search-variables/utils/extractVariableLabel.ts
+++ b/packages/twenty-front/src/modules/workflow/search-variables/utils/extractVariableLabel.ts
@ -0,0 +1,21 @@
+import { isDefined } from 'twenty-ui';
+
+const CAPTURE_ALL_VARIABLE_TAG_INNER_REGEX = /{{([^{}]+)}}/g;
+
+export const extractVariableLabel = (rawVariableName: string) => {
+  const variableWithoutBrackets = rawVariableName.replace(
+    CAPTURE_ALL_VARIABLE_TAG_INNER_REGEX,
+    (_, variableName) => {
+      return variableName;
+    },
+  );
+
+  const parts = variableWithoutBrackets.split('.');
+  const displayText = parts.at(-1);
+
+  if (!isDefined(displayText)) {
+    throw new Error('Expected to find at least one splitted chunk.');
+  }
+
+  return displayText;
+};
--- a/packages/twenty-front/src/modules/workflow/search-variables/utils/initializeEditorContent.ts
+++ b/packages/twenty-front/src/modules/workflow/search-variables/utils/initializeEditorContent.ts
@ -1,13 +1,13 @@
 import { isNonEmptyString } from '@sniptt/guards';
 import { Editor } from '@tiptap/react';

-const REGEX_VARIABLE_TAG = /(\{\{[^}]+\}\})/;
+const CAPTURE_VARIABLE_TAG_REGEX = /({{[^{}]+}})/;

 export const initializeEditorContent = (editor: Editor, content: string) => {
  const lines = content.split(/\n/);

  lines.forEach((line, index) => {
-    const parts = line.split(REGEX_VARIABLE_TAG);
+    const parts = line.split(CAPTURE_VARIABLE_TAG_REGEX);
    parts.forEach((part) => {
      if (part.length === 0) {
        return;
--- a/packages/twenty-front/src/modules/workflow/search-variables/utils/variableTag.ts
+++ b/packages/twenty-front/src/modules/workflow/search-variables/utils/variableTag.ts
@ -1,10 +1,11 @@
+import { extractVariableLabel } from '@/workflow/search-variables/utils/extractVariableLabel';
 import { Node } from '@tiptap/core';
 import { mergeAttributes } from '@tiptap/react';

 declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    variableTag: {
-      insertVariableTag: (variable: string) => ReturnType;
+      insertVariableTag: (variableName: string) => ReturnType;
    };
  }
 }
@ -29,15 +30,6 @@ export const VariableTag = Node.create({

  renderHTML: ({ node, HTMLAttributes }) => {
    const variable = node.attrs.variable as string;
-    const variableWithoutBrackets = variable.replace(
-      /\{\{([^}]+)\}\}/g,
-      (_, variable) => {
-        return variable;
-      },
-    );
-
-    const parts = variableWithoutBrackets.split('.');
-    const displayText = parts[parts.length - 1];

    return [
      'span',
@ -45,17 +37,17 @@ export const VariableTag = Node.create({
        'data-type': 'variableTag',
        class: 'variable-tag',
      }),
-      displayText,
+      extractVariableLabel(variable),
    ];
  },

  addCommands: () => ({
    insertVariableTag:
-      (variable: string) =>
+      (variableName: string) =>
      ({ commands }) => {
-        commands.insertContent?.({
+        commands.insertContent({
          type: 'variableTag',
-          attrs: { variable },
+          attrs: { variable: variableName },
        });

        return true;