feat(note-block): expand media embed support with tuned aspect ratios

[waleedlatif1]

Summary

• Added embed support for 20+ platforms (Spotify, Vimeo, TikTok, Twitch, Instagram, Twitter, SoundCloud, Apple Music, Bandcamp, etc.)
• Tuned aspect ratios to match provider recommendations and eliminate whitespace
• Added iframe scaling to fit embeds in narrow note blocks
• Removed Kick support (unreliable third-party embeds)
• Added markdown table support

Type of Change

• New feature

Testing

Tested manually with real embed URLs

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 27, 2026 1:22am

[greptile-apps]

Greptile Overview

Greptile Summary

Expanded media embed support from YouTube-only to 20+ platforms including Spotify, Vimeo, TikTok, Twitch, Instagram, Twitter/X, SoundCloud, Apple Music, and Bandcamp. Added platform-specific aspect ratios and iframe scaling (0.78x) to properly fit embeds within narrow note blocks. Implemented markdown table rendering support.

• Fixed Bandcamp embed URL construction to properly include artist parameter
• Added support for video (<video>) and audio (<audio>) elements for direct media file URLs
• Added specialized handling for Twitch embeds with dynamic parent parameter
• Two minor syntax issues: <track> elements in video/audio tags are missing required src attributes (lines 436, 441)

Confidence Score: 4/5

• Safe to merge with minor HTML syntax fixes needed
• Well-structured feature expansion with proper embed URL handling and aspect ratio tuning. The Bandcamp URL construction issue from previous review has been addressed. Only minor HTML5 validation issues with <track> elements missing src attributes.
• No files require special attention beyond the two minor syntax fixes

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx	Expanded media embed support from YouTube-only to 20+ platforms with tuned aspect ratios and iframe scaling. Minor syntax issues with <track> elements missing required src attributes.

Sequence Diagram

sequenceDiagram
    participant User
    participant NoteBlock
    participant NoteMarkdown
    participant getEmbedInfo
    participant ReactMarkdown
    participant Browser

    User->>NoteBlock: Views note with URL
    NoteBlock->>NoteMarkdown: Renders content
    NoteMarkdown->>ReactMarkdown: Process markdown
    ReactMarkdown->>getEmbedInfo: Check if URL is embeddable
    
    alt URL matches platform pattern
        getEmbedInfo->>getEmbedInfo: Extract ID/parameters from URL
        getEmbedInfo->>getEmbedInfo: Determine embed type (iframe/video/audio)
        getEmbedInfo->>getEmbedInfo: Set platform-specific aspect ratio
        getEmbedInfo-->>ReactMarkdown: Return EmbedInfo object
        
        alt Embed type is iframe
            ReactMarkdown->>Browser: Render iframe with scaling (0.78x)
            Browser->>Browser: Apply aspect ratio and transform
            Browser-->>User: Display embedded media
        else Embed type is video
            ReactMarkdown->>Browser: Render video element
            Browser-->>User: Display video player
        else Embed type is audio
            ReactMarkdown->>Browser: Render audio element
            Browser-->>User: Display audio player
        end
    else URL is not embeddable
        getEmbedInfo-->>ReactMarkdown: Return null
        ReactMarkdown->>Browser: Render as regular link
        Browser-->>User: Display clickable link
    end

Loading

[greptile-apps]

_{4 files reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (1)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
Uses any type for component props - violates TypeScript conventions. Use proper React component prop types like React.HTMLAttributes<HTMLElement> or define specific interfaces

Context Used: Context from dashboard - TypeScript conventions and type safety (source)

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
Line: 368:390

Comment:
Uses `any` type for component props - violates TypeScript conventions. Use proper React component prop types like `React.HTMLAttributes<HTMLElement>` or define specific interfaces

**Context Used:** Context from `dashboard` - TypeScript conventions and type safety ([source](https://app.greptile.com/review/custom-context?memory=b4f0be8d-a787-4d5a-9098-a66b1449df25))

How can I resolve this? If you propose a fix, please make it concise.

[waleedlatif1]

@greptile

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

[cursor]

Dropbox URL replacement can create malformed URLs

Low Severity

The Dropbox URL transformation using replace('?dl=0', '') creates malformed URLs when additional query parameters exist. For example, a URL like dropbox.com/file.mp4?dl=0&ref=123 becomes dropbox.com/file.mp4&ref=123 with an orphaned & instead of a ?, resulting in an invalid URL that the video element cannot load correctly.

 

[cursor]

Iframe sandbox attribute removal reduces security posture

Medium Severity

The previous YouTube embed included sandbox='allow-scripts allow-same-origin allow-presentation allow-popups' which restricted iframe capabilities. The new generic iframe rendering removes this attribute entirely for all 20+ embed providers. Without the sandbox, embedded content gains unrestricted capabilities including top-frame navigation, form submission, and modal dialogs. The referrerPolicy attribute was also removed.