From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
  • Components
    • AI Menu
    • AI Toolbar Button
    • Align Toolbar Button
    • Block Menu
    • Import Toolbar Button
    • Export Toolbar Button
    • Caption
    • Font Color Toolbar Button
    • Comment Toolbar Button
    • Block Discussion
    • Cursor Overlay
    • Drag and Drop
    • Editor
    • Select Editor
    • Emoji Toolbar Button
    • Fixed Toolbar Buttons
    • Fixed Toolbar List Buttons
    • Fixed Toolbar
    • Floating Toolbar Buttons
    • Floating Toolbar Classic Buttons
    • Floating Toolbar
    • Copilot
    • History Toolbar Button
    • List Toolbar Button
    • Indent Toolbar Buttons
    • Inline Combobox
    • Insert Toolbar Button
    • Insert Toolbar Classic Button
    • Line Height Toolbar Button
    • Link Floating Toolbar
    • Link Toolbar Button
    • List Toolbar Buttons
    • Mark Toolbar Button
    • Media Toolbar
    • Media Toolbar Button
    • Media
    • Mode Toolbar Button
    • More Toolbar Button
    • Resize Handle
    • Table Toolbar Button
    • Toggle Toolbar Button
    • Turn Into Toolbar Button
    • Turn Into Toolbar Classic Button
    • Remote Cursor Overlay
    • Toolbar
    • Suggestion Toolbar Button
  • Node Components
    • AI
    • List
    • Blockquote
    • Callout
    • Code Block
    • Code Drawing
    • Code
    • Column
    • Comment Leaf
    • Suggestion
    • Date
    • Math
    • Equation Toolbar Button
    • Emoji
    • Excalidraw
    • Font Size Toolbar Button
    • Footnote
    • Heading
    • Highlight
    • Horizontal Rule
    • Media Image
    • Media Preview Dialog
    • Keyboard Input
    • Link Element
    • List Nodes
    • Media Audio
    • Media Embed
    • Media File
    • Media Placeholder
    • Media Video
    • Mention
    • Paragraph
    • Search Highlight
    • Slash Command
    • Table
    • Tag
    • Table of Contents
    • Toggle

Media Placeholder

PreviousNext
Media PluginMedia Placeholder

Installation

npx shadcn@latest add @plate/media-placeholder

Examples

Loading…

Plate Plus

  • Integration with UploadThing
  • Use slash commands for quick insertion
  • Displays clickable placeholders for various media types (image, video, audio, file)
  • Opens a popover with two tabs when the placeholder is clicked:
    • Upload tab: Allows uploading local files directly
    • Embed tab: Enables pasting embed links for media content
  • Image-specific features:
    • Better loading rendering and image replacement
    • Alignment options
    • Expand/collapse view
    • Download button
  • Video-specific features:
    • Lazy load
    • Alignment options
    • Caption support
    • View original source
  • Floating toolbar appears at the top right of media elements:
    • Alignment dropdown menu
    • Caption button
    • Expand button
    • Download button
  • Beautifully crafted UI
Get the code
Media FileMedia Video