Blazor Block Editor Example - Overview
Welcome to the Block Editor Demo!
Welcome to the Block Editor! This demo highlights all supported block types and inline formatting options. Each section below explains the purpose of the block and shows how it appears in the editor.
Paragraph
Paragraph blocks are used for writing regular text. They are the most common block type and support inline formatting to enhance readability and emphasis.
Inline Formatting
Use bold, italic, and underline for emphasis; or strikethrough to indicate removals or outdated text.
Math and chemistry: E = mc2, H2O - with superscript and subscript. Add inline code const x = 10; and helpful links for quick references.
Transform text to uppercase or LOWERCASE. Add color or background highlights as needed. Mention
Andrews
Table
Table blocks organize data in rows and columns for easy comparison or presentation. They support headers and basic styling
| Name | Age | Gender | Occupation | Mode of Transport |
|---|---|---|---|---|
Selma Rose | 30 | Female | Engineer | 🚴 |
Robert | 28 | Male | Graphic Designer | 🚗 |
William | 35 | Male | Teacher | 🚗 |
Laura Grace | 42 | Female | Doctor | 🚌 |
Andrew James | 45 | Male | Lawyer | 🚕 |
Image Block
Image blocks allow you to insert visuals to support or enhance your content.
Checklist
Checklists help track tasks or steps:
- Apply inline formatting
- Invite reviewer
Charlie
- Publish guide and share the link
Lists
Lists organize information clearly:
- Unordered List
- Concise points for quick scanning
- Great for features or tips
- Easy to reorder and nest
- Ordered List
- Start a new document
- Add structure with headings
- Fill in content and review
Headings
Headings help organize content into sections. Use different levels (h1, h2, h3 or h4) to create a hierarchy:
Quote
Use quote blocks to emphasize important statements or references.
“Quotes are perfect for highlighting key messages or testimonials.”
Callout
Callouts are great for tips, warnings, or notes that need attention.
Tip: Use the / command to quickly insert blocks like headings, lists, or code.
Toggle Block
Toggle blocks are interactive and help manage long or optional content.
Click to expand
Divider
Dividers are horizontal lines used to separate sections or indicate a break in content.
Insert Link
This sample demonstrates the comprehensive features of the Block Editor component, showcasing various block types, content formatting options, and interactive editing capabilities.
The Block Editor is a modern, block-based content editing solution that offers a powerful and intuitive interface for creating structured documents using discrete, interactive content blocks. It enables users to organize content in a flexible, modular approach.
Key features demonstrated in this sample:
- Block types:
Heading1-4,Paragraph,BulletList,NumberedList,Checklist,Quote,Callout,Divider,ToggleParagraph, and more. - Text formatting:
Bold,Italic,Underline,Strikethrough,Uppercase, and other additional styling options - Quick commands: Interactive
Slash ("/") commandsfor quick block insertion and transformation. - Hierarchical organization with expandable
Toggle Blocks. - Support for inline special content such as
Links,Code,MentionsandLabels. - Interactive
mention ("@") optionsfor quickly tagging users - Interactive
label ("$") optionsfor quick insertion of the labels. - Block manipulation with
Action menu, allowing move, delete, and duplicate operations. - Keyboard shortcuts for fast, accessible editing workflows.