Skip to content

Commit 4f004ad

Browse files
SenthilarasuBaluSenthilarasuBalu
committed
979389: review corrections
1 parent 05ebfbb commit 4f004ad

File tree

8 files changed

+30
-55
lines changed

8 files changed

+30
-55
lines changed

‎blazor/blockeditor/appearance.md‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ You can specify the width and height for the Block Editor component using the `W
1919
2020
@using Syncfusion.Blazor.BlockEditor;
2121
22-
<SfBlock Editor ID="blockeditor" Width="100%" Height="80vh"></SfBlock Editor>
22+
<SfBlockEditor Width="100%" Height="80vh"></SfBlockEditor>
2323
2424
// Or with specific pixel values
25-
<SfBlock Editor ID="blockeditor" Width="800px" Height="500px"></SfBlock Editor>
25+
<SfBlockEditor Width="800px" Height="500px"></SfBlockEditor>
2626
2727
```
2828

@@ -34,7 +34,7 @@ You can utilize the `ReadOnly` property to control whether the editor is in read
3434
3535
@using Syncfusion.Blazor.BlockEditor;
3636
37-
<SfBlock Editor ID="blockeditor" ReadOnly=true></SfBlock Editor>
37+
<SfBlockEditor ReadOnly=true></SfBlockEditor>
3838
3939
```
4040

@@ -46,7 +46,7 @@ You can use the `CssClass` property to customize the appearance of the Block Edi
4646
4747
@using Syncfusion.Blazor.BlockEditor;
4848
49-
<SfBlock Editor ID="blockeditor" Width="600px" Height="400px" CssClass="custom-editor-theme"></SfBlock Editor>
49+
<SfBlockEditor Width="600px" Height="400px" CssClass="custom-editor-theme"></SfBlockEditor>
5050
5151
```
5252

