Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
---
layout: post
title: Change highlight color of text in Blazor PDF Viewer | Syncfusion
description: Learn how to change the highlight color of text markup highlights in the Syncfusion Blazor SfPdfViewer using the PdfViewerHighlightSettings.
description: Learn how to change the highlight color of text markup highlights in the Blazor SfPdfViewer using the PdfViewerHighlightSettings.
platform: document-processing
control: SfPdfViewer
documentation: ug
---

# Change the highlight color of the text in Blazor SfPdfViewer Component

Use the `Color` property of [PdfViewerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerHighlightSettings.html) to set the default highlight color for text markup highlights. This applies only to Highlight annotations; other text-markup types (such as Underline or Strikethrough) use their own settings.
Use the `Color` property of [PdfViewerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerHighlightSettings.html) to set the default highlight color for text markup annotations. This property applies only to Highlight annotations; other text-markup types, such as [Underline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerUnderlineSettings.html) and [Strikethrough](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerStrikethroughSettings.html), use their own settings.

The following example shows how to set the highlight color.

```cshtml
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SfPdfViewer

<!--Render simple PDF Viewer with customized highlight options-->
Expand All @@ -24,17 +23,30 @@ The following example shows how to set the highlight color.
</PdfViewerHighlightSettings>
</SfPdfViewer2>

@code{
SfPdfViewer2 PDFViewer;
//Sets the PDF document path for initial loading.
@code {
// Reference to the PDF Viewer instance.
private SfPdfViewer2 PDFViewer;

// Sets the PDF document path for initial loading.
private string DocumentPath { get; set; } = "Data/PDF_Succinctly.pdf";

//Defines the color for text markup annotations like highlight.
// Defines the color for text markup annotations like highlight.
private string highlightColor = "Green";

}
```

![Highlighted text in Blazor PDF Viewer](../images/highlighttext.png)

[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Text%20Markup/Customize%20highlight%20annotation).
> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Annotations/Text%20Markup/Customize%20highlight%20annotation)

## Supported properties

In addition to `Color`, [PdfViewerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerHighlightSettings.html) exposes additional properties such as `Opacity`, `IsLocked`, `Author`, `Subject`, and `ModifiedDate`. Refer to the [PdfViewerHighlightSettings API reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerHighlightSettings.html) for the full list.

The value assigned to `Color` also sets the default selection in the highlight tool's color picker in the toolbar.
N> Highlight annotations rendered using the default color set by `PdfViewerHighlightSettings.Color`.

## See also

- [Highlight Annotation](../annotation/text-markup/highlight-annotation)
- [Customize Annotation](../annotation/customize-annotation)
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
---
layout: post
title: Check the status of the comments in Blazor SfPdfViewer | Syncfusion
description: Learn how to retrieve the review status of comments using the Review property and GetAnnotationsAsync in the Syncfusion Blazor SfPdfViewer component.
description: Learn how to retrieve the review status of comments using the Review property and GetAnnotationsAsync in the Blazor SfPdfViewer component.
platform: document-processing
control: SfPdfViewer
documentation: ug
---

# Check the status of annotations or comments in Blazor SfPdfViewer

The Blazor SfPdfViewer component supports retrieving the review status of annotations and comments through the [Review](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.Review.html) property of the [PdfAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfAnnotation.html) class. This enables identifying the State (for example, Accepted, Rejected) and the StateModel (for example, Review, Comment) associated with each annotation.
The Blazor SfPdfViewer component supports retrieving the review status of annotations and comments through the [Review](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.Review.html) property of the [PdfAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfAnnotation.html) class. This enables identifying the `State` and the `StateModel` associated with each annotation.

The `PdfAnnotation` class represents a single annotation in the viewer. Its `Review` property exposes the review-tracking metadata. The [GetAnnotationsAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_GetAnnotationsAsync) method returns a `List<PdfAnnotation>` containing all annotations (including text markup, free text, ink, stamp, and shape annotations) that exist on the currently loaded PDF document.

The following code example shows how to obtain the review status of each annotation and log it to the browser console.

Expand All @@ -28,10 +30,10 @@ The following code example shows how to obtain the review status of each annotat
@code{
private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

SfPdfViewer2 pdfviewer;
private SfPdfViewer2 pdfviewer;

//Prints the comment status of the PDF document in console.
public async void reviewStatus()
//Prints the comment status of the PDF document in the console.
private async Task reviewStatus()
{
//Gets the annotation collection.
List<PdfAnnotation> annotationCollection = await pdfviewer.GetAnnotationsAsync();
Expand All @@ -40,9 +42,14 @@ The following code example shows how to obtain the review status of each annotat
PdfAnnotation annotation = annotationCollection[x];
//Gets the review status details of the comment.
Review review = annotation.Review;
if (review == null)
{
continue;
}
var reviewState = review.State;
var reviewStateModel = review.StateModel;
await this.JsRuntime.InvokeVoidAsync("console.log", reviewState.ToString());
await this.JsRuntime.InvokeVoidAsync("console.log",
$"State: {reviewState}, StateModel: {reviewStateModel}");
}
}
}
Expand All @@ -52,9 +59,7 @@ The following code example shows how to obtain the review status of each annotat
## See also

