fix: change media url input behaviour (#2835)

* fix: change media url input behaviour

---------

Co-authored-by: Ahtesham Quraish <ahtesham.quraish@192.168.1.14>

Author: ahtesham-quraish

frontends/main/src/page-components/TiptapEditor/ArticleEditor.tsx

@@ -34,6 +34,7 @@ import { ArticleByLineInfoBarNode } from "./extensions/node/ArticleByLineInfoBar
 
 import { LearningResourceNode } from "./extensions/node/LearningResource/LearningResourceNode"
 import { LearningResourceURLHandler } from "./extensions/node/LearningResource/LearningResourcePaste"
+import { MediaEmbedURLHandler } from "./extensions/node/MediaEmbed/MediaEmbedURLHandler"
 import { MediaEmbedNode } from "./extensions/node/MediaEmbed/MediaEmbedNode"
 import { HorizontalRule } from "./vendor/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension"
 import { ImageNode } from "./extensions/node/Image/ImageNode"
@@ -333,6 +334,7 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
       DividerNode,
       ArticleByLineInfoBarNode,
       ImageWithCaptionNode,
+      MediaEmbedURLHandler,
       ImageNode.configure({
         accept: "image/*",
         maxSize: MAX_FILE_SIZE,

frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedNodeView.tsx

@@ -3,7 +3,9 @@ import { NodeViewProps, NodeViewWrapper } from "@tiptap/react"
 import { FullWidth, WideWidth, DefaultWidth } from "./Icons"
 import styled from "@emotion/styled"
 
-const StyledNodeViewWrapper = styled(NodeViewWrapper)<{
+const StyledNodeViewWrapper = styled(NodeViewWrapper, {
+  shouldForwardProp: (prop) => prop !== "hovering" && prop !== "layout",
+})<{
   layout: string
   hovering: boolean
 }>`

frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/MediaEmbedURLHandler.ts

@@ -0,0 +1,54 @@
+import { Extension } from "@tiptap/core"
+import { Plugin } from "@tiptap/pm/state"
+
+import { convertToEmbedUrl } from "./lib"
+
+function extractMediaEmbedUrl(text: string): string | null {
+  try {
+    const embedUrl = convertToEmbedUrl(text.trim())
+    return embedUrl || null
+  } catch {
+    return null
+  }
+}
+
+export const MediaEmbedURLHandler = Extension.create({
+  name: "mediaEmbedURLHandler",
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        props: {
+          handleKeyDown(view, event) {
+            if (event.key !== "Enter") return false
+
+            const { state } = view
+            const { $from } = state.selection
+            const parent = $from.parent
+
+            // Only transform plain paragraphs
+            if (parent.type.name !== "paragraph") return false
+
+            const text = parent.textContent.trim()
+            const embedSrc = extractMediaEmbedUrl(text)
+            if (!embedSrc) return false
+
+            event.preventDefault()
+
+            const startPos = $from.before()
+            const endPos = startPos + parent.nodeSize
+
+            const mediaNode = state.schema.nodes.mediaEmbed.create({
+              src: embedSrc,
+            })
+
+            const tr = state.tr.replaceWith(startPos, endPos, mediaNode)
+            view.dispatch(tr)
+
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})

frontends/main/src/page-components/TiptapEditor/extensions/node/MediaEmbed/lib.ts

@@ -0,0 +1,48 @@
+export function convertToEmbedUrl(url: string): string {
+  let parsed: URL
+
+  try {
+    parsed = new URL(url)
+  } catch {
+    return url // not a valid URL
+  }
+
+  const hostname = parsed.hostname.replace("www.", "")
+
+  // --- YOUTUBE WATCH ---
+  if (hostname === "youtube.com" && parsed.pathname === "/watch") {
+    const videoId = parsed.searchParams.get("v")
+    return videoId ? `https://www.youtube.com/embed/${videoId}` : url
+  }
+
+  // --- YOUTUBE SHORTS ---
+  if (hostname === "youtube.com" && parsed.pathname.startsWith("/shorts/")) {
+    const id = parsed.pathname.split("/shorts/")[1]
+    return id ? `https://www.youtube.com/embed/${id}` : url
+  }
+
+  // --- YOUTUBE SHORT youtu.be/shorts/??? (rare but possible) ---
+  if (hostname === "youtu.be" && parsed.pathname.startsWith("/shorts/")) {
+    const id = parsed.pathname.split("/shorts/")[1]
+    return id ? `https://www.youtube.com/embed/${id}` : url
+  }
+
+  // --- YOUTUBE SHORT youtu.be/VIDEO_ID ---
+  if (hostname === "youtu.be") {
+    const id = parsed.pathname.slice(1)
+    return id ? `https://www.youtube.com/embed/${id}` : url
+  }
+
+  // --- YOUTUBE EMBED (leave as-is) ---
+  if (hostname === "youtube.com" && parsed.pathname.startsWith("/embed/")) {
+    return url
+  }
+
+  // --- VIMEO ---
+  if (hostname === "vimeo.com") {
+    const id = parsed.pathname.slice(1)
+    return id ? `https://player.vimeo.com/video/${id}` : url
+  }
+
+  return url // fallback
+}