Skip to content

Commit bcecfa8

Browse files
AnanthaGokulaRamanAnanthaGokulaRaman
authored
Merge pull request #2325 from syncfusion-content/EJ2-1010807-diataxis-toolbar
1010807: Revamped toolbar module in react following diataxis approach
2 parents aeca2c8 + 64fbfc1 commit bcecfa8

12 files changed

Lines changed: 838 additions & 1995 deletions

‎Document-Processing-toc.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -942,7 +942,7 @@
942942
</ul>
943943
</li>
944944
<li><a href="/document-processing/pdf/pdf-viewer/react/mobile-toolbar">Mobile Toolbar Interface</a></li>
945-
<li><a href="/document-processing/pdf/pdf-viewer/react/toolbar">Toolbar Customization</a>
945+
<li><a href="/document-processing/pdf/pdf-viewer/react/toolbar-customization/overview">Toolbar</a>
946946
<ul>
947947
<li><a href="/document-processing/pdf/pdf-viewer/react/toolbar-customization/primary-toolbar">Primary Toolbar</a></li>
948948
<li><a href="/document-processing/pdf/pdf-viewer/react/toolbar-customization/annotation-toolbar">Annotation Toolbar</a></li>

‎Document-Processing/PDF/PDF-Viewer/react/images/annotation-toolbar.png‎

34.1 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/react/images/mobile-annotation-toolbar.png‎

10.5 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/react/images/mobile-toolbar.png‎

13.3 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/react/images/primary-toolbar.png‎

34.3 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/react/toolbar-customization/annotation-toolbar.md‎

Lines changed: 103 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -1,199 +1,135 @@
11
---
22
layout: post
3-
title: Annotation Toolbar in React PDF viewer control | Syncfusion
4-
description: Learn here all about annotation toolbar customization in Syncfusion React PDF viewer control of Syncfusion Essential JS 2 and more.
3+
title: Customize the Annotation Toolbar in React PDF Viewer | Syncfusion
4+
description: Show or hide and customize the annotation toolbar in the EJ2 React PDF Viewer with runnable examples.
55
platform: document-processing
6-
control: PDF Viewer
6+
control: PDF Viewer
77
documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Annotation Toolbar Customization in React
11+
# Customize the Annotation Toolbar in React PDF Viewer
1212

13-
The annotation toolbar can be customized by showing or hiding default items and by controlling the order in which they appear.
13+
## Overview
1414

15-
## Show or hide the annotation toolbar
15+
This guide shows how to show or hide the annotation toolbar and how to choose which tools appear and their order.
1616

