From a57edc23c3557d1076e70e7869bbd38adab962c3 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 8 Oct 2024 19:35:28 +0300 Subject: [PATCH 01/18] docs(pdfviewer): Annotation documentation --- components/pdfviewer/annotations.md | 29 +++++++++++++++++++++++++++++ components/pdfviewer/toolbar.md | 1 + upgrade/rendering-changes/6-3-0.md | 15 +++++++++++++++ 3 files changed, 45 insertions(+) create mode 100644 components/pdfviewer/annotations.md create mode 100644 upgrade/rendering-changes/6-3-0.md diff --git a/components/pdfviewer/annotations.md b/components/pdfviewer/annotations.md new file mode 100644 index 0000000000..7094f96ab0 --- /dev/null +++ b/components/pdfviewer/annotations.md @@ -0,0 +1,29 @@ +--- +title: Annotations +page_title: PdfViewer - Annotations +description: Annotations in the PDF Viewer for Blazor. How to add and configure annotations in the PDF Viewer for Blazor +slug: pdfviewer-annotations +tags: telerik,blazor,pdf,pdfviewer,annotations +published: True +position: 15 +--- + +# PdfViewer Annotations + +What are annotations... + +Note: the file is printed/downloaded with the annotations... + +## Supported annotations + +* [Text Highlight](#text-highlight) +* [Free Text](#free-text) + +### Text Highlight + +## Free Text + +## Disabling annotations + +## See Also + diff --git a/components/pdfviewer/toolbar.md b/components/pdfviewer/toolbar.md index 23604fa34f..0ca57b1d09 100644 --- a/components/pdfviewer/toolbar.md +++ b/components/pdfviewer/toolbar.md @@ -28,6 +28,7 @@ By default, the [Blazor PDF Viewer](https://demos.telerik.com/blazor-ui/pdfviewe | 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` | .... | By default, the toolbar also includes separators (``) and spacers (``). Separators render as a vertical line. Spacers consume the available empty space and push the rest of the tools next to one another. diff --git a/upgrade/rendering-changes/6-3-0.md b/upgrade/rendering-changes/6-3-0.md new file mode 100644 index 0000000000..14554bc25c --- /dev/null +++ b/upgrade/rendering-changes/6-3-0.md @@ -0,0 +1,15 @@ +--- +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 + +* [PDFViewer](#pdfviewer) + +# PDFViewer + +The `Open`, `Download` and `Print` tools have been moved to a separate hamburger menu on the left side of the Toolbar. \ No newline at end of file From 1ab1c243e067ca35ecfa651e3b53baae784bda2c Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 15 Oct 2024 12:32:15 +0300 Subject: [PATCH 02/18] chore(PDFViewer): add more details in the annotation docs --- components/pdfviewer/annotations.md | 32 +++++++++++++---- components/pdfviewer/overview.md | 3 ++ components/pdfviewer/toolbar.md | 18 +++++++--- upgrade/rendering-changes/3-4-0.md | 2 +- upgrade/rendering-changes/3-6-0.md | 2 +- upgrade/rendering-changes/4-0-0.md | 2 +- upgrade/rendering-changes/4-3-0.md | 2 +- upgrade/rendering-changes/4-6-0.md | 2 +- upgrade/rendering-changes/6-0-0.md | 2 +- upgrade/rendering-changes/6-3-0.md | 54 +++++++++++++++++++++++++++-- 10 files changed, 99 insertions(+), 20 deletions(-) diff --git a/components/pdfviewer/annotations.md b/components/pdfviewer/annotations.md index 7094f96ab0..c48db4d0d4 100644 --- a/components/pdfviewer/annotations.md +++ b/components/pdfviewer/annotations.md @@ -10,20 +10,38 @@ position: 15 # PdfViewer Annotations -What are annotations... +The PdfViewer supports a set of annotation types that the user can add to enhance the PDF document - 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. -Note: the file is printed/downloaded with the annotations... +To add and manage the annotations, the user can click on the dedicated button in the [Toolbar]({%slug pdfviewer-toolbar%}). It opens an annotations bar with the available annotation types. -## Supported annotations +## Supported Annotations -* [Text Highlight](#text-highlight) -* [Free Text](#free-text) +The PDFViewer provides the following annotation types: -### Text Highlight +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) -## Free Text +| Annotation Type | Description | +| --- | --- | +| **Text Highlight** | Allows highlighting the selected text in the document. Provides an option to select 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 + +>caption 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. + +>caption From this point the user can: + +1. **Create an annotation** - for that purpose the user can select a non-annotated text to highlight it or click on an area that does not have free text element to create one. Once they create the annotation, a popup with the available customization options will appear. +1. **Edit an existing annotation** - for that purpose the user can click on the annotation they want to edit to open the customization popup. The `Free Text` annotation element can also be moved around the document. The user can edit one or multiple annotations at a time but they all must be of the same type. ## Disabling annotations +The Annotations tool is included in the [Toolbar]({%slug pdfviewer-toolbar%}) by default. To prevent the 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%}) \ No newline at end of file diff --git a/components/pdfviewer/overview.md b/components/pdfviewer/overview.md index 75d667732e..ef9f74dd15 100644 --- a/components/pdfviewer/overview.md +++ b/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 diff --git a/components/pdfviewer/toolbar.md b/components/pdfviewer/toolbar.md index 0ca57b1d09..917a5582fa 100644 --- a/components/pdfviewer/toolbar.md +++ b/components/pdfviewer/toolbar.md @@ -17,21 +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. Displayed in a submenu toggled on click of the hamburger menu. Fires the [`OnOpen` event]({%slug pdfviewer-events%}#onopen). | +| Download | `PdfViewerToolBarDownloadTool` | A download command. Displayed in a submenu toggled on click of the hamburger menu. Fires the [`OnDownload` event]({%slug pdfviewer-events%}#ondownload). | +| Print | `PdfViewerToolBarPrintTool` | A print command. Displayed in a submenu toggled on click of the hamburger menu. 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` | .... | +| 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 (``) and spacers (``). 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 diff --git a/upgrade/rendering-changes/3-4-0.md b/upgrade/rendering-changes/3-4-0.md index 102cd989ab..1758b74061 100644 --- a/upgrade/rendering-changes/3-4-0.md +++ b/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) diff --git a/upgrade/rendering-changes/3-6-0.md b/upgrade/rendering-changes/3-6-0.md index 93ad258172..fda1229095 100644 --- a/upgrade/rendering-changes/3-6-0.md +++ b/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) diff --git a/upgrade/rendering-changes/4-0-0.md b/upgrade/rendering-changes/4-0-0.md index 745f3bdcd4..90bce320a2 100644 --- a/upgrade/rendering-changes/4-0-0.md +++ b/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) diff --git a/upgrade/rendering-changes/4-3-0.md b/upgrade/rendering-changes/4-3-0.md index c2f7fdd88c..653aa910a8 100644 --- a/upgrade/rendering-changes/4-3-0.md +++ b/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) diff --git a/upgrade/rendering-changes/4-6-0.md b/upgrade/rendering-changes/4-6-0.md index 9caeaec8e7..8ffaab16cf 100644 --- a/upgrade/rendering-changes/4-6-0.md +++ b/upgrade/rendering-changes/4-6-0.md @@ -72,4 +72,4 @@ Removed the `k-filter-toolbar-item` CSS class from the `
caption From this point the user can: +**From this point the user can:** 1. **Create an annotation** - for that purpose the user can select a non-annotated text to highlight it or click on an area that does not have free text element to create one. 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. diff --git a/upgrade/rendering-changes/6-3-0.md b/upgrade/rendering-changes/6-3-0.md index f35e25832c..9d84d1ebea 100644 --- a/upgrade/rendering-changes/6-3-0.md +++ b/upgrade/rendering-changes/6-3-0.md @@ -19,22 +19,22 @@ position: 970 ## 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 `k-card-list` element, is now wrapped in a `div` element with the class `k-prompt-view`. +2. The output view, which contains the `
` element, is now wrapped in a `
` 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 wrapper `div` element that encloses the Gantt Splitter. +1. The `k-gantt-content` class is now applied to a `
` 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 `k-gantt-tables` element no longer includes the `k-user-select-none` class. -4. The `k-gantt-rows` element now also has a `k-grid-table` class. -5. The `k-spacer` element in the toolbar no longer has the `k-toolbar-spacer` class. -6. The `k-gantt-views` button group / select element is now wrapped in a `div` with the `k-gantt-views-wrapper` class. +3. The `
` element no longer includes the `k-user-select-none` class. +4. The `` element now also has a `k-grid-table` class. +5. The `` element in the toolbar no longer has the `k-toolbar-spacer` class. +6. The `
` button group / select element is now wrapped in a `
` with class `k-gantt-views-wrapper`. ## Menu -1. The menu item elements (`k-link`) no longer include the `k-in` class. -2. The `k-menu-group` elements no longer include the `k-reset` and `k-group` classes. +1. The menu item elements (``) no longer include the `k-in` class. +2. The `
    ` element no longer includes the `k-reset` and `k-group` classes. ## PDFViewer @@ -42,22 +42,21 @@ The `Open`, `Download` and `Print` tools have been moved to a submenu toggled on ## Signature -1. The `k-signature-action k-signature-minimize` element no longer includes the `k-rotate-180` class. -2. When maximized, the Signature now renders the `k-signature-maximized` class. -3. The fill mode class is now applied based on the `FillMode` parameter (appearance settings). +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 `k-tabstrip` element. The component now receives an inline `position: relative` style instead. +4. The `k-pos-relative` class is no longer applied to the `
    ` element. The component now receives an inline `position: relative` style instead. ## TreeList -1. The `k-cursor-pointer` class is removed from the `k-treelist-toggle` element (toggle row icon). -2. The `k-table` element rendered in the `k-grid-header > k-grid-header-wrap` element now also has the `k-grid-header-table` class. -3. The `k-grid-content > k-table element` now also includes a size class (appearance settings). +1. The `k-cursor-pointer` class is removed from the `` element (toggle row icon). +2. The `
