diff --git a/clients/apps/web/src/components/Feed/PostEditor.tsx b/clients/apps/web/src/components/Feed/PostEditor.tsx
index ee9b960e79..255aaff15c 100644
--- a/clients/apps/web/src/components/Feed/PostEditor.tsx
+++ b/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}
- {/*
-
-
YouTube
-
-
-
- */}
+
)
}
+
+const SidebarYouTube = () => {
+ const [url, setURL] = useState('')
+ const { insertYouTube } = useMarkdownComponents()
+
+ const validURL = Boolean(youtubeIdFromURL(url))
+
+ return (
+
+
YouTube
+
+ setURL(e.target.value)}
+ />
+
+
+ )
+}
diff --git a/clients/apps/web/src/components/Feed/Toolbar/components.test.tsx b/clients/apps/web/src/components/Feed/Toolbar/components.test.tsx
new file mode 100644
index 0000000000..673cd09abb
--- /dev/null
+++ b/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')
+})
diff --git a/clients/apps/web/src/components/Feed/Toolbar/useMarkdownComponents.ts b/clients/apps/web/src/components/Feed/Toolbar/useMarkdownComponents.ts
index 289b2f52c9..f290bfe26f 100644
--- a/clients/apps/web/src/components/Feed/Toolbar/useMarkdownComponents.ts
+++ b/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(
+ ``,
+ )
+ },
+ [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
}