Skip to content

Commit 35b84ba

Browse files
kmkrish001kmkrish001
authored
Merge branch 'development' into 1033426-contextmenu
2 parents 8122f24 + a47f3ba commit 35b84ba

100 files changed

Lines changed: 1960 additions & 1579 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎blazor-toc.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -502,6 +502,9 @@
502502
<li>
503503
<a href="/blazor/common/integration/blazor-azure-functions">Blazor with Azure Functions</a>
504504
</li>
505+
<li>
506+
<a href="/blazor/common/integration/blazor-with-github-codespaces">Blazor with Github Codespaces</a>
507+
</li>
505508
</ul>
506509
</li>
507510
<li>Data Access Patterns

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

Lines changed: 91 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,15 @@ You can render an [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
2121

2222
#### Global image settings
2323

24-
You can configure global settings for image blocks using the [BlockEditorImageBlock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.BlockEditorImageBlock.html) tag directive. This ensures consistent behavior for all images in the editor.
24+
You can configure global settings for image blocks using the [BlockEditorImageBlock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.BlockEditorImageBlock.html) tag directive. This ensures consistent behavior for image uploads, resizing, and display.
2525

2626
The [BlockEditorImageBlock](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.BlockEditorImageBlock.html) tag directive supports the following options:
2727

2828
| Property | Description | Default Value |
2929
|----------|-------------|---------------|
30+
| SaveUrl | Specifies the server endpoint URL for uploading images. When empty, server upload functionality is disabled. | `''` |
31+
| MaxFileSize | Specifies the maximum file size allowed for image uploads in bytes. Files exceeding this size will be rejected during validation. | `30000000` |
32+
| Path | Specifies the base path for storing and displaying images on the server. | `''` |
3033
| SaveFormat | Specifies the format to save the image. | `Base64` |
3134
| AllowedTypes | Specifies allowed image file types for upload. | `['.jpg', '.jpeg', '.png']` |
3235
| Width | Specifies the default display width of the image. | `auto` |
@@ -48,6 +51,38 @@ The [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.
4851
| Height | Specifies the display height of the image. | `''` |
4952
| AltText | Specifies the alternative text to display when the image cannot be loaded. | `''` |
5053

54+
## Block type & properties
55+
56+
The following example demonstrates how to configure an `Image` block.
57+
58+
{% tabs %}
59+
{% highlight razor tabtitle="razor" %}
60+
61+
@using Syncfusion.Blazor.BlockEditor
62+
63+
<SfBlockEditor Blocks="BlockData"></SfBlockEditor>
64+
65+
@code {
66+
private List<BlockModel> BlockData = new()
67+
{
68+
new BlockModel
69+
{
70+
BlockType = BlockType.Image,
71+
Properties = new ImageBlockSettings
72+
{
73+
Src = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png",
74+
Width = "200px",
75+
Height = "100px",
76+
AltText = "Sample image"
77+
}
78+
}
79+
};
80+
}
81+
82+
{% endhighlight %}
83+
{% endtabs %}
84+
85+
This sample demonstrates the configuration of the `Image` block in the Block Editor.
5186
```cshtml
5287
5388
@using Syncfusion.Blazor.BlockEditor
@@ -76,8 +111,62 @@ The [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.
76111

77112
![Blazor Block Editor Image Block](./../images/image-block.webp)
78113

114+
## Uploading images from local machine
115+
116+
To insert an image from your local machine, render the `Image` block. A popup will appear where you can browse and select an image to insert.
117+
118+
## Saving images to server
119+
120+
Upload the selected image to a server endpoint using the `SaveUrl` property. Use the `Path` property to specify the storage location and `SaveFormat` to define whether the image is saved as Blob or Base64.
121+
122+
{% tabs %}
123+
{% highlight razor tabtitle="razor" %}
124+
125+
<SfBlockEditor Blocks="BlockData">
126+
<BlockEditorImageBlock SaveUrl="/api/upload" Path="/images/uploads" SaveFormat="SaveFormat.Blob" />
127+
</SfBlockEditor>
128+
129+
{% endhighlight %}
130+
{% endtabs %}
131+
132+
## Image upload controller sample
133+
134+
```csharp
135+
[AcceptVerbs("Post")]
136+
public void SaveImage(IList<IFormFile> UploadFiles)
137+
{
138+
try
139+
{
140+
foreach (IFormFile file in UploadFiles)
141+
{
142+
string path = Path.Combine("wwwroot/Uploads", file.FileName);
143+
144+
if (!Directory.Exists("wwwroot/Uploads"))
145+
{
146+
Directory.CreateDirectory("wwwroot/Uploads");
147+
}
148+
149+
using (FileStream fs = System.IO.File.Create(path))
150+
{
151+
file.CopyTo(fs);
152+
fs.Flush();
153+
}
154+
}
155+
Response.StatusCode = 200;
156+
}
157+
catch (Exception)
158+
{
159+
Response.StatusCode = 204;
160+
}
161+
}
162+
```
163+
## Inserting images from web URLs
164+
165+
To insert an image from an online source, render the `Image` block. Switch to the `Embed Link` tab containing an input field where you can provide the image URL from the web to insert the image.
166+
167+
79168
## Image resizing
80169

81170
Block Editor has a built-in image inserting support. The resize points will be appearing on each corner of image when focus. So, users can resize the image using mouse points or thumb through the resize points easily. Also, the resize calculation will be done based on aspect ratio.
82171

83-
![Blazor Block Editor image resize](./../images/image-resize.webp)
172+
![Blazor Block Editor image resize](./../images/image-resize.webp)

‎blazor/block-editor/editor-menus.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -367,6 +367,92 @@ The Inline Toolbar includes the following built-in formatting options:
367367
- **Text Color**: Changes the color of the selected text.
368368
- **Background Color**: Changes the background color of the selected text.
369369

370+
371+
## Optional items
372+
373+
The inline toolbar can handle custom items like `Transform`, `InlineCode`, and `Link` by passing an array of string values in the `Items` property of `InlineToolbarSettings`.
374+
375+
### Transform block options
376+
377+
The inline toolbar now includes `transform` options to quickly convert blocks between different types. You can use the `TransformSettings` property to handle customization of the transform menu in the inline toolbar. This allows you to configure available block transformations, define custom menu items with text and icons.
378+
379+
### Built-in default transform block options
380+
381+
Below are the built-in transform block options available:
382+
383+
| Built-in transform Block Types |
384+
|--------------------------------|
385+
| Paragraph |
386+
| Heading1 to Heading4 |
387+
| Checklist |
388+
| BulletList |
389+
| NumberedList |
390+
391+
> For blocks such as `code`, `callout`, `quote`, `divider`, `image`, `table`, and `collapsible`, transform options are not available. Instead, they will be added as a new block.
392+
393+
### Events
394+
395+
The following events are available for the transform toolbar item menu:
396+
397+
| Name | Args | Description |
398+
|------|------|-------------|
399+
| ItemSelect | TransformItemSelectEventArgs | Triggers when a command item is clicked. |
400+
401+
### Inline code support
402+
403+
Added inline code formatting in the toolbar, with light syntax highlighting and seamless integration with other text formatting options.
404+
405+
### Inline link support
406+
407+
Added inline link formatting in the toolbar. By clicking the link item, a dialog opens and, after proper value input, the link can be inserted into the text.
408+
409+
The following example demonstrates how to customize the transform, inline code, and link items.
410+
411+
```cshtml
412+
@using Syncfusion.Blazor.BlockEditor
413+
@using Syncfusion.Blazor.BlockEditor.Models
414+
<div id="container">
415+
<SfBlockEditor Blocks="@blockData">
416+
<BlockEditorTransform Items="@TransformItems"></BlockEditorTransform>
417+
<BlockEditorInlineToolbar Items="@InlineToolbarOptions"></BlockEditorInlineToolbar>
418+
</SfBlockEditor>
419+
</div>
420+
@code {
421+
private List<BlockModel> blockData = new()
422+
{
423+
new BlockModel
424+
{
425+
BlockType = BlockType.Paragraph,
426+
Content = new()
427+
{
428+
new ContentModel
429+
{
430+
ContentType = ContentType.Text,
431+
Content = "Sample text for inline toolbar demo."
432+
}
433+
}
434+
}
435+
};
436+
private List<InlineToolbarItemModel> InlineToolbarOptions = new()
437+
{
438+
new InlineToolbarItemModel { Command = CommandName.Transform },
439+
new InlineToolbarItemModel { Command = CommandName.Bold },
440+
new InlineToolbarItemModel { Command = CommandName.Italic },
441+
new InlineToolbarItemModel { Command = CommandName.InlineCode },
442+
new InlineToolbarItemModel { Command = CommandName.Link }
443+
};
444+
private List<TransformItemModel> TransformItems = new()
445+
{
446+
new TransformItemModel { ID="para" , Type = BlockType.Paragraph, IconCss = "e-icons e-be-paragraph", Label = "Paragraph", Tooltip="Paragraph block" },
447+
new TransformItemModel { ID="heading1", Type = BlockType.Heading, IconCss = "e-icons e-be-h1", Label ="Heading 1", Tooltip="Heading block" },
448+
new TransformItemModel { ID="checklist" ,Type = BlockType.Checklist, IconCss = "e-icons e-check-box", Label= "CheckList", Tooltip="CheckList Block"},
449+
new TransformItemModel { ID="bullet" ,Type = BlockType.BulletList, IconCss = "e-icons e-list-unordered", Label="BulletList", Tooltip="BulletList Block" },
450+
new TransformItemModel { ID="number" ,Type = BlockType.NumberedList, IconCss = "e-icons e-list-ordered", Label="NumberList",Tooltip="NumberList Block" }
451+
};
452+
}
453+
```
454+
455+
370456
### Customize inline toolbar
371457

372458
Use the [BlockEditorInlineToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BlockEditor.BlockEditorInlineToolbar.html) tag directive to customize the Inline Toolbar by adding or removing formatting options based on application needs.

‎blazor/color-picker/getting-started-with-server-app.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
168168

169169
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor ColorPicker component in the default web browser.
170170

171-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.webp)" %}
171+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrHjdsEfhSURByW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.webp)" %}
172172

173173
N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ColorPicker).
174174

‎blazor/color-picker/getting-started-with-web-app.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
176176

177177
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor ColorPicker component in the default web browser.
178178

179-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.webp)" %}
179+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrHjdsEfhSURByW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.webp)" %}
180180

181181
N> You can also explore our [Blazor ColorPicker example](https://blazor.syncfusion.com/demos/colorpicker/default-functionalities) that shows how to render and configure the ColorPicker.
182182

‎blazor/color-picker/getting-started.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ Add the Blazor Color Picker component in the **~/Pages/Index.razor** file.
157157

158158
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Blazor Color Picker component in the default web browser.
159159

160-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Color Picker component](./images/blazor-colorpicker-component.webp)" %}
160+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrHjdsEfhSURByW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Color Picker component](./images/blazor-colorpicker-component.webp)" %}
161161

162162
## See also
163163

‎blazor/color-picker/how-to/customize-color-picker.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ By default, the palette renders with a set of predefined colors. To load custom
7777
7878
```
7979

80-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.webp)" %}
80+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLnNHMEzLEVCQuQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.webp)" %}
8181

