Customizing Both Right-Click and Immediate Context Menus in PDF.js Express Plus

Technical Support
1

Which product are you using?

PDF.js Express Plus

Detailed description of issue
Hello Team,

We are currently evaluating PDF.js Express for our project and have encountered a requirement to customize the context menu options. Specifically, we need to customize both the immediate context menu that appears as soon as text is selected in the PDF viewer and the right-click context menu.

Current Implementation:

We have successfully added a custom context menu item to the right-click context menu using the following code:

addCustomContextMenu(instance): void {
    const docViewer = instance.docViewer;
    const iframeWindow = instance.iframeWindow;

    // Listen for the context menu event
    iframeWindow.addEventListener('contextmenu', (e) => {
      e.preventDefault();
      const selectedText = docViewer.getSelectedText();
      if (selectedText) {
        // Get the existing context menu
        const contextMenu = iframeWindow.document.querySelector('.ContextMenuPopup');
        if (contextMenu) {
          // Remove any existing custom menu items
          const existingMenuItem = contextMenu.querySelector('.custom-search-item');
          if (existingMenuItem) {
            contextMenu.removeChild(existingMenuItem);
          }

          // Create a new menu item
          const menuItem = iframeWindow.document.createElement('button');
          menuItem.className = 'Button ActionButton custom-search-item';
          menuItem.style.display = 'flex';
          menuItem.style.alignItems = 'center';
          menuItem.style.cursor = 'pointer';
          menuItem.setAttribute('type', 'button');
          menuItem.setAttribute('title', 'Search with selected text'); // Add tooltip

          // Create an icon element using Font Awesome
          const icon = iframeWindow.document.createElement('i');
          icon.className = 'fas fa-search'; // Font Awesome search icon class
          icon.style.fontSize = '16px';
          icon.style.marginRight = '8px';

          // Append icon to the menu item
          menuItem.appendChild(icon);

          // Add click event to the menu item
          menuItem.onclick = () => {
            console.log('Searching for:', selectedText);
            this.performSearch(selectedText);
          };

          // Add the new menu item to the existing context menu
          contextMenu.appendChild(menuItem);
        }
      }
    });
  }

  performSearch(searchTerm: string): void {
    const docViewer = this.wvInstance.docViewer;
    const results = [];
    const mode = this.wvInstance.Core.Search.Mode.PAGE_STOP | this.wvInstance.Core.Search.Mode.HIGHLIGHT | this.wvInstance.Core.Search.Mode.AMBIENT_STRING | this.wvInstance.Core.Search.Mode.REGEX;
    const searchOptions = {
      fullSearch: true,
      onResult: (result) => {
        results.push(result);
        docViewer.displayAdditionalSearchResult(result);
      },
      onDocumentEnd: () => {
        docViewer.displayAdditionalSearchResults(results);
      }
    };
    docViewer.textSearchInit(searchTerm, mode, searchOptions);
  }

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
This is a request to get the help on context menu in both selecting text and right click

Link to document
{Provide a link to the document in question if possible}

Code snippet
{Provide a relevant code snippet}

Issue:

While this code works perfectly for the right-click context menu, we are facing challenges with customizing the immediate context menu that appears as soon as text is selected in the PDF viewer. We would like to add similar custom options to this immediate context menu.

Request:

Could you please provide guidance or examples on how to customize the immediate context menu that appears upon text selection in PDF.js Express? Specifically, we would like to add custom options similar to what we have done for the right-click context menu.

3

Hi there,

We have a guide on customizing the different types of popups, please try it out:

Best regards,
Kevin Kim