Blazor Block Editor Example - Events
Block Editor Event Handling
The Block Editor provides a comprehensive event system that allows developers to track user interactions and customize workflows. Events are essential for implementing real-time updates, analytics, and advanced features.
Why events matter
Events enable you to:
- Respond to content changes instantly.
- Track user focus and engagement.
- Monitor block-level actions for better control.
- Implement custom behaviors and analytics.
Tip: Use events wisely — avoid unnecessary listeners to maintain optimal performance.
Core events
- BlockChanged: Detect when blocks are added, removed, transformed or updated.
- Focus: Track active blocks when the editor gains focus.
Event usage in the Block Editor
Events are commonly used for:
- Autosave: Trigger BlockChanged to save content periodically.
- Collaboration: Sync changes in real-time using BlockChanged.
Cases to avoid when binding events
- High-frequency events without throttling Example: Binding heavy logic to blockChange without debouncing can cause performance issues.
- Duplicate listeners: Adding multiple listeners for the same event can lead to memory leaks and unexpected behavior.
- Unnecessary global listeners: Avoid binding events that are not relevant to your workflow.
- Complex operations inside event callbacks: Heavy DOM manipulation or API calls inside frequent events can degrade the user experience.
Best practices
- Use debouncing for frequent events like blockChange.
- Remove listeners when they are no longer needed.
- Keep event callbacks lightweight and efficient.
- Combine events for analytics without impacting UX.
“Every interaction tells a story — listen carefully.”
Insert Link
Event Trace
This sample demonstrates the events raised by the Block Editor during user interactions and displays event activity in the event trace panel for inspection.
Created– Fires after the Block Editor has been fully rendered.BlockChanged– Fires when blocks are inserted, deleted, moved, or updated, providing details about the specific changes.SelectionChanged– Fires when the selection within the editor changes.Focus– Fires when the Block Editor gains focus.Blur– Fires when the Block Editor loses focus.PasteCleanupStarting– Fires before pasted content is processed in the editor.PasteCleanupCompleted– Fires after pasted content has been processed.