Merge pull request #4638 from Syncfusion-Content/hotfix/hotfix-v26.1.35

DOCINFRA-2341_merged_using_automation

Author: SyncfusionBuild

blazor-toc.html

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes  
+description: Essential Studio for Blazor Weekly Nuget Release Release Notes  
+platform: Blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor  Release Notes  
+
+{% include release-info.html date="July 16, 2024"  version="v26.1.42" %} 
+
+{% directory path: _includes/release-notes/v26.1.42 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

blazor/Release-Notes/26.1.42.md

@@ -85,6 +85,48 @@ Error Correction Level Table
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNBKCVCzzDcveinV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+## QR code with logo
+
+The QR Code component supports embedding a logo image using the [ImageSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeLogo.html#Syncfusion_Blazor_BarcodeGenerator_QRCodeLogo_ImageSource) property within the [QRCodeLogo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeLogo.html) element. This property sets the logo image in the center of the QR code. By default, the logo image is positioned at one-third of the QR code's size. Therefore, adjusting the size of the QR code will proportionally scale the logo image.
+
+Advantages of Image QR Codes
+
+* Enhanced Brand Identity: A QR code with an image allows businesses to integrate their logos or brand elements directly into the QR code. This enhances brand consistency and recognition, making it more memorable for users when they interact with the QR code.
+
+* Increased User Interaction: An image QR code can convey messages, showcase products, or provide information more effectively than plain text or URLs. This visual approach can significantly boost user engagement and make the content more compelling and memorable.
+
+* Comprehensive Visual Content: An image QR code generator enables the sharing of high-resolution images, infographics, diagrams, or product photos. This is particularly beneficial in art-related contexts where visual content is crucial for effective communication.
+
+These benefits illustrate how an image QR code converter can enhance the effectiveness and impact of QR codes in various domains, from marketing to education and beyond.
+
+The following code example demonstrates how to generate a QR barcode with a logo positioned at the center of it.
+
+```cshtml
+@using Syncfusion.Blazor.BarcodeGenerator
+
+<SfQRCodeGenerator Width="200px" Height="150px" Value="https://www.syncfusion.com/blazor-components/blazor-barcode">
+    <QRCodeGeneratorDisplayText Visibility="false"></QRCodeGeneratorDisplayText>
+    <QRCodeLogo ImageSource="images/barcode/syncfusion.png"></QRCodeLogo>
+</SfQRCodeGenerator>
+```
+
+![QR barcode with logo in Blazor Barcode](images/blazor-barcode-qrcode-with-logo.png)
+
+>**Note:** The [Error correction level](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.ErrorCorrectionLevel.html) is not taken into account when rendering the logo image inside the QR code.
+
+### Customizing the logo size
+
+The size of the logo can be changed using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeLogo.html#Syncfusion_Blazor_BarcodeGenerator_QRCodeLogo_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeLogo.html#Syncfusion_Blazor_BarcodeGenerator_QRCodeLogo_Width) properties of the QR code generator. The image size should be equal to or less than 30% of the QR code's size. If the specified size exceeds 30% of the QR code's size, the QR code may not be scanned properly. Therefore, the lesser value between 30% of the QR code's size and the specified size will be used for rendering.
+
+```cshtml
+@using Syncfusion.Blazor.BarcodeGenerator
+
+<SfQRCodeGenerator Width="200px" Height="200px" Value="https://www.syncfusion.com/blazor-components/blazor-barcode">
+    <QRCodeLogo Width="30" Height="30" ImageSource="images/barcode/syncfusion.png"></QRCodeLogo>
+</SfQRCodeGenerator>
+```
+>**Note:** The default value is one-third of the QR code size.
+
 ## Event
 
 [OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_OnValidationFailed) event in the [SfQRCodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html) is used to trigger when the input is an invalid string.
@@ -101,4 +143,4 @@ Error Correction Level Table
     }
 }
 
-```
+```

blazor/barcode/images/blazor-barcode-qrcode-with-logo.png

