1.5 release notes

We’re excited to introduce Nutrient Web SDK 1.5, a release that brings significant advancements in accessibility, theming capabilities, and annotation handling. This version introduces RTL layout support and comprehensive theme customization options, along with numerous improvements that make the SDK more accessible and user-friendly across diverse use cases. See the changelog for the full list.

UI updates

This release brings exciting improvements to the Web SDK’s user interface and theming system, making it more flexible and consistent. The following UI sections have been migrated in 1.5:

• Multi-select toolbar
• Signatures sidebar
• Print dialog
• Form Creator popover
• Loading screen

Most customizations will continue to work as before, but if you notice anything unexpected and you were using CSS classes or CSS variables for customization, our Baseline UI migration guide offers helpful tips and guidance.

RTL layout and advanced theming

This release introduces RTL (Arabic/Hebrew) layout support. This feature represents an important step in our internationalization support. Reach out to us with feedback to help shape the future development of this feature.

Version 1.5 also delivers a major enhancement to theming with support for granular theme customization. Developers now have unprecedented control over the visual appearance of the SDK, allowing for more seamless integration with existing applications and brand identities. For example, you can now customize specific UI elements independently, creating a more cohesive look and feel that matches your application’s design language.

Additionally, we’ve added support for light and dark high contrast themes, significantly improving accessibility for users with visual impairments. These specialized themes enhance visibility and readability for users who require higher contrast ratios, ensuring the SDK is usable by a wider audience.

Accessibility enhancements

Nutrient Web SDK 1.5 brings substantial improvements to accessibility. Accessibility labels and translations for toolbars have been enhanced, providing a better experience for screen reader users. We’ve also fixed several issues that affected keyboard navigation and screen reader compatibility:

• Resolved an issue where elements referenced in aria-labelledby and aria-describedby attributes weren’t present in the DOM. This improvement enhances compatibility with automated testing tools and improves the experience for screen reader users. List items in the annotation sidebar now correctly reference existing DOM elements.
• Fixed pagination buttons that lost aria attributes while using keyboard navigation. The “Previous Page” and “Next Page” buttons in the viewer toolbar now maintain their role and aria-label attributes when users navigate with the <kbd>Tab</kbd> key, ensuring consistent accessibility across interaction methods.

Enhanced annotation capabilities

Version 1.5 brings significant refinements to the annotation experience, with a focus on color handling, mobile usability, and user interface consistency.

Improved color handling

The text color palette in annotations has been improved with a streamlined color selection interface. The transparent swatch option has been removed, creating a more intuitive color selection experience with only functional color options available. This refinement ensures that all available color choices behave consistently and predictably.

Additionally, we’ve enhanced the 'None' color selection functionality for font and background colors when working with multiple text selections. The 'None' option can now be selected even if it’s currently active, and color selections are consistently applied across all selected text, ensuring uniform behavior across all annotation types.

Enhanced mobile experience

We’ve fixed an issue where the comment drawer didn’t open properly on mobile devices. This fix ensures comments are now accessible across all device types and screen sizes, allowing users to seamlessly interact with comment marker annotations in mobile view.

User interface refinements

We’ve fixed an issue where layout configuration icons didn’t update when custom icons were passed via API. This fix allows developers to maintain a consistent visual language throughout their applications by ensuring custom icons are properly displayed.

We’ve also fixed an issue where users were able to submit blank typed signatures: The “Done” button is now disabled until at least one visible character is entered, ensuring signatures contain meaningful content and preventing potential errors.

Additionally, we’ve addressed a problem where the Document Editor image gallery didn’t auto-scroll during drag operations. This fix restores the ability to drag pages beyond the visible viewport during page reordering. For example, when reordering pages in a multipage document, the editor now automatically scrolls when a dragged page reaches the edge of the visible area.

Core functionality and document handling

This release delivers substantial improvements to the core functionality of the SDK, with a focus on comments, document comparison, security, and rendering accuracy.

Comments UI

Previously, comments threads were always displayed in a floating sidebar to the side of the page, which wasn’t convenient as soon as the page was zoomed in and there wasn’t enough space left to show the comments without having to scroll the viewport. In this release, the comments sidebar is now only shown when there’s enough space to display it without scrolling. If there isn’t enough space, the comments are shown in a popover instead, which can be opened by clicking on the comment marker. This popover dialog was previously visible only in FIT_TO_WIDTH zoom mode.

We understand that this change may not be ideal for all use cases, so we now provide an extension to the NutrientViewer.ViewState API that makes it possible to customize this behavior at any time by setting NutrientViewer.ViewState#commentDisplay:

