Merge pull request #2316 from syncfusion-content/diataxis-changes_dev_staging

1010807: Resolving staging issues

Author: AnanthaGokulaRaman

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

@@ -65,7 +65,9 @@ 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):
 
-```js
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
 // src/components/pdfviewer.js
 import React, { useEffect, useState } from 'react';
 import {
@@ -99,11 +101,15 @@ export default function PdfViewer() {
         </div>
     );
 }
-```
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 Add a page that uses the component at `src/pages/index.js`:
 
-```js
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
 // src/pages/index.js
 import React from "react";
 import PdfViewer from "../components/pdfviewer";
@@ -117,7 +123,9 @@ export default function PdfViewerPage() {
     </main>
   );
 }
-```
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 6. Run the Gatsby dev server:
 

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

@@ -50,7 +50,9 @@ How‑to: Render a minimal `PdfViewerComponent` in `src/index.js`.
 
 Prefer a single `Add component` example using the CDN `resourceUrl` (no server required). Replace the CDN version as needed.
 
-```js
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
 import { render } from 'preact';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
 import './style.css';
@@ -68,7 +70,9 @@ function App() {
 }
 
 render(<App />, document.getElementById('app'));
-```
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 **See also**
 

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

@@ -144,7 +144,9 @@ Vite / plain React (`src/` tree)
 
 Example component (works in either location):
 
-```ts
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
 // components/PdfViewerClient.ts
 import React, { useEffect, useState } from 'react';
 import {
@@ -175,7 +177,9 @@ export default function PdfViewerClient() {
     </div>
   );
 }
-```
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 Routing / usage examples:
 

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

@@ -92,7 +92,9 @@ Important: ensure any host you use serves `.wasm` files with Content-Type `appli
 
 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):
 
-```ts
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
 // src/webparts/pdfViewer/components/PdfViewerClient.tsx
 import * as React from 'react';
 import {
@@ -125,7 +127,9 @@ export const PdfViewerClient: React.FC = () => {
 };
 
 export default PdfViewerClient;
-```
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 ## Step 6 — Use the component in the web part
 

Document-Processing/PDF/PDF-Viewer/react/open-pdf-files.md

@@ -20,7 +20,9 @@ This simple example demonstrates the minimal steps to show a PDF document in the
 2. Set `documentPath` to a publicly accessible URL.
 
 Example (TypeScript / React):
-```ts
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+{% raw %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -41,12 +43,15 @@ function App() {
 
 const root = ReactDOM.createRoot(document.getElementById('sample') as HTMLElement);
 root.render(<App />);
-```
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 
 ## Open PDF Files Using Different Source Types
 
 Below are concise instructions and short snippets for loading PDFs from several source types. Each subsection links to or describes the minimal approach — keep these pages as focused how-to guides if you expand them.
+
 ### Open PDF from URL
 
 - Set  [`documentPath`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#documentpath) to the external URL (see example above).
@@ -81,7 +86,7 @@ fetch(url)
 ```
 
 
-  ### Open PDF from database
+### Open PDF from database
 
   To load a PDF file from SQL Server database in a PDF Viewer, you can follow the steps below
 
@@ -190,7 +195,7 @@ fetch(url)
 
 [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
 
-  ### Open from Cloud Storage Services
+### Open from Cloud Storage Services
 
 Each link goes to a provider page with simple step-by-step instructions, sample code, and any authentication notes.
 
@@ -204,7 +209,7 @@ Each link goes to a provider page with simple step-by-step instructions, sample
 
 ---
 
-See also:
+**See also**
 
 
 - [Load documents dynamically in React PDF Viewer](./how-to/load-document)

Document-Processing/PDF/PDF-Viewer/react/save-pdf-files.md

@@ -71,7 +71,9 @@ public IActionResult Download([FromBody] Dictionary<string, string> jsonObject)
 
 Set the `serviceUrl` to point to your web service (for example, replace `https://localhost:44396/pdfviewer` with your server URL). Also set `documentPath` to the document URL you want to load.
 
-```js
+{% tabs %}
+{% highlight js tabtitle="JSX" %}
+{% raw %}
 import * as ReactDOM from 'react-dom';
 import * as React from 'react';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -97,15 +99,19 @@ function App() {
 }
 const root = ReactDOM.createRoot(document.getElementById('sample'));
 root.render(<App />);
-```
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 [View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Save%20and%20Load/Save%20PDF%20file%20to%20server)
 
 ## Download PDF file as a copy
 
 The built-in toolbar includes a download option that saves the updated PDF to the user's local file system. You can also trigger the same behavior programmatically by calling the viewer's [`download()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#download) API.
 
-```js
+{% tabs %}
+{% highlight js tabtitle="JSX" %}
+{% raw %}
 import * as ReactDOM from 'react-dom/client';
 import * as React from 'react';
 import './index.css';
@@ -139,7 +145,9 @@ return (<div>
 }
 const root = ReactDOM.createRoot(document.getElementById('sample'));
 root.render(<App />);
-```
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 ## Save modified PDF to a database
 
@@ -247,7 +255,7 @@ Each link below goes to a provider page with simple, step-by-step instructions a
 - [Azure AD (auth notes)](./save-pdf-file/to-azure-active-directory)
 ---
 
-See also:
+**See also**
 
 - [Get Base64 value from a loaded PDF using saveAsBlob API](./how-to/get-base64)
 - [Open PDF files overview](./open-pdf-files)