Merge pull request #2306 from syncfusion-content/EJ2-1010807-diataxis-organize

1010807: Revamped react organize pages module using diataxis approach

Author: AnanthaGokulaRaman

Document-Processing-toc.html

@@ -1028,13 +1028,18 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/react/forms/form-fields-api">APIs</a></li>
 								</ul>
 							</li>
-							<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pdf">Organize Pages</a>
-								<ul>
-									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/overview">Overview</a></li>
+							<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/overview">Organize Pages</a>
+								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/copy-pages">Copy pages</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/import-pages">Import pages</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/insert-blank-pages">Insert blank pages</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/remove-pages">Remove pages</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/reorder-pages">Reorder pages</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/rotate-pages">Rotate pages</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/zoom-pages">Zoom pages</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/extract-pages">Extract Pages</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/programmatic-support">Programmatic Support</a></li>
-									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/ui-interactions">UI Interactions</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/toolbar">Toolbar</a></li>
-									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/extract-pages">Extract Pages</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/mobile-view">Mobile View</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/events">Events</a></li>
 								</ul>

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

@@ -0,0 +1,69 @@
+---
+layout: post
+title: Copy pages in Organize Pages in React PDF Viewer | Syncfusion
+description: Learn how to duplicate pages using the Organize Pages UI in the React PDF Viewer of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Copy Pages in React PDF Viewer
+
+## Overview
+
+This guide explains how to duplicate pages within the current PDF using the Organize Pages UI.
+
+**Outcome**: Copied pages are inserted adjacent to the selection and included in exported PDFs.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- PDF Viewer injected with `PageOrganizer` module
+
+## Steps
+
+1. Open the Organize Pages view
+
+	- Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages dialog.
+
+2. Select pages to duplicate
+
+	- Click a single thumbnail or use Shift+click/Ctrl+click to select multiple pages.
+
+3. Duplicate selected pages
+
+	- Click the **Copy Pages** button in the Organize Pages toolbar; duplicated pages are inserted to the right of the selected thumbnails.
+
+4. Duplicate multiple pages at once
+
+	- When multiple thumbnails are selected, the Copy action duplicates every selected page in order.
+
+	![Copy pages in organize view](../images/organize-copy.png)
+
+5. Undo or redo changes
+
+	- Use **Undo** (Ctrl+Z) or **Redo** to revert or reapply recent changes.
+
+	![Undo and redo Organize Pages toolbar](../images/undo-redo.png)
+
+6. Persist duplicated pages
+
+	- Click **Save** or **Save As** to include duplicated pages in the saved/downloaded PDF.
+
+## Expected result
+
+- Selected pages are duplicated and included in the saved PDF.
+
+## Enable or disable Copy Pages button
+
+To enable or disable the **Copy Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-copy-option) for the guidelines.
+
+## Troubleshooting
+
+- If duplicates are not created: verify that the changes are persisted using **Save**.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)

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

