Interface: TextComparisonConfiguration

NutrientViewer.TextComparisonConfiguration

This describes the properties of a NutrientViewer.loadTextComparison configuration.

Members



Members

(nullable) baseCoreUrl: string

optional

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.

Type:
  • string
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.
Example
NutrientViewer.loadTextComparison({ baseCoreUrl: 'https://public-server.pspdfkit.com/pspdfkit-core/' });

(nullable) baseUrl: 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

Type:
  • string
Default Value:
  • Auto-detected based on the currently executed `<script>` tag.
Example
NutrientViewer.loadTextComparison({ baseUrl: 'https://public-server.pspdfkit.com/' });

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).

Type:
  • string | HTMLElement
Example
// In your HTML
<div class="foo"></div>

// In your JavaScript
NutrientViewer.loadTextComparison({ container: '.foo', documentA: ..., documentB: ..., ... });
// or
const element = document.getElementsByClassName('foo')[0]
NutrientViewer.loadTextComparison({  container: element, documentA: ..., documentB: ..., ... });

documentA: string|ArrayBuffer
Standalone Only

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.

Type:
  • string | ArrayBuffer
Examples

Load a PDF document from an URI

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

Load a document from an ArrayBuffer

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

documentB: string|ArrayBuffer
Standalone Only

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.

Type:
  • string | ArrayBuffer
Examples

Load a PDF document from an URI

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

Load a document from an ArrayBuffer

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

(nullable) innerToolbarItems: Array.<NutrientViewer.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.

Type:
Example
const innerToolbarItems = NutrientViewer.defaultTextComparisonInnerToolbarItems;
innerToolbarItems.reverse();
NutrientViewer.loadTextComparison({ innerToolbarItems: toolbarItems, ... });

(nullable) licenseKey: string
Standalone Only

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.

Type:
  • string
Example

Activate with a license key

NutrientViewer.loadTextComparison({ licenseKey: "YOUR_LICENSE_KEY_GOES_HERE", ... });

(nullable) 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.

Type:
  • string
Example
NutrientViewer.loadTextComparison({
  locale: 'de',
  // ...
});

(nullable) serverUrl: 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.

Type:
  • string
Default Value:
  • Auto-detected based on the currently executed `<script>` tag.
Example
NutrientViewer.loadTextComparison({ serverUrl: 'https://public-server.pspdfkit.com/' })

(nullable) styleSheets: Array.<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.

Type:
  • Array.<string>
Default Value:
  • []
Example
NutrientViewer.loadTextComparison({
  styleSheets: [
    'https://example.com/my-stylesheet.css',
    'https://example.com/other-stylesheet.css'
  ]
})

(nullable) theme: NutrientViewer.Theme

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.

Type:
Default Value:
  • NutrientViewer.Theme.DARK
Example
NutrientViewer.loadTextComparison({ theme: NutrientViewer.Theme.DARK })

(nullable) toolbarItems: Array.<NutrientViewer.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.

Type:
Example
const toolbarItems = NutrientViewer.defaultTextComparisonToolbarItems;
toolbarItems.reverse();
NutrientViewer.loadTextComparison({ toolbarItems, ... });