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

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,64 @@
+/**
+ * @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('renders one player per link when the same URL appears twice', () => {
+    const view = editorWith(`${YOUTUBE_LINK}${YOUTUBE_LINK}`).view
+    expect(view.dom.querySelectorAll('iframe')).toHaveLength(2)
+  })
+
+  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,88 @@
+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(paragraph: ProseMirrorNode): string | null {
+  if (paragraph.childCount === 0) return null
+  let href: string | null = null
+  let isStandalone = true
+  paragraph.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[] = []
+  /** Per-source occurrence count, so repeated embeds of the same URL get distinct, stable keys. */
+  const sourceCounts = new Map<string, number>()
+  doc.descendants((node, pos) => {
+    if (node.type.name !== 'paragraph') return undefined
+    const href = getStandaloneLinkHref(node)
+    if (href) {
+      const embedInfo = getEmbedInfo(href)
+      if (embedInfo) {
+        const source = `embed:${embedInfo.type}:${embedInfo.url}`
+        const index = sourceCounts.get(source) ?? 0
+        sourceCounts.set(source, index + 1)
+        decorations.push(
+          Decoration.widget(pos + node.nodeSize, () => createEmbedDom(embedInfo), {
+            side: 1,
+            key: `${source}:${index}`,
+          })
+        )
+      }
+    }
+    // Paragraphs hold only inline content, so there is nothing more to descend into.
+    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}

packages/utils/package.json

@@ -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/src/index.ts

@@ -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,