17-
Show or hide the annotation toolbar programmatically during initialization or at runtime.
17+
**Outcome:** A working React example that toggles the annotation toolbar and uses [`annotationToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#annotationtoolbaritems) to customize the toolbar.
1818

19-
Use the [EnableAnnotationToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pdfViewerModel#enableannotationtoolbar) property or the [showAnnotationToolbar](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showannotationtoolbar) method to toggle visibility.
19+
## Prerequisites
2020

21-
The following example shows how to show or hide the annotation toolbar using the `showAnnotationToolbar` method.
21+
- EJ2 React PDF Viewer installed and added in your project. See [getting started guide](../getting-started)
22+
- A valid [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) for viewer assets when running locally
2223

23-
{% tabs %}
24-
{% highlight ts tabtitle="app.tsx" %}
25-
import * as React from 'react';
26-
import * as ReactDOM from 'react-dom';
27-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
28-
ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-react-pdfviewer';
29-
30-
PdfViewerComponent.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
31-
BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
32-
33-
const App = () => {
34-
let pdfviewer;
35-
36-
React.useEffect(() => {
37-
const buttonElement = document.getElementById('showAnnotationToolbar');
38-
const handleClick = () => {
39-
if (pdfviewer) {
40-
pdfviewer.toolbar.showAnnotationToolbar(false);
41-
}
42-
};
43-
buttonElement?.addEventListener('click', handleClick);
44-
return () => buttonElement?.removeEventListener('click', handleClick);
45-
}, []);
24+
## Steps
4625

47-
return (
48-
<div>
49-
<button id='showAnnotationToolbar'>showAnnotationToolbar</button>
26+
**Step 1:** Show or hide the annotation toolbar
27+
28+
- Use the [`showAnnotationToolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar#showannotationtoolbar) method on the viewer toolbar to control visibility.
29+
30+
{% tabs %}
31+
{% highlight ts tabtitle="App.tsx" %}
32+
{% raw %}
33+
const viewer: RefObject<PdfViewerComponent> = useRef(null);
34+
const [show, setShow] = useState(true);
35+
const hideToolbar = () => {
36+
viewer.current.toolbar.showAnnotationToolbar(show);
37+
setShow(!show);
38+
};
39+
return (
40+
<div>
41+
<button onClick={hideToolbar}>Hide Annotation Toolbar</button>
5042
<PdfViewerComponent
5143
id="PdfViewer"
52-
ref={(scope) => { pdfviewer = scope; }}
53-
documentPath='https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
44+
ref={viewer}
45+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
5446
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
55-
height="500px"
56-
width="100%"
57-
/>
58-
</div>
59-
);
60-
};
61-
62-
ReactDOM.render(<App />, document.getElementById('container'));
63-
{% endhighlight %}
64-
{% highlight html tabtitle="index.html" %}
65-
66-
<!DOCTYPE html>
67-
<html lang="en">
68-
69-
<head>
70-
<title>EJ2 PDF Viewer</title>
71-
<meta charset="utf-8" />
72-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
73-
<meta name="description" content="React PDF Viewer Control" />
74-
<meta name="author" content="Syncfusion" />
75-
<link href="index.css" rel="stylesheet" />
76-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-base/styles/material.css" rel="stylesheet" />
77-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-pdfviewer/styles/material.css" rel="stylesheet" />
78-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-buttons/styles/material.css" rel="stylesheet" />
79-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-popups/styles/material.css" rel="stylesheet" />
80-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-navigations/styles/material.css" rel="stylesheet" />
81-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-dropdowns/styles/material.css" rel="stylesheet" />
82-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-lists/styles/material.css" rel="stylesheet" />
83-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-inputs/styles/material.css" rel="stylesheet" />
84-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
85-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-notifications/styles/material.css" rel="stylesheet" />
86-
87-
88-
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
89-
<script src="systemjs.config.js"></script>
90-
</head>
91-
<body>
92-
<div id='loader'>Loading....</div>
93-
<button id="set">Change Annotation Toolbar Visibility</button>
94-
<div id='container'>
95-
<div id='PdfViewer' style="height:500px;width:100%;"></div>
47+
height="600px"
48+
width="100%" >
49+
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
50+
BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
51+
</PdfViewerComponent>
9652
</div>
97-
</body>
98-
</html>
99-
53+
);
54+
{% endraw %}
10055
{% endhighlight %}
10156
{% endtabs %}
10257

103-
## How to customize the annotation toolbar
58+
**Step 2:** Customize which tools appear
10459

105-
Choose which tools appear and control their order in the annotation toolbar.
60+
- Use [`annotationToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#annotationtoolbaritems) with a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationtoolbaritem) values. The toolbar shows only items in this list.
10661

107-
Use [`PdfViewerToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings) with the [`AnnotationToolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings#annotationtoolbaritems) property to choose which tools are displayed in the annotation toolbar. The property accepts a list of [`AnnotationToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationToolbarItem) values. Only the items included in this list are shown; any item not listed is hidden. The rendered order follows the sequence of items in the list.
62+
{% tabs %}
63+
{% highlight ts tabtitle="App.tsx" %}
64+
{% raw %}
65+
const annotationToolbarItems: AnnotationToolbarItem[] = [
66+
'HighlightTool', 'UnderlineTool', 'StrikethroughTool', 'ColorEditTool', 'OpacityEditTool', 'AnnotationDeleteTool', 'CommentPanelTool'
67+
];
68+
<PdfViewerComponent
69+
id="PdfViewer"
70+
ref={viewer}
71+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
72+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
73+
toolbarSettings={{ annotationToolbarItems }}
74+
width="100%" >
75+
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
76+
BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
77+
</PdfViewerComponent>
78+
{% endraw %}
79+
{% endhighlight %}
80+
{% endtabs %}
10881

109-
The annotation toolbar is presented when entering annotation mode in PDF Viewer and adapts responsively based on the available width. Include the Close tool to allow users to exit the annotation toolbar when needed.
82+
**Complete example**
11083

111-
The following example demonstrates how to customize the annotation toolbar by specifying a selected set of tools using `AnnotationToolbarItem`.
84+
The following is a complete, runnable example. It wires a toggle button and a viewer with a custom annotation toolbar list.
11285