8282
## Hide input area from picker
8383

@@ -91,7 +91,7 @@ In the following sample, the Color Picker is rendered without the input area.
9191
<h4>Choose a color</h4>
9292
<SfColorPicker ModeSwitcher="false" CssClass="e-hide-value"></SfColorPicker>
9393
```
94-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMLLwqoJqULKi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Input Area in Blazor ColorPicker](./../images/blazor-colorpicker-hide-input.webp)" %}
94+
{% previewsample "https://blazorplayground.syncfusion.com/embed/htVdXRCYTUXMFhPG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Hide Input Area in Blazor ColorPicker](./../images/blazor-colorpicker-hide-input.webp)" %}
9595

9696
## Custom handle
9797

@@ -123,4 +123,4 @@ The following sample shows the customized Color Picker handle.
123123
</style>
124124
125125
```
126-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.webp)" %}
126+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLdXHMaJUDvPXqx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.webp)" %}

‎blazor/color-picker/how-to/no-color-support.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ Enable the built-in no color tile by setting the [NoColor](https://help.syncfusi
4040
</style>
4141
4242
```
43-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.webp)" %}
43+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVnDHCkJAcgsVVU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.webp)" %}
4444

4545
> If the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property is enabled, make sure to disable the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property.
4646
@@ -128,4 +128,4 @@ The following example demonstrates a custom no color option alongside a palette
128128
</style>
129129
130130
```
131-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAsLLwAyxsVKHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom No Color](./../images/blazor-colorpicker-custom-nocolor.webp)" %}
131+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBHDdCkfAwPuRgM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor ColorPicker with Custom No Color](./../images/blazor-colorpicker-custom-nocolor.webp)" %}

‎blazor/color-picker/how-to/render-palette-alone.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,6 @@ In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor
1919
<h4>Choose a color</h4>
2020
<SfColorPicker Mode="ColorPickerMode.Palette" ModeSwitcher="false" ShowButtons="false"></SfColorPicker>
2121
```
22-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.webp)" %}
22+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrnDnskffXetUxr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.webp)" %}
2323

2424
N> To display the palette embedded in the page instead of in a popup, set `Inline="true"`. To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'.

‎blazor/color-picker/images/blazor-colorpicker-component.webp‎

-9.97 KB
Loading

0 commit comments

Comments
 (0)