@@ -0,0 +1,62 @@
+---
+layout: post
+title: Import pages in Organize Pages in React PDF Viewer | Syncfusion
+description: How to import pages from another PDF into the current document using the Organize Pages UI in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Import pages using the Organize Pages tool
+
+## Overview
+
+This guide explains how to import pages from another PDF into the current document using the **Organize Pages** UI in the EJ2 React PDF Viewer. 
+
+**Outcome**: Imported pages appear as thumbnails and are merged into the original document when saved or exported.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- PDF Viewer is injected with `PageOrganizer` service
+- [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) (standalone) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) (server-backed) configured when required
+
+## Steps
+
+1. Open the Organize Pages view
+
+	- Click the **Organize Pages** button in the viewer navigation toolbar to open the Organize Pages dialog.
+
+2. Start import
+
+	- Click **Import Document** and choose a valid PDF file from your local file system.
+
+3. Place imported pages
+
+	- Imported pages appear as thumbnails. If a thumbnail is selected, the imported pages are inserted to the right of the selection; otherwise they are appended at the start of the document.
+
+    ![Import PDF animation showing thumbnail insertion](../images/import.gif)
+
+4. Persist changes
+
+	- Click **Save** or **Save As** (or download) to persist the merged document.
+
+## Expected result
+
+- Imported pages display as a single thumbnail in Organize Pages and are merged into the original PDF when saved or exported.
+
+## Enable or disable Import Pages button
+
+To enable or disable the **Import Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-import-option) for the guidelines.
+
+## Troubleshooting
+
+- **Import fails**: Ensure the selected file is a valid PDF and the browser file picker is permitted.
+- **Imported pages not visible**: Confirm that the import is persisted using **Save** or **Save As**.
+- **Import option disabled**: Ensure [`pageOrganizerSettings.canImport`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#canimport) is set to `true` to enable import option.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)

Document-Processing/PDF/PDF-Viewer/react/organize-pages/insert-blank-pages.md

@@ -0,0 +1,68 @@
+---
+layout: post
+title: Insert blank pages in Organize Pages in React PDF Viewer | Syncfusion
+description: How to insert blank pages into a PDF using the Organize Pages UI in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Insert blank pages using the Organize Pages tool
+
+## Overview
+
+This guide describes inserting new blank pages into a PDF using the **Organize Pages** UI in the EJ2 React PDF Viewer.
+
+**Outcome**: A blank page is added at the chosen position and will appear in thumbnails and exports.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- `PageOrganizer` services injected into `PdfViewerComponent`
+- [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) for standalone mode or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) for server-backed mode configured as required
+
+## Steps
+
+1. Open the Organize Pages view
+
+	- Click the **Organize Pages** button in the viewer navigation toolbar to open the panel.
+
+2. Select insertion point
+
+	- Hover over the thumbnail before or after which you want the blank page added.
+
+3. Insert a blank page
+
+	- Click the **Insert Left** / **Insert Right** option and choose the position (Before / After). A new blank thumbnail appears in the sequence.
+
+    ![Insert pages in Organize Pages](../images/organize-insert.png)
+
+4. Adjust and confirm
+
+	- Reposition or remove the inserted blank page if needed using drag-and-drop or delete options.
+
+5. Persist the change
+
+	- Click **Save** or **Save As** to include the blank page in the exported PDF.
+
+## Expected result
+
+- A blank page thumbnail appears at the chosen position and is present in any saved or downloaded PDF.
+
+## Enable or disable Insert Pages button
+
+To enable or disable the **Insert Pages** button in the page thumbnails, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-insert-option) for the guidelines
+
+## Troubleshooting
+
+- **Organize Pages button missing**: Verify `PageOrganizer` is included in `Inject` and `Toolbar` is enabled.
+- **Inserted page not saved**: Confirm [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) is configured for your selected processing mode.
+- **Insert options disabled**: Ensure [`pageOrganizerSettings.canInsert`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#caninsert) is set to `true` to enable insert option.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
+- [Remove pages in Organize Pages](./remove-pages)
+- [Reorder pages in Organize Pages](./remove-pages)

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

@@ -27,13 +27,10 @@ The Organize Pages panel supports the following actions:
 
 After completing the changes, apply them by selecting **Save** to overwrite the current document or **Save As** to download a new copy that retains the updated page order.
 
-For a full guide to Organize Pages in React, see the feature landing page: [Organize pages in React PDF Viewer](./organize-pdf).
-
 See also:
 
-- [UI interactions for Organize Pages](./organize-pdf/ui-interactions-organize-page)
-- [Toolbar items for Organize Pages](./organize-pdf/toolbar-organize-page)
-- [Programmatic support for Organize Pages](./organize-pdf/programmatic-support-for-organize-page)
-- [Organize Pages events](./organize-pdf/organize-pdf-events)
-- [Organize Pages in mobile view](./organize-pdf/organize-page-mobile-view)
+- [Toolbar customization for Organize Pages](./toolbar)
+- [Programmatic support for Organize Pages](./programmatic-support)
+- [Organize Pages events](./events)
+- [Organize Pages in mobile view](./mobile-view)
 

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

@@ -0,0 +1,74 @@
+---
+layout: post
+title: Remove pages using Organize Pages in React PDF Viewer | Syncfusion
+description: How to remove one or more pages from a PDF using the Organize Pages view in the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Remove pages using the Organize Pages tool
+
+## Overview
+
+This guide shows how to delete single or multiple pages from a PDF using the **Organize Pages** UI in the EJ2 React PDF Viewer. 
+
+**Outcome**: You will remove unwanted pages and save or download the updated PDF.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed in your project
+- Basic PDF Viewer setup ([`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) for standalone mode or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) for server-backed mode)
+
+## Steps
+
+1. Open the Organize Pages view
+
+   - Click the **Organize Pages** button in the viewer navigation toolbar to open the Organize Pages dialog.
+
+2. Select pages to remove
+
+   - Click a thumbnail to select a page. Use Shift+click or Ctrl+click to select multiple pages. Use the **Select all** button to select every page.
+
+3. Delete selected pages
+
+   - Click the **Delete Pages** icon in the Organize Pages toolbar to remove the selected pages. The thumbnails update immediately to reflect the deletion.
+
+   - Delete a single page directly from its thumbnail: hover over the page thumbnail to reveal the per-page delete icon, then click that icon to remove only that page.
+
+   ![Delete selected pages using the Organize Pages delete control](../images/organize-delete.png)
+
+4. Multi-page deletion
+
+   - When multiple thumbnails are selected, the Delete action removes all selected pages at once.
+
+5. Undo or redo deletion
+
+    - Use **Undo** (Ctrl+Z) to revert the last deletion.
+    - Use **Redo** (Ctrl+Y) to revert the last undone deletion.
+
+    ![Undo and redo Organize Pages toolbar](../images/undo-redo.png)
+
+6. Save the PDF after deletion
+
+   - Click **Save** to apply changes to the currently loaded document, or **Save As** / **Download** to download a copy with the removed pages permanently applied.
+
+## Expected result
+
+- Selected pages are removed from the document immediately in the Organize Pages dialog.
+- After clicking **Save** or **Save As**, the resulting PDF reflects the deletions.
+
+## Enable or disable Remove Pages button
+
+To enable or disable the **Remove Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-delete-option) for the guidelines.
+
+## Troubleshooting
+
+- **Delete button disabled**: Ensure `PageOrganizer` is injected and [`pageOrganizerSettings.canDelete`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#candelete) is not set to `false`.
+- **Selection not working**: Verify that the Organize Pages dialog has focus; use Shift+click for range selection.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)

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

@@ -0,0 +1,66 @@
+---
+layout: post
+title: Reorder pages in Organize Pages in React PDF Viewer | Syncfusion
+description: How to rearrange pages using drag-and-drop and grouping in the Organize Pages UI of the Syncfusion React PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Reorder pages using the Organize Pages view
+
+## Overview
+
+This guide describes how to rearrange pages in a PDF using the **Organize Pages** UI.
+
+**Outcome**: Single or multiple pages can be reordered and the new sequence is preserved when the document is saved or exported.
+
+## Prerequisites
+
+- EJ2 React PDF Viewer installed
+- `Toolbar` and `PageOrganizer` services injected into the viewer
+
+## Steps
+
+1. Open the Organize Pages view
+
+	- Click the **Organize Pages** button in the navigation toolbar to open the page thumbnails panel.
+
+2. Reorder a single page
+
+	- Drag a thumbnail to the desired position. The thumbnails update instantly to show the new order.
+
+3. Reorder multiple pages
+
+	- Select multiple thumbnails using Ctrl or Shift, then drag the selected group to the new location.
+
+    ![Rearrange pages animation showing drag-and-drop behavior](../images/rotate-rearrange.gif)
+
+4. Verify and undo
+
+	- Use **Undo** / **Redo** options to revert accidental changes.
+
+    ![Undo and redo Organize Pages toolbar](../images/undo-redo.png)
+
+5. Persist the updated order
+
+	- Click **Save** or download the document using **Save As** to persist the new page sequence.
+
+## Expected result
+
+- Thumbnails reflect the new page order immediately and saved / downloaded PDFs preserve the reordered sequence.
+
+## Enable or disable reorder option
+
+To enable or disable the **Reorder pages** option in the Organize Pages, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-rearrange-option) for the guidelines
+
+## Troubleshooting
+
+- **Thumbnails won't move**: Confirm [`pageOrganizerSettings.canRearrange`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#canrearrange) is is not set to `false`.
+- **Changes not saved**: Verify [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) (server) or [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) (standalone) is configured correctly.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)