@@ -63,12 +63,12 @@ The following example code illustrates how to enforce and stop protection in Doc
 
 @code {
     SfDocumentEditorContainer container;
-    protected void protectDocument(object args)
+    protected async void protectDocument(object args)
     {
         //enforce protection
-        container.DocumentEditor.Editor.EnforceProtectionAsync("123", ProtectionType.CommentsOnly);
+        await container.DocumentEditor.Editor.EnforceProtectionAsync("123", ProtectionType.CommentsOnly);
         //stop the document protection
-        container.DocumentEditor.Editor.StopProtectionAsync("123");
+        await container.DocumentEditor.Editor.StopProtectionAsync("123");
     }
 }
 ```

blazor/barcode/qrcodegenerator.md

@@ -0,0 +1,28 @@
+---
+layout: post
+title: Unsupported file in Blazor DocumentEditor Component | Syncfusion
+description: Checkout and learn here all about Unsupported file in Syncfusion Blazor DocumentEditor component and more.
+platform: Blazor
+control: DocumentEditor
+documentation: ug
+---
+
+# Why Do I Get the Unsupported Warning Message When Opening a Document?
+
+If you receive an "The file format you have selected isn't supported. Please choose valid format." message when opening a document in the Document Editor, it typically indicates that the document format is not supported by the current version of the Document Editor. Here are some common reasons for this warning:
+1.	Unsupported File Format: The document you are trying to open might be in a format that the Document Editor does not support. Ensure you are using a supported format, such as SFDT.
+2.	Corrupted Document: The document file might be corrupted or improperly formatted. Try opening a different document to see if the issue persists.
+To avoid this warning, always use the recommended document formats and features supported by the Document Editor. 
+
+Document Editor supports the following file formats:
+•	Word Document (*.docx)
+•	Syncfusion Document Text (*.sfdt)
+•	Plain Text (*.txt)
+•	Word Template (*.dotx)
+•	HyperText Markup Language (*.html)
+•	Rich Text Format (*.rtf)
+•	Word XML Document(*.xml)
+•	Word 97-2003 Template (*.dot)
+•	Word 97-2003 Document (*.doc)
+
+By using these supported formats, you can ensure compatibility and avoid unsupported warning messages when opening documents in the Document Editor.

blazor/document-editor/comments.md

@@ -18,8 +18,8 @@ You can add a field to the document by using [`InsertFieldAsync`](https://help.s
 The following example code illustrates how to insert merge field programmatically by providing the field code and field result.
 
 ```csharp
-string fieldCode = 'MERGEFIELD  First Name  \\* MERGEFORMAT ';
-string fieldResult = '«First Name»';
+string fieldCode = "MERGEFIELD  First Name  \\* MERGEFORMAT ";
+string fieldResult = "«First Name»";
 await container.DocumentEditor.Editor.InsertFieldAsync(fieldCode, fieldResult);
 ```
 
@@ -64,10 +64,10 @@ You can modify the field code and field result of the current selected field by
 FieldInfo fieldInfo = await container.DocumentEditor.Selection.GetFieldInfoAsync();
 
 //Modify field code
-fieldInfo.Code = 'MERGEFIELD  First Name  \\* MERGEFORMAT ';
+fieldInfo.Code = "MERGEFIELD  First Name  \\* MERGEFORMAT ";
 
 //Modify field result
-fieldInfo.Result = '«First Name»';
+fieldInfo.Result = "«First Name»";
 
 //Modify field code and result of the current selected field.
 await container.DocumentEditor.Editor.SetFieldInfoAsync(fieldInfo);

blazor/document-editor/faq/unsupported-file-format.md

@@ -18,15 +18,15 @@ Inject the [`EditorHistory`](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 ```cshtml
 @using Syncfusion.Blazor.DocumentEditor
 
-<SfDocumentEditor @ref="documentEditor" IsReadOnly=false EnableEditor=true EnableSelection=true>
+<SfDocumentEditorContainer @ref="container" EnableToolbar=true >
     <DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