* [Free text annotations in Blazor SfPdfViewer Component](../annotation/free-text-annotation)

* [Ink Annotation in the Blazor SfPdfViewer component](../annotation/ink-annotation)

* [Stamp annotations in Blazor SfPdfViewer Component](../annotation/stamp-annotation)

* [Comments in Blazor SfPdfViewer Component](../annotation/comments)
* [Comments in Blazor SfPdfViewer component](../annotation/comments)
* [SfPdfViewer getting started (Web App)](../getting-started/web-app)
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: Check document editing status in Blazor PDF Viewer | Syncfusion
description: Learn how to check whether a loaded PDF is edited using the IsDocumentEdited property in the Syncfusion Blazor SfPdfViewer component.
description: Learn how to check whether a loaded PDF is edited using the IsDocumentEdited property in the Blazor SfPdfViewer component.
platform: document-processing
control: SfPdfViewer
documentation: ug
---

# Check document editing status in Blazor SfPdfViewer Component
# Check whether the loaded PDF document is edited in Blazor SfPdfViewer

Use the [IsDocumentEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_IsDocumentEdited) property to determine whether the loaded PDF has unsaved changes. A document is considered edited when users modify annotations, fill form fields, add or update signatures, apply redactions, or perform other in-viewer changes. The property returns `true` when the document has unsaved edits.

The following example shows how to check the document's edited status and log it.
The following example shows how to check the document's edited status and log it to the server console.

