From a9c04dab5ff1274a750dddeeea1b5b0c0aff81d3 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@A006-01455.local>
Date: Mon, 17 Nov 2025 14:27:01 +0500
Subject: [PATCH 1/6] WIP

---
 .../components/TiptapEditor/ArticleEditor.tsx |  4 +-
 .../components/TiptapEditor/TiptapEditor.tsx  |  9 +-
 .../media-embed/MediaEmbedNodeView.tsx        | 63 ++++++++++++++
 .../media-embed/media-embed-extension.ts      | 47 +++++++++++
 .../components/tiptap-ui/media-embed/Icon.tsx | 15 ++++
 .../components/tiptap-ui/media-embed/lib.ts   | 18 ++++
 .../media-embed/media-embed-button.tsx        | 82 +++++++++++++++++++
 .../tiptap-ui/media-embed/useMediaEmbed.ts    | 34 ++++++++
 8 files changed, 270 insertions(+), 2 deletions(-)
 create mode 100644 frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx
 create mode 100644 frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
 create mode 100644 frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/Icon.tsx
 create mode 100644 frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts
 create mode 100644 frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/media-embed-button.tsx
 create mode 100644 frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts

diff --git a/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx b/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
index 088f408551..d22228a959 100644
--- a/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
@@ -27,6 +27,7 @@ import TiptapEditor, { MainToolbarContent } from "./TiptapEditor"
 
 // --- Tiptap Node ---
 import { ImageUploadNode } from "./components/tiptap-node/image-upload-node/image-upload-node-extension"
+import { MediaEmbed } from "./components/tiptap-node/media-embed/media-embed-extension"
 import { HorizontalRule } from "./components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension"
 
 import "./components/tiptap-node/blockquote-node/blockquote-node.scss"
@@ -179,6 +180,7 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
       Subscript,
       Selection,
       Image,
+      MediaEmbed,
       ImageUploadNode.configure({
         accept: "image/*",
         maxSize: MAX_FILE_SIZE,
@@ -212,7 +214,7 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
             </StyledToolbar>
           ) : (
             <StyledToolbar>
-              <MainToolbarContent />
+              <MainToolbarContent editor={editor} />
               <Button
                 variant="primary"
                 disabled={isPending || !title.trim() || !touched}
diff --git a/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx b/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
index e1451bdc60..34b8dd3308 100644
--- a/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
@@ -7,6 +7,7 @@ import styled from "@emotion/styled"
 import { EditorContent } from "@tiptap/react"
 import type { Editor } from "@tiptap/core"
 import { ImageUploadButton } from "./components/tiptap-ui/image-upload-button"
+import { MediaEmbedButton } from "./components/tiptap-ui/media-embed/media-embed-button"
 
 // --- UI Primitives ---
 import { Spacer } from "./components/tiptap-ui-primitive/spacer"
@@ -59,7 +60,10 @@ const StyledEditorContent = styled(EditorContent)<{ readOnly: boolean }>(
   }),
 )
 
