feat: modified DoubleTextInput to split First and Last name accordingly (#4598)

* feat: modified DoubleTextInput to split First and Last name accordingly

* Fix Linter

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx

@@ -66,6 +66,10 @@ export const FullNameFieldInput = ({
     setDraftValue(convertToFullName(newDoubleText));
   };
 
+  const handlePaste = (newDoubleText: FieldDoubleText) => {
+    setDraftValue(convertToFullName(newDoubleText));
+  };
+
   return (
     <FieldInputOverlay>
       <DoubleTextInput
@@ -82,6 +86,7 @@ export const FullNameFieldInput = ({
         onEscape={handleEscape}
         onShiftTab={handleShiftTab}
         onTab={handleTab}
+        onPaste={handlePaste}
         hotkeyScope={hotkeyScope}
         onChange={handleChange}
       />

packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx

@@ -1,4 +1,10 @@
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  ClipboardEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
 
@@ -39,6 +45,7 @@ type DoubleTextInputProps = {
     newDoubleTextValue: FieldDoubleText,
   ) => void;
   onChange?: (newDoubleTextValue: FieldDoubleText) => void;
+  onPaste?: (newDoubleTextValue: FieldDoubleText) => void;
 };
 
 export const DoubleTextInput = ({
@@ -53,6 +60,7 @@ export const DoubleTextInput = ({
   onShiftTab,
   onTab,
   onChange,
+  onPaste,
 }: DoubleTextInputProps) => {
   const [firstInternalValue, setFirstInternalValue] = useState(firstValue);
   const [secondInternalValue, setSecondInternalValue] = useState(secondValue);
@@ -150,6 +158,20 @@ export const DoubleTextInput = ({
     enabled: isDefined(onClickOutside),
   });
 
+  const handleOnPaste = (event: ClipboardEvent<HTMLInputElement>) => {
+    if (firstInternalValue.length > 0 || secondInternalValue.length > 0) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const name = event.clipboardData.getData('Text');
+
+    const splittedName = name.split(' ');
+
+    onPaste?.({ firstValue: splittedName[0], secondValue: splittedName[1] });
+  };
+
   return (
     <StyledContainer ref={containerRef}>
       <StyledInput
@@ -162,6 +184,9 @@ export const DoubleTextInput = ({
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           handleChange(event.target.value, secondInternalValue);
         }}
+        onPaste={(event: ClipboardEvent<HTMLInputElement>) =>
+          handleOnPaste(event)
+        }
       />
       <StyledInput
         autoComplete="off"