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,