Skip to content

Commit b4870a2

Browse files
premanandh2205premanandh2205
committed
979389: Added a build-in-blocks sections in block editor
1 parent 14b0968 commit b4870a2

File tree

6 files changed

+881
-46
lines changed

6 files changed

+881
-46
lines changed

‎blazor/block-editor/build-in-blocks/build-in-blocks.md‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,32 +9,31 @@ documentation: ug
99

1010
# Blocks in Blazor BlockEditor component
1111

12-
The Block Editor component enables you to create block-based content editing solution using various types of blocks. The [Blocks] property allows you to define and manage the content structure of your editor.
12+
The Syncfusion Block Editor uses **Blocks** as the fundamental units for creating and managing content. The entire editor content is structured as a collection of these blocks, which are configured and managed through the [Blocks] property.
1313

1414
## Blocks
1515

16-
Blocks are the fundamental building elements of the Block Editor. Each block represents a distinct content unit such as a `paragraph`, `heading`, `list`, or specialized content like `code snippets` or `images`. The Block Editor organizes content as a collection of `blocks`, allowing for better structure and formatting options.
16+
Blocks are the core building elements of the editor, where each block represents a distinct content unit, such as a `Paragraph`, `Heading`, `List`, or specialized content like a `Code snippet` or `Image`. This block-based architecture makes it easy for users to rearrange, format, and manage discrete pieces of content independently.
1717

18-
You can configure blocks with various properties such as [ID], [Type], [Content], [Children] and more to create rich, structured editor.
18+
You can configure blocks with various properties such as [ID], [BlockType], [Content] to create a rich, structured editor.
1919

2020
## Block types
2121

22-
The Block Editor supports multiple block types. Each block type offers different formatting and functionality options:
23-
24-
| Built-in Block Types | Description |
25-
|-----------------------------------------|---------------------------------------------------|
26-
| Paragraph | Default block type for regular text content. |
27-
| Heading1 to Heading4 | Different levels of headings for document structure.|
28-
| Checklist | Interactive to-do lists with checkable items. |
29-
| BulletList | Unordered lists with bullet points. |
30-
| NumberedList | Ordered lists with sequential numbering. |
31-
| Code | Formatted code blocks with syntax highlighting. |
32-
| Quote | Styled block for quotations. |
33-
| Callout | Highlighted block for important information. |
34-
| Divider | Horizontal separator line. |
35-
| CollapsibleParagraph and CollapsibleHeading1-4 | Collapsible content blocks. |
36-
| Image | Block for displaying images. |
37-
| Template | Predefined custom templates. |
22+
The Block Editor supports multiple block types, each offering different formatting options and functionality:
23+
24+
| Built-in Block Types | Description |
25+
|-----------------------------------------|-----------------------------------------------------------------------------|
26+
| Paragraph | Default block type for regular text content. |
27+
| Heading1 to Heading4 | Different levels of headings for document structure. |
28+
| Table | Block for displaying data in a tabular format with rows and columns. |
29+
| Checklist | Interactive to-do lists with checkable items. |
30+
| BulletList | Unordered lists with bullet points. |
31+
| NumberedList | Ordered lists with sequential numbering. |
32+
| Quote | Styled block for quotations. |
33+
| Callout | Highlighted block for important information. |
34+
| Divider | Horizontal separator line. |
35+
| CollapsibleParagraph and CollapsibleHeading1-4 | Content blocks that can be expanded or collapsed to show or hide their children. |
36+
| Image | Block for displaying images. |
3837

3938
## Configure indent
4039

‎blazor/block-editor/build-in-blocks/embed.md‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,32 +9,44 @@ documentation: ug
99

1010
# Embed Blocks in Blazor BlockEditor component
1111

12-
Block Editor supports addition of embeds to help you organize, showcase contents and format your content effectively.
12+
The Block Editor supports the addition of embeds to help you organize and showcase visual content effectively.
1313

14-
## Image Block
14+
## Adding an Image Block
1515

1616
You can use the `Image` block to showcase an image content within your editor.
1717

18-
### Configure image block
18+
### Configure Image Block
1919

20-
You can render Image blocks by setting the [BlockType] property as `Image`. By setting the `Properties` property, you can configure the image source, allowed file types, and display dimensions etc.
20+
You can render an `Image` block by setting the [BlockType] property to `Image` in the block model. The `Properties` property allows you to configure the image source, allowed file types, display dimensions, and more.
2121

