How to navigate to different paragraphs in a DOCX Editor using Python
You can programmatically highlight specific paragraphs and navigate between them in a document by leveraging the Syncfusion® React DOCX Editor component.
How to achieve it
In this solution, Syncfusion® React DOCX Editor is customized to identify and highlight predefined paragraphs, enabling users to quickly locate and navigate between important sections through a findings panel.
- Search for predefined paragraph content when the document is loaded.
- Apply highlight formatting to all matching paragraphs.
- Insert bookmarks at the highlighted locations for navigation.
- Display the highlighted paragraphs in a findings panel along with their page numbers.
- Allow users to navigate directly to a highlighted paragraph by selecting an item from the findings panel.
- Provide a Next Highlight option to move through the highlighted paragraphs sequentially.
This article provides a step-by-step guide to programmatically highlight multiple paragraphs and navigate between them in React DOCX Editor using a Python backend service.
Step-by-Step Guide to Programmatically Highlight and Navigate Between Paragraphs
Frontend Setup (React Application)
Step 1: Create a React Application and Integrate the DOCX Editor
Create a React application and integrate the Syncfusion® React DOCX Editor component by following the steps provided in the documentation.
Step 2: Configure the Target Paragraphs
Define the paragraph contents that should be identified and highlighted when the document is loaded.
const PARAGRAPHS = [
{
bookmark: "Para_Bookmark_1",
text: "While most adore their fluffy fur and round heads, which help give them their cuddly bear quality, others are fascinated by the many mysteries of the giant panda."
},
{
bookmark: "Para_Bookmark_2",
text: "DNA analysis has put one mystery to rest. It has revealed that while the red panda is a distant relation, the giant panda's closest relative is the spectacled bear from South America."
}
];
Step 3: Highlight Matching Paragraphs and Build the Findings Panel
When the document is loaded, the side panel searches for the configured paragraphs, highlights the matching content, creates bookmarks, and lists the findings with their page numbers for easy navigation.
// Other code snippets
PARAGRAPHS.forEach((item) => {
editor.search.findAll(item.text);
const results = editor.search.searchResults;
if (results.length > 0) {
editor.search.searchResults.index = 0;
const pageNumber = editor.selection.startPage;
editor.selection.characterFormat.highlightColor =
"Yellow";
editor.editor.insertBookmark(item.bookmark);
data.push({
bookmark: item.bookmark,
pageNumber,
preview: getPreview(item.text)
});
}
results.clear();
});
Step 4: Navigate Between Highlighted Paragraphs
Allow users to select an item from the findings panel or use the Next Highlight button to navigate directly to the corresponding highlighted paragraph.
// Other code snippets
const navigateToBookmark = (
bookmark: string,
index: number
) => {
const editor =
docxEditorRef.current?.documentEditor;
if (!editor) {
return;
}
editor.selection.selectBookmark(bookmark);
setActiveIndex(index);
};
// Other code snippets
const nextHighlight = () => {
if (findings.length === 0) {
return;
}
const nextIndex =
(activeIndex + 1) % findings.length;
navigateToBookmark(
findings[nextIndex].bookmark,
nextIndex
);
};
Backend Setup (Python Web Service)
The Python Web Service acts as the backend service that handles DOCX Editor requests from the React application.
Step 1: Create the .NET Standard Wrapper Library
Create a .NET Standard Wrapper Library and add the required Document Editor Web API implementation in the controller file to handle document processing requests. The Python Web Service uses this wrapper library to access the Document Editor APIs.
For more information about configuring the Document Editor Web API, refer to the documentation.
Step 2: Install Required Python Dependencies
pip install -r requirements.txt
Step 3: Build and Publish the .NET Standard Wrapper Library
Navigate to the .NET Standard Wrapper Library folder and execute:
dotnet build -c Release
dotnet publish -c Release
Step 4: Start the Python Web Service
The app.py file contains the backend document processing APIs, including document import and export operations required by the React DOCX Editor. Navigate to the python-web-service folder and run:
python app.py
Step 5: Configure the Service URL
Configure the React DOCX Editor component to use the Python backend service.
serviceUrl = "http://127.0.0.1:5000/";
Run the Application
After configuring both the React application and Python Web Service:
- Start the Python Web Service.
- Open the React project directory.
- Run the application:
npm run dev
Your browser will open to http://localhost:5173, displaying the React application with the Syncfusion® DOCX Editor successfully.
You can download a complete working sample demonstrating how to programmatically highlight paragraphs and navigate between highlighted content in React DOCX Editor using a Python backend from GitHub.
Conclusion
I hope you enjoyed learning how to programmatically highlight specific paragraphs and navigate between them using the Syncfusion® React DOCX Editor with a Python backend service.
You can refer to our React DOCX Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React DOCX Editor example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
