PDFViewer Annotations Documentation (#2429)

* docs(pdfviewer): Annotation documentation

* chore(PDFViewer): add more details in the annotation docs

* chore(PDFViewer): docs update

* Update components/pdfviewer/toolbar.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/pdfviewer/toolbar.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/pdfviewer/annotations.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/pdfviewer/annotations.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/pdfviewer/annotations.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/pdfviewer/annotations.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/pdfviewer/toolbar.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/pdfviewer/toolbar.md

* Update components/pdfviewer/toolbar.md

* chore(PDFViewer): updates

* chore(PDFViewer): minor update

* Update components/pdfviewer/annotations.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

* Update components/pdfviewer/annotations.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

* Update upgrade/rendering-changes/6-3-0.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

* chore(PdfViewer): final update

---------

Co-authored-by: Dimo Dimov <[email protected]>
Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>

Author: 3 people

components/pdfviewer/annotations.md

@@ -0,0 +1,53 @@
+---
+title: Annotations
+page_title: PdfViewer - Annotations
+description: Annotations in the PdfViewer for Blazor. How to add and configure annotations in the PdfViewer for Blazor
+slug: pdfviewer-annotations
+tags: telerik,blazor,pdf,pdfviewer,annotations
+published: True
+position: 15
+---
+
+# PdfViewer Annotations
+
+The PdfViewer supports a set of annotation types to enhance PDF documents. For example, users can highlight important text areas or add notes as free text.
+
+The PdfViewer creates a dedicated layer for the annotations and includes them when downloading or printing the file. If the user opens a file with annotations, they can edit only the annotations that were added using the PdfViewer `Annotations` tool. The PdfViewer does not support editing annotations added in a different PDF editor.
+
+To add and manage the annotations, the user can click on the dedicated button in the [PdfViewer Toolbar]({%slug pdfviewer-toolbar%}). It opens an annotations bar with the available annotation types.
+
+## Supported Annotations
+
+The PdfViewer provides the following annotation types:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Annotation Type | Description |
+| --- | --- |
+| **Text Highlight** | Allows highlighting the selected text in the document. Users can choose the desired highlight color. |
+| **Free Text** | Allows creating an element with free text anywhere in the document. Provides option to select the desired text color and font size. |
+
+## Working with Annotations
+
+**To manage the annotations the user should:**
+
+1. Click on the `Annotations` tool in the [Toolbar]({%slug pdfviewer-toolbar%}) to open the Annotations bar with the available annotation types.
+1. Click the desired annotation type to toggle it. You need to first "turn on" the annotation tool to add or edit annotations of the corresponding type. If none of the annotation tools are enabled, the PdfViewer will not allow interacting with the document to create or edit annotations.
+
+**From this point the user can:**
+
+1. **Create an annotation**—The user can select a non-annotated text to highlight it or they can click an area that does not have free text element to create an annotation. Once they create the annotation, a popup with the available customization options will appear.
+1. **Edit an existing annotation**—The user can edit one or multiple annotations at a time but they all must be of the same type. To select multiple annotations, the user can hold `Ctrl` and click on all annotations they want to edit.
+    * To edit color and font size the user can click the annotation they want to edit to open the customization popup.
+    * To edit the text in the `Free Text` annotation element, the user can double-click the element to open the textbox for editing.
+    * To move the `Free Text` annotation element the user can click it to enable the drag tool and start dragging. 
+1. **Delete an existing annotation**—The user can click the annotation they want to delete to open the customization popup. Pressing the delete button in the customization popup will open a delete confirmation dialog where the user can confirm or cancel the annotation deletion.
+
+## Disabling Annotations
+
+The Annotations tool is included in the [Toolbar]({%slug pdfviewer-toolbar%}) by default. To prevent users from creating annotations, you can [configure the Toolbar and not include the `PdfViewerToolBarAnnotationsTool`]({%slug pdfviewer-toolbar%}#toolbar-configuration).
+
+## See Also
+
+* [PdfViewer Live Demo](https://demos.telerik.com/blazor-ui/pdfviewer/overview)
+* [PdfViewer Toolbar]({%slug pdfviewer-toolbar%})

components/pdfviewer/overview.md

@@ -59,6 +59,9 @@ The [PdfViewer toolbar can render built-in and custom tools]({%slug pdfviewer-to
 * Search and select text
 * Print, download and open local PDF files
 
+## Annotations
+
+The PdfViewer provides a built-in option for creating and editing annotations. Explore the [available annotation types and how to work with them]({%slug pdfviewer-annotations%}).
 
 ## Large File Support
 

components/pdfviewer/toolbar.md

@@ -17,20 +17,29 @@ The [Blazor PDF Viewer](https://demos.telerik.com/blazor-ui/pdfviewer/overview)
 
 By default, the [Blazor PDF Viewer](https://demos.telerik.com/blazor-ui/pdfviewer/overview) displays all its built-in tools in the order below. Use the *tool tag* if you need to define a tool explicitly in a [custom toolbar configuration](#toolbar-configuration).
 
+### Command Tools
+
 @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
 | Tool Name | Tool Tag | Description |
 | --- | --- | --- |
+| Open | `PdfViewerToolBarOpenTool` | An open command that shows in a submenu upon a hamburger menu click. Fires the [`OnOpen` event]({%slug pdfviewer-events%}#onopen). |
+| Download | `PdfViewerToolBarDownloadTool` | A download command that shows in a submenu upon a hamburger menu click. Fires the [`OnDownload` event]({%slug pdfviewer-events%}#ondownload). |
+| Print | `PdfViewerToolBarPrintTool` | A print command that shows in a submenu upon a hamburger menu click. The component also provides a [`Print` method]({%slug pdfviewer-overview%}#pdfviewer-reference-and-methods). Printing uses an additional browser window with only the PDF document inside. This window may require user confirmation or appropriate browser settings to display. |
 | Pager | `PdfViewerToolBarPagerTool` | A pager to navigate the PDF document via automatic scrolling. Paging requires the [`Height` parameter]({%slug pdfviewer-overview%}#pdfviewer-parameters) to be set, otherwise the component expands and doesn't have its own scrollbar. |
 | Zoom | `PdfViewerToolBarZoomTool` | Zoom in and zoom out buttons with an additional dropdown with common options (Fit to page, Fit to width, 100%, etc.) |
 | Selection | `PdfViewerToolBarSelectionTool` | Two toggle buttons that enable either text selection or panning. |
 | Search | `PdfViewerToolBarSearchTool` | A search button. It opens an additional search bar that contains a textbox and arrow buttons to navigate the search results. |
-| Open | `PdfViewerToolBarOpenTool` | An open button. It fires the [`OnOpen` event]({%slug pdfviewer-events%}#onopen). |
-| Download | `PdfViewerToolBarDownloadTool` | A download button. It fires the [`OnDownload` event]({%slug pdfviewer-events%}#ondownload). |
-| Print | `PdfViewerToolBarPrintTool` | A print button. The component also provides a [`Print` method]({%slug pdfviewer-overview%}#pdfviewer-reference-and-methods). Printing uses an additional browser window with only the PDF document inside. This window may require user confirmation or appropriate browser settings to display. |
+| Annotations | `PdfViewerToolBarAnnotationsTool` | A button that toggles the Annotations bar. Explore the [available annotation types and how to work with them]({%slug pdfviewer-annotations%}). |
+
+### Layout Tools
 
-By default, the toolbar also includes separators (`<PdfViewerToolBarSeparator />`) and spacers (`<PdfViewerToolBarSpacer />`). Separators render as a vertical line. Spacers consume the available empty space and push the rest of the tools next to one another.
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
+| Tool Name | Tool Tag | Description |
+| --- | --- | --- |
+| Separator | `PdfViewerToolBarSeparator` | Renders a vertical line. This is not included in the Toolbar by default but you can use it to visually separate the desired tools. |
+| Spacer | `PdfViewerToolBarSpacer` | Consumes the available empty space and pushes the rest of the tools next to one another. |
 
 ## Custom Tools
 

upgrade/rendering-changes/3-4-0.md

@@ -33,5 +33,5 @@ Previous to the 3.4.0 version we used `k-state-*` CSS classes to denote that the
 
 ## See also
 
-* [Use best practives when overriding theme styles]({%slug themes-override%}#best-practices)
+* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices)
 

upgrade/rendering-changes/3-6-0.md

@@ -99,4 +99,4 @@ position: 995
 
 ## See also
 
-* [Use best practives when overriding theme styles]({%slug themes-override%}#best-practices)
+* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices)

upgrade/rendering-changes/4-0-0.md

@@ -241,4 +241,4 @@ The following changes are applicable when `AutoUpload = "false"`, so the **Clear
 
 ## See Also
 
-* [Use best practives when overriding theme styles]({%slug themes-override%}#best-practices)
+* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices)

upgrade/rendering-changes/4-3-0.md

@@ -128,4 +128,4 @@ Such dialogs are any edit forms, filter menus, column menus, editor's tools, as
 
 ## See Also
 
-* [Use best practives when overriding theme styles]({%slug themes-override%}#best-practices)
+* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices)

upgrade/rendering-changes/4-6-0.md

@@ -72,4 +72,4 @@ Removed the `k-filter-toolbar-item` CSS class from the `<div class="k-toolbar-it
 
 ## See Also
 
-* [Use best practives when overriding theme styles]({%slug themes-override%}#best-practices)
+* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices)

upgrade/rendering-changes/6-0-0.md

@@ -587,4 +587,4 @@ The child `div` of the TreeView item container (`li.k-treeview-item > div`) rend
 
 ## See Also
 
-* [Use best practives when overriding theme styles]({%slug themes-override%}#best-practices)
+* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices)

upgrade/rendering-changes/6-3-0.md

@@ -0,0 +1,64 @@
+---
+title: 6.3.0
+description: Handle the rendering changes in the 6.3.0 release of the Telerik UI for Blazor components.
+page_title: Rendering Changes in the 6.3.0 Release
+slug: changes-in-6-3-0
+position: 970
+---
+
+# Rendering Changes in 6.3.0
+
+* [AIPrompt](#aiprompt)
+* [Gantt](#gantt)
+* [Menu](#menu)
+* [PDFViewer](#pdfviewer)
+* [Signature](#signature)
+* [TabStrip](#tabstrip)
+* [TreeList](#treelist)
+
+## AIPrompt
+
+1. The view buttons in the toolbar are now fully rounded (`k-rounded-md` class is replaced with `k-rounded-full`). The same applies to the `Generate` button.
+2. The output view, which contains the `<div class="k-card-list">` element, is now wrapped in a `<div>` element with class `k-prompt-view`.
+3. The copy button in the output view is now styled as primary.
+
+## Gantt
+
+1. The `k-gantt-content` class is now applied to a `<div>` wrapper element that encloses the Gantt Splitter.
+2. The Splitter component class (`k-splitter` element) is now changed from `k-grid-content` to `k-grid-splitter`.
+3. The `<div class="k-gantt-tables">` element no longer includes the `k-user-select-none` class.
+4. The `<table class="k-gantt-rows">` element now also has a `k-grid-table` class.
+5. The `<span class="k-spacer">` element in the toolbar no longer has the `k-toolbar-spacer` class.
+6. The `<div class="k-gantt-views">` button group / select element is now wrapped in a `<div>` with class `k-gantt-views-wrapper`.
+
+## Menu
+
+1. The menu item elements (`<span class="k-link">`) no longer include the `k-in` class.
+2. The `<ul class="k-menu-group">` element no longer includes the `k-reset` and `k-group` classes.
+
+## PDFViewer
+
+The `Open`, `Download` and `Print` tools have been moved to a submenu toggled on click of a hamburger menu on the leftmost side of the Toolbar.
+
+## Signature
+
+1. When maximized, the Signature now renders a `k-signature-maximized` class.
+2. The fill mode class is now applied based on the `FillMode` parameter (appearance settings).
+
+## TabStrip
+
+1. The active (currently selected) tabs now render only the `k-active` class. The `k-tab-on-top` class is no longer applied.
+2. The inactive tabs no longer include the `k-state-default` class.
+3. The scroll buttons (prev & next) now render the `k-tabstrip-prev` and `k-tabstrip-next` classes, respectively.
+4. The `k-pos-relative` class is no longer applied to the `<div class="k-tabstrip">` element. The component now receives an inline `position: relative` style instead.
+
+## TreeList
+
+1. The `k-cursor-pointer` class is removed from the `<span class="k-treelist-toggle">` element (toggle row icon).
+2. The `<table class="k-table">` element rendered in the `<div class="k-grid-header-wrap">` element now also has the `k-grid-header-table` class.
+3. The `<table class="k-table">` element rendered in the `<div class="k-grid-content">` element now also includes a size class (appearance settings).
+4. The `k-filterable` class in the table header cells is now rendered only when the column is filterable and has either a filter menu or column menu.
+
+## See Also
+
+* [Use best practices when overriding theme styles]({%slug themes-override%}#best-practices)