@@ -59,7 +59,6 @@ The following example demonstrates the usage of `Readonly` and `CssClass` proper
5959
6060
<div id="container">
6161
<SfBlockEditor @ref="BlockEditorRef"
62-
ID="blockeditor"
6362
CssClass="@CssClasses"
6463
ReadOnly="@IsReadonly"
6564
Blocks="@Blocks"
@@ -94,7 +93,6 @@ The following example demonstrates the usage of `Readonly` and `CssClass` proper
9493
{
9594
new BlockModel
9695
{
97-
ID = "title-block",
9896
BlockType = BlockType.Heading,
9997
Properties = new HeadingBlockSettings { Level = 1 },
10098
Content = new List<ContentModel>
@@ -104,7 +102,6 @@ The following example demonstrates the usage of `Readonly` and `CssClass` proper
104102
},
105103
new BlockModel
106104
{
107-
ID = "intro-block",
108105
BlockType = BlockType.Paragraph,
109106
Content = new List<ContentModel>
110107
{
@@ -113,7 +110,6 @@ The following example demonstrates the usage of `Readonly` and `CssClass` proper
113110
},
114111
new BlockModel
115112
{
116-
ID = "features-heading",
117113
BlockType = BlockType.Heading,
118114
Properties = new HeadingBlockSettings { Level = 2 },
119115
Content = new List<ContentModel>
@@ -123,7 +119,6 @@ The following example demonstrates the usage of `Readonly` and `CssClass` proper
123119
},
124120
new BlockModel
125121
{
126-
ID = "theme-list-1",
127122
BlockType = BlockType.BulletList,
128123
Content = new List<ContentModel>
129124
{
@@ -132,7 +127,6 @@ The following example demonstrates the usage of `Readonly` and `CssClass` proper
132127
},
133128
new BlockModel
134129
{
135-
ID = "readonly-info",
136130
BlockType = BlockType.Paragraph,
137131
Content = new List<ContentModel>
138132
{
@@ -263,11 +257,12 @@ The following example demonstrates the usage of `Readonly` and `CssClass` proper
263257
transition: all 0.3s ease;
264258
}
265259
266-
.custom-theme .e-block-content {
267-
color: #2d3748;
260+
.custom-theme .e-block-content,
261+
.custom-theme .e-floating-icon {
262+
color: #fff;
268263
font-weight: 500;
269264
}
270-
265+
271266
/* Readonly Mode Styling */
272267
.readonly-mode {
273268
opacity: 0.8;

‎blazor/blockeditor/editor-menus.md‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ The following example demonstrates how to customize the Slash Command menu.
4747
@using Syncfusion.Blazor.BlockEditor;
4848
4949
<div id="container">
50-
<SfBlockEditor ID="blockeditor" Blocks="@BlocksData">
50+
<SfBlockEditor Blocks="@BlocksData">
5151
<BlockEditorCommandMenu PopupHeight="400px" PopupWidth="350px" Commands="@Commands" ItemSelect="@ItemSelect" Filtering="@Filtering"></BlockEditorCommandMenu>
5252
</SfBlockEditor>
5353
</div>
@@ -57,7 +57,6 @@ The following example demonstrates how to customize the Slash Command menu.
5757
new BlockModel
5858
{
5959
BlockType = BlockType.Paragraph,
60-
ID = "demo-block",
6160
Content = new List<ContentModel>
6261
{
6362
new ContentModel
@@ -135,7 +134,7 @@ The following example demonstrates how to customize the Context menu.
135134
@using Syncfusion.Blazor.BlockEditor;
136135
137136
<div id="container">
138-
<SfBlockEditor ID="blockeditor" Blocks="@BlocksData">
137+
<SfBlockEditor Blocks="@BlocksData">
139138
<BlockEditorContextMenu Enable=true ShowItemOnClick=true Items="@CustomContextMenuItems" ItemSelect="@ItemSelect" Opening="@Opening" Closing="@Closing"></BlockEditorContextMenu>
140139
</SfBlockEditor>
141140
</div>
@@ -145,7 +144,6 @@ The following example demonstrates how to customize the Context menu.
145144
new BlockModel
146145
{
147146
BlockType = BlockType.Heading,
148-
ID = "title-block",
149147
Properties = new HeadingBlockSettings { Level = 1 },
150148
Content = new List<ContentModel>
151149
{
@@ -159,7 +157,6 @@ The following example demonstrates how to customize the Context menu.
159157
new BlockModel
160158
{
161159
BlockType = BlockType.Quote,
162-
ID = "intro-block",
163160
Content = new List<ContentModel>
164161
{
165162
new ContentModel
@@ -262,7 +259,7 @@ The following example demonstrates how to customize the Block action menu.
262259
@using Syncfusion.Blazor.BlockEditor;
263260
264261
<div id="container">
265-
<SfBlockEditor ID="blockeditor" Blocks="@BlocksData">
262+
<SfBlockEditor Blocks="@BlocksData">
266263
<BlockEditorActionMenu Enable=true PopupWidth="180px" PopupHeight="110px" EnableTooltip=true Items="@BlockActionMenuItems" ItemSelect="@ItemSelect" Opening="@Opening" Closing="@Closing"></BlockEditorActionMenu>
267264
</SfBlockEditor>
268265
</div>
@@ -272,7 +269,6 @@ The following example demonstrates how to customize the Block action menu.
272269
new BlockModel
273270
{
274271
BlockType = BlockType.Heading,
275-
ID = "title-block",
276272
Properties = new HeadingBlockSettings { Level = 1 },
277273
Content = new List<ContentModel>
278274
{
@@ -286,7 +282,6 @@ The following example demonstrates how to customize the Block action menu.
286282
new BlockModel
287283
{
288284
BlockType = BlockType.Quote,
289-
ID = "intro-block",
290285
Content = new List<ContentModel>
291286
{
292287
new ContentModel
@@ -374,7 +369,7 @@ The following example demonstrates how to customize the Inline Toolbar.
374369
@using Syncfusion.Blazor.BlockEditor;
375370
376371
<div id="container">
377-
<SfBlockEditor ID="blockeditor" Blocks="@BlocksData">
372+
<SfBlockEditor Blocks="@BlocksData">
378373
<BlockEditorInlineToolbar Enable=true PopupWidth="100px" Items="@CustomToolbarItems" ItemClick="@ItemClick"></BlockEditorInlineToolbar>
379374
</SfBlockEditor>
380375
</div>
@@ -384,7 +379,6 @@ The following example demonstrates how to customize the Inline Toolbar.
384379
new BlockModel
385380
{
386381
BlockType = BlockType.Heading,
387-
ID = "title-block",
388382
Properties = new HeadingBlockSettings { Level = 1 },
389383
Content = new List<ContentModel>
390384
{
@@ -398,7 +392,6 @@ The following example demonstrates how to customize the Inline Toolbar.
398392
new BlockModel
399393
{
400394
BlockType = BlockType.Quote,
401-
ID = "intro-block",
402395
Content = new List<ContentModel>
403396
{
404397
new ContentModel

‎blazor/blockeditor/events.md‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ The `Created` event is triggered when the Block Editor component is successfully
2020
@using Syncfusion.Blazor.BlockEditor;
2121
2222
<div id="container">
23-
<SfBlock Editor ID="blockeditor" Created="@OnCreated">
24-
</SfBlock Editor>
23+
<SfBlockEditor Created="@OnCreated"></SfBlockEditor>
2524
</div>
2625
@code {
2726
@@ -42,8 +41,7 @@ The `BlockChanged` event is triggered whenever the editor blocks are changed. Th
4241
@using Syncfusion.Blazor.BlockEditor;
4342
4443
<div id="container">
45-
<SfBlock Editor ID="blockeditor" BlockChanged="@BlockChanged">
46-
</SfBlock Editor>
44+
<SfBlockEditor BlockChanged="@BlockChanged"></SfBlockEditor>
4745
</div>
4846
@code {
4947
@@ -64,8 +62,7 @@ The `SelectionChanged` event is triggered when the user's text selection changes
6462
@using Syncfusion.Blazor.BlockEditor;
6563
6664
<div id="container">
67-
<SfBlock Editor ID="blockeditor" SelectionChanged="@SelectionChanged">
68-
</SfBlock Editor>
65+
<SfBlockEditor SelectionChanged="@SelectionChanged"></SfBlockEditor>
6966
</div>
7067
@code {
7168
@@ -86,8 +83,7 @@ The `Focus` event is triggered when the editor gains focus. This is useful for u
8683
@using Syncfusion.Blazor.BlockEditor;
8784
8885
<div id="container">
89-
<SfBlock Editor ID="blockeditor" Focus="@Focus">
90-
</SfBlock Editor>
86+
<SfBlockEditor Focus="@Focus"></SfBlockEditor>
9187
</div>
9288
@code {
9389
@@ -108,8 +104,7 @@ The `Blur` event is triggered when the editor loses focus. This is commonly used
108104
@using Syncfusion.Blazor.BlockEditor;
109105
110106
<div id="container">
111-
<SfBlock Editor ID="blockeditor" Blur="@Blur">
112-
</SfBlock Editor>
107+
<SfBlockEditor Blur="@Blur"></SfBlockEditor>
113108
</div>
114109
@code {
115110
@@ -130,8 +125,7 @@ The `PasteCleanupStarting` event is triggered before content is pasted into the
130125
@using Syncfusion.Blazor.BlockEditor;
131126
132127
<div id="container">
133-
<SfBlock Editor ID="blockeditor" PasteCleanupStarting="@PasteCleanupStarting">
134-
</SfBlock Editor>
128+
<SfBlockEditor PasteCleanupStarting="@PasteCleanupStarting"></SfBlockEditor>
135129
</div>
136130
@code {
137131
@@ -152,8 +146,7 @@ The `PasteCleanupCompleted` event is triggered after content has been successful
152146
@using Syncfusion.Blazor.BlockEditor;
153147
154148
<div id="container">
155-
<SfBlock Editor ID="blockeditor" PasteCleanupCompleted="@PasteCleanupCompleted">
156-
</SfBlock Editor>
149+
<SfBlockEditor PasteCleanupCompleted="@PasteCleanupCompleted"></SfBlockEditor>
157150
</div>
158151
@code {
159152

‎blazor/blockeditor/keyboard-shortcuts.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,7 @@ In the example below, the shortcut for bold formatting is changed to <kbd>Alt</k
8383
@using Syncfusion.Blazor.BlockEditor;
8484
8585
<div id="container">
86-
<SfBlockEditor ID="blockeditor" KeyConfig="@KeyConfig">
87-
</SfBlockEditor>
86+
<SfBlockEditor KeyConfig="@KeyConfig"></SfBlockEditor>
8887
</div>
8988
9089
@code {

‎blazor/blockeditor/paste-cleanup.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ In the below example, only `font-weight` and `font-style` styles will be retaine
2727
2828
@using Syncfusion.Blazor.BlockEditor;
2929
30-
<div class="container" style="width: 40px; margin: 50px auto;">
30+
<div class="container">
3131
<SfBlockEditor>
3232
<BlockEditorPasteCleanup AllowedStyle="@(new string[] { "font-weight", "font-style" })"></BlockEditorPasteCleanup>
3333
</SfBlockEditor>
@@ -45,7 +45,7 @@ In the below example, any `<script>` or `<iframe>` tags found in the pasted cont
4545
4646
@using Syncfusion.Blazor.BlockEditor;
4747
48-
<div class="container" style="width: 40px; margin: 50px auto;">
48+
<div class="container">
4949
<SfBlockEditor>
5050
<BlockEditorPasteCleanup AllowedStyle="@(new string[] { "font-weight", "font-style" })"></BlockEditorPasteCleanup>
5151
</SfBlockEditor>
@@ -93,7 +93,7 @@ Below example demonstrates the usage of paste settings that allows only specific
9393
9494
private List<BlockModel> blockData = new List<BlockModel>()
9595
{
96-
new BlockModel { ID = "demo-block", BlockType = BlockType.Paragraph }
96+
new BlockModel { BlockType = BlockType.Paragraph }
9797
};
9898
9999
private BlockEditorPasteCleanup pasteSettings = new BlockEditorPasteCleanup()
@@ -169,7 +169,7 @@ By default, the editor retains the formatting of pasted content (e.g., bold, ita
169169
170170
@using Syncfusion.Blazor.BlockEditor;
171171
172-
<div class="container" style="width: 40px; margin: 50px auto;">
172+
<div class="container">
173173
<SfBlockEditor>
174174
<BlockEditorPasteCleanup KeepFormat=false></BlockEditorPasteCleanup>
175175
</SfBlockEditor>
@@ -185,7 +185,7 @@ To paste content as plain text, stripping all HTML tags and inline styles, set t
185185
186186
@using Syncfusion.Blazor.BlockEditor;
187187
188-
<div class="container" style="width: 40px; margin: 50px auto;">
188+
<div class="container">
189189
<SfBlockEditor>
190190
<BlockEditorPasteCleanup PlainText=false></BlockEditorPasteCleanup>
191191
</SfBlockEditor>
@@ -230,7 +230,7 @@ Below example demonstrates the usage of paste settings that disables the keep fo
230230
231231
private List<BlockModel> blockData = new List<BlockModel>()
232232
{
233-
new BlockModel { ID = "demo-block", BlockType = BlockType.Paragraph }
233+
new BlockModel { BlockType = BlockType.Paragraph }
234234
};
235235
236236
private void HandleAfterPaste(PasteCleanupCompletedEventArgs args)
@@ -307,7 +307,7 @@ Below example demonstrates how to configure above events in the editor.
307307
308308
@using Syncfusion.Blazor.BlockEditor;
309309
310-
<div class="container" style="width: 40px; margin: 50px auto;">
310+
<div class="container">
311311
<SfBlockEditor PasteCleanupStarting="HandleBeforePaste" PasteCleanupCompleted="HandleAfterPaste">
312312
</SfBlockEditor>
313313
</div>

‎blazor/blockeditor/undo-redo.md‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,13 @@ The example below sets the undo/redo history limit to `20` actions.
3030
@using Syncfusion.Blazor.BlockEditor;
3131
3232
<div id="container">
33-
<SfBlockEditor ID="blockeditor" Blocks="@BlocksData" UndoRedoStack=20>
34-
</SfBlockEditor>
33+
<SfBlockEditor Blocks="@BlocksData" UndoRedoStack=20></SfBlockEditor>
3534
</div>
3635
@code {
3736
private List<BlockModel> BlocksData = new List<BlockModel>
3837
{
3938
new BlockModel
4039
{
41-
ID = "block-1",
4240
BlockType = BlockType.Heading,
4341
Properties = new HeadingBlockSettings { Level = 1 },
4442
Content = new List<ContentModel>
@@ -52,7 +50,6 @@ The example below sets the undo/redo history limit to `20` actions.
5250
},
5351
new BlockModel
5452
{
55-
ID = "block-2",
5653
BlockType = BlockType.Paragraph,
5754
Content = new List<ContentModel>
5855
{
@@ -65,7 +62,6 @@ The example below sets the undo/redo history limit to `20` actions.
6562
},
6663
new BlockModel
6764
{
68-
ID = "block-3",
6965
BlockType = BlockType.Paragraph,
7066
Content = new List<ContentModel>
7167
{
@@ -88,7 +84,6 @@ The example below sets the undo/redo history limit to `20` actions.
8884
}
8985
</style>
9086
91-
9287
```
9388

9489
![Blazor Block Editor Undo Redo](./images/undo-redo.png)

‎blazor/blockeditor/validation-security/cross-site-script.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ The following example shows XSS prevention removing a `<script>` tag and `onmous
2121
@using Syncfusion.Blazor.BlockEditor;
2222
2323
<div id="container">
24-
<SfBlockEditor ID="blockeditor" Blocks="@BlocksData" EnableHtmlSanitizer=true></SfBlockEditor>
24+
<SfBlockEditor Blocks="@BlocksData" EnableHtmlSanitizer=true></SfBlockEditor>
2525
</div>
2626
@code {
2727
private List<BlockModel> BlocksData = new List<BlockModel>

‎blazor/blockeditor/validation-security/read-only-mode.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ The following example demonstrates how to enable read-only mode in the Block Edi
2424
@using Syncfusion.Blazor.BlockEditor;
2525
2626
<div id="container">
27-
<SfBlockEditor ID="blockeditor" Blocks="@BlocksData" ReadOnly=true></SfBlockEditor>
27+
<SfBlockEditor Blocks="@BlocksData" ReadOnly=true></SfBlockEditor>
2828
</div>
2929
@code {
3030
private List<BlockModel> BlocksData = new List<BlockModel>

0 commit comments

Comments
 (0)