ReferenceTextComparisonConfiguration

Interface TextComparisonConfiguration

Interface

Hierarchy

SharedTextComparisonConfigurationTextComparisonConfiguration

Properties

This allows you to overwrite the auto-detected URL for the Core worker Text Comparison UI assets in Standalone mode. This setting may be necessary when you integrate TextComparison UI for Web JavaScript in an environment that limits the size of the static assets, like Salesforce.

If your Core assets are served from a different origin, you have to include proper CORS headers: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

and nutrient-viewer-[hash].wasm) must be located in a nutrient-viewer-lib subfolder accessible from the baseCoreUrl.

Example

NutrientViewer.loadTextComparison({ baseCoreUrl: 'https://public-server.pspdfkit.com/pspdfkit-core/' });

Default Value

Auto-detected it will use the same value as baseUrl if set, or the auto-detected value from the currently executed <script> tag.

baseProcessorEngineUrl

Optional

string

optional

URL for the processor engine assets (GdPicture). Required when Office documents (DOCX, XLSX, PPTX) are used and assets are served from a different location than baseUrl.

baseUrl

Optional

string

optional

This allows you to overwrite the auto-detected URL for all NutrientViewer assets. This setting is necessary when you load Text Comparison UI for Web JavaScript from a different URL.

If your assets are served from a different origin, you have to include proper CORS headers: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Example

NutrientViewer.loadTextComparison({ baseUrl: 'https://public-server.pspdfkit.com/' });

Default Value

Auto-detected based on the currently executed <script> tag.

Note: auto-detection behavior is deprecated as of 1.9.0. Not providing baseUrl will currently trigger a warning and in future releases will lead to loading assets from CDN.

comparisonSidebarConfig

Optional

TextComparisonSidebarConfiguration

optional

Configuration for the comparison sidebar, including color customization for highlighting differences and whether the sidebar opens by default.

Example

NutrientViewer.loadTextComparison({
  // ... other configuration
  comparisonSidebarConfig: {
    diffColors: {
      insertionColor: new NutrientViewer.Color({ r: 0, g: 255, b: 0 }),
      deletionColor: new NutrientViewer.Color({ r: 255, g: 0, b: 0 })
    },
    openByDefault: true
  }
});

container

string | HTMLElement

required

Selector or element where Text Comparison UI for Web will be mounted.

The element must have a width and height that's greater than zero. Text Comparison UI for Web adapts to the dimensions of this element. This way, applying responsive rules will work as expected.

The element can be styled using relative values as you would expect it to (CSS media queries are encouraged).

Example

// In your HTML
<div class="foo"></div>

// In your JavaScript
NutrientViewer.loadTextComparison({
  container: '.foo',
  documentA: { source: 'example-a.pdf' },
  documentB: { source: 'example-b.pdf' }
  // Other configuration options
});
// or
const element = document.getElementsByClassName('foo')[0]
NutrientViewer.loadTextComparison({
  container: element,
  documentA: { source: 'example-a.pdf' },
  documentB: { source: 'example-b.pdf' }
  // Other configuration options
});

customFonts

OptionalStandalone

NutrientViewer.Font[]

optional

Custom fonts to use for Office document conversion.

documentA

Standalone

string | ArrayBuffer

required, Standalone only

The URL for the base document or its content as ArrayBuffer used for comparison.

When providing a URL keep in mind that Cross-Origin Resource Sharing (CORS) apply.

Example

Load a PDF document from an URI

NutrientViewer.loadTextComparison({ documentA: 'https://example.com/document.pdf', documentB: 'https://example.com/document2.pdf' });

Load a document from an ArrayBuffer

NutrientViewer.loadTextComparison({ documentA: arrayBuffer, documentB: arrayBuffer2 });

documentB

Standalone

string | ArrayBuffer

required, Standalone only

The URL for the second document or its content as ArrayBuffer used for comparison.

When providing a URL keep in mind that Cross-Origin Resource Sharing (CORS) apply.

Example

Load a PDF document from an URI

NutrientViewer.loadTextComparison({ documentA: 'https://example.com/document1.pdf', documentB: 'https://example.com/document.pdf' });

Load a document from an ArrayBuffer

NutrientViewer.loadTextComparison({ documentA: arrayBuffer1, documentB: arrayBuffer });

dynamicFonts

OptionalStandalone

string

optional

