Merge pull request #2311 from syncfusion-content/EJ2-1010807-staging-errors

1010807: Resolved staging errors respect to styles in react

Author: AnanthaGokulaRaman

Document-Processing/PDF/PDF-Viewer/react/context-menu/custom-context-menu.md

@@ -22,8 +22,7 @@ You can add custom options to the context menu using the [addCustomMenu()](https
 2. Call the [`addCustomMenu`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#addcustommenu) method within the [`documentLoad`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#documentload) event handler.
 
 ```js
-   export function App() {
-
+export function App() {
     let menuItems = [
         {
             text: 'Search In Google',
@@ -55,7 +54,6 @@ You can add custom options to the context menu using the [addCustomMenu()](https
         var viewer = document.getElementById('container').ej2_instances[0];
         viewer.addCustomMenu(menuItems, false);
     }
-
     return (
         <div>
             <div className='control-section'>
@@ -223,19 +221,13 @@ The following is the output of the custom context menu with customization.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
-{% raw %}
 {% include code-snippet/pdfviewer/react/custom-context-menu/app/index.jsx %}
-{% endraw %}
 {% endhighlight %}
 {% highlight ts tabtitle="index.tsx" %}
-{% raw %}
 {% include code-snippet/pdfviewer/react/custom-context-menu/app/index.tsx %}
-{% endraw %}
 {% endhighlight %}
 {% endtabs %}
 
 N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` within the <div> element in either the `index.TSX` or `index.JSX` file: **serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**.
 
-{% previewsample "document-processing/code-snippet/pdfviewer/react/custom-context-menu" %}
-
 [View the sample in Stack blitz](https://stackblitz.com/edit/react-zmbkebwq?file=index.js)

Document-Processing/PDF/PDF-Viewer/react/how-to/existing-react-layout.md

@@ -21,8 +21,9 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
 
 	Basic div:
 
-	```ts
-	// App.tsx
+	{% tabs %}
+    {% highlight ts tabtitle="App.tsx" %}
+    {% raw %}
 	import React from 'react';
 	import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
@@ -40,13 +41,17 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
             </div>
         );
 	}
-	```
+	{% endraw %}
+    {% endhighlight %}
+    {% endtabs %}
+
     ![PDF Viewer in div](../images/react-layouts-div.png)
 
 	Flex container: keep `minHeight: 0` on flex children so the viewer can shrink/grow correctly:
 
-	```ts
-	// App.tsx
+    {% tabs %}
+    {% highlight ts tabtitle="App.tsx" %}
+    {% raw %}
 	import React from 'react';
 	import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
@@ -69,13 +74,17 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
             </div>
         );
 	}
-	```
+	{% endraw %}
+    {% endhighlight %}
+    {% endtabs %}
+
     ![PDF Viewer in Flex box](../images/react-layouts-flexbox.png)
 
 	CSS Grid - reserve rows/columns using `grid-template-rows` or `grid-template-columns`:
 
-	```ts
-	// App.tsx
+	{% tabs %}
+    {% highlight ts tabtitle="App.tsx" %}
+    {% raw %}
 	import React from 'react';
     import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
@@ -151,14 +160,18 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
             minHeight: 0 // critical so the viewer can grow/shrink
         }
     };
-	```
+	{% endraw %}
+    {% endhighlight %}
+    {% endtabs %}
+
     ![PDF Viewer in grid](../images/react-layouts-grid.png)
 
 - **Use viewer inside Tab components**
 	- The react PDF Viewer are also supported inside Syncfusion tab components. 
 
-	```ts
-	// App.tsx
+	{% tabs %}
+    {% highlight ts tabtitle="App.tsx" %}
+    {% raw %}
 	import React, { useRef } from 'react';
     import { TabComponent, TabItemsDirective, TabItemDirective } from '@syncfusion/ej2-react-navigations';
     import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer';
@@ -224,14 +237,18 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
             </div>
         );
     };
-	```
+	{% endraw %}
+    {% endhighlight %}
+    {% endtabs %}
+
     ![PDF Viewer in tab](../images/react-layouts-tab.png)
 
 - **Use viewer inside Dialog**
 	- If the viewer sits inside a dialog, for example Syncfusion Dialog, render or initialize the viewer after the dialog open events. The DOM must be visible for the viewer to measure layout.
 
-	```ts
-	// App.tsx
+	{% tabs %}
+    {% highlight ts tabtitle="App.tsx" %}
+    {% raw %}
 	import React, { useRef, useCallback } from 'react';
     import { DialogComponent } from '@syncfusion/ej2-react-popups';
     import {
@@ -295,14 +312,18 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
             </div>
         );
     };
-	```
+	{% endraw %}
+    {% endhighlight %}
+    {% endtabs %}
+
     ![PDF Viewer in dialog](../images/react-layouts-dialog.png)
 
 - **Use viewer inside Collapsible sections**
 	- For accordions or collapsible containers, either render the viewer lazily when the section expands or dispatch the resize event after expansion so the viewer can recompute layout.
 
-	```ts
-	// App.tsx
+	{% tabs %}
+    {% highlight ts tabtitle="App.tsx" %}
+    {% raw %}
 	import React, { useCallback, useRef } from 'react';
     import {
         AccordionComponent, AccordionItemsDirective, AccordionItemDirective, ExpandEventArgs
@@ -382,9 +403,10 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
             </div>
         );
     };
-	```
-    ```css
-    /* App.css */
+	{% endraw %}
+    {% endhighlight %}
+    {% highlight css tabtitle="App.css" %}
+    {% raw %}
     .page {
         height: 100vh;
         display: grid;
@@ -398,7 +420,10 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
         background: #fff;
         border-bottom: 1px solid #e5e5e5;
     }
-    ```
+    {% endraw %}
+    {% endhighlight %}
+    {% endtabs %}
+
     ![PDF Viewer in accordion](../images/react-layouts-accordion.png)
 
 ## Why visibility and height matter
@@ -412,12 +437,12 @@ The React PDF Viewer can be embedded into dashboards, admin panels, split‑scre
 - Short patterns:
   - Dispatch a global resize right after the container becomes visible:
 
-```ts
+```js
 setTimeout(() => window.dispatchEvent(new Event('resize')), 0);
 ```
 - Use a `ResizeObserver` when the host size may change frequently:
 
-```ts
+```js
 const observer = new ResizeObserver(() => {
   window.dispatchEvent(new Event('resize'));
 });

Document-Processing/PDF/PDF-Viewer/react/theming-and-styling.md

@@ -28,14 +28,14 @@ The PDF Viewer applies styles to the toolbar, buttons, panels, annotations, and
 **Step-2:** To change the theme to tailwind, add the imports to tailwind theme in `app.css`.
 
 ```css
-   @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
-   @import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
-   @import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
-   @import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
-   @import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
-   @import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
-   @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
-   @import "../node_modules/@syncfusion/ej2-pdfviewer/styles/tailwind3.css";
+@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
+@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/tailwind3.css";
 ```
 
 ### Tutorial
@@ -78,8 +78,9 @@ Below is an approach that can be copied into the app that switches themes by dyn
 
 **Link-swap approach:**
 
-```ts
-// App.tsx
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
 type ThemeName = 'material3' | 'material3-dark';
 const THEME_LINK_ID = 'e-current-theme';
 function applyTheme(theme: ThemeName) {
@@ -127,7 +128,9 @@ export function App() {
         </div>
     </div>);
 }
-```
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 ## Custom Styles
 
@@ -143,8 +146,9 @@ While built-in themes provide a comprehensive look and feel, you might need to a
 
 Apply overrides using a wrapper class so the rules are scoped and safe to maintain. The following example adds custom styles to signature form fields:
 
-```css
-/* App.css */
+{% tabs %}
+{% highlight css tabtitle="App.css" %}
+{% raw %}
 /* This rule sets a scoped, custom black background for the PDF viewer page container */
 .e-custom-style .e-pv-page-container {
         background: #0b1220;
@@ -176,10 +180,10 @@ Apply overrides using a wrapper class so the rules are scoped and safe to mainta
     height: 100% !important;
     text-align: center !important;
 }
-```
-
-```ts
-// src/App.tsx
+{% endraw %}
+{% endhighlight %}
+{% highlight ts tabtitle="App.tsx" %}
+{% raw %}
 import './App.css';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
 
@@ -196,7 +200,9 @@ export function App() {
         </div>
     );
 }
-```
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
 
 ![Viewer background and signature fields example](images/styling-siganture-page-container.png)