1010807: Resolving heading issues in React PDF Viewer UG

Author: VenkadaSubramanian-Durai

Document-Processing/PDF/PDF-Viewer/react/annotation/text-markup-annotation.md

@@ -565,7 +565,7 @@ root.render(<App />);
 
 ## Strikethrough text
 
-There are two ways to add strikethrough:
+Two ways to add strikethroughs:
 
 1. Using the context menu
 * Select text in the PDF document and right-click it.

Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md

@@ -14,7 +14,7 @@ How to integrate the Syncfusion React PDF Viewer into a Gatsby site. Use the Qui
 
 ## Quickstart for Gatsby
 
-1. Create or open your Gatsby site.
+#### Create or open your Gatsby site:
 
 ```bash
 # create a new Gatsby site (or use an existing one)
@@ -23,13 +23,13 @@ cd my-gatsby-site
 npm install
 ```
 
-2. Install the PDF Viewer package:
+#### Install the PDF Viewer package:
 
 ```bash
 npm install @syncfusion/ej2-react-pdfviewer --save
 ```
 
-3. Optional — host runtime locally or use the CDN
+#### Optional — host runtime resources locally or use the CDN
 
 If you want to host the viewer runtime and WASM locally, copy the runtime files into Gatsby's `static` directory so they are served at the root URL (`/`). The example component below uses the CDN `resourceUrl` for a quick demo; hosting locally is recommended for production.
 
@@ -41,7 +41,7 @@ cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib static/ej2
 mkdir -p static/assets && cp ./path/to/sample.pdf static/assets/sample.pdf
 ```
 
-4. Add viewer CSS imports to `src/components/layout.css` (recommended for Gatsby component-scoped styling):
+- Add viewer CSS imports to `src/components/layout.css` (recommended for Gatsby component-scoped styling):
 
 Create `src/components/layout.css` and add the imports below (relative path to `node_modules` used from `src/components`):
 
@@ -63,7 +63,7 @@ Then import the stylesheet in `gatsby-browser.js` at your project root so it is
 import './src/components/layout.css';
 ```
 
-5. Use a client-only approach (Gatsby is server-side rendered). A simple and reliable pattern is to render the viewer after mount with a mounted flag. Create `src/components/pdfviewer.js` with the component below (the example also shows where to register a Syncfusion license if you have one):
+- Use a client-only approach (Gatsby is server-side rendered). A simple and reliable pattern is to render the viewer after mount with a mounted flag. Create `src/components/pdfviewer.js` with the component below (the example also shows where to register a Syncfusion license if you have one):
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
@@ -127,7 +127,7 @@ export default function PdfViewerPage() {
 {% endhighlight %}
 {% endtabs %}
 
-6. Run the Gatsby dev server:
+#### Run the Gatsby dev server:
 
 ```bash
 npm run develop

Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md

@@ -45,7 +45,7 @@ yarn create next-app
 
 Using one of the above commands will prompt for project configuration options.
 
-1. Define the project name. For example: `ej2-next-js-pdfviewer`.
+- Define the project name. For example: `ej2-next-js-pdfviewer`.
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
@@ -54,7 +54,7 @@ Using one of the above commands will prompt for project configuration options.
 {% endhighlight %}
 {% endtabs %}
 
-2. Select the required packages.
+- Select the required packages.
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
@@ -70,7 +70,7 @@ Creating a new Next.js app in D:\ej2-next-js-pdfviewer.
 {% endhighlight %}
 {% endtabs %}
 
-3. After the project is created, navigate to the project directory:
+- After the project is created, navigate to the project directory:
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
@@ -131,7 +131,7 @@ N> To learn more about built-in themes and CSS references for individual compone
 
 Follow these steps to add the React PDF Viewer component to the Next.js project:
 
-1. Define the PDF Viewer component in `src/app/page.tsx`, as shown below:
+- Define the PDF Viewer component in `src/app/page.tsx`, as shown below:
 
 {% tabs %}
 {% highlight ts tabtitle="page.tsx" %}

Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/remix.md

@@ -39,7 +39,7 @@ Different starters create different folder layouts. Pick the mapping that matche
 
 Use the file paths that match your project layout when following the steps below.
 
-## Step 1 — Create a Remix or React Router v7 app
+## Create a Remix or React Router v7 app
 
 If you want the React Router framework-mode project (creates an `app/` tree), use the official scaffolding tool:
 
@@ -61,13 +61,13 @@ npm install react-router@7 react-router-dom@7
 npm run dev
 ```
 
-## Step 2 — Install the PDF Viewer package
+## Install the PDF Viewer package
 
 ```bash
 npm install @syncfusion/ej2-react-pdfviewer --save
 ```
 
-## Step 3 — Copy viewer runtime assets to `public`
+## Copy viewer runtime assets to public folder
 
 The PDF Viewer requires runtime assets (pdfium.js, pdfium.wasm, supporting files). Copy them from the `ej2-pdfviewer` package to your `public` folder so `resourceUrl` can point to `/ej2-pdfviewer-lib`.
 
@@ -85,7 +85,7 @@ Copy-Item -Path .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib
 
 Confirm `public/ej2-pdfviewer-lib` contains `pdfium.js` and `pdfium.wasm`.
 
-## Step 4 — Add global CSS for the viewer
+## Add global CSS for the viewer
 
 Place the Syncfusion CSS imports in your project's global stylesheet. Choose the path that matches your project layout.
 
@@ -130,7 +130,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 );
 ```
 
-## Step 5 — Client-only rendering
+## Client-only rendering
 
 The PDF Viewer depends on browser APIs and WebAssembly; avoid server-side rendering it. Render it only after the component mounts. Create a client-only component in the folder that matches your project layout.
 
@@ -208,7 +208,7 @@ export default function App() {
 }
 ```
 
