Highlights

Reviewers mark passages of a document, such as the terms of a contract that need to be discussed, by highlighting text in the Document Viewer. Your code reads the highlighted text from the exported annotations.

The examples change the view of the ASP.NET Core tutorial. Annotations introduces the other annotation types.

How Text Highlights Work

A text highlight is an annotation that marks a range of text. Users select text in the document and add a highlight to it with the Adds a highlight to the document button of the annotation toolbar, usually to comment on that text. The comments sidebar lists the highlight with the highlight icon, its author and the number of its comments:

Like other annotations, a highlight has a color that users can change and can carry comments.

• Text-based. A highlight belongs to characters of the text, not to a position on the page.
• PDF documents. Text highlights also work in PDF documents that the viewer displays with PDF.js.
• Marking areas. To mark an area of a page instead of text, users draw with the drawing tools of the annotation toolbar, whose color, stroke width and opacity they can change.

Highlights start from selected text. Text selection is active by default; IsSelectionActivated with false turns it off.

How Highlights Are Stored

In the exported JSON, a text highlight is an annotation whose pen has the type highlight:

{
  "user": "Tim Typer",
  "time": 1713543982215,
  "comments": [
    {
      "comment": "Here is a comment",
      "user": "Tim Typer",
      "date": 1713543988884,
      "id": "1905c577-e9c4-49e7-8632-b9727cd3d972",
      "status": "none"
    }
  ],
  "id": "01d034a9-ea83-44a0-8286-700f7224670f",
  "pen": {
    "type": "highlight",
    "color": "rgba(255, 0, 0, 1)",
    "start": 1,
    "end": 15,
    "text": "Payment Invoice"
  },
  "status": "accepted"
}

• pen.text contains the highlighted text, and pen.start and pen.end are the character positions of the range.
• pen.color is the color of the highlight.
• Unlike notes and stamps, a highlight has no location on the page.

Other versions of the viewer add properties to the pen, such as composite, so don't rely on the pen containing exactly these properties.

List the Highlights of a Document

The following view shows the annotation toolbar and lists every text highlight with its text, color and number of comments whenever the annotations change. Replace the content of Views/Home/Index.cshtml:

@using TXTextControl.Web.MVC.DocumentViewer
@using System.Text

<div style="width: 800px; height: 600px;">

@Html.TXTextControl().DocumentViewer(settings => {
    settings.DocumentData = Convert.ToBase64String(
        Encoding.ASCII.GetBytes("<strong>Sample Content</strong>"));
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
}).Render()

</div>

<pre id="highlights"></pre>

<script>
    window.addEventListener("documentViewerLoaded", function () {
        TXDocumentViewer.annotations.showToolbar(true);

        TXDocumentViewer.addEventListener("annotationsChanged", function () {
            var pages = JSON.parse(TXDocumentViewer.annotations.export());
            var lines = [];

            pages.forEach(function (annotations, pageIndex) {
                annotations.forEach(function (annotation) {
                    if (annotation.pen.type === "highlight") {
                        lines.push("Page " + (pageIndex + 1) + ": \"" + annotation.pen.text + "\" (" +
                            annotation.pen.color + ", " + annotation.comments.length + " comments)");
                    }
                });
            });

            document.getElementById("highlights").textContent = lines.join("\n");
        });
    });
</script>

The code works as follows:

• showToolbar opens the annotation toolbar.
• addEventListener attaches a handler to annotationsChanged, which the viewer raises when an annotation has been changed.
• export returns the annotations, an array for each page. The handler keeps the annotations whose pen type is highlight; drawings have no pen type and are skipped.

Run the application, select the words "Sample Content" and highlight them with the annotation toolbar: the list below the viewer shows the highlighted text.

The blog article DocumentViewer Annotations: Highlight Text introduces text highlights.

Next Steps

• Comments: the comments of highlights and other annotations.
• Import and Export: store the highlights on your server.
• Search: find text in the document.