1009098: Getting Started Changes Provided for Dev

Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md

@@ -19,7 +19,7 @@ To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` pr
 The following example shows how to enable the redaction toolbar:
 
 {% tabs %}
-{% highlight js tabtitle="index.js" %}
+{% highlight js tabtitle="app.jsx" %}
 
 import * as ReactDOM from 'react-dom/client';
 import * as React from 'react';
@@ -52,8 +52,7 @@ export function App() {
         documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
         resourceUrl= "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
         toolbarSettings={toolbarSettings}
-
-        style={{ 'height': '680px' }} 
+        style={{ 'height': '680px' }}
       >
         <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
           Print, TextSelection, TextSearch, FormFields, FormDesigner]} />

Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md

@@ -51,9 +51,8 @@ export function App() {
         documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
         resourceUrl= "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
         toolbarSettings={toolbarSettings}
-
-        style={{ 'height': '680px' }} 
-      >
+        style={{ 'height': '640px' }}>
+
         <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
           Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
       </PdfViewerComponent>

Document-Processing/PDF/PDF-Viewer/react/Redaction/toolbar.md

@@ -51,7 +51,6 @@ export function App() {
         documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
         resourceUrl= "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
         toolbarSettings={toolbarSettings}
-
         style={{ 'height': '680px' }} 
       >
         <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,

Document-Processing/PDF/PDF-Viewer/react/annotation/comments.md

@@ -111,6 +111,7 @@ Edit comments and replies in the following ways:
 >Deleting the root comment from the comment panel also deletes the associated annotation.
 ```html
 <button id="checkComments">Check the Comments</button>
+```
 ## How to check the comments added by the user
 
 Comments added to the PDF document can be read using the annotation's `comments` property.

Document-Processing/PDF/PDF-Viewer/react/getting-started-with-server-backed.md

@@ -20,30 +20,29 @@ To get started with Syncfusion<sup style="font-size:70%">&reg;</sup> React UI co
 
 ## Setup for Local Development
 
-1. Create a new React app [`create-react-app`](https://github.com/facebook/create-react-app) and install it using the following command.
+To easily set up a React application, use `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production.
 
-```bash
-npm install -g create-react-app
-```
-
-2. To setup basic `React` sample use following commands.
-
-{% tabs %}
-{% highlight js tabtitle="JSX" %}
+> **Note:**  To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
 
-create-react-app quickstart
-cd quickstart
-npm install
+To create a new React application, run the following command.
 
-{% endhighlight %}
-{% highlight js tabtitle="TSX" %}
+```bash
+npm create vite@latest my-app
+```
+To set-up a React application in TypeScript environment, run the following command.
 
-npx create-react-app quickstart --template cra-template-typescript
-cd quickstart
-npm install
+```bash
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+npm run dev
+```
+To set-up a React application in JavaScript environment, run the following command.
 
-{% endhighlight %}
-{% endtabs %}
+```bash
+npm create vite@latest my-app -- --template react
+cd my-app
+npm run dev
+```
 
 ## Adding Syncfusion<sup style="font-size:70%">&reg;</sup> packages
 
@@ -58,7 +57,7 @@ N> The following changes applies to React version 18 and above.
 
 ## Adding PDF Viewer component and the CSS reference
 
-* Add an HTML div element to act as the PDF Viewer element `public/index.html` using the following code.
+* Add an HTML div element to act as the PDF Viewer element `index.html` using the following code.
 
 ```
    <!DOCTYPE html>
@@ -73,6 +72,7 @@ N> The following changes applies to React version 18 and above.
    <body>
       <div id='sample'>
          <div id='loader'>Loading....</div>
+         <script type="module" src="/src/main.tsx"></script>
       </div>
    </body>
    </html>
@@ -173,11 +173,11 @@ $env:NODE_OPTIONS = "--openssl-legacy-provider"
 Output will be appears as follows.
 
 {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/pdfviewer/react/base-cs1/app/index.jsx %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/pdfviewer/react/base-cs1/app/app.jsx %}
 {% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/pdfviewer/react/base-cs1/app/index.tsx %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/pdfviewer/react/base-cs1/app/app.tsx %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
 {% include code-snippet/pdfviewer/react/base-cs1/index.html %}

Document-Processing/PDF/PDF-Viewer/react/getting-started.md

@@ -69,7 +69,7 @@ N> The following changes apply to React version 18 and above.
 
 ## Adding PDF Viewer component and the CSS reference
 
-* Add an HTML div element to act as the PDF Viewer element `public/index.html` using the following code.
+* Add an HTML div element to act as the PDF Viewer element `index.html` using the following code.
 
 ```
    <!DOCTYPE html>
@@ -84,6 +84,7 @@ N> The following changes apply to React version 18 and above.
    <body>
       <div id='sample'>
          <div id='loader'>Loading....</div>
+         <script type="module" src="/src/main.tsx"></script>
       </div>
    </body>
    </html>