-## Step 6 — Run the app
+## Run the app
 
 ```bash
 npm run dev

Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/share-point.md

@@ -21,7 +21,7 @@ This quickstart shows how to integrate the Syncfusion React PDF Viewer into a Sh
 - Yeoman and the SPFx generator: `npm install -g yo @microsoft/generator-sharepoint`.
 - Gulp: `npm install -g gulp-cli`.
 
-## Step 1 — Create an SPFx React web part
+## Create an SPFx React web part
 
 Run the SharePoint generator and choose the React framework (TypeScript recommended). Example answers shown in parentheses.
 
@@ -36,17 +36,17 @@ yo @microsoft/sharepoint
 
 This creates the usual SPFx project tree (no `src/`/`app/` ambiguity): React components live under `src/webparts/pdfViewer/components` and global web part assets are under `src/webparts/pdfViewer/assets`.
 
-## Step 2 — Install Syncfusion package
+## Install Syncfusion package
 
 In the project root run:
 
 ```bash
 npm install @syncfusion/ej2-react-pdfviewer --save
 ```
 
-Keep the package version aligned with the runtime assets you host (see Step 4).
+Keep the package version aligned with the runtime assets you host.
 
-## Step 3 — Add Syncfusion CSS
+## Add Syncfusion CSS
 
 Import the Syncfusion theme CSS so the viewer styles are bundled with the web part. In your React component file (TypeScript example below) import the CSS from node_modules:
 
@@ -63,7 +63,7 @@ import '@syncfusion/ej2-pdfviewer/styles/material.css';
 
 If your SPFx build configuration forbids direct CSS imports from node_modules, add these `@import` lines to your component CSS (for example `PdfViewer.module.css`) using the appropriate path or deploy the CSS from a CDN.
 
-## Step 4 — Provide runtime assets and choose rendering mode
+## Provide runtime assets and choose rendering mode
 
 SPFx web parts run in the browser (client-side). That makes standalone (client-only) rendering the natural default: the PDF Viewer runs in the user's browser and uses `resourceUrl` to load runtime assets (pdfium.js, pdfium.wasm and supporting files).
 
@@ -88,7 +88,7 @@ Notes on rendering modes and SPFx:
 
 Important: ensure any host you use serves `.wasm` files with Content-Type `application/wasm` and that tenant/content security policies permit fetching assets from the chosen host.
 
-## Step 5 — Add the React component (TypeScript)
+## Add the React component (TypeScript)
 
 Create `PdfViewerClient.tsx` under `src/webparts/pdfViewer/components` and paste the minimal example below. This component is client-only and safe for SPFx (which runs in the browser):
 
@@ -131,7 +131,7 @@ export default PdfViewerClient;
 {% endhighlight %}
 {% endtabs %}
 
-## Step 6 — Use the component in the web part
+## Use the component in the web part
 
 Open the web part main React file (for example `src/webparts/pdfViewer/components/PdfViewer.tsx` created by the generator) and render `PdfViewerClient`:
 
@@ -148,7 +148,7 @@ export default function PdfViewer(): JSX.Element {
 }
 ```
 
-## Step 7 — Test and package
+## Test and package
 
 Run the local workbench for development: