Fix the design of the Variable chip (#9871)

- Use a React component for variable tags in tiptap
- Fix the design of the variable chip
- Always display a button to delete the chip

![CleanShot 2025-01-28 at 12 35
55@2x](https://github.com/user-attachments/assets/d78ffa52-fcc3-4bbc-b427-68edde255408)

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowTextEditorVariableChip.tsx

@@ -0,0 +1,25 @@
+import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
+import styled from '@emotion/styled';
+import { NodeViewProps, NodeViewWrapper } from '@tiptap/react';
+
+const StyledWrapper = styled.span`
+  display: inline-block;
+  padding-inline: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+type WorkflowTextEditorVariableChipProps = NodeViewProps;
+
+export const WorkflowTextEditorVariableChip = ({
+  deleteNode,
+  node,
+}: WorkflowTextEditorVariableChipProps) => {
+  const attrs = node.attrs as {
+    variable: string;
+  };
+
+  return (
+    <NodeViewWrapper as={StyledWrapper} style={{ whiteSpace: 'nowrap' }}>
+      <VariableChip rawVariableName={attrs.variable} onRemove={deleteNode} />
+    </NodeViewWrapper>
+  );
+};

packages/twenty-front/src/modules/workflow/workflow-variables/utils/variableTag.ts

@@ -1,6 +1,7 @@
+import { WorkflowTextEditorVariableChip } from '@/workflow/workflow-variables/components/WorkflowTextEditorVariableChip';
 import { extractVariableLabel } from '@/workflow/workflow-variables/utils/extractVariableLabel';
 import { Node } from '@tiptap/core';
-import { mergeAttributes } from '@tiptap/react';
+import { mergeAttributes, ReactNodeViewRenderer } from '@tiptap/react';
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -41,6 +42,10 @@ export const VariableTag = Node.create({
     ];
   },
 
+  addNodeView: () => {
+    return ReactNodeViewRenderer(WorkflowTextEditorVariableChip);
+  },
+
   renderText: ({ node }) => {
     return node.attrs.variable;
   },