How to highlight text and link it to specific content in a DOCX Editor using python ?

You can highlight selected text and link it to specific content within a document by leveraging the Syncfusion® React DOCX Editor component.

How to achieve it

In this solution, Syncfusion® React DOCX Editor is customized to create highlighted hyperlinks that navigate users to specific bookmarked locations within the document. The implementation involves the following steps:

Add bookmarks to the target locations within the document.
Extend the editor’s context menu with a custom Highlight and Link option.
Allow users to select text and choose a target bookmark from a dialog.
Create a hyperlink that links the selected text to the chosen bookmark.
Apply highlight formatting to the linked text, making it visually distinguishable.
Now users click on the highlighted text and navigate directly to the bookmarked content within the document.

This article provides a step-by-step guide to highlight text and create navigation links in React DOCX Editor using a Python backend service.

Step-by-Step Guide to Highlight Text and Create Navigation Links

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: Add a Custom Context Menu Item

Add a custom context menu item named Highlight and Link that allows users to create a navigation link from selected text.

// Other code snippets
const menuItems = [
    {
        text: "Highlight and Link",
        id: "highlight_and_link"
    }
];
editor.contextMenu.addCustomMenu(menuItems, false);
// Other code snippets

Step 3: Create a Hyperlink and Highlight the Selected Text

When users select text and choose Highlight and Link, a dialog displays the available bookmarks. After selecting a bookmark, the chosen text is converted into a highlighted hyperlink that navigates to the linked content.

// Other code snippets
editor.customContextMenuSelect = (args: any) => {
    console.log("Menu Clicked", args);

    if ((args.id === "highlight_and_link" || args.id?.endsWith("highlight_and_link")) && 
         !editor.selection.isEmpty && /\S/.test(editor.selection.text || "")) 
       {
          setSelectedText(editor.selection.text || "");

          const bookmarks = editor.getBookmarks() || [];
          setBookmarkList(bookmarks);

        if (bookmarks.length > 0) {
            bookmarkRef.current = bookmarks[0];
        }
        setDialogVisible(true);
    }
};
// Other code snippets

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 following 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 highlight text and link it to specific content in React DOCX Editor using a Python backend from GitHub.

Conclusion

I hope you enjoyed learning How to highlight text and link it to specific content in a docx editor using python in React application.

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!

Did you find this information helpful?

Yes

Comments (0)