URL to a JSON file describing dynamically loaded fonts for Office document conversion.

fontSubstitutions

OptionalStandalone

FontSubstitution[]

optional

Font substitution rules for Office document conversion.

innerToolbarItems

Optional

TextComparisonInnerToolbarItem[]

optional

This property allows you to set an initial list of inner toolbar items for instanceA (left) and instanceB (right) for the Text Comparison UI. This can be used to customize the inner toolbar before the application mounts.

When omitted, it will default to NutrientViewer.defaultTextComparisonInnerToolbarItems.

Example

const innerToolbarItems = NutrientViewer.defaultTextComparisonInnerToolbarItems;
innerToolbarItems.reverse();
NutrientViewer.loadTextComparison({
  innerToolbarItems,
  // Other configuration options
});

Default Value

Default NutrientViewer.defaultTextComparisonInnerToolbarItems

licenseKey

OptionalStandalone

string

Standalone only

Nutrient Web SDK license key from https://my.nutrient.io/.

If not provided, the Text Comparison UI will run in trial mode for a limited time and then request the user to visit https://www.nutrient.io/try/ to request a trial license.

Example

Activate with a license key

NutrientViewer.loadTextComparison({
  licenseKey: "YOUR_LICENSE_KEY_GOES_HERE"
  // Other configuration options
});

locale

Optional

Locale | string & {}

The initial locale (language) for the application. All the available locales are defined in NutrientViewer.I18n.locales. When a locale is not provided Text Comparison UI for Web tries to autodetect the locale using window.navigator.language. If the detected locale is not supported then the en locale is used instead.

Example

NutrientViewer.loadTextComparison({
  locale: 'de',
  // ...
});

processorEngine

OptionalStandalone

string

optional

Selects the processor engine variant for Office document conversion.

serverUrl

Optional

string

optional

This allows you to overwrite the auto-detected Text Comparison UI Document Engine URL. This setting is necessary when your Text Comparison UI Document Engine is located under a different URL.

Example

NutrientViewer.loadTextComparison({ serverUrl: 'https://public-server.pspdfkit.com/' })

Default Value

Auto-detected based on the currently executed <script> tag.

styleSheets

Optional

string[]

optional

This will load your custom CSS as a <link rel="stylesheet"> inside the Text Comparison UI. This is necessary to isolate styling of the primary toolbar, comparison sidebar from the outside application and avoid external stylesheets overwriting important viewer attributes.

An array is allowed to load multiple stylesheets. The order in the array will also be the order in which the stylesheets get loaded.

The array will be copied by us on start up time, which means that you can not mutate it after the viewer has started.

More information on how to style Nutrient Web SDK can be found in our guides.

Example

NutrientViewer.loadTextComparison({
  styleSheets: [
    'https://example.com/my-stylesheet.css',
    'https://example.com/other-stylesheet.css'
  ]
})

Default Value

[]

theme

Optional

"AUTO" | "LIGHT" | "DARK" | "HIGH_CONTRAST_LIGHT" | "HIGH_CONTRAST_DARK"

optional

This property allows you to set theme to use for the UI. See NutrientViewer.Theme

Note: Themes are not supported in IE and setting this option won't have any effect: IE users will get the default light theme. You can customize the appearance of the UI using our public CSS classes. Please refer to this guide article for information on how to customize the appearance.

Example

NutrientViewer.loadTextComparison({ theme: NutrientViewer.Theme.DARK })

Default Value

NutrientViewer.Theme.DARK

toolbarItems

Optional

TextComparisonToolbarItem[]

optional

This property allows you to set an initial list of main toolbar items for the Text Comparison UI. This can be used to customize the main toolbar before the application mounts.

When omitted, it will default to NutrientViewer.defaultTextComparisonToolbarItems.

Example

const toolbarItems = NutrientViewer.defaultTextComparisonToolbarItems;
toolbarItems.reverse();
NutrientViewer.loadTextComparison({
  toolbarItems,
  // Other configuration options
});

Default Value

Default NutrientViewer.defaultTextComparisonToolbarItems

useCDN

Optional

boolean

This property is a temporary flag to explicitly enable loading assets from the CDN when baseUrl is not provided. This flag will be removed in future releases once loading from CDN is the default behavior when baseUrl is not set.

Has no effect when baseUrl is provided.

Default Value

false

wordLevel

Optional

boolean