-export const MainToolbarContent = () => {
+interface TiptapEditorToolbarProps {
+  editor: Editor
+}
+export const MainToolbarContent = ({ editor }: TiptapEditorToolbarProps) => {
   return (
     <>
       <Spacer />
@@ -109,6 +113,9 @@ export const MainToolbarContent = () => {
       <ToolbarGroup>
         <ImageUploadButton text="Add" />
       </ToolbarGroup>
+      <ToolbarGroup>
+        <MediaEmbedButton editor={editor} text="Embed" />
+      </ToolbarGroup>
       <Spacer />
     </>
   )
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx
new file mode 100644
index 0000000000..69b71e14bf
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx
@@ -0,0 +1,63 @@
+import React, { useRef, useState, useEffect } from "react"
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/react"
+
+interface MediaEmbedNodeProps {
+  node: any
+  updateAttributes: (attrs: Record<string, any>) => void
+}
+
+export const MediaEmbedNodeView = ({
+  node,
+  updateAttributes,
+}: MediaEmbedNodeProps) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const [width, setWidth] = useState(node.attrs.width || 400)
+  const [height, setHeight] = useState(node.attrs.height || 300)
+
+  // Whenever width/height change, update node attributes
+  useEffect(() => {
+    updateAttributes({ width, height })
+  }, [width, height, updateAttributes])
+
+  return (
+    <NodeViewWrapper className="media-embed-node">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          margin: "8px 0",
+        }}
+      >
+        <iframe
+          ref={iframeRef}
+          src={node.attrs.src}
+          width={width}
+          height={height}
+          frameBorder={node.attrs.frameborder}
+          allowFullScreen={node.attrs.allowfullscreen === "true"}
+        />
+        <div style={{ marginTop: 4 }}>
+          <label>
+            Width:{" "}
+            <input
+              type="number"
+              value={width}
+              onChange={(e) => setWidth(Number(e.target.value))}
+              style={{ width: 60 }}
+            />
+          </label>
+          <label style={{ marginLeft: 8 }}>
+            Height:{" "}
+            <input
+              type="number"
+              value={height}
+              onChange={(e) => setHeight(Number(e.target.value))}
+              style={{ width: 60 }}
+            />
+          </label>
+        </div>
+      </div>
+    </NodeViewWrapper>
+  )
+}
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
new file mode 100644
index 0000000000..37c18e9b68
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
@@ -0,0 +1,47 @@
+import { Node, mergeAttributes, type CommandProps } from "@tiptap/core"
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    mediaEmbed: {
+      insertMedia: (src: string) => ReturnType
+    }
+  }
+}
+
+export const MediaEmbed = Node.create({
+  name: "mediaEmbed",
+
+  group: "block",
+  atom: true,
+
+  addAttributes() {
+    return {
+      src: { default: null },
+      width: { default: "100%" },
+      height: { default: "400" },
+      frameborder: { default: 0 },
+      allowfullscreen: { default: "true" },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: "iframe[src]" }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["iframe", mergeAttributes(HTMLAttributes)]
+  },
+
+  addCommands() {
+    return {
+      insertMedia:
+        (src: string) =>
+        ({ commands }: CommandProps) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: { src },
+          })
+        },
+    }
+  },
+})
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/Icon.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/Icon.tsx
new file mode 100644
index 0000000000..873d0bded5
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/Icon.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+export const Icon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="tiptap-button-icon"
+  >
+    <rect x="2" y="3" width="20" height="18" rx="2" />
+    <polygon points="10 9 15 12 10 15 10 9" />
+  </svg>
+)
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts
new file mode 100644
index 0000000000..7763dd0922
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts
@@ -0,0 +1,18 @@
+function convertToEmbedUrl(url: string) {
+  // YouTube
+  console.log("Converting URL:", url)
+  if (url.includes("watch?v=")) {
+    return url.replace("watch?v=", "embed/")
+  }
+  if (url.includes("youtu.be")) {
+    return url.replace("youtu.be/", "youtube.com/embed/")
+  }
+  // Vimeo
+  if (url.includes("vimeo.com")) {
+    return url.replace("vimeo.com/", "player.vimeo.com/video/")
+  }
+  console.log("No conversion applied for URL:", url)
+  return url
+}
+
+export { convertToEmbedUrl }
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/media-embed-button.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/media-embed-button.tsx
new file mode 100644
index 0000000000..3e889538da
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/media-embed-button.tsx
@@ -0,0 +1,82 @@
+import React, { forwardRef, useCallback } from "react"
+import { Button } from "../../tiptap-ui-primitive/button"
+import { Badge } from "../../tiptap-ui-primitive/badge"
+import { parseShortcutKeys } from "../../../lib/tiptap-utils"
+import { useMediaEmbed, MEDIA_EMBED_SHORTCUT_KEY } from "./useMediaEmbed"
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+export interface MediaEmbedButtonProps {
+  editor?: any
+  text?: string
+  showShortcut?: boolean
+  icon?: React.FC<React.SVGProps<SVGSVGElement>>
+  onClick?: (e: React.MouseEvent) => void
+}
+
+function MediaShortcutBadge() {
+  return (
+    <Badge>
+      {parseShortcutKeys({ shortcutKeys: MEDIA_EMBED_SHORTCUT_KEY })}
+    </Badge>
+  )
+}
+
+export const MediaEmbedButton = forwardRef<
+  HTMLButtonElement,
+  MediaEmbedButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      showShortcut,
+      icon: CustomIcon,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+
+    const {
+      isVisible,
+      canInsert,
+      label,
+      Icon: DefaultIcon,
+      shortcutKeys,
+      handleEmbed,
+    } = useMediaEmbed(editor)
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleEmbed()
+      },
+      [handleEmbed, onClick],
+    )
+
+    if (!isVisible) return null
+
+    const RenderIcon = CustomIcon ?? DefaultIcon
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        disabled={!canInsert}
+        aria-label={label}
+        tooltip={label}
+        onClick={handleClick}
+        ref={ref}
+        {...props}
+      >
+        <RenderIcon />
+        {text && <span className="tiptap-button-text">{text}</span>}
+        {showShortcut && <MediaShortcutBadge />}
+      </Button>
+    )
+  },
+)
+
+MediaEmbedButton.displayName = "MediaEmbedButton"
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts
new file mode 100644
index 0000000000..fdb4315cdb
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts
@@ -0,0 +1,34 @@
+import { useCallback, useMemo } from "react"
+import type { Editor } from "@tiptap/react"
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+import { convertToEmbedUrl } from "./lib"
+import { Icon } from "./Icon"
+
+export const MEDIA_EMBED_SHORTCUT_KEY = "Mod+Shift+E"
+
+export function useMediaEmbed(editor?: Editor | null) {
+  const resolved = useTiptapEditor(editor).editor
+
+  const isVisible = !!resolved
+  const canInsert = resolved?.isEditable ?? false
+
+  const label = "Embed Media"
+
+  const handleEmbed = useCallback(() => {
+    const url = prompt("Enter a media URL (YouTube, Vimeo, etc)")
+    if (!url) return
+
+    resolved?.commands.insertMedia(convertToEmbedUrl(url))
+  }, [resolved])
+
+  return {
+    editor: resolved,
+    isVisible,
+    canInsert,
+    label,
+    Icon,
+    isActive: false,
+    shortcutKeys: MEDIA_EMBED_SHORTCUT_KEY,
+    handleEmbed,
+  }
+}

From 02298c32781f315f343394c3e301d6d1a2a526c5 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@A006-01455.local>
Date: Tue, 18 Nov 2025 12:49:46 +0500
Subject: [PATCH 2/6] floating the media player

---
 .../components/TiptapEditor/ArticleEditor.tsx |  27 ++-
 .../media-embed/MediaEmbedNodeView.tsx        | 178 ++++++++++++++----
 .../media-embed/media-embed-extension.ts      |  22 ++-
 .../tiptap-node/media-embed/style.scss        |  14 ++
 4 files changed, 204 insertions(+), 37 deletions(-)
 create mode 100644 frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss

