Text area using variables (#8034)

- Adding multiline props to component
- Update design and logic accordingly 
- Fix hotkey scope for right drawer



https://github.com/user-attachments/assets/65ff9641-71a4-4828-a62b-e09327b63150

packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasEditableEffect.tsx

@@ -1,5 +1,7 @@
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { CREATE_STEP_STEP_ID } from '@/workflow/constants/CreateStepStepId';
 import { EMPTY_TRIGGER_STEP_ID } from '@/workflow/constants/EmptyTriggerStepId';
 import { useStartNodeCreation } from '@/workflow/hooks/useStartNodeCreation';
@@ -15,6 +17,8 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
   const { startNodeCreation } = useStartNodeCreation();
 
   const { openRightDrawer, closeRightDrawer } = useRightDrawer();
+  const setHotkeyScope = useSetHotkeyScope();
+
   const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
 
   const handleSelectionChange = useCallback(
@@ -47,9 +51,11 @@ export const WorkflowDiagramCanvasEditableEffect = () => {
       }
 
       setWorkflowSelectedNode(selectedNode.id);
+      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
       openRightDrawer(RightDrawerPages.WorkflowStepEdit);
     },
     [
+      setHotkeyScope,
       closeRightDrawer,
       openRightDrawer,
       setWorkflowSelectedNode,

packages/twenty-front/src/modules/workflow/components/WorkflowDiagramCanvasReadonlyEffect.tsx

@@ -1,5 +1,7 @@
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useTriggerNodeSelection } from '@/workflow/hooks/useTriggerNodeSelection';
 import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
 import { WorkflowDiagramNode } from '@/workflow/types/WorkflowDiagram';
@@ -11,6 +13,7 @@ import { isDefined } from 'twenty-ui';
 export const WorkflowDiagramCanvasReadonlyEffect = () => {
   const { openRightDrawer, closeRightDrawer } = useRightDrawer();
   const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
+  const setHotkeyScope = useSetHotkeyScope();
 
   const handleSelectionChange = useCallback(
     ({ nodes }: OnSelectionChangeParams) => {
@@ -24,9 +27,15 @@ export const WorkflowDiagramCanvasReadonlyEffect = () => {
       }
 
       setWorkflowSelectedNode(selectedNode.id);
+      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
       openRightDrawer(RightDrawerPages.WorkflowStepView);
     },
-    [closeRightDrawer, openRightDrawer, setWorkflowSelectedNode],
+    [
+      closeRightDrawer,
+      openRightDrawer,
+      setWorkflowSelectedNode,
+      setHotkeyScope,
+    ],
   );
 
   useOnSelectionChange({

packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx

@@ -4,9 +4,8 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
 import { Select, SelectOption } from '@/ui/input/components/Select';
-import { TextArea } from '@/ui/input/components/TextArea';
 import { WorkflowEditGenericFormBase } from '@/workflow/components/WorkflowEditGenericFormBase';
-import VariableTagInput from '@/workflow/search-variables/components/VariableTagInput';
+import { VariableTagInput } from '@/workflow/search-variables/components/VariableTagInput';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { WorkflowSendEmailStep } from '@/workflow/types/Workflow';
 import { useTheme } from '@emotion/react';
@@ -227,20 +226,20 @@ export const WorkflowEditActionFormSendEmail = (
             />
           )}
         />
-
         <Controller
           name="body"
           control={form.control}
           render={({ field }) => (
-            <TextArea
+            <VariableTagInput
+              inputId="email-body-input"
               label="Body"
               placeholder="Enter email body (use {{variable}} for dynamic content)"
               value={field.value}
-              minRows={4}
               onChange={(email) => {
                 field.onChange(email);
                 handleSave();
               }}
+              multiline
             />
           )}
         />