11386
{% tabs %}
114-
{% highlight ts tabtitle="app.tsx" %}
115-
import * as React from 'react';
116-
import * as ReactDOM from 'react-dom';
117-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
118-
ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, AnnotationToolbarItem } from '@syncfusion/ej2-react-pdfviewer';
119-
120-
PdfViewerComponent.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
121-
BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
122-
123-
const App = () => {
124-
let pdfviewer;
125-
const annotationToolbarItems = [
126-
"HighlightTool",
127-
"UnderlineTool",
128-
"StrikethroughTool",
129-
"ColorEditTool",
130-
"OpacityEditTool",
131-
"AnnotationDeleteTool",
132-
"StampAnnotationTool",
133-
"HandWrittenSignatureTool",
134-
"InkAnnotationTool",
135-
"ShapeTool",
136-
"CalibrateTool",
137-
"StrokeColorEditTool",
138-
"ThicknessEditTool",
139-
"FreeTextAnnotationTool",
140-
"FontFamilyAnnotationTool",
141-
"FontSizeAnnotationTool",
142-
"FontStylesAnnotationTool",
143-
"FontAlignAnnotationTool",
144-
"FontColorAnnotationTool",
145-
"CommentPanelTool"
146-
];
147-
87+
{% highlight ts tabtitle="App.tsx" %}
88+
{% raw %}
89+
import { useRef, RefObject, useState } from 'react';
90+
import {
91+
PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
92+
ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
93+
AnnotationToolbarItem, PageOrganizer, Inject
94+
} from '@syncfusion/ej2-react-pdfviewer';
95+
const annotationToolbarItems: AnnotationToolbarItem[] = [
96+
'HighlightTool', 'UnderlineTool', 'StrikethroughTool', 'ColorEditTool', 'OpacityEditTool', 'AnnotationDeleteTool', 'CommentPanelTool'
97+
];
98+
export default function App() {
99+
const viewer: RefObject<PdfViewerComponent> = useRef(null);
100+
const [show, setShow] = useState(true);
101+
const hideToolbar = () => {
102+
viewer.current.toolbar.showAnnotationToolbar(show);
103+
setShow(!show);
104+
};
148105
return (
149-
<PdfViewerComponent
150-
id="PdfViewer"
151-
ref={(scope) => { pdfviewer = scope; }}
152-
documentPath='https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
153-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
154-
height="500px"
155-
width="100%"
156-
toolbarSettings={{ annotationToolbarItems }}
157-
/>
106+
<div>
107+
<button onClick={hideToolbar}>Hide Annotation Toolbar</button>
108+
<PdfViewerComponent
109+
id="PdfViewer"
110+
ref={viewer}
111+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
112+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
113+
toolbarSettings={{ annotationToolbarItems }}
114+
height="600px"
115+
width="100%" >
116+
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
117+
BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
118+
</PdfViewerComponent>
119+
</div>
158120
);
159121
};
160-
161-
ReactDOM.render(<App />, document.getElementById('container'));
162-
{% endhighlight %}
163-
{% highlight html tabtitle="index.html" %}
164-
165-
<!DOCTYPE html>
166-
<html lang="en">
167-
168-
<head>
169-
<title>EJ2 PDF Viewer</title>
170-
<meta charset="utf-8" />
171-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
172-
<meta name="description" content="React PDF Viewer Control" />
173-
<meta name="author" content="Syncfusion" />
174-
<link href="index.css" rel="stylesheet" />
175-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-base/styles/material.css" rel="stylesheet" />
176-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-pdfviewer/styles/material.css" rel="stylesheet" />
177-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-buttons/styles/material.css" rel="stylesheet" />
178-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-popups/styles/material.css" rel="stylesheet" />
179-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-navigations/styles/material.css" rel="stylesheet" />
180-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-dropdowns/styles/material.css" rel="stylesheet" />
181-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-lists/styles/material.css" rel="stylesheet" />
182-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-inputs/styles/material.css" rel="stylesheet" />
183-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
184-
<link href="https://cdn.syncfusion.com/ej2/23.1.40/ej2-notifications/styles/material.css" rel="stylesheet" />
185-
186-
187-
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
188-
<script src="systemjs.config.js"></script>
189-
</head>
190-
<body>
191-
<div id='loader'>Loading....</div>
192-
<div id='container'>
193-
<div id='PdfViewer' style="height:500px;width:100%;"></div>
194-
</div>
195-
</body>
196-
</html>
197-
122+
{% endraw %}
198123
{% endhighlight %}
199124
{% endtabs %}
125+
126+
## Troubleshooting
127+
128+
- Annotation toolbar tools do not appear.
129+
- **Cause**: The items are not valid [`AnnotationToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationtoolbaritem) strings or the viewer is not injected with [`Annotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation) / [`Toolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar) modules.
130+
- **Solution**: Confirm services in `Inject` includes [`Toolbar`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar) and [`Annotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation) and use valid item names.
131+
132+
## Related topics
133+
134+
- [Customize form designer toolbar](./form-designer-toolbar)
135+
- [customize primary toolbar](./primary-toolbar)

0 commit comments

Comments
 (0)