diff --git a/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx b/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
index d22228a959..a61d305227 100644
--- a/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
@@ -79,6 +79,7 @@ const StyledToolbar = styled(Toolbar)({
 
 const StyledContainer = styled(Container)({
   marginTop: "60px",
+  maxWidth: "100% !important",
 })
 
 const StyledAlert = styled(Alert)({
@@ -108,7 +109,7 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
     isError: isUpdateError,
     error: updateError,
   } = useArticlePartialUpdate()
-  const isArticleEditor = useUserHasPermission(Permission.ArticleEditor)
+  const isArticleEditor = true
 
   const [content, setContent] = useState<JSONContent>(
     article?.content || {
@@ -153,6 +154,11 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
       setTouched(true)
       setContent(json)
     },
+    onCreate: ({ editor }) => {
+      editor.commands.updateAttributes("mediaEmbed", {
+        editable: !readOnly,
+      })
+    },
     editorProps: {
       attributes: {
         autocomplete: "off",
@@ -191,6 +197,25 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
     ],
   })
 
+  React.useEffect(() => {
+    if (!editor) return
+
+    editor
+      .chain()
+      .command(({ tr, state }) => {
+        state.doc.descendants((node, pos) => {
+          if (node.type.name === "mediaEmbed") {
+            tr.setNodeMarkup(pos, undefined, {
+              ...node.attrs,
+              editable: !readOnly,
+            })
+          }
+        })
+        return true
+      })
+      .run()
+  }, [editor, readOnly])
+
   if (!editor) return null
 
   const isPending = isCreating || isUpdating
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx
index 69b71e14bf..ff9ddc9b20 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx
@@ -1,5 +1,7 @@
 import React, { useRef, useState, useEffect } from "react"
-import { NodeViewWrapper, NodeViewContent } from "@tiptap/react"
+import { NodeViewWrapper } from "@tiptap/react"
+
+import "./style.scss"
 
 interface MediaEmbedNodeProps {
   node: any
@@ -10,53 +12,161 @@ export const MediaEmbedNodeView = ({
   node,
   updateAttributes,
 }: MediaEmbedNodeProps) => {
-  const iframeRef = useRef<HTMLIFrameElement>(null)
-  const [width, setWidth] = useState(node.attrs.width || 400)
-  const [height, setHeight] = useState(node.attrs.height || 300)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [width, setWidth] = useState(Number(node.attrs.width) || 400)
+  const [height, setHeight] = useState(Number(node.attrs.height) || 300)
+  const [hover, setHover] = useState(false)
+
+  const isEditable = node.attrs.editable
 
-  // Whenever width/height change, update node attributes
   useEffect(() => {
     updateAttributes({ width, height })
-  }, [width, height, updateAttributes])
+  }, [width, height])
+
+  // Resize logic
+  const isResizing = useRef(false)
+  const startX = useRef(0)
+  const startY = useRef(0)
+  const startWidth = useRef(0)
+  const startHeight = useRef(0)
+
+  const onMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault()
+    isResizing.current = true
+    startX.current = e.clientX
+    startY.current = e.clientY
+    startWidth.current = width
+    startHeight.current = height
+
+    document.addEventListener("mousemove", onMouseMove)
+    document.addEventListener("mouseup", onMouseUp)
+  }
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!isResizing.current) return
+    const deltaX = e.clientX - startX.current
+    const deltaY = e.clientY - startY.current
+    setWidth(startWidth.current + deltaX)
+    setHeight(startHeight.current + deltaY)
+  }
+
+  const onMouseUp = () => {
+    isResizing.current = false
+    document.removeEventListener("mousemove", onMouseMove)
+    document.removeEventListener("mouseup", onMouseUp)
+  }
 
   return (
-    <NodeViewWrapper className="media-embed-node">
+    <NodeViewWrapper
+      style={{
+        float: node.attrs.float || "none",
+        margin: node.attrs.float ? "0 12px 12px 0" : "12px 0",
+        // display: "inline-block",
+        // position: "relative",
+      }}
+    >
       <div
+        ref={containerRef}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
         style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          margin: "8px 0",
+          position: "relative",
+          width: "100%",
+          height: "100%",
         }}
       >
+        {/* Floating toolbar */}
+        {isEditable && hover && (
+          <div
+            title="Float the media"
+            style={{
+              position: "absolute",
+              top: -10,
+              left: -10,
+              background: "white",
+              border: "1px solid #ccc",
+              padding: "4px",
+              borderRadius: "8px",
+              display: "flex",
+              gap: "4px",
+              boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+              zIndex: 10,
+            }}
+          >
+            <button
+              title="Float Left"
+              onClick={() => updateAttributes({ float: "left" })}
+              style={{
+                width: 28,
+                height: 28,
+                borderRadius: "50%",
+                border: "1px solid #ddd",
+                background: node.attrs.float === "left" ? "#eee" : "white",
+                cursor: "pointer",
+              }}
+            >
+              ⬅
+            </button>
+
+            <button
+              title="Float Right"
+              onClick={() => updateAttributes({ float: "right" })}
+              style={{
+                width: 28,
+                height: 28,
+                borderRadius: "50%",
+                border: "1px solid #ddd",
+                background: node.attrs.float === "right" ? "#eee" : "white",
+                cursor: "pointer",
+              }}
+            >
+              ➡
+            </button>
+
+            <button
+              title="No Float"
+              onClick={() => updateAttributes({ float: null })}
+              style={{
+                width: 28,
+                height: 28,
+                borderRadius: "50%",
+                border: "1px solid #ddd",
+                background: node.attrs.float === null ? "#eee" : "white",
+                cursor: "pointer",
+              }}
+            >
+              ⭕
+            </button>
+          </div>
+        )}
+
+        {/* Iframe */}
         <iframe
-          ref={iframeRef}
           src={node.attrs.src}
-          width={width}
-          height={height}
+          width={"100%"}
+          height={"100%"}
+          style={{ display: "block", borderRadius: "6px" }}
           frameBorder={node.attrs.frameborder}
           allowFullScreen={node.attrs.allowfullscreen === "true"}
         />
