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 }