clients/editor: youtube embed wizard

clients/apps/web/src/components/Feed/PostEditor.tsx

@@ -3,6 +3,7 @@ import { Article } from '@polar-sh/sdk'
 import Link from 'next/link'
 import {
   Button,
+  Input,
   Select,
   SelectContent,
   SelectItem,
@@ -19,7 +20,10 @@ import { StaggerReveal } from '../Shared/StaggerReveal'
 import LongformPost from './LongformPost'
 import { PublishSettings } from './Publishing/PublishSettings'
 import { PostToolbar } from './Toolbar/PostToolbar'
-import { useMarkdownComponents } from './Toolbar/useMarkdownComponents'
+import {
+  useMarkdownComponents,
+  youtubeIdFromURL,
+} from './Toolbar/useMarkdownComponents'
 import { EditorHelpers, useEditorHelpers } from './useEditorHelpers'
 
 const defaultPostEditorContext: EditorHelpers = {
@@ -263,24 +267,39 @@ const Sidebar = () => {
               </>
             ) : null}
 
-            {/*
-            <div className="flex flex-col gap-y-2">
-              <h3>YouTube</h3>
-
-              <Input placeholder="Video URL" />
-              <Button
-                variant={'outline'}
-                size={'sm'}
-                onClick={() => {
-                  insertAd()
-                }}
-              >
-                Add
-              </Button>
-            </div>*/}
+            <SidebarYouTube />
           </div>
         </ShadowBoxOnMd>
       </div>
     </div>
   )
 }
+
+const SidebarYouTube = () => {
+  const [url, setURL] = useState('')
+  const { insertYouTube } = useMarkdownComponents()
+
+  const validURL = Boolean(youtubeIdFromURL(url))
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <h3 className="font-medium">YouTube</h3>
+
+      <Input
+        placeholder="Video URL"
+        value={url}
+        onChange={(e) => setURL(e.target.value)}
+      />
+      <Button
+        variant={'outline'}
+        size={'sm'}
+        onClick={() => {
+          insertYouTube(url)
+        }}
+        disabled={!validURL}
+      >
+        Add
+      </Button>
+    </div>
+  )
+}

clients/apps/web/src/components/Feed/Toolbar/components.test.tsx

@@ -0,0 +1,25 @@
+import { youtubeIdFromURL } from './useMarkdownComponents'
+
+test('youtubeIdFromURL', () => {
+  expect(
+    youtubeIdFromURL('https://www.youtube.com/watch?v=86Gy035z_KA'),
+  ).toStrictEqual('86Gy035z_KA')
+
+  expect(
+    youtubeIdFromURL('https://www.youtube.com/watch?v=86Gy035z_KA&t=10'),
+  ).toStrictEqual('86Gy035z_KA')
+
+  expect(
+    youtubeIdFromURL('https://m.youtube.com/watch?v=86Gy035z_KA&t=10'),
+  ).toStrictEqual('86Gy035z_KA')
+
+  expect(
+    youtubeIdFromURL('https://youtu.be/86Gy035z_KA?si=o__Vh0bePjpLiZ3i&t=107'),
+  ).toStrictEqual('86Gy035z_KA')
+
+  expect(
+    youtubeIdFromURL(
+      'https://www.youtube.com/embed/86Gy035z_KA?si=o__Vh0bePjpLiZ3i',
+    ),
+  ).toStrictEqual('86Gy035z_KA')
+})

clients/apps/web/src/components/Feed/Toolbar/useMarkdownComponents.ts

@@ -28,9 +28,39 @@ export const useMarkdownComponents = () => {
     [insertTextAtCursor],
   )
 
+  const insertYouTube = useCallback(
+    (url: string) => {
+      const id = youtubeIdFromURL(url)
+      if (!id) {
+        return
+      }
+
+      if (!bodyRef.current) {
+        return
+      }
+
+      insertTextAtCursor(
+        `<iframe src="https://www.youtube.com/embed/${id}"></iframe>`,
+      )
+    },
+    [insertTextAtCursor],
+  )
+
   return {
     insertPaywall,
     insertSubscribeNow,
     insertAd,
+    insertYouTube,
+  }
+}
+
+const youtubeUrlRe =
+  /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube(-nocookie)?\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|live\/|v\/)?)([\w\-]+)(\S+)?$/
+
+export const youtubeIdFromURL = (url: string): string | null => {
+  const res = url.match(youtubeUrlRe)
+  if (res && res.length >= 7) {
+    return res[6]
   }
+  return null
 }