Remove inline text selection tools

The inline text selection toolbar in Nutrient Web SDK provides predefined tools for text annotation. You can customize this toolbar by removing specific tools to match your application’s requirements.

This is helpful in scenarios such as:

  • Simplifying the interface for specific workflows
  • Restricting annotation capabilities based on user permissions
  • Creating focused editing experiences for different user roles

The toolbar includes these predefined items by default:

  • highlight
  • underline
  • strikeout
  • squiggle
  • comment
  • redact-text-highlighter

To remove all tools at once, refer to the remove all tools guide.

Removing tools at configuration time

You can specify which tools to include when initially loading the SDK. The example below keeps only the highlight tool on desktop layouts while showing all default tools on mobile:

NutrientViewer.load({
  // ...other options.
  inlineTextSelectionToolbarItems: (
    { defaultItems, hasDesktopLayout },
    selection
  ) => {
    if (hasDesktopLayout) {
      // Keep only the highlight tool on desktop.
      return defaultItems.filter(item => item.type === 'highlight');
    }
    // Show all default tools on mobile.
    return defaultItems;
  }
});

The filter() method creates a new array containing only items that match the specified condition. In this case, it keeps only the item with type === 'highlight'. The hasDesktopLayout parameter enables you to provide different toolbar configurations for desktop and mobile layouts.

Removing tools after loading

You can also change the toolbar after the SDK has loaded using instance.setInlineTextSelectionToolbarItems. This approach is useful when you need to modify the toolbar dynamically based on user actions, permission changes, or application state:

instance.setInlineTextSelectionToolbarItems(
  ({ defaultItems, hasDesktopLayout }, selection) => {
    if (hasDesktopLayout) {
      // Keep only the highlight tool on desktop.
      return defaultItems.filter(item => item.type === 'highlight');
    }
    // Show all default tools on mobile.
    return defaultItems;
  }
);

This method enables you to update the toolbar dynamically after the document loads. Use this approach when you need to:

  • Change available tools based on user actions or events
  • Toggle toolbar configuration without reloading the document
  • Implement conditional toolbar behavior based on document state