Configuration & API
Learn how to instantiate Edra, configure its behavior, and hook into core events like media uploads and content updates.
Instantiating the Editor
Edra provides a createEditor function that returns a fully configured TipTap instance
with all of Edra's custom extensions and event bindings attached.
The createEditor function accepts an optional EdraEditorProps object:
Editor Props Breakdown
onUpdate
This callback is fired whenever the document content changes. You can use it to sync the editor's state to your parent component, validate data, or trigger autosaves.
onFileUpload
Whenever a user pastes, drags and drops, or uses the Slash Menu to insert an Image, Video, or Audio file, Edra needs to know how to upload it to your storage provider (like AWS S3, Vercel Blob, Cloudinary, etc.).
Edra will automatically render a beautiful loading placeholder in the document while this promise resolves. Once the promise resolves with a URL string, the placeholder is replaced with the actual media block.
Note on Base64 Images
If you do not provide an onFileUpload callback, Edra will attempt to use standard base64
data URIs for images. However, this is heavily discouraged for production as it severely degrades
performance.
callAI
If you want to use the AI Assistant extension, you must provide this callback to communicate with your AI backend route (like an OpenAI streaming endpoint). Edra handles the UI and the streaming chunk injection into the document, but you must provide the network request logic.