` element rendered in the `
` element now also has the `k-grid-header-table` class. +3. The `
` element rendered in the `
` 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 From b7bfc5be783e7dede3ea4c742e0a20390182fddd Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 15 Oct 2024 18:43:22 +0300 Subject: [PATCH 14/18] chore(PDFViewer): minor update --- components/pdfviewer/annotations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/pdfviewer/annotations.md b/components/pdfviewer/annotations.md index 88c0b9299c..5232ecedef 100644 --- a/components/pdfviewer/annotations.md +++ b/components/pdfviewer/annotations.md @@ -12,7 +12,7 @@ position: 15 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. When downloading a file with annotations and opening it again, the PDFViewer allows editing the previously created annotations. +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 [PDF Viewer Toolbar]({%slug pdfviewer-toolbar%}). It opens an annotations bar with the available annotation types. From e48317c1e5e3b82ecae768b6cbe79586bb71604b Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 16 Oct 2024 13:41:22 +0300 Subject: [PATCH 15/18] Update components/pdfviewer/annotations.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/pdfviewer/annotations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/pdfviewer/annotations.md b/components/pdfviewer/annotations.md index 5232ecedef..c8e7f9cdf7 100644 --- a/components/pdfviewer/annotations.md +++ b/components/pdfviewer/annotations.md @@ -36,7 +36,7 @@ The PDFViewer provides the following annotation types: **From this point the user can:** -1. **Create an annotation** - for that purpose the user can select a non-annotated text to highlight it or click on an area that does not have free text element to create one. Once they create the annotation, a popup with the available customization options will appear. +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 on 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. From 0fff161ed49f0f08f505db51746ca439d5adecda Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 16 Oct 2024 13:41:44 +0300 Subject: [PATCH 16/18] Update components/pdfviewer/annotations.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/pdfviewer/annotations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/pdfviewer/annotations.md b/components/pdfviewer/annotations.md index c8e7f9cdf7..3a4004450c 100644 --- a/components/pdfviewer/annotations.md +++ b/components/pdfviewer/annotations.md @@ -45,7 +45,7 @@ The PDFViewer provides the following annotation types: ## Disabling Annotations -The Annotations tool is included in the [Toolbar]({%slug pdfviewer-toolbar%}) by default. To prevent the users from creating annotations, you can [configure the Toolbar and not include the `PdfViewerToolBarAnnotationsTool`]({%slug pdfviewer-toolbar%}#toolbar-configuration). +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 From aab8a639eaf676f8cb3ca9a33e890dd56dd3bf33 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 16 Oct 2024 13:41:58 +0300 Subject: [PATCH 17/18] Update upgrade/rendering-changes/6-3-0.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- upgrade/rendering-changes/6-3-0.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/upgrade/rendering-changes/6-3-0.md b/upgrade/rendering-changes/6-3-0.md index 9d84d1ebea..a5e8135755 100644 --- a/upgrade/rendering-changes/6-3-0.md +++ b/upgrade/rendering-changes/6-3-0.md @@ -47,7 +47,7 @@ The `Open`, `Download` and `Print` tools have been moved to a submenu toggled on ## TabStrip -1. The active (currently selected) tabs now render only the `k-active` class. The` k-tab-on-top` class is no longer applied. +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 `
` element. The component now receives an inline `position: relative` style instead. From 93c39487937f901394323247e1b4f2893e429a84 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Wed, 16 Oct 2024 13:51:05 +0300 Subject: [PATCH 18/18] chore(PdfViewer): final update --- components/pdfviewer/annotations.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/components/pdfviewer/annotations.md b/components/pdfviewer/annotations.md index 3a4004450c..c3fbac09cc 100644 --- a/components/pdfviewer/annotations.md +++ b/components/pdfviewer/annotations.md @@ -1,7 +1,7 @@ --- title: Annotations page_title: PdfViewer - Annotations -description: Annotations in the PDF Viewer for Blazor. How to add and configure annotations in the PDF Viewer for Blazor +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 @@ -12,13 +12,13 @@ position: 15 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. +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 [PDF Viewer Toolbar]({%slug pdfviewer-toolbar%}). It opens an annotations bar with the available annotation types. +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: +The PdfViewer provides the following annotation types: @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) @@ -32,16 +32,16 @@ The PDFViewer provides the following annotation types: **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. +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 on 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 on it to enable the drag tool and start dragging. -1. **Delete an existing annotation** - for that purpose the user can click on 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. +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