-</SfDocumentEditor>
+</SfDocumentEditorContainer>
 
 @code {
-    SfDocumentEditor documentEditor;
+    SfDocumentEditorContainer container;
     protected void OnLoad(object args)
     {
-        documentEditor.EnableEditorHistory = true;
+        container.DocumentEditor.EnableEditorHistory = true;
     }
 }
 ```

blazor/document-editor/fields.md

@@ -0,0 +1,33 @@
+---
+layout: post
+title: Add save button in Blazor DocumentEditor Component | Syncfusion
+description: Learn how to add a save button to the toolbar in the Syncfusion Blazor DocumentEditor component and much more.
+platform: Blazor
+control: DocumentEditor
+documentation: ug
+---
+# Add save button in Blazor Document editor toolbar
+
+## To add a save button to the existing toolbar in DocumentEditorContainer
+
+[`Blazor Word Processor`](https://www.syncfusion.com/blazor-components/blazor-word-processor) component (a.k.a Document Editor) component  allows you to add a new button to the existing items in a toolbar using [`CustomToolbarItemModel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.CustomToolbarItemModel.html) and with existing items in [`toolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditorContainer.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditorContainer_ToolbarItems) property. Newly added item click action can be defined in [`toolbarclick`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorContainerEvents.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorContainerEvents_OnToolbarClick).
+
+```csharp
+<SfDocumentEditorContainer @ref="container" EnableToolbar=true ToolbarItems="@Items" ToolbarClick="OnToolbarClick"> 
+</SfDocumentEditorContainer> 
+ 
+@code { 
+    SfDocumentEditorContainer container; 
+    List<Object> Items = new List<Object> { new CustomToolbarItemModel() {"New","Open", Id = "save", Text = "Save" }, "Separator", "Undo", "Redo", "Separator", "Image", "Table", "Hyperlink", "Bookmark", "TableOfContents", "Separator", "Header", "Footer", "PageSetup", "PageNumber", "Break", "InsertFootnote", "InsertEndnote", "Separator", "Find", "Separator", "Comments", "TrackChanges", "Separator", "LocalClipboard", "RestrictEditing", "Separator", "FormFields", "UpdateFields" }; 
+
+    private void OnToolbarClick(ClickEventArgs args)
+    {
+        if (args.Item.Id == "save")
+        {
+            container.DocumentEditor.SaveAsync("sample", SaveFormat.Docx);
+        }
+    }
+};
+```
+
+N> Default value of `ToolbarItems` are `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields' ]`.

blazor/document-editor/history.md

@@ -0,0 +1,77 @@
+---
+layout: post
+title: Auto save document in Blazor DocumentEditor Component | Syncfusion
+description: Learn here all about Auto save document in document editor in Syncfusion Blazor DocumentEditor component and much more.
+platform: Blazor
+control: DocumentEditor
+documentation: ug
+---
+# Auto save document in Blazor Document editor component
+
+In this article, we are going to see how to autosave the document to server. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals.
+
+The following example illustrates how to auto save the document in server.
+
+* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as Docx format to server-side using [`SaveAsBlobAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_SaveAsBlobAsync_System_Nullable_Syncfusion_Blazor_DocumentEditor_FormatType__) method.
+
+```cshtml
+@using Syncfusion.Blazor.DocumentEditor
+@using System.IO
+@using System.Timers
+
+<SfDocumentEditorContainer @ref="container" EnableToolbar="true">
+<DocumentEditorContainerEvents ContentChanged="OnContentChange"></DocumentEditorContainerEvents>
+</SfDocumentEditorContainer>
+
+@code {
+    SfDocumentEditorContainer container;
+    private Timer autoSaveTimer;
+    private bool isDocumentChanged = false;
+
+    protected override void OnInitialized()
+    {
+        // Set up the timer to trigger the callback every 1 second (1000 milliseconds)
+        autoSaveTimer = new Timer(AutoSaveDocument, null, 1000, 1000);
+    }
+
+    private void OnContentChange()
+    {
+        isDocumentChanged = true; // Mark the document as changed
+    }
+
+    private async void AutoSaveDocument(object state)
+    {
+        if (isDocumentChanged)
+        {
+            await OnSave();
+            isDocumentChanged = false; // Reset the flag after saving
+        }
+    }
+
+    public async Task OnSave()
+    {
+        SfDocumentEditor editor = container.DocumentEditor;
+        string base64Data = await editor.SaveAsBlobAsync(FormatType.Docx);
+        byte[] data = Convert.FromBase64String(base64Data);
+        // To observe the memory go down, null out the reference of base64Data variable.
+        base64Data = null;
+        // Word document file stream
+        Stream stream = new MemoryStream(data);
+        // To observe the memory go down, null out the reference of data variable.
+        data = null;
+        using (var fileStream = new FileStream(@"wwwroot/data/GettingStarted.docx", FileMode.Create, FileAccess.Write))
+        {
+            // Saving the new file in root path of application
+            await stream.CopyToAsync(fileStream);
+        }
+        stream.Close();
+        // To observe the memory go down, null out the reference of stream variable.
+        stream = null;
+    }
+
+    public void Dispose()
+    {
+        autoSaveTimer?.Dispose(); // Dispose of the timer when the component is disposed
+    }
+}
+```