• NutrientViewer.CommentDisplay.FITTING — The default value; will show comments in a floating sidebar by the page side when there’s enough space to do so, and in a popover when there isn’t, and the marker annotation is selected.
• NutrientViewer.CommentDisplay.FLOATING — Will always show comments in a floating sidebar by the page side.
• NutrientViewer.CommentDisplay.POPOVER — Will always show comments in a popover when the marker annotation is selected.

As an example of how it’s used, here’s how to set the commentDisplay so the comments UI behaves like in previous versions, always showing comments in a floating sidebar unless in FIT_TO_WIDTH zoom mode:

const instance = await NutrientViewer.load(config);

instance.setViewState((viewState) =>
  viewState.set("commentDisplay", NutrientViewer.CommentDisplay.FLOATING),
);

instance.addEventListener(
  "viewState.change",
  function (viewState, previousViewState) {
    const zoom =
      typeof viewState.zoom === "object"
        ? viewState.zoom.zoomMode
        : viewState.zoom;
    const previousZoom =
      typeof previousViewState.zoom === "object"
        ? previousViewState.zoom.zoomMode
        : previousViewState.zoom;

    if (
      previousZoom === zoom &&
      viewState.commentDisplay === previousViewState.commentDisplay
    ) {
      return;
    }

    if (
      zoom === NutrientViewer.ZoomMode.FIT_TO_WIDTH &&
      viewState.commentDisplay !== NutrientViewer.CommentDisplay.POPOVER
    ) {
      instance.setViewState((viewState) =>
        viewState.set("commentDisplay", NutrientViewer.CommentDisplay.POPOVER),
      );
    } else if (
      viewState.commentDisplay !== NutrientViewer.CommentDisplay.FLOATING
    ) {
      instance.setViewState((viewState) =>
        viewState.set("commentDisplay", NutrientViewer.CommentDisplay.FLOATING),
      );
    }
  },
);

Enhanced document comparison and XFDF support

Word-level text comparison has been added, providing more granular document comparison capabilities that allow users to identify changes with greater precision. Previously, all comparisons were done at the character level, which could result in unintuitive highlighting of changes. For example, changing “January” to “February” would show as a deletion of “Jan,” addition of “Febr,” and “uary” as unchanged. With word-level comparison, the entire word is highlighted as changed, creating a more intuitive and readable comparison.

Configuration options for rich text when working with XFDF files have also been added, expanding the SDK’s flexibility when working with this format and ensuring consistent rich text handling across different document workflows. This enhancement allows for better propagation of rich text configuration from the Web SDK to Core and Document Engine backends when performing XFDF operations.

Security and performance improvements

The Content Security Policy (CSP) HTTP header required unsafe-eval to be set in recent versions. You may now use wasm-unsafe-eval instead.

We’ve also updated GdPicture to version 14.3.9, bringing the latest improvements from this underlying technology to our SDK.

Rendering and UI consistency

Several rendering issues have been addressed to ensure accurate display of annotations and content:

• Fixed an issue where text markup annotations were rendered with the wrong proportions when zoomed, and in the wrong direction on rotated pages. This fix ensures markup annotations like squiggly, strikethrough, and underline now maintain appropriate proportions regardless of zoom level, page rotation, or text size, improving overall readability.
• Fixed an issue where moving a stamp annotation rotated at 45 degrees would resize it. This fix ensures stable dimensions for rotated stamps throughout all user interactions, preventing unwanted size changes during movement.
• Fixed an issue where comment threads would appear clipped in narrow screen widths. This fix ensures comment boxes now remain fully visible and accessible, even when the viewport is narrow or when using high zoom levels.
• Fixed an issue where the comments sidebar and popover were simultaneously visible in FIT_TO_WIDTH view mode. This fix creates a more consistent and less cluttered user interface.

Form handling and stability

• Fixed an issue where it wasn’t possible to correctly set the time in some time form fields. This fix ensures users can now properly set time values across all platforms, with consistent validation behavior and support for proper time formats on both desktop and mobile devices.
• Fixed an issue where using some Form Creator and Measurements dropdowns would throw an error. This fix resolves problems with Shadow DOM compatibility, ensuring consistent behavior when creating and managing form fields and annotations.
• Fixed an issue where the first new comment text field wouldn’t be focused when creating a comment, improving workflow efficiency. Additionally, we’ve fixed a crash that could occur when creating a text parser for a page with verbose logging enabled, ensuring consistent performance, even with complex document structures.

For a complete list of changes, bug fixes, and performance improvements, refer to the changelog. For previous release notes, refer to the Web SDK 1.4 release notes. We appreciate your feedback and contributions as we continue to enhance Nutrient Web SDK.