fix youtube video handling

lib/src/Components/Input/RichTextEditor.tsx

@@ -68,15 +68,8 @@ export function RichTextEditor({
 }: RichTextEditorProps) {
   const handleChange = () => {
     if (!editor) return
-
-    let newValue = getStyledMarkdown(editor)
-    // matcht entweder Markdown-Images *oder* HTML-<img>–Tags
-    const regex = /(!\[.*?\]\(.*?\)|<img\b[^>]*?\/?>)/gi
-
-    newValue = newValue.replace(regex, (match) => match + '\n\n')
-
-    if (updateFormValue && newValue) {
-      updateFormValue(newValue)
+    if (updateFormValue) {
+      updateFormValue(getStyledMarkdown(editor))
     }
   }
 
@@ -197,6 +190,7 @@ export function getStyledMarkdown(editor: Editor): string {
     if (title) tag += ' title="' + title + '"'
     if (style) tag += ' style="' + style + '"'
     tag += ' />'
+    tag += '\n\n'
     state.write(tag)
   }
 
@@ -204,7 +198,7 @@ export function getStyledMarkdown(editor: Editor): string {
     const { src } = node.attrs as { src: string }
 
     const match = src.match(
-      /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/,
+      /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/|youtube-nocookie\.com\/embed\/)([A-Za-z0-9_-]{11})/,
     )
     const videoId = match?.[1]
     if (videoId) {
@@ -213,6 +207,7 @@ export function getStyledMarkdown(editor: Editor): string {
       let tag = '<div class="tw:w-full tw:aspect-video tw:overflow-hidden">'
       tag += `<iframe src="${nocookieUrl}" allowfullscreen class="tw-w-full tw-h-full" loading="lazy"></iframe>`
       tag += '</div>'
+      tag += '\n\n'
       state.write(tag)
     }
   }
@@ -236,7 +231,7 @@ const CustomYoutube = Youtube.extend({
         find: youtubePasteRegex,
         type: this.type,
         getAttributes: (match) => {
-          return { src: match[1] }
+          return { src: `https://www.youtube-nocookie.com/embed/${match[2]}` }
         },
       }),
     ]
@@ -247,7 +242,7 @@ const CustomYoutube = Youtube.extend({
         find: youtubeInputRegex,
         type: this.type,
         getAttributes: (match) => {
-          return { src: match[1] }
+          return { src: `https://www.youtube-nocookie.com/embed/${match[2]}` }
         },
       }),
     ]
@@ -291,7 +286,6 @@ const CustomYoutube = Youtube.extend({
 })
 
 const youtubePasteRegex =
-  /(https?:\/\/(?:www\.)?youtube\.com\/watch\?v=[\w-]+|https?:\/\/youtu\.be\/[\w-]+)/g
-
+/(https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/))([A-Za-z0-9_-]{11})(?:\?.*)?/g
 const youtubeInputRegex =
-  /(https?:\/\/(?:www\.)?youtube\.com\/watch\?v=[\w-]+|https?:\/\/youtu\.be\/[\w-]+)$/
+  /(https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/))([A-Za-z0-9_-]{11})(?:\?.*)?$/

lib/src/Components/Profile/ProfileForm.tsx

@@ -157,6 +157,9 @@ export function ProfileForm() {
     <>
       <MapOverlayPage
         backdrop
+        closeButtonUrl={
+          item ? `/item/${item.id}${window.location.search ? window.location.search : ''}` : '/'
+        }
         className='tw:mx-4 tw:mt-4 tw:mb-4 tw:@container tw:overflow-x-hidden tw:w-[calc(100%-32px)]  tw:md:w-[calc(50%-32px)] tw:max-w-3xl tw:left-auto! tw:top-0 tw:bottom-0 tw:flex tw:flex-col'
       >
         {item ? (

lib/src/Components/Profile/itemFunctions.ts

@@ -292,7 +292,7 @@ export const onUpdateItem = async (
         )
         .then(() => {
           setLoading(false)
-          navigate(`/${params && '?' + params}`)
+          navigate(`/item/${item.id}${params && '?' + params}`)
           return null
         }))
   }

lib/src/Components/Templates/LoadingMapOverlay.tsx

@@ -2,7 +2,12 @@ import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
 
 export const LoadingMapOverlay = () => {
   return (
-    <MapOverlayPage backdrop className='tw:max-w-xs tw:h-64 tw:bg-transparent' card={false}>
+    <MapOverlayPage
+      backdrop
+      showCloseButton={false}
+      className='tw:max-w-xs tw:h-64 tw:bg-transparent'
+      card={false}
+    >
       <div className='tw:flex tw:justify-center tw:items-center tw:h-full'>
         <div className='tw:loading tw:loading-spinner tw:loading-xl'></div>
       </div>

lib/src/Components/Templates/MapOverlayPage.tsx

@@ -10,14 +10,18 @@ export function MapOverlayPage({
   className,
   backdrop,
   card = true,
+  showCloseButton = true,
+  closeButtonUrl,
 }: {
   children: React.ReactNode
   className?: string
   backdrop?: boolean
   card?: boolean
+  showCloseButton?: boolean
+  closeButtonUrl?: string
 }) {
   const closeScreen = () => {
-    navigate(`/${window.location.search ? window.location.search : ''}`)
+    navigate(closeButtonUrl ?? `/${window.location.search ? window.location.search : ''}`)
   }
 
   const navigate = useNavigate()
@@ -48,12 +52,14 @@ export function MapOverlayPage({
           className={`${card ? 'tw:card tw:card-body tw:shadow-xl' : ''} tw:bg-base-100 tw:p-6 ${className ?? ''} ${backdrop ? '' : 'tw:z-2000'} tw:absolute tw:top-0 tw:bottom-0 tw:right-0 tw:left-0 tw:m-auto`}
         >
           {children}
-          <button
-            className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2'
-            onClick={() => closeScreen()}
-          >
-            ✕
-          </button>
+          {showCloseButton && (
+            <button
+              className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2'
+              onClick={() => closeScreen()}
+            >
+              ✕
+            </button>
+          )}
         </div>
       </div>
     </div>