Media & Mermaid
Embed and configure images, videos, audio, iframes, and dynamic Mermaid diagrams directly within the editor.
Handling Uploads & Media Placeholders
Edra provides a seamless media uploading experience out of the box. When a user drags and drops
a file, pastes an image from their clipboard, or uses the Slash Command to upload a file, Edra
inserts a MediaPlaceholder node into the document.
This placeholder displays a beautiful loading animation while your onFileUpload callback (configured during createEditor) processes the file. Once the upload
resolves, the placeholder is automatically swapped out for the appropriate media node (Image,
Video, or Audio).
Images
Edra extends standard images using the custom ImageExtended extension. This includes
sizing wrappers, captions, alignment toggles (left, right, center), and resizing handles.
Videos & Audio
Videos are rendered using the VideoExtended wrapper, and audio is rendered using
the custom Audio extension. Both support captions and alignment.
Iframes & HTML Pasting
Edra allows you to embed YouTube, Vimeo, Spotify, Google Maps, and other external services
natively using the Iframe extension.
Pasting HTML Embeds
Thanks to the built-in iframePasteHandler, users can simply copy the raw HTML
embed code provided by platforms like YouTube (e.g., <iframe src="..."></iframe>) and paste it directly into the editor.
Edra will intercept the paste, parse the HTML, and automatically convert it into a functional
iframe block!
Mermaid Diagrams
Edra contains native support for rendering Mermaid diagrams. Create a code block and set the
language identifier to mermaid to instantly render full diagram schemas in the page: