fix(frontend): stronger youtube videos parser

frontend/packages/app/pages/publication-list-page.tsx

@@ -1,6 +1,5 @@
 import {EmptyList} from '@mintter/app/components/empty-list'
 import Footer from '@mintter/app/components/footer'
-import {PublicationListItem} from '@mintter/app/components/publication-list-item'
 import {useDraftList} from '@mintter/app/models/documents'
 import {useOpenDraft} from '@mintter/app/utils/open-draft'
 import {
@@ -34,6 +33,7 @@ import {useAppDialog} from '../components/dialog'
 import {FormInput} from '../components/form-input'
 import {copyLinkMenuItem} from '../components/list-item'
 import {MainWrapper, MainWrapperNoScroll} from '../components/main-wrapper'
+import {PublicationListItem} from '../components/publication-list-item'
 import {
   queryPublication,
   useCreatePublication,

frontend/packages/editor/src/blocknote/core/extensions/LinkMenu/defaultLinkMenuItems.tsx

@@ -1,3 +1,4 @@
+import {youtubeParser} from '@/utils'
 import {
   isHypermediaScheme,
   isPublicGatewayLink,
@@ -103,12 +104,13 @@ export function getLinkMenuItems(
           let embedUrl = ''
           if (media === 'video') {
             let videoUrl = ''
-            if (ref.includes('youtu.be')) {
-              const urlArray = ref.split('/')
-              videoUrl =
-                'https://www.youtube.com/embed/' + urlArray[urlArray.length - 1]
-            } else if (ref.includes('youtube')) {
-              videoUrl = 'https://www.youtube.com/embed/' + ref.split('=')[1]
+            if (ref.includes('youtu.be') || ref.includes('youtube')) {
+              let ytId = youtubeParser(ref)
+              if (ytId) {
+                videoUrl = `https://www.youtube.com/embed/${ytId}`
+              } else {
+                videoUrl = ''
+              }
             } else if (ref.includes('vimeo')) {
               const urlArray = ref.split('/')
               videoUrl =

frontend/packages/editor/src/index.ts

@@ -1,10 +1,11 @@
+export * from './blocknote'
 export * from './editor'
 export * from './embed-block'
 export * from './file'
-export * from './nostr'
 export * from './heading-component-plugin'
 export * from './hypermedia-link-plugin'
 export * from './image'
-export * from './video'
-export * from './blocknote'
+export * from './nostr'
 export * from './schema'
+export * from './utils'
+export * from './video'

frontend/packages/editor/src/utils.ts

@@ -0,0 +1,6 @@
+export function youtubeParser(url: string) {
+  var regExp =
+    /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/
+  var match = url.match(regExp)
+  return match && match[7].length == 11 ? match[7] : false
+}

frontend/packages/editor/src/video.tsx

@@ -24,6 +24,7 @@ import {
 } from './blocknote'
 import {MaxFileSizeB, MaxFileSizeMB} from './file'
 import {HMBlockSchema} from './schema'
+import {youtubeParser} from './utils'
 
 export const VideoBlock = createReactBlockSpec({
   type: 'video',
@@ -458,15 +459,19 @@ function VideoForm({
   const submitVideo = async (url: string) => {
     if (isValidUrl(url)) {
       let embedUrl = 'https://www.youtube.com/embed/'
-      if (url.includes('youtu.be')) {
-        const urlArray = url.split('/')
-        embedUrl = embedUrl + urlArray[urlArray.length - 1]
-      } else if (url.includes('youtube')) {
-        embedUrl = embedUrl + url.split('=')[1]
+      if (url.includes('youtu.be') || url.includes('youtube')) {
+        let ytId = youtubeParser(url)
+        if (ytId) {
+          embedUrl = embedUrl + ytId
+        } else {
+          setFileName({name: `Unsupported Youtube Url:${url}`, color: 'red'})
+          return
+        }
       } else if (url.includes('vimeo')) {
         const urlArray = url.split('/')
-        embedUrl =
-          'https://player.vimeo.com/video/' + urlArray[urlArray.length - 1]
+        embedUrl = `https://player.vimeo.com/video/${
+          urlArray[urlArray.length - 1]
+        }`
       } else {
         setFileName({name: 'Unsupported video source.', color: 'red'})
         return