feat(editor): ⚡️ Image picker and dynamic preview

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useState } from 'react'
+import { ChangeEvent, useState } from 'react'
 import {
   Button,
   Flex,
@@ -13,10 +13,9 @@ import { SearchContextManager } from '@giphy/react-components'
 import { UploadButton } from '../buttons/UploadButton'
 import { GiphySearch } from './GiphySearch'
 import { useTypebot } from 'contexts/TypebotContext'
-import { useDebounce } from 'use-debounce'
-import { Input } from '../Textbox'
 import { BaseEmoji, emojiIndex } from 'emoji-mart'
 import { emojis } from './emojis'
+import { Input } from '../Textbox/Input'
 
 type Props = {
   url?: string
@@ -123,26 +122,15 @@ const UploadFileContent = ({ onNewUrl }: ContentProps) => {
   )
 }
 
-const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => {
-  const [imageUrl, setImageUrl] = useState(initialUrl ?? '')
-  const [debouncedImageUrl] = useDebounce(imageUrl, 100)
-
-  useEffect(() => {
-    if (initialUrl === debouncedImageUrl) return
-    onNewUrl(imageUrl)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedImageUrl])
-
-  return (
-    <Stack py="2">
-      <Input
-        placeholder={'Paste the image link...'}
-        onChange={setImageUrl}
-        defaultValue={imageUrl}
-      />
-    </Stack>
-  )
-}
+const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => (
+  <Stack py="2">
+    <Input
+      placeholder={'Paste the image link...'}
+      onChange={onNewUrl}
+      defaultValue={initialUrl ?? ''}
+    />
+  </Stack>
+)
 
 const EmojiContent = ({
   onEmojiSelected,