22-
The image [Properties] property supports the following options:
22+
#### Global Image Settings
23+
24+
You can configure global settings for image blocks using the `ImageBlockSettings` property in the Block Editor root configuration. This ensures consistent behavior for image uploads, resizing, and display.
25+
26+
The `ImageBlockSettings` property supports the following options:
27+
28+
| Property | Description | Default Value |
29+
|----------|-------------|---------------|
30+
| saveFormat | Specifies the format to save the image. | `Base64` |
31+
| allowedTypes | Specifies allowed image file types for upload. | `['.jpg', '.jpeg', '.png']` |
32+
| width | Specifies the default display width of the image. | `auto` |
33+
| height | Specifies the default display height of the image. | `auto` |
34+
| enableResize | Enables or disables image resizing. | `true` |
35+
| minWidth | Minimum width allowed for resizing. | `''` |
36+
| maxWidth | Maximum width allowed for resizing. | `''` |
37+
| minHeight | Minimum height allowed for resizing. | `''` |
38+
| maxHeight | Maximum height allowed for resizing. | `''` |
39+
40+
#### Configure Image Block Properties
41+
42+
The `Image` block [Properties] property supports the following options:
2343

2444
| Property | Description | Default Value |
2545
|----------|-------------|---------------|
26-
| SaveFormat | Specifies the format to save the image | Base64 |
27-
| Src | Specifies the image path | ' '|
28-
| AllowedTypes | Specifies the allowed image file types that can be uploaded | ['.jpg', '.jpeg', '.png'] |
29-
| Width | Specifies the display width of the image | ' ' |
30-
| Height | Specifies the display height of the image | ' '|
31-
| MinWidth | Specifies the minimum width of the image in pixels or as a string unit | 40|
32-
| MaxWidth | Specifies the maximum width of the image in pixels or as a string unit | ' '|
33-
| MinHeight | Specifies the minimum height of the image in pixels or as a string unit | 40|
34-
| MaxHeight | Specifies the maximum height of the image in pixels or as a string unit | ' '|
35-
| AltText | Specifies the alternative text to be displayed when the image cannot be loaded | ' '|
36-
| CssClass | Specifies one or more CSS classes to be applied to the image element | ' ' |
37-
| ReadOnly | Specifies whether the image is in read-only mode | false
46+
| src | Specifies the image path. | `''` |
47+
| width | Specifies the display width of the image. | `''` |
48+
| height | Specifies the display height of the image. | `''` |
49+
| altText | Specifies the alternative text to display when the image cannot be loaded. | `''` |
3850

