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,