```cshtml
@using Syncfusion.Blazor.SfPdfViewer
Expand All @@ -25,11 +25,11 @@ The following example shows how to check the document's edited status and log it
</SfPdfViewer2>

@code{
public SfPdfViewer2 Viewer { get; set; }
private string DocumentPath { get; set; } = "Data/PDF_Succinctly.pdf";
private SfPdfViewer2 Viewer { get; set; }
private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

// Logs the document's edited status to the console (null-safe).
public void OnClick(MouseEventArgs args)
// Logs the document's edited status to the console.
private void OnClick()
{
Console.WriteLine(Viewer.IsDocumentEdited);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,51 +11,50 @@ documentation: ug

Content Security Policy (CSP) is a browser security mechanism that mitigates attacks such as cross-site scripting (XSS) and data injection by restricting the allowed sources for loaded content.

When enforcing a strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), some browser features are blocked by default. To use the Blazor `SfPdfViewer` with a strict CSP, add the directives below to your CSP meta tag.
When enforcing a strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), some browser features are blocked by default. To use the Blazor `SfPdfViewer` with a strict CSP, add the following directives to your CSP meta tag. This guidance applies to the SfPdfViewer in Blazor WebAssembly.

* The SfPdfViewer renders calculated inline styles and Base64 font icons, which are blocked by strict CSP. Allow these by adding the [`style-src 'self' 'unsafe-inline' blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives.
- The SfPdfViewer renders dynamic inline styles and base64 font icons, which are blocked by strict CSP. Allow these by adding the [`style-src 'self' 'unsafe-inline' blob: https://cdn.syncfusion.com https://fonts.googleapis.com`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data: https://fonts.googleapis.com https://fonts.gstatic.com`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives.

* The material and tailwind themes reference the Roboto font from Google Fonts, which is blocked under strict CSP. Allow it by including the Google Fonts endpoints in the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives.
- The Material and Tailwind themes reference the Roboto font from Google Fonts, which is blocked under strict CSP. Allow it by including the Google Fonts endpoints in the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives.

* The SfPdfViewer uses web workers and makes network requests. Allow these by adding [`worker-src 'self' blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src) and [`connect-src 'self' https://cdn.syncfusion.com data:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src).
- The SfPdfViewer uses web workers and makes network requests. Allow these by adding [`worker-src 'self' blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src) and [`connect-src 'self' https://cdn.syncfusion.com data:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src).

* For JavaScript execution and WebAssembly, include [`script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://cdn.syncfusion.com blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) to allow inline scripts, eval, and blob-based scripts.
- For JavaScript execution and WebAssembly, include [`script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://cdn.syncfusion.com blob:`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) to allow inline scripts, eval, and blob-based scripts.

Include the following meta tag inside the `<head>` element to address CSP violations when using the SfPdfViewer with material and tailwind themes.

{% tabs %}
{% highlight razor tabtitle="HTML" %}
{% highlight razor tabtitle="Head" %}
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
frame-src 'self' blob:;
script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://cdn.syncfusion.com blob:;
script-src 'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' https://cdn.syncfusion.com blob:;
style-src 'self' 'unsafe-inline' blob: https://cdn.syncfusion.com https://fonts.googleapis.com;
img-src 'self' blob: data:;
worker-src 'self' blob:;
connect-src 'self' https://cdn.syncfusion.com data:;
font-src 'self' data: https://fonts.googleapis.com/ https://fonts.gstatic.com/;" />
font-src 'self' data: https://fonts.googleapis.com https://fonts.gstatic.com;" />
</head>
{% endhighlight %}
{% endtabs %}

N>The `SfPdfViewer` component requires specific Content Security Policy (CSP) directives to function properly in Blazor WebAssembly applications.
- In **.NET 9.0**, include `'wasm-unsafe-eval'` in the `script-src` directive to support WebAssembly operations.
- In **.NET 8.0**, you must also include `'unsafe-eval'` in the `script-src` directive to avoid runtime errors caused by restricted dynamic JavaScript execution.
- Ensure the `worker-src` directive includes `'self'` and `blob:` to enable web worker functionality.
N>The `SfPdfViewer` component requires specific Content Security Policy (CSP) directives to function properly in Blazor WebAssembly applications.
- In **.NET 9.0**, include `'wasm-unsafe-eval'` in the `script-src` directive to support WebAssembly operations.
- In **.NET 8.0**, include `'unsafe-eval'` in the `script-src` directive (in addition to `'wasm-unsafe-eval'`) to avoid runtime errors caused by restricted dynamic JavaScript execution.
- Ensure the `worker-src` directive includes `'self'` and `blob:` to enable web worker functionality.
These directives are essential for correct behavior under strict CSP environments.


### Directive usage

| Directive | Usage |
|------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `default-src 'self';` | Sets the default policy for loading resources. `'self'` means only allow resources from the same origin (same domain). |
| `script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://cdn.syncfusion.com blob:;` | Defines where JavaScript code can come from. `'self'` allows scripts from the same origin. `'unsafe-inline'` allows inline scripts. `'wasm-unsafe-eval'` allows eval() operations for WebAssembly in **.NET 9.0**. `'unsafe-eval'` allows eval() operations for WebAssembly in **.NET 8.0**. `blob:` allows loading scripts from Blob URLs. |
| `script-src 'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' https://cdn.syncfusion.com blob:;` | Defines where JavaScript code can come from. `'self'` allows scripts from the same origin. `'unsafe-inline'` allows inline scripts. `'wasm-unsafe-eval'` allows eval() operations for WebAssembly in **.NET 9.0**. `'unsafe-eval'` allows eval() operations for WebAssembly in **.NET 8.0**. `blob:` allows loading scripts from Blob URLs. |
| `worker-src 'self' blob:;` | Controls where workers can be loaded from. `'self'` allows same-origin workers. `blob:` allows blob-based workers, common in PDF viewers and heavy JS applications. |
| `connect-src 'self' https://cdn.syncfusion.com data:;` | Controls where the application can make network requests, such as `fetch()`, XHR, and WebSockets. `'self'` restricts to the same origin, with additional allowances for Syncfusion CDN and data URLs. |
| `style-src 'self' 'unsafe-inline' blob: https://cdn.syncfusion.com https://fonts.googleapis.com;` | Defines the sources for stylesheets. `'self'` restricts to the same origin. `'unsafe-inline'` allows inline styles. `blob:` allows dynamically generated styles. External font CDNs are also allowed. |
| `font-src 'self' data: https://fonts.googleapis.com/ https://fonts.gstatic.com/;` | Controls where fonts can be loaded from. `'self'` allows local fonts. `data:` allows inline fonts (base64 embedded), and the URLs allow loading from external font CDNs. |
| `connect-src 'self' https://cdn.syncfusion.com data:;` | Controls where the application can make network requests, such as `fetch()`, XHR, and WebSockets. `'self'` restricts to the same origin, with additional allowances for the Syncfusion CDN and data URLs. |
| `style-src 'self' 'unsafe-inline' blob: https://cdn.syncfusion.com https://fonts.googleapis.com;` | Defines the sources for stylesheets. `'self'` restricts to the same origin. `'unsafe-inline'` allows inline styles. `blob:` allows dynamically generated styles. `https://cdn.syncfusion.com` and `https://fonts.googleapis.com` allow external font CDNs. |
| `font-src 'self' data: https://fonts.googleapis.com https://fonts.gstatic.com;` | Controls where fonts can be loaded from. `'self'` allows local fonts. `data:` allows inline fonts (base64 embedded). `https://fonts.googleapis.com` and `https://fonts.gstatic.com` allow loading from external font CDNs. |
| `img-src 'self' blob: data:;` | Controls where images can be loaded from. `'self'` restricts to the same origin. `blob:` allows blob-based images. `data:` allows inline images (base64). |
| `frame-src 'self' blob:;` | Controls where frames can be loaded from. `'self'` allows same-origin frames. `blob:` allows blob-based frames, which may be used by the PDF Viewer for certain operations. |
| `frame-src 'self' blob:;` | Controls where frames can be loaded from. `'self'` allows same-origin frames. `blob:` allows blob-based frames, which may be used by the SfPdfViewer for certain operations. |

[View the strict CSP sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Pdfviewer%20Sample%20With%20CSP).
Loading