3951
```cshtml
4052

‎blazor/block-editor/build-in-blocks/inline-content.md‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
---
2+
layout: post
3+
title: Inline content in Blazor BlockEditor Component | Syncfusion
4+
description: Checkout and learn about Inline content with Blazor BlockEditor component in Blazor WebAssembly App.
5+
platform: Blazor
6+
control: BlockEditor
7+
documentation: ug
8+
---
9+
10+
# Inline Content in Blazor BlockEditor component
11+
12+
In the Syncfusion Block Editor, all content is organized within blocks. Each block contains a [Content] property, which is an array of inline elements that define the text and functionality within that block.
13+
14+
Each inline element in the [Content] array is an object with properties such as [ID], [ContentType], [Content], and [Styles], allowing for granular control over its appearance and behavior.
15+
16+
## Setting content type
17+
18+
The Block Editor supports several inline content types through the `ContentType` enum, which can be set using the [ContentType] property.
19+
20+
| Built-in Content Type | Description |
21+
|------------------------|-------------------------------------|
22+
| Text | Represents plain text content. |
23+
| Link | Represents a hyperlink. |
24+
| Code | Represents a code snippet. |
25+
| Mention | Represents a user mention. |
26+
| Label | Represents a label or tag. |
27+
28+
By default, the content type is set to `Text`.
29+
30+
## Configure text content
31+
32+
To configure text content, set the `ContentType` property to `Text`. This is the default content type if none is specified.
33+
34+
### Type
35+
36+
```cshtml
37+
// Adding inline text
38+
new BlockModel
39+
{
40+
BlockType = BlockType.Paragraph,
41+
Content = {new ContentModel{ContentType = ContentType.Text, Content = "Inline text"}}
42+
}
43+
```
44+
45+
## Configure hyperlink
46+
47+
To create a hyperlink, set the `ContentType` property to `Link`. You can configure the link's URL and target using the `Properties` property.
48+
49+
### Configure link properties
50+
51+
Link settings control the behavior and properties of hyperlinks in your content. You can configure link settings using the link [Properties] property.
52+
53+
Link settings are configured through the [Properties] property, which accepts the following options:
54+
55+
| Option | Description | Default Value |
56+
| --------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- |
57+
| [url](../api/blockeditor/linkSettingsModel/#url) | Specifies the destination URL of the link. | `''` |
58+
59+
### Type & Props
60+
61+
```cshtml
62+
new BlockModel
63+
{
64+
BlockType = BlockType.Paragraph,
65+
Content = {new ContentModel{ContentType = ContentType.Link, Content = "hyperlinks", Properties = new LinkContentSettings { Url = "https://ej2.syncfusion.com/documentation"}}}
66+
}
67+
```
68+
69+
## Configure Label
70+
71+
To render labels, set the [ContentType] property to `Label`. The `Properties` property allows you to specify which label to display.
72+
73+
### Built-in items
74+
75+
The Block Editor comes with offers different built-in options. These include:
76+
77+
- **Progress**: In-progress, On-hold, Done
78+
- **Priority**: High, Medium, Low
79+
80+
### Customize label
81+
82+
You can customize the labels by using the `Properties` property with contentType `Label`.
83+
84+
### Type & Props
85+
86+
```cshtml
87+
// Adding inline label
88+
new BlockModel
89+
{
90+
BlockType = BlockType.Paragraph,
91+
Content = {new ContentModel{ContentType = ContentType.label, Content = "Name of the label"}}
92+
}
93+
```
94+
95+
### Trigger Character configuration
96+
97+
Use the [TriggerChar] property to define the character that opens the label suggestions popup. The default trigger character is `$`.
98+
99+
### Label items configuration
100+
101+
Define the available labels using the [Items] array. When a user types the trigger character, a popup will show matching items.
102+
103+
Each item in the [Items] array supports the following properties:
104+
105+
| Property | Description |
106+
| --------------------------------------------------------------------- | --------------------------------------------------- |
107+
| [ID] | A unique identifier for the label. |
108+
| [Text] | The display text for the label. |
109+
| [GroupBy] | The category name for grouping similar labels. |
110+
| [LabelColor] | The background color of the label. |
111+
| [IconCss] | A CSS class for an icon to display with the label. |
112+
113+
114+
When users type the trigger character followed by text, a popup will appear showing matching label items from which they can select. The selected label will be inserted into the content as a Label content item.
115+
116+
### Using labels with group headers
117+
118+
Labels with the same [GroupBy] value will be grouped together in the label selection popup:
119+
120+
The below sample demonstrates the customization of labels in the Block Editor.
121+
122+
## Configure mention
123+
124+
Mentions are references to users or entities that can be inserted into your content. You can configure mention content by setting the type property to `Mention`.
125+
126+
Mentions are typically triggered by the `@` character and are linked to the [Users] collection defined in the Block Editor.
127+
128+
```cshtml
129+
130+
@using Syncfusion.Blazor.BlockEditor
131+
132+
<div class="paste-blockeditor">
133+
<SfBlockEditor Blocks="BlockData" Users="@BlockUser"></SfBlockEditor>
134+
</div>
135+
136+
@code {
137+
private List<UserModel> BlockUser = new List<UserModel>
138+
{
139+
new UserModel {ID = "user1", User = "John Doe"}
140+
};
141+
private List<BlockModel> BlockData = new List<BlockModel>
142+
{
143+
new BlockModel
144+
{
145+
BlockType = BlockType.Heading,
146+
Properties= new HeadingBlockSettings {Level = 2},
147+
Content = {new ContentModel {ContentType = ContentType.Text, Content = "Different Content Types"}}
148+
},
149+
new BlockModel
150+
{
151+
BlockType = BlockType.Paragraph,
152+
Content =[
153+
new ContentModel{ContentType = ContentType.Text, Content = "The Block Editor supports various content types: "},
154+
new ContentModel{ContentType = ContentType.Link, Content = "hyperlinks", Properties = new LinkContentSettings { Url = "https://ej2.syncfusion.com/documentation/"} },
155+
new ContentModel{ContentType = ContentType.Text, Content = ", inline "},
156+
new ContentModel{ContentType = ContentType.Text, Content = "\nUser mentions like"},
157+
new ContentModel{ContentType = ContentType.Mention, Content = "user1"},
158+
new ContentModel{ContentType = ContentType.Text, Content = ", and labels such as"},
159+
new ContentModel{ContentType = ContentType.Label, Properties = new LabelContentSettings {LabelID = "label1" } },
160+
new ContentModel{ContentType = ContentType.Text, Content = "."},
161+
]
162+
}
163+
};
164+
}
165+
166+
```
167+
168+
## Applying Inline Styles
169+
170+
The Block Editor allows you to apply rich formatting to `Text`, `Link`, and `Code` elements using the [Styles] property.
171+
172+
The `styles` property supports the following options:
173+
174+
| Style Property | Description | Default Value |
175+
| ------------------------- | ------------------------------------------ | ------------- |
176+
| [Bold] | Makes the text bold. | `false` |
177+
| [italic] | Makes the text italicized. | `false` |
178+
| [underline] | Adds an underline to the text. | `false` |
179+
| [strikethrough] | Adds a line through the text. | `false` |
180+
| [color] | Sets the text color (HEX or RGBA format). | `''` |
181+
| [backgroundColor] | Sets the background color for the text. | `''` |
182+
| [superscript] | Renders the text as superscript. | `false` |
183+
| [subscript] | Renders the text as subscript. | `false` |
184+
| [uppercase] | Converts the text to uppercase. | `false` |
185+
| [lowercase] | Converts the text to lowercase. | `false` |
186+
| [inlineCode] | Converts the text to InlineCode. | `''` |
187+
188+
You can apply one or more of these styles to any supported content element for rich text formatting.
189+
190+
```cshtml
191+
192+
@using Syncfusion.Blazor.BlockEditor
193+
194+
<div class="paste-blockeditor">
195+
<SfBlockEditor Blocks="BlockData"></SfBlockEditor>
196+
</div>
197+
198+
@code {
199+
private List<BlockModel> BlockData = new List<BlockModel>
200+
{
201+
new BlockModel
202+
{
203+
BlockType = BlockType.Heading,
204+
Properties= new HeadingBlockSettings {Level = 2},
205+
Content = {new ContentModel {ContentType = ContentType.Text, Content = "Content Styling Options"}}
206+
},
207+
new BlockModel
208+
{
209+
BlockType = BlockType.Paragraph,
210+
Content =[
211+
new ContentModel{ContentType = ContentType.Text, Content = "Bold text: ", Properties = new TextContentSettings { Styles = new StyleModel { Bold = true, Color = "#1976d2"}}},
212+
new ContentModel{ContentType = ContentType.Text, Content = "This text is bold.", Properties = new TextContentSettings { Styles = new StyleModel { Bold = true}}}
213+
]
214+
},
215+
new BlockModel
216+
{
217+
BlockType = BlockType.Paragraph,
218+
Content =[
219+
new ContentModel{ContentType = ContentType.Text, Content = "Italic text: ", Properties = new TextContentSettings { Styles = new StyleModel { Bold = true, Color = "#1976d2"}}},
220+
new ContentModel{ContentType = ContentType.Text, Content = "This text is italicized.", Properties = new TextContentSettings { Styles = new StyleModel { Italic = true}}}
221+
]
222+
},
223+
new BlockModel
224+
{
225+
BlockType = BlockType.Paragraph,
226+
Content =[
227+
new ContentModel{ContentType = ContentType.Text, Content = "Text with color: ", Properties = new TextContentSettings { Styles = new StyleModel { Bold = true, Color = "#1976d2"}}},
228+
new ContentModel{ContentType = ContentType.Text, Content = "This text has custom color.", Properties = new TextContentSettings { Styles = new StyleModel { Color = "#e91e63"}}}
229+
]
230+
},
231+
new BlockModel
232+
{
233+
BlockType = BlockType.Paragraph,
234+
Content =[
235+
new ContentModel{ContentType = ContentType.Text, Content = "Text with background: ", Properties = new TextContentSettings { Styles = new StyleModel { Bold = true, Color = "#1976d2"}}},
236+
new ContentModel{ContentType = ContentType.Text, Content = "This text has background color.", Properties = new TextContentSettings { Styles = new StyleModel { BackgroundColor = "#fff9c4"}}}
237+
]
238+
},
239+
new BlockModel
240+
{
241+
BlockType = BlockType.Paragraph,
242+
Content =[
243+
new ContentModel{ContentType = ContentType.Text, Content = "Multiple styles: ", Properties = new TextContentSettings { Styles = new StyleModel { Bold = true, Color = "#1976d2"}}},
244+
new ContentModel{ContentType = ContentType.Text, Content = "This text combines multiple styles.", Properties = new TextContentSettings { Styles = new StyleModel { Bold = true, Italic = true, Underline = true, Color = "#4caf50"}}}
245+
]
246+
}
247+
};
248+
}
249+
250+
```
251+
252+
![Blazor BlockEditor Content Styles](./images/content-styles.png)

0 commit comments

Comments
 (0)