@@ -102,7 +103,7 @@ N> The following changes apply to React version 18 and above.
    @import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
 ```
 
-* Add the React PDF Viewer as shown below in `src/index.js` when using JavaScript (JSX). If you're using TypeScript (TSX), add it in `src/index.tsx` to render the PDF Viewer component.
+* Add the React PDF Viewer as shown below in `src/index.js` when using JavaScript (JSX). If you're using TypeScript (TSX), add it in `src/app.tsx` to render the PDF Viewer component.
 
 
 {% tabs %}
@@ -276,8 +277,10 @@ return (<div>
 }
 const root = ReactDOM.createRoot(document.getElementById('sample'));
 root.render(<App />);
+{% endraw %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
+{% raw %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -294,6 +297,7 @@ root.render(<App />);
 <body>
         <div id='sample'>
             <div id='loader'>Loading....</div>
+            <script type="module" src="/src/main.tsx"></script>
         </div>
 </body>
 </html>

Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Change author name using annotation settings in React PDF Viewer | Syncfusion
+title: Change author name using annotation settings in React | Syncfusion
 description: Learn how to change the author name and related annotation settings using the annotationSettings API in the React PDF Viewer.
 platform: document-processing
 control: PDF Viewer
@@ -31,7 +31,7 @@ Change the author name and other properties using the annotationSettings API as
 
 {% tabs %}
 {% highlight ts tabtitle="Standalone" %}
-```ts
+
 import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields } from "../src/index";
 
 PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields);
@@ -40,10 +40,10 @@ viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
 viewer.annotationSettings = { author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, isPrint: true, isDownload: true  };
 viewer.freeTextSettings = { allowTextOnly : true };
 viewer.appendTo("#pdfViewer");
-```
+
 {% endhighlight %}
 {% highlight ts tabtitle="Server-Backed" %}
-```ts
+
 import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields } from "../src/index";
 
 PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields);
@@ -53,6 +53,6 @@ viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
 viewer.annotationSettings = { author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, isPrint: true, isDownload: true  };
 viewer.freeTextSettings = { allowTextOnly : true };
 viewer.appendTo("#pdfViewer");
-```
+
 {% endhighlight %}
 {% endtabs %}

Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md

@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Clear annotations in React PDF Viewer
 
-Use the [deleteAnnotations](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#deleteannotations) method to clear all annotations in the currently loaded document.
+Use the [deleteAnnotations](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#deleteannotations) method to clear all annotations in the currently loaded document.
 
 Example: Clear all annotations in the loaded document
 
@@ -42,5 +42,5 @@ function deleteAnnotationbyId() {
 </script>
 ```
 
-Sample: How to clear annotations using deleteAnnotations
+Sample: [How to clear annotations using deleteAnnotations]
 (https://stackblitz.com/edit/react-xlvqkm?file=public%2Findex.html)

Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md

@@ -157,7 +157,7 @@ export function App() {
   </div>);
 }
 function extractPage(){
-// Get the PDF viewer instance
+    // Get the PDF viewer instance
     var viewer = document.getElementById('container').ej2_instances[0];
     //Extract Pages 1,2
     const array = viewer.extractPages('1,2');

Document-Processing/PDF/PDF-Viewer/react/organize-pages/toolbar.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Organize Page Toolbar Customization in React PDF Viewer control | Syncfusion
+title: Organize Page Toolbar Customization in React | Syncfusion
 description: Learn here all about Organize Page Toolbar Customization in Syncfusion React PDF Viewer control of Syncfusion Essential JS 2 and more.
 platform: document-processing
 control: PDF Viewer
@@ -18,6 +18,7 @@ The `canInsert` property controls the visibility of the insert tool. When set to
 
 {% tabs %}
 {% highlight ts tabtitle="Standalone" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -42,21 +43,23 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% highlight ts tabtitle="Server-Backed" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
 function App() {
-  lwt pdfviewer;
+  let pdfviewer;
   return (
     <PdfViewerComponent
       id="PdfViewer"
       ref={(scope) => { pdfviewer = scope; }}
-      serviceUrl='https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
       documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+      serviceUrl='https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
       pageOrganizerSettings={{ canInsert: false }}
       style={{ height: '640px' }}
     >
@@ -68,6 +71,7 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -77,6 +81,7 @@ The `canDelete` property controls the visibility of the delete tool. When set to
 
 {% tabs %}
 {% highlight ts tabtitle="Standalone" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -101,8 +106,10 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% highlight ts tabtitle="Server-Backed" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -127,6 +134,7 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -136,6 +144,7 @@ The `canRotate` property controls the visibility of the rotate tool. When set to
 
 {% tabs %}
 {% highlight ts tabtitle="Standalone" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -160,8 +169,10 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% highlight ts tabtitle="Server-Backed" %}
+{% raw %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
@@ -186,6 +197,7 @@ function App() {
 const root = ReactDOM.createRoot(document.getElementById('PdfViewer'));
 root.render(<App />);
 
+{% endraw %}
 {% endhighlight %}
 {% endtabs %}