-        <div style={{ marginTop: 4 }}>
-          <label>
-            Width:{" "}
-            <input
-              type="number"
-              value={width}
-              onChange={(e) => setWidth(Number(e.target.value))}
-              style={{ width: 60 }}
-            />
-          </label>
-          <label style={{ marginLeft: 8 }}>
-            Height:{" "}
-            <input
-              type="number"
-              value={height}
-              onChange={(e) => setHeight(Number(e.target.value))}
-              style={{ width: 60 }}
-            />
-          </label>
-        </div>
+
+        {/* Resize handle */}
+        {isEditable && (
+          <div
+            onMouseDown={onMouseDown}
+            title="Drag to resize"
+            style={{
+              position: "absolute",
+              width: 16,
+              height: 16,
+              bottom: 0,
+              right: 0,
+              background: "rgba(0,0,0,0.3)",
+              cursor: "nwse-resize",
+              borderRadius: 4,
+            }}
+          />
+        )}
       </div>
     </NodeViewWrapper>
   )
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
index 37c18e9b68..b84dcab818 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
@@ -1,4 +1,6 @@
 import { Node, mergeAttributes, type CommandProps } from "@tiptap/core"
+import { ReactNodeViewRenderer } from "@tiptap/react"
+import { MediaEmbedNodeView } from "./MediaEmbedNodeView"
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -18,9 +20,11 @@ export const MediaEmbed = Node.create({
     return {
       src: { default: null },
       width: { default: "100%" },
-      height: { default: "400" },
+      height: { default: "100%" },
       frameborder: { default: 0 },
       allowfullscreen: { default: "true" },
+      float: { default: null }, // ← NEW ("left" | "right" | null)
+      editable: { default: true },
     }
   },
 
@@ -29,7 +33,18 @@ export const MediaEmbed = Node.create({
   },
 
   renderHTML({ HTMLAttributes }) {
-    return ["iframe", mergeAttributes(HTMLAttributes)]
+    const { float, ...rest } = HTMLAttributes
+
+    return [
+      "div",
+      {
+        style: `
+        float: ${float || "none"};
+        margin: ${float ? "0 12px 12px 0" : "12px 0"};
+      `,
+      },
+      ["iframe", rest],
+    ]
   },
 
   addCommands() {
@@ -44,4 +59,7 @@ export const MediaEmbed = Node.create({
         },
     }
   },
+  addNodeView() {
+    return ReactNodeViewRenderer(MediaEmbedNodeView)
+  },
 })
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss
new file mode 100644
index 0000000000..d754be51f3
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss
@@ -0,0 +1,14 @@
+.react-renderer.node-mediaEmbed {
+  width: 100vw; /* full viewport width */
+  position: relative;
+  left: 50%; /* move to center */
+  right: 50%;
+  height: 100vh;
+  margin-left: -50vw; /* pull left */
+  margin-right: -50vw; /* pull right */
+}
+
+.react-renderer.node-mediaEmbed > [data-node-view-wrapper] {
+  width: 100%;
+  height: 100%;
+}

From c401d692c5896014457aaf5e07cd0407b61d380e Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@192.168.10.42>
Date: Tue, 18 Nov 2025 20:52:16 +0500
Subject: [PATCH 3/6] make the media like medium.com

---
 .../components/TiptapEditor/ArticleEditor.tsx |   4 +-
 .../components/TiptapEditor/TiptapEditor.tsx  |   2 +-
 .../tiptap-node/media-embed/Icons.tsx         |  33 ++++
 .../media-embed/MediaEmbedNodeView.tsx        | 176 ++++++------------
 .../media-embed/media-embed-extension.ts      |  10 +
 .../tiptap-node/media-embed/style.scss        | 141 +++++++++++++-
 6 files changed, 234 insertions(+), 132 deletions(-)
 create mode 100644 frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/Icons.tsx

