We have just released a new package versions of the TX Text Control DocumentViewer for ASP.NET, ASP.NET Core, Angular, and React.

• TXTextControl.Web.DocumentViewer 32.3.1
  https://www.nuget.org/packages/TXTextControl.Web.DocumentViewer/32.3.1

Updating the Packages

To update the NuGet package, open the NuGet Package Manager, select nuget.org as the package source, select Updates and locate the TXTextControl.Web.DocumentViewer package. From the Versions drop-down list, select the latest stable version (32.3.1).

To update the Angular npm package use the following command:

npm install @txtextcontrol/tx-ng-document-viewer@latest

To update the React npm package use the following command:

npm install @txtextcontrol/tx-react-document-viewer@latest

Fixed Issues

Version 32.3.1 includes both new features and fixes for known issues. The below tables lists all fixed known issues.

Injecting CSS

A new feature is the ability to inject custom CSS into the DocumentViewer. This can be done by adding CSS rules to the shadow DOM of the DocumentViewer. The following code snippet shows how to inject a custom CSS rule into the DocumentViewer:

window.addEventListener("documentViewerLoaded", function (eventArgs) {
  const sheet = new CSSStyleSheet();
  sheet.insertRule(".page-image { background-image: url('/Images/loader2.svg') !important; background-repeat : no-repeat !important; background-size: contain !important; }");
  sheet.insertRule("#tx-thumbnails img { background-image: url('/Images/loader2.svg') !important; background-repeat : no-repeat !important; background-size: contain !important; }");
  eventArgs.detail.targetElement.shadowRoot.adoptedStyleSheets = [sheet];
 });

This code snippet injects a custom CSS rule that changes the loading images for the page and the thumbnails that are displayed while the document loads.

Or you can use this new way to customize the style of viewer elements. The following code changes the background color of the toolbar:

window.addEventListener("documentViewerLoaded", function (eventArgs) {
   const sheet = new CSSStyleSheet();
   sheet.insertRule("#tx-toolbar { background: linear-gradient(-90deg, #ea1183, #822162); !important; }");
   eventArgs.detail.targetElement.shadowRoot.adoptedStyleSheets = [sheet];
});

Make sure to update the packages to the latest version to benefit from the new features and fixes.

Happy coding!