refactor: ♻️ Rename step to block

apps/builder/components/shared/Graph/Nodes/BlockNode/MediaBubblePopoverContent/EmbedUploadContent.tsx

@@ -0,0 +1,48 @@
+import { HStack, Stack, Text } from '@chakra-ui/react'
+import { SmartNumberInput } from 'components/shared/SmartNumberInput'
+import { Input } from 'components/shared/Textbox/Input'
+import { EmbedBubbleContent } from 'models'
+import { sanitizeUrl } from 'utils'
+
+type Props = {
+  content: EmbedBubbleContent
+  onSubmit: (content: EmbedBubbleContent) => void
+}
+
+export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
+  const handleUrlChange = (url: string) => {
+    const iframeUrl = sanitizeUrl(
+      url.trim().startsWith('<iframe') ? extractUrlFromIframe(url) : url
+    )
+    onSubmit({ ...content, url: iframeUrl })
+  }
+
+  const handleHeightChange = (height?: number) =>
+    height && onSubmit({ ...content, height })
+
+  return (
+    <Stack p="2" spacing={6}>
+      <Stack>
+        <Input
+          placeholder="Paste the link or code..."
+          defaultValue={content?.url ?? ''}
+          onChange={handleUrlChange}
+        />
+        <Text fontSize="sm" color="gray.400" textAlign="center">
+          Works with PDFs, iframes, websites...
+        </Text>
+      </Stack>
+
+      <HStack justify="space-between">
+        <Text>Height: </Text>
+        <SmartNumberInput
+          value={content?.height}
+          onValueChange={handleHeightChange}
+        />
+      </HStack>
+    </Stack>
+  )
+}
+
+const extractUrlFromIframe = (iframe: string) =>
+  [...iframe.matchAll(/src="([^"]+)"/g)][0][1]

apps/builder/components/shared/Graph/Nodes/BlockNode/MediaBubblePopoverContent/MediaBubblePopoverContent.tsx

@@ -0,0 +1,71 @@
+import {
+  Portal,
+  PopoverContent,
+  PopoverArrow,
+  PopoverBody,
+} from '@chakra-ui/react'
+import { ImageUploadContent } from 'components/shared/ImageUploadContent'
+import {
+  BubbleBlock,
+  BubbleBlockContent,
+  BubbleBlockType,
+  TextBubbleBlock,
+} from 'models'
+import { useRef } from 'react'
+import { EmbedUploadContent } from './EmbedUploadContent'
+import { VideoUploadContent } from './VideoUploadContent'
+
+type Props = {
+  block: Exclude<BubbleBlock, TextBubbleBlock>
+  onContentChange: (content: BubbleBlockContent) => void
+}
+
+export const MediaBubblePopoverContent = (props: Props) => {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
+
+  return (
+    <Portal>
+      <PopoverContent
+        onMouseDown={handleMouseDown}
+        w={props.block.type === BubbleBlockType.IMAGE ? '500px' : '400px'}
+      >
+        <PopoverArrow />
+        <PopoverBody ref={ref} shadow="lg">
+          <MediaBubbleContent {...props} />
+        </PopoverBody>
+      </PopoverContent>
+    </Portal>
+  )
+}
+
+export const MediaBubbleContent = ({ block, onContentChange }: Props) => {
+  const handleImageUrlChange = (url: string) => onContentChange({ url })
+
+  switch (block.type) {
+    case BubbleBlockType.IMAGE: {
+      return (
+        <ImageUploadContent
+          url={block.content?.url}
+          onSubmit={handleImageUrlChange}
+        />
+      )
+    }
+    case BubbleBlockType.VIDEO: {
+      return (
+        <VideoUploadContent
+          content={block.content}
+          onSubmit={onContentChange}
+        />
+      )
+    }
+    case BubbleBlockType.EMBED: {
+      return (
+        <EmbedUploadContent
+          content={block.content}
+          onSubmit={onContentChange}
+        />
+      )
+    }
+  }
+}

apps/builder/components/shared/Graph/Nodes/BlockNode/MediaBubblePopoverContent/VideoUploadContent.tsx

@@ -0,0 +1,37 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { Input } from 'components/shared/Textbox/Input'
+import { VideoBubbleContent, VideoBubbleContentType } from 'models'
+import urlParser from 'js-video-url-parser/lib/base'
+import 'js-video-url-parser/lib/provider/vimeo'
+import 'js-video-url-parser/lib/provider/youtube'
+import { isDefined } from 'utils'
+
+type Props = {
+  content?: VideoBubbleContent
+  onSubmit: (content: VideoBubbleContent) => void
+}
+
+export const VideoUploadContent = ({ content, onSubmit }: Props) => {
+  const handleUrlChange = (url: string) => {
+    const info = urlParser.parse(url)
+    return isDefined(info) && info.provider && info.id
+      ? onSubmit({
+          type: info.provider as VideoBubbleContentType,
+          url,
+          id: info.id,
+        })
+      : onSubmit({ type: VideoBubbleContentType.URL, url })
+  }
+  return (
+    <Stack p="2">
+      <Input
+        placeholder="Paste the video link..."
+        defaultValue={content?.url ?? ''}
+        onChange={handleUrlChange}
+      />
+      <Text fontSize="sm" color="gray.400" textAlign="center">
+        Works with Youtube, Vimeo and others
+      </Text>
+    </Stack>
+  )
+}

apps/builder/components/shared/Graph/Nodes/BlockNode/MediaBubblePopoverContent/index.tsx

@@ -0,0 +1 @@
+export { MediaBubblePopoverContent } from './MediaBubblePopoverContent'