diff --git a/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx b/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
index a61d305227..9d8ecc7801 100644
--- a/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx
@@ -61,6 +61,7 @@ const ViewContainer = styled.div({
 
 const Title = styled(Typography)<TypographyProps>({
   margin: "60px auto",
+  maxWidth: "1000px",
 })
 
 const TitleInput = styled(Input)({
@@ -79,7 +80,6 @@ const StyledToolbar = styled(Toolbar)({
 
 const StyledContainer = styled(Container)({
   marginTop: "60px",
-  maxWidth: "100% !important",
 })
 
 const StyledAlert = styled(Alert)({
@@ -109,7 +109,7 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
     isError: isUpdateError,
     error: updateError,
   } = useArticlePartialUpdate()
-  const isArticleEditor = true
+  const isArticleEditor = useUserHasPermission(Permission.ArticleEditor)
 
   const [content, setContent] = useState<JSONContent>(
     article?.content || {
diff --git a/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx b/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
index 34b8dd3308..a4f0ca380e 100644
--- a/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
@@ -50,7 +50,7 @@ const StyledEditorContent = styled(EditorContent)<{ readOnly: boolean }>(
     margin: "20px auto",
     ...(readOnly
       ? {
-          maxWidth: "100%",
+          maxWidth: "1000px",
           backgroundColor: "transparent",
           ".tiptap.ProseMirror.simple-editor": {
             padding: "0",
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/Icons.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/Icons.tsx
new file mode 100644
index 0000000000..a0a4d44e89
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/Icons.tsx
@@ -0,0 +1,33 @@
+import React from "react"
+export const FullWidth = () => (
+  <span className="svg-icon">
+    <svg width="25" height="25">
+      <path
+        d="M4.027 17.24V5.492c0-.117.046-.216.14-.3a.453.453 0 01.313-.123h17.007c.117 0 .22.04.313.12.093.08.14.18.14.3v11.74c0 .11-.046.21-.14.3a.469.469 0 01-.313.12H4.48a.432.432 0 01-.314-.13.41.41 0 01-.14-.3zm2.943 3.407v-.833a.45.45 0 01.122-.322.387.387 0 01.276-.132H18.61a.35.35 0 01.27.132.472.472 0 01.116.322v.833c0 .117-.04.216-.116.3a.361.361 0 01-.27.123H7.368a.374.374 0 01-.276-.124.405.405 0 01-.122-.3z"
+        fillRule="evenodd"
+      ></path>
+    </svg>
+  </span>
+)
+
+export const WideWidth = () => (
+  <span className="svg-icon">
+    <svg width="25" height="25">
+      <path
+        d="M3 17.004V9.01a.4.4 0 01.145-.31.476.476 0 01.328-.13h17.74c.12 0 .23.043.327.13a.4.4 0 01.145.31v7.994a.404.404 0 01-.145.313.48.48 0 01-.328.13H3.472a.483.483 0 01-.327-.13.402.402 0 01-.145-.313zm2.212 3.554v-.87c0-.13.05-.243.145-.334a.472.472 0 01.328-.137H19c.124 0 .23.045.322.137a.457.457 0 01.138.335v.86c0 .12-.046.22-.138.31a.478.478 0 01-.32.13H5.684a.514.514 0 01-.328-.13.415.415 0 01-.145-.32zm0-14.246v-.84c0-.132.05-.243.145-.334A.477.477 0 015.685 5H19a.44.44 0 01.322.138.455.455 0 01.138.335v.84a.451.451 0 01-.138.334.446.446 0 01-.32.138H5.684a.466.466 0 01-.328-.138.447.447 0 01-.145-.335z"
+        fill-rule="evenodd"
+      ></path>
+    </svg>
+  </span>
+)
+
+export const DefaultWidth = () => (
+  <span className="svg-icon">
+    <svg width="25" height="25">
+      <path
+        d="M5 20.558v-.9c0-.122.04-.226.122-.312a.404.404 0 01.305-.13h13.347a.45.45 0 01.32.13c.092.086.138.19.138.312v.9a.412.412 0 01-.138.313.435.435 0 01-.32.13H5.427a.39.39 0 01-.305-.13.432.432 0 01-.122-.31zm0-3.554V9.01c0-.12.04-.225.122-.31a.4.4 0 01.305-.13h13.347c.122 0 .23.043.32.13.092.085.138.19.138.31v7.994a.462.462 0 01-.138.328.424.424 0 01-.32.145H5.427a.382.382 0 01-.305-.145.501.501 0 01-.122-.328zM5 6.342v-.87c0-.12.04-.23.122-.327A.382.382 0 015.427 5h13.347c.122 0 .23.048.32.145a.462.462 0 01.138.328v.87c0 .12-.046.225-.138.31a.447.447 0 01-.32.13H5.427a.4.4 0 01-.305-.13.44.44 0 01-.122-.31z"
+        fill-rule="evenodd"
+      ></path>
+    </svg>
+  </span>
+)
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx
index ff9ddc9b20..89053fa34a 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/MediaEmbedNodeView.tsx
@@ -1,5 +1,6 @@
 import React, { useRef, useState, useEffect } from "react"
 import { NodeViewWrapper } from "@tiptap/react"
+import { FullWidth, WideWidth, DefaultWidth } from "./Icons"
 
 import "./style.scss"
 
@@ -13,131 +14,72 @@ export const MediaEmbedNodeView = ({
   updateAttributes,
 }: MediaEmbedNodeProps) => {
   const containerRef = useRef<HTMLDivElement>(null)
-  const [width, setWidth] = useState(Number(node.attrs.width) || 400)
-  const [height, setHeight] = useState(Number(node.attrs.height) || 300)
   const [hover, setHover] = useState(false)
 
   const isEditable = node.attrs.editable
 
-  useEffect(() => {
-    updateAttributes({ width, height })
-  }, [width, height])
+  const checkHover = (e: React.MouseEvent) => {
+    if (isEditable === false) return
+    if (!containerRef.current) return
 
-  // Resize logic
-  const isResizing = useRef(false)
-  const startX = useRef(0)
-  const startY = useRef(0)
-  const startWidth = useRef(0)
-  const startHeight = useRef(0)
+    const rect = containerRef.current.getBoundingClientRect()
 
-  const onMouseDown = (e: React.MouseEvent) => {
-    e.preventDefault()
-    isResizing.current = true
-    startX.current = e.clientX
-    startY.current = e.clientY
-    startWidth.current = width
-    startHeight.current = height
+    const inside =
+      e.clientX >= rect.left &&
+      e.clientX <= rect.right &&
+      e.clientY >= rect.top &&
+      e.clientY <= rect.bottom
 
-    document.addEventListener("mousemove", onMouseMove)
-    document.addEventListener("mouseup", onMouseUp)
+    setHover(inside)
   }
-
-  const onMouseMove = (e: MouseEvent) => {
-    if (!isResizing.current) return
-    const deltaX = e.clientX - startX.current
-    const deltaY = e.clientY - startY.current
-    setWidth(startWidth.current + deltaX)
-    setHeight(startHeight.current + deltaY)
-  }
-
-  const onMouseUp = () => {
-    isResizing.current = false
-    document.removeEventListener("mousemove", onMouseMove)
-    document.removeEventListener("mouseup", onMouseUp)
-  }
-
   return (
     <NodeViewWrapper
+      className={`media-embed ${node.attrs.layout}`}
       style={{
         float: node.attrs.float || "none",
-        margin: node.attrs.float ? "0 12px 12px 0" : "12px 0",
-        // display: "inline-block",
-        // position: "relative",
       }}
     >
       <div
         ref={containerRef}
-        onMouseEnter={() => setHover(true)}
-        onMouseLeave={() => setHover(false)}
-        style={{
-          position: "relative",
-          width: "100%",
-          height: "100%",
+        onMouseMove={checkHover}
+        onMouseLeave={() => {
+          if (!hover) return
+          setHover(false)
         }}
+        className="media-container"
       >
-        {/* Floating toolbar */}
+        <div
+          className="iframe-shield"
+          style={{ pointerEvents: hover ? "auto" : "none" }}
+        />
         {isEditable && hover && (
-          <div
-            title="Float the media"
-            style={{
-              position: "absolute",
-              top: -10,
-              left: -10,
-              background: "white",
-              border: "1px solid #ccc",
-              padding: "4px",
-              borderRadius: "8px",
-              display: "flex",
-              gap: "4px",
-              boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-              zIndex: 10,
-            }}
-          >
-            <button
-              title="Float Left"
-              onClick={() => updateAttributes({ float: "left" })}
-              style={{
-                width: 28,
-                height: 28,
-                borderRadius: "50%",
-                border: "1px solid #ddd",
-                background: node.attrs.float === "left" ? "#eee" : "white",
-                cursor: "pointer",
-              }}
-            >
-              ⬅
-            </button>
+          <>
+            <div className="media-layout-toolbar">
+              <button
+                className={node.attrs.layout === "default" ? "active" : ""}
+                onClick={() => updateAttributes({ layout: "default" })}
+                title="Default width"
+              >
+                <DefaultWidth />
+              </button>
 
-            <button
-              title="Float Right"
-              onClick={() => updateAttributes({ float: "right" })}
-              style={{
-                width: 28,
-                height: 28,
-                borderRadius: "50%",
-                border: "1px solid #ddd",
-                background: node.attrs.float === "right" ? "#eee" : "white",
-                cursor: "pointer",
-              }}
-            >
-              ➡
-            </button>
+              <button
+                className={node.attrs.layout === "wide" ? "active" : ""}
+                onClick={() => updateAttributes({ layout: "wide" })}
+                title="Wide"
+              >
+                <WideWidth />
+              </button>
 
-            <button
-              title="No Float"
-              onClick={() => updateAttributes({ float: null })}
-              style={{
-                width: 28,
-                height: 28,
-                borderRadius: "50%",
-                border: "1px solid #ddd",
-                background: node.attrs.float === null ? "#eee" : "white",
-                cursor: "pointer",
-              }}
-            >
-              ⭕
-            </button>
-          </div>
+              <button
+                className={node.attrs.layout === "full" ? "active" : ""}
+                onClick={() => updateAttributes({ layout: "full" })}
+                title="Full width"
+              >
+                <FullWidth />
+              </button>
+            </div>
+          </>
         )}
 
         {/* Iframe */}
@@ -149,23 +91,17 @@ export const MediaEmbedNodeView = ({
           frameBorder={node.attrs.frameborder}
           allowFullScreen={node.attrs.allowfullscreen === "true"}
         />
-
-        {/* Resize handle */}
-        {isEditable && (
-          <div
-            onMouseDown={onMouseDown}
-            title="Drag to resize"
-            style={{
-              position: "absolute",
-              width: 16,
-              height: 16,
-              bottom: 0,
-              right: 0,
-              background: "rgba(0,0,0,0.3)",
-              cursor: "nwse-resize",
-              borderRadius: 4,
-            }}
+      </div>
+      <div className="media-caption">
+        {isEditable ? (
+          <input
+            type="text"
+            placeholder="Add caption…"
+            value={node.attrs.caption || ""}
+            onChange={(e) => updateAttributes({ caption: e.target.value })}
           />
+        ) : (
+          node.attrs.caption && <p>{node.attrs.caption}</p>
         )}
       </div>
     </NodeViewWrapper>
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
index b84dcab818..589a4c579f 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
@@ -25,6 +25,16 @@ export const MediaEmbed = Node.create({
       allowfullscreen: { default: "true" },
       float: { default: null }, // ← NEW ("left" | "right" | null)
       editable: { default: true },
+      layout: {
+        default: "default", // 👈 NEW!
+      },
+      caption: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-caption") || "",
+        renderHTML: (attrs) => ({
+          "data-caption": attrs.caption,
+        }),
+      },
     }
   },
 
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss
index d754be51f3..40487335b9 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss
@@ -1,14 +1,137 @@
-.react-renderer.node-mediaEmbed {
-  width: 100vw; /* full viewport width */
+.media-embed {
+  width: 100%;
+  margin: 24px 0;
   position: relative;
-  left: 50%; /* move to center */
-  right: 50%;
-  height: 100vh;
-  margin-left: -50vw; /* pull left */
-  margin-right: -50vw; /* pull right */
+
+  .media-caption {
+    max-width: 1000px;
+    margin: auto;
+    margin-top: 8px;
+
+    input {
+      width: 100%;
+      border: none;
+      padding: 4px 2px;
+      text-align: center;
+      font-size: 14px;
+      outline: none;
+
+      &:focus {
+        border-bottom-color: #000;
+      }
+    }
+
+    p {
+      font-size: 14px;
+      color: #555;
+      margin: 4px 0;
+      text-align: center;
+      font-style: italic;
+    }
+  }
+
+  &.default {
+    width: 100%;
+  }
+
+  &.wide {
+    width: 90vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: calc(-45vw);
+    margin-right: calc(-45vw);
+  }
+
+  &.full {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+  }
 }
 
-.react-renderer.node-mediaEmbed > [data-node-view-wrapper] {
+/* Toolbar styling (optional) */
+.media-layout-toolbar {
+  display: flex;
+  background: rgba(0, 0, 0, 0.85);
+  padding: 6px 10px;
+  border-radius: 8px;
+  gap: 8px;
+  width: 150px;
+  margin-bottom: 10px;
+  margin: 0px auto;
+  margin-bottom: 10px;
+}
+
+.media-layout-toolbar button {
+  width: 40px;
+  height: 28px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  filter: brightness(0.9);
+  color: white;
+  cursor: pointer;
+}
+
+.media-layout-toolbar button.active {
+  background: #9be19b;
+  color: black;
+}
+
+.svg-icon {
+  fill: white;
+}
+
+.media-container {
+  position: relative;
   width: 100%;
-  height: 100%;
+  height: 100vh; // ✅ add height here
+  overflow: hidden;
+}
+
+.media-container iframe {
+  width: 100%;
+  height: 100%; // now fills the container
+  display: block;
+  border-radius: 6px;
+  position: relative;
+}
+.iframe-shield {
+  position: absolute;
+  inset: 0;
+  z-index: 5; // Above iframe, below toolbar
+  background: transparent;
+  pointer-events: auto;
+}
+
+.media-layout-toolbar {
+  position: sticky;
+  top: -40px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2000; /* make it VERY high */
+}
+
+.media-layout-toolbar::after {
+  content: "";
+  position: absolute;
+  top: 100%; /* position just below toolbar */
+  left: 50%;
+  transform: translateX(-50%);
+
+  /* ↓ Triangle arrow */
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid rgba(0, 0, 0, 0.85); /* same color as toolbar */
+}
+
+.iframe-shield {
+  position: absolute;
+  z-index: 1000; /* lower than toolbar */
 }

From e2e72fd737aef6ce07f013c04bdde461c392184e Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@A006-01455.local>
Date: Wed, 19 Nov 2025 12:39:42 +0500
Subject: [PATCH 4/6] fix the urls conversion code

---
 .../media-embed/media-embed-extension.ts      | 13 +-----
 .../components/tiptap-ui/media-embed/lib.ts   | 46 +++++++++++++------
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
index 589a4c579f..58bdc63578 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/media-embed-extension.ts
@@ -43,18 +43,7 @@ export const MediaEmbed = Node.create({
   },
 
   renderHTML({ HTMLAttributes }) {
-    const { float, ...rest } = HTMLAttributes
-
-    return [
-      "div",
-      {
-        style: `
-        float: ${float || "none"};
-        margin: ${float ? "0 12px 12px 0" : "12px 0"};
-      `,
-      },
-      ["iframe", rest],
-    ]
+    return ["iframe", mergeAttributes(HTMLAttributes)]
   },
 
   addCommands() {
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts
index 7763dd0922..dd2a46805c 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts
@@ -1,18 +1,36 @@
-function convertToEmbedUrl(url: string) {
-  // YouTube
-  console.log("Converting URL:", url)
-  if (url.includes("watch?v=")) {
-    return url.replace("watch?v=", "embed/")
+export function convertToEmbedUrl(url: string): string {
+  let parsed: URL
+
+  try {
+    parsed = new URL(url)
+  } catch {
+    return url // not a valid URL
   }
-  if (url.includes("youtu.be")) {
-    return url.replace("youtu.be/", "youtube.com/embed/")
+
+  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
   }
-  // Vimeo
-  if (url.includes("vimeo.com")) {
-    return url.replace("vimeo.com/", "player.vimeo.com/video/")
+
+  // --- YOUTUBE SHORT ---
+  if (hostname === "youtu.be") {
+    const id = parsed.pathname.slice(1)
+    return id ? `https://www.youtube.com/embed/${id}` : url
   }
-  console.log("No conversion applied for URL:", url)
-  return url
-}
 
-export { convertToEmbedUrl }
+  // --- YOUTUBE /embed or other formats keep 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
+}

From c95d7bf9568cbbdf0a0a1fb4ce6548e265c74706 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@A006-01455.local>
Date: Thu, 20 Nov 2025 13:09:37 +0500
Subject: [PATCH 5/6] addressed the comments on PR

---
 .../components/TiptapEditor/TiptapEditor.tsx  |  3 +
 .../tiptap-node/media-embed/style.scss        |  2 +-
 .../media-embed/MediaUrlInputDialog.tsx       | 56 +++++++++++++++++++
 .../components/tiptap-ui/media-embed/lib.ts   | 16 +++++-
 .../tiptap-ui/media-embed/useMediaEmbed.ts    | 15 +++--
 5 files changed, 85 insertions(+), 7 deletions(-)
 create mode 100644 frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/MediaUrlInputDialog.tsx

diff --git a/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx b/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
index a4f0ca380e..e3c7f00981 100644
--- a/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/TiptapEditor.tsx
@@ -48,6 +48,9 @@ const StyledEditorContent = styled(EditorContent)<{ readOnly: boolean }>(
     backgroundColor: theme.custom.colors.white,
     borderRadius: "10px",
     margin: "20px auto",
+    ".tiptap.ProseMirror.simple-editor": {
+      padding: "3rem 3rem 5vh",
+    },
     ...(readOnly
       ? {
           maxWidth: "1000px",
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss
index 40487335b9..9096d7dbbe 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-node/media-embed/style.scss
@@ -89,7 +89,7 @@
 .media-container {
   position: relative;
   width: 100%;
-  height: 100vh; // ✅ add height here
+  aspect-ratio: 16 / 9;
   overflow: hidden;
 }
 
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/MediaUrlInputDialog.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/MediaUrlInputDialog.tsx
new file mode 100644
index 0000000000..33e97e47ed
--- /dev/null
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/MediaUrlInputDialog.tsx
@@ -0,0 +1,56 @@
+import React, { useState, useCallback } from "react"
+import NiceModal, { muiDialogV5 } from "@ebay/nice-modal-react"
+import { TextField, Alert } from "@mitodl/smoot-design"
+import { FormDialog } from "ol-components"
+
+const MediaUrlInputDialog = NiceModal.create(() => {
+  const modal = NiceModal.useModal()
+  const [url, setUrl] = useState("")
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = (e?: any) => {
+    e?.preventDefault()
+
+    if (!url.trim()) {
+      setError("URL is required")
+      return
+    }
+    modal.resolve(url)
+    modal.hide()
+  }
+
+  const handleReset = useCallback(() => {
+    setUrl("")
+    setError(null)
+  }, [setUrl, setError])
+
+  return (
+    <FormDialog
+      {...muiDialogV5(modal)}
+      title="Embed Media"
+      confirmText="Insert"
+      onSubmit={handleSubmit}
+      onReset={handleReset}
+      noValidate
+      fullWidth
+    >
+      <TextField
+        name="mediaUrl"
+        label="Media URL"
+        placeholder="https://youtube.com/..."
+        value={url}
+        error={!!error}
+        errorText={error ?? ""}
+        onChange={(e: any) => {
+          setError(null)
+          setUrl(e.target.value)
+        }}
+        fullWidth
+      />
+
+      {error && <Alert severity="error">{error}</Alert>}
+    </FormDialog>
+  )
+})
+
+export default MediaUrlInputDialog
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts
index dd2a46805c..d60f4bc8d8 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/lib.ts
@@ -15,13 +15,25 @@ export function convertToEmbedUrl(url: string): string {
     return videoId ? `https://www.youtube.com/embed/${videoId}` : url
   }
 
-  // --- YOUTUBE SHORT ---
+  // --- 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 or other formats keep as is ---
+  // --- YOUTUBE EMBED (leave as-is) ---
   if (hostname === "youtube.com" && parsed.pathname.startsWith("/embed/")) {
     return url
   }
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts
index fdb4315cdb..a4765839f3 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts
@@ -2,6 +2,8 @@ import { useCallback, useMemo } from "react"
 import type { Editor } from "@tiptap/react"
 import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
 import { convertToEmbedUrl } from "./lib"
+import NiceModal from "@ebay/nice-modal-react"
+import MediaUrlInputDialog from "./MediaUrlInputDialog"
 import { Icon } from "./Icon"
 
 export const MEDIA_EMBED_SHORTCUT_KEY = "Mod+Shift+E"
@@ -14,11 +16,16 @@ export function useMediaEmbed(editor?: Editor | null) {
 
   const label = "Embed Media"
 
-  const handleEmbed = useCallback(() => {
-    const url = prompt("Enter a media URL (YouTube, Vimeo, etc)")
-    if (!url) return
+  const handleEmbed = useCallback(async () => {
+    try {
+      const url: string = await NiceModal.show(MediaUrlInputDialog)
+      console.log("URL received from modal:", url)
+      if (!url) return
 
-    resolved?.commands.insertMedia(convertToEmbedUrl(url))
+      resolved?.commands.insertMedia(convertToEmbedUrl(url))
+    } catch {
+      // modal was closed / cancelled
+    }
   }, [resolved])
 
   return {

From 09383a72063eff69831fecc5571972c6c6227ad4 Mon Sep 17 00:00:00 2001
From: Ahtesham Quraish <ahtesham.quraish@A006-01455.local>
Date: Thu, 20 Nov 2025 16:22:17 +0500
Subject: [PATCH 6/6] remove shortcut key for now

---
 .../tiptap-ui/media-embed/media-embed-button.tsx   | 14 +-------------
 .../tiptap-ui/media-embed/useMediaEmbed.ts         |  3 ---
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/media-embed-button.tsx b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/media-embed-button.tsx
index 3e889538da..9b17fbb020 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/media-embed-button.tsx
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/media-embed-button.tsx
@@ -1,8 +1,6 @@
 import React, { forwardRef, useCallback } from "react"
 import { Button } from "../../tiptap-ui-primitive/button"
-import { Badge } from "../../tiptap-ui-primitive/badge"
-import { parseShortcutKeys } from "../../../lib/tiptap-utils"
-import { useMediaEmbed, MEDIA_EMBED_SHORTCUT_KEY } from "./useMediaEmbed"
+import { useMediaEmbed } from "./useMediaEmbed"
 import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
 
 export interface MediaEmbedButtonProps {
@@ -13,14 +11,6 @@ export interface MediaEmbedButtonProps {
   onClick?: (e: React.MouseEvent) => void
 }
 
-function MediaShortcutBadge() {
-  return (
-    <Badge>
-      {parseShortcutKeys({ shortcutKeys: MEDIA_EMBED_SHORTCUT_KEY })}
-    </Badge>
-  )
-}
-
 export const MediaEmbedButton = forwardRef<
   HTMLButtonElement,
   MediaEmbedButtonProps
@@ -43,7 +33,6 @@ export const MediaEmbedButton = forwardRef<
       canInsert,
       label,
       Icon: DefaultIcon,
-      shortcutKeys,
       handleEmbed,
     } = useMediaEmbed(editor)
 
@@ -73,7 +62,6 @@ export const MediaEmbedButton = forwardRef<
       >
         <RenderIcon />
         {text && <span className="tiptap-button-text">{text}</span>}
-        {showShortcut && <MediaShortcutBadge />}
       </Button>
     )
   },
diff --git a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts
index a4765839f3..11897ba5d5 100644
--- a/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts
+++ b/frontends/ol-components/src/components/TiptapEditor/components/tiptap-ui/media-embed/useMediaEmbed.ts
@@ -6,8 +6,6 @@ import NiceModal from "@ebay/nice-modal-react"
 import MediaUrlInputDialog from "./MediaUrlInputDialog"
 import { Icon } from "./Icon"
 
-export const MEDIA_EMBED_SHORTCUT_KEY = "Mod+Shift+E"
-
 export function useMediaEmbed(editor?: Editor | null) {
   const resolved = useTiptapEditor(editor).editor
 
@@ -35,7 +33,6 @@ export function useMediaEmbed(editor?: Editor | null) {
     label,
     Icon,
     isActive: false,
-    shortcutKeys: MEDIA_EMBED_SHORTCUT_KEY,
     handleEmbed,
   }
 }