feat(rich-markdown-editor): live media embeds + shared embed detection util

- Extract getEmbedInfo/EmbedInfo into pure @sim/utils/media-embed (carries the
  PR #5288 dropbox host-validation hardening); repoint the note block to it
- Add LinkEmbed: a ProseMirror widget-decoration plugin that renders media
  players (YouTube, Vimeo, Spotify, Dropbox, …) beneath standalone links in the
  rich markdown editor, in both editing and read-only surfaces. The document
  stays a plain markdown link, so markdown round-trips stay lossless
- Gate embeds behind an opt-in flag (on for the file editor, off for modal fields)
- Polish the knowledge chunk editor to the file editor's centered reading frame
  while keeping it plaintext for exact embedding fidelity

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/editor-extensions.ts

@@ -2,6 +2,7 @@ import type { Extensions } from '@tiptap/core'
 import Placeholder from '@tiptap/extension-placeholder'
 import { CodeBlockWithLanguage } from './code-block'
 import { CodeBlockHighlight } from './code-highlight'
+import { LinkEmbed } from './embed/link-embed'
 import { createMarkdownContentExtensions } from './extensions'
 import { ResizableImage } from './image'
 import { RichMarkdownKeymap } from './keymap'
@@ -12,19 +13,23 @@ import { SlashCommand } from './slash-command/slash-command'
 
 interface MarkdownEditorExtensionOptions {
   placeholder: string
+  /** Renders supported media links as live players beneath a standalone link. Off by default. */
+  embeds?: boolean
 }
 
 /**
  * The full extension set for the live editor: the content extensions with their React node-view nodes
  * injected (code-block language picker, resizable image, mention chip) plus the UI-only extensions —
  * `CodeBlockHighlight` (Prism), `SlashCommand` (the `/` block menu), `Mention` (the `@` menu),
- * `RichMarkdownKeymap`, `MarkdownPaste`, and `Placeholder`.
+ * `RichMarkdownKeymap`, `MarkdownPaste`, `Placeholder`, and — when `embeds` is set — `LinkEmbed`
+ * (media players for standalone links).
  *
  * Kept separate from `extensions.ts` so those node views (and the block registry the mention chip pulls
  * in for brand icons) stay out of the headless round-trip path, which only needs the schema.
  */
 export function createMarkdownEditorExtensions({
   placeholder,
+  embeds = false,
 }: MarkdownEditorExtensionOptions): Extensions {
   return [
     ...createMarkdownContentExtensions({
@@ -38,5 +43,6 @@ export function createMarkdownEditorExtensions({
     RichMarkdownKeymap,
     MarkdownPaste,
     Placeholder.configure({ placeholder }),
+    ...(embeds ? [LinkEmbed] : []),
   ]
 }

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/embed/embed-dom.ts

@@ -0,0 +1,62 @@
+import type { EmbedInfo } from '@sim/utils/media-embed'
+
+/**
+ * Iframes are rendered at native size then CSS-scaled down so embedded players keep their
+ * intended layout inside the editor's reading column. Mirrors the note-block renderer.
+ */
+const EMBED_SCALE = 0.78
+const EMBED_INVERSE_SCALE = `${(1 / EMBED_SCALE) * 100}%`
+
+const IFRAME_ALLOW =
+  'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+
+/**
+ * Build the DOM player for a resolved {@link EmbedInfo}, matching the note-block renderer's
+ * markup. Returned as a non-editable element so it can back a ProseMirror widget decoration
+ * without entering the editable content.
+ */
+export function createEmbedDom(embedInfo: EmbedInfo): HTMLElement {
+  const container = document.createElement('div')
+  container.className = 'my-2 block w-full overflow-hidden rounded-md'
+  container.contentEditable = 'false'
+
+  if (embedInfo.type === 'iframe') {
+    const frame = document.createElement('div')
+    frame.className = 'block overflow-hidden'
+    frame.style.width = '100%'
+    frame.style.aspectRatio = embedInfo.aspectRatio || '16/9'
+
+    const iframe = document.createElement('iframe')
+    iframe.src = embedInfo.url
+    iframe.title = 'Media'
+    iframe.allow = IFRAME_ALLOW
+    iframe.allowFullscreen = true
+    iframe.loading = 'lazy'
+    iframe.className = 'origin-top-left'
+    iframe.style.width = EMBED_INVERSE_SCALE
+    iframe.style.height = EMBED_INVERSE_SCALE
+    iframe.style.transform = `scale(${EMBED_SCALE})`
+
+    frame.appendChild(iframe)
+    container.appendChild(frame)
+    return container
+  }
+
+  if (embedInfo.type === 'video') {
+    const video = document.createElement('video')
+    video.src = embedInfo.url
+    video.controls = true
+    video.preload = 'metadata'
+    video.className = 'aspect-video w-full'
+    container.appendChild(video)
+    return container
+  }
+
+  const audio = document.createElement('audio')
+  audio.src = embedInfo.url
+  audio.controls = true
+  audio.preload = 'metadata'
+  audio.className = 'w-full'
+  container.appendChild(audio)
+  return container
+}

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/embed/link-embed.test.ts

@@ -0,0 +1,59 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { Editor } from '@tiptap/core'
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+import { createMarkdownEditorExtensions } from '../editor-extensions'
+
+// jsdom lacks elementFromPoint, which TipTap's Placeholder viewport tracking calls on mount.
+beforeAll(() => {
+  document.elementFromPoint = vi.fn(() => null)
+})
+
+let editor: Editor | null = null
+
+function editorWith(content: string, embeds = true): Editor {
+  editor = new Editor({
+    extensions: createMarkdownEditorExtensions({ placeholder: '', embeds }),
+    content,
+  })
+  return editor
+}
+
+afterEach(() => {
+  editor?.destroy()
+  editor = null
+})
+
+const YOUTUBE_LINK = '<p><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">watch</a></p>'
+
+describe('LinkEmbed', () => {
+  it('renders a player beneath a standalone embeddable link', () => {
+    const view = editorWith(YOUTUBE_LINK).view
+    const iframe = view.dom.querySelector('iframe')
+    expect(iframe?.getAttribute('src')).toBe('https://www.youtube.com/embed/dQw4w9WgXcQ')
+  })
+
+  it('keeps the underlying document a plain markdown link (lossless round-trip)', () => {
+    const markdown = editorWith(YOUTUBE_LINK).getMarkdown()
+    expect(markdown).toContain('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
+    expect(markdown).not.toContain('<iframe')
+  })
+
+  it('does not embed an inline link inside surrounding text', () => {
+    const view = editorWith(
+      '<p>see <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">here</a> now</p>'
+    ).view
+    expect(view.dom.querySelector('iframe')).toBeNull()
+  })
+
+  it('does not embed a non-embeddable standalone link', () => {
+    const view = editorWith('<p><a href="https://example.com/article">read</a></p>').view
+    expect(view.dom.querySelector('iframe')).toBeNull()
+  })
+
+  it('does nothing when the embeds option is disabled', () => {
+    const view = editorWith(YOUTUBE_LINK, false).view
+    expect(view.dom.querySelector('iframe')).toBeNull()
+  })
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/embed/link-embed.ts

@@ -0,0 +1,85 @@
+import { getEmbedInfo } from '@sim/utils/media-embed'
+import { Extension } from '@tiptap/core'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+import { createEmbedDom } from './embed-dom'
+
+const LINK_EMBED_PLUGIN_KEY = new PluginKey('linkEmbed')
+
+/**
+ * The href of a paragraph that is a single, whole-text link (a "standalone link"), or null if
+ * the paragraph is empty, holds non-text content, or mixes a link with other text. Only
+ * standalone links become media embeds — a link inline within a sentence stays a plain link,
+ * matching how Notion and Linear auto-embed.
+ */
+function getStandaloneLinkHref(node: ProseMirrorNode): string | null {
+  if (node.type.name !== 'paragraph' || node.childCount === 0) return null
+  let href: string | null = null
+  let isStandalone = true
+  node.forEach((child) => {
+    if (!isStandalone) return
+    const linkMark = child.isText
+      ? child.marks.find((mark) => mark.type.name === 'link')
+      : undefined
+    if (!linkMark) {
+      isStandalone = false
+      return
+    }
+    const childHref = linkMark.attrs.href as string
+    if (href === null) href = childHref
+    else if (href !== childHref) isStandalone = false
+  })
+  return isStandalone ? href : null
+}
+
+function buildDecorations(doc: ProseMirrorNode): DecorationSet {
+  const decorations: Decoration[] = []
+  doc.descendants((node, pos) => {
+    if (node.type.name !== 'paragraph') return undefined
+    const href = getStandaloneLinkHref(node)
+    if (href) {
+      const embedInfo = getEmbedInfo(href)
+      if (embedInfo) {
+        // Render the player just after the link paragraph, keyed by source so the iframe/video
+        // DOM is reused across edits instead of reloading on every keystroke.
+        decorations.push(
+          Decoration.widget(pos + node.nodeSize, () => createEmbedDom(embedInfo), {
+            side: 1,
+            key: `embed:${embedInfo.type}:${embedInfo.url}`,
+          })
+        )
+      }
+    }
+    // Paragraphs hold only inline content — never another embeddable paragraph.
+    return false
+  })
+  return DecorationSet.create(doc, decorations)
+}
+
+/**
+ * Renders supported media links (YouTube, Vimeo, Spotify, Dropbox, …) as live players beneath a
+ * standalone link, in both the editing and read-only surfaces. Implemented as widget decorations
+ * so the underlying document stays a plain markdown link — embeds never enter the schema or the
+ * serialized markdown, keeping round-trips lossless.
+ */
+export const LinkEmbed = Extension.create({
+  name: 'linkEmbed',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: LINK_EMBED_PLUGIN_KEY,
+        state: {
+          init: (_, { doc }) => buildDecorations(doc),
+          apply: (tr, current) => (tr.docChanged ? buildDecorations(tr.doc) : current),
+        },
+        props: {
+          decorations(state) {
+            return LINK_EMBED_PLUGIN_KEY.getState(state)
+          },
+        },
+      }),
+    ]
+  },
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx

@@ -31,6 +31,7 @@ import './rich-markdown-editor.css'
 
 const EXTENSIONS = createMarkdownEditorExtensions({
   placeholder: "Write something, or press '/' for commands…",
+  embeds: true,
 })
 
 /** Throttle the per-frame full re-parse above this body size so a large streaming file can't saturate the main thread. */

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx

@@ -205,7 +205,7 @@ export function ChunkEditor({
       <div
         role='group'
         aria-label='Chunk content editor'
-        className='flex min-h-0 flex-1 cursor-text overflow-hidden'
+        className='flex min-h-0 flex-1 cursor-text flex-col overflow-hidden'
         onClick={(e) => {
           if (e.target === e.currentTarget) textareaRef.current?.focus()
         }}
@@ -217,7 +217,7 @@ export function ChunkEditor({
         {tokenizerOn ? (
           <div
             ref={tokenizedScrollRef}
-            className='h-full w-full cursor-default overflow-y-auto whitespace-pre-wrap break-words p-6 font-sans text-[var(--text-body)] text-sm'
+            className='mx-auto h-full w-full max-w-[48rem] cursor-default overflow-y-auto whitespace-pre-wrap break-words px-8 py-6 font-sans text-[var(--text-body)] text-sm'
           >
             {tokenStrings.map((token, index) => (
               <span
@@ -244,7 +244,7 @@ export function ChunkEditor({
                     ? 'This chunk is synced from a connector and cannot be edited'
                     : 'Read-only view'
             }
-            className='min-h-0 flex-1 resize-none border-0 bg-transparent p-6 font-sans text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-subtle)]'
+            className='mx-auto min-h-0 w-full max-w-[48rem] flex-1 resize-none border-0 bg-transparent px-8 py-6 font-sans text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-subtle)]'
             disabled={!canEdit}
             readOnly={!canEdit}
             spellCheck={false}

bun.lock

@@ -26,6 +26,10 @@
       "types": "./src/helpers.ts",
       "default": "./src/helpers.ts"
     },
+    "./media-embed": {
+      "types": "./src/media-embed.ts",
+      "default": "./src/media-embed.ts"
+    },
     "./formatting": {
       "types": "./src/formatting.ts",
       "default": "./src/formatting.ts"

packages/utils/package.json

@@ -12,6 +12,8 @@ export {
 } from './formatting.js'
 export { noop, sleep } from './helpers.js'
 export { generateId, generateShortId, isValidUuid } from './id.js'
+export type { EmbedInfo } from './media-embed.js'
+export { getEmbedInfo } from './media-embed.js'
 export {
   filterUndefined,
   isPlainRecord,

packages/utils/src/index.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest'
+import { getEmbedInfo } from './media-embed'
+
+describe('getEmbedInfo', () => {
+  it('maps YouTube watch/short/embed URLs to the embed iframe', () => {
+    const expected = { url: 'https://www.youtube.com/embed/dQw4w9WgXcQ', type: 'iframe' }
+    expect(getEmbedInfo('https://www.youtube.com/watch?v=dQw4w9WgXcQ')).toEqual(expected)
+    expect(getEmbedInfo('https://youtu.be/dQw4w9WgXcQ')).toEqual(expected)
+    expect(getEmbedInfo('https://www.youtube.com/embed/dQw4w9WgXcQ')).toEqual(expected)
+  })
+
+  it('maps Vimeo and Spotify URLs with their aspect ratios', () => {
+    expect(getEmbedInfo('https://vimeo.com/123456')).toEqual({
+      url: 'https://player.vimeo.com/video/123456',
+      type: 'iframe',
+    })
+    expect(getEmbedInfo('https://open.spotify.com/track/abc123')).toEqual({
+      url: 'https://open.spotify.com/embed/track/abc123',
+      type: 'iframe',
+      aspectRatio: '3.7/1',
+    })
+  })
+
+  it('treats bare media file extensions as native video/audio', () => {
+    expect(getEmbedInfo('https://cdn.example.com/clip.mp4')).toEqual({
+      url: 'https://cdn.example.com/clip.mp4',
+      type: 'video',
+    })
+    expect(getEmbedInfo('https://cdn.example.com/sound.mp3')).toEqual({
+      url: 'https://cdn.example.com/sound.mp3',
+      type: 'audio',
+    })
+  })
+
+  it('returns null for non-embeddable URLs', () => {
+    expect(getEmbedInfo('https://example.com/article')).toBeNull()
+    expect(getEmbedInfo('not a url')).toBeNull()
+  })
+
+  describe('Dropbox', () => {
+    it('rewrites a Dropbox video share link to a direct streamable URL', () => {
+      expect(getEmbedInfo('https://www.dropbox.com/s/abc/clip.mp4?dl=0')).toEqual({
+        url: 'https://dl.dropboxusercontent.com/s/abc/clip.mp4',
+        type: 'video',
+      })
+    })
+
+    it('handles non-www and scheme-less Dropbox hosts', () => {
+      expect(getEmbedInfo('https://m.dropbox.com/s/abc/clip.mov')).toEqual({
+        url: 'https://dl.dropboxusercontent.com/s/abc/clip.mov',
+        type: 'video',
+      })
+      expect(getEmbedInfo('dropbox.com/s/abc/clip.webm')).toEqual({
+        url: 'https://dl.dropboxusercontent.com/s/abc/clip.webm',
+        type: 'video',
+      })
+    })
+
+    it('does not apply the Dropbox direct-link rewrite to look-alike hosts', () => {
+      // Look-alike hosts fall through to the generic video handler with their
+      // original (untrusted) host intact — never rewritten as if trusted Dropbox.
+      expect(getEmbedInfo('https://dropbox.com.evil.com/clip.mp4')?.url).not.toContain(
+        'dropboxusercontent.com'
+      )
+      expect(getEmbedInfo('https://evil.com/?x=dropbox.com/clip.mp4')?.url).not.toContain(
+        'dropboxusercontent.com'
+      )
+    })
+  })
+})