Interface TextComparisonConfiguration

interface TextComparisonConfiguration {
    ai?: boolean;
    baseCoreUrl?: string;
    baseUrl?: string;
    comparisonSidebarConfig?: TextComparisonSidebarConfiguration;
    container: string | HTMLElement;
    documentA: string | ArrayBuffer;
    documentB: string | ArrayBuffer;
    innerToolbarItems?: TextComparisonInnerToolbarItem[];
    licenseKey?: string;
    locale?: string;
    serverUrl?: string;
    styleSheets?: string[];
    theme?:
        | "AUTO"
        | "LIGHT"
        | "DARK"
        | "HIGH_CONTRAST_LIGHT"
        | "HIGH_CONTRAST_DARK";
    toolbarItems?: TextComparisonToolbarItem[];
    wordLevel?: boolean;
}

Hierarchy

SharedTextComparisonConfiguration
- TextComparisonConfiguration

Index

Properties

ai? baseCoreUrl? baseUrl? comparisonSidebarConfig? container documentA documentB innerToolbarItems? licenseKey? locale? serverUrl? styleSheets? theme? toolbarItems? wordLevel?

Properties

`Optional`ai

ai?: boolean

`Optional`baseCoreUrl

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.

Example

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

Default

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

`Optional`baseUrl

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

Example

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

Default

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

`Optional`comparisonSidebarConfig

comparisonSidebarConfig?: 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

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: ..., documentB: ..., ... });
// or
const element = document.getElementsByClassName('foo')[0]
NutrientViewer.loadTextComparison({  container: element, documentA: ..., documentB: ..., ... });

`Standalone`documentA

documentA: 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', ... });

Example

Load a document from an ArrayBuffer

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

`Standalone`documentB

documentB: 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({ documentB: 'https://example.com/document.pdf', ... });

Example: Load a document from an ArrayBuffer

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

@standalone

`Optional`innerToolbarItems

innerToolbarItems?: 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: toolbarItems, ... });

Default

Default NutrientViewer.defaultTextComparisonInnerToolbarItems

`Optional` `Standalone`licenseKey

licenseKey?: 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", ... });

@standalone

`Optional`locale

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',
  // ...
});

`Optional`serverUrl

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.

Example

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

Default

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

`Optional`styleSheets

styleSheets?: 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

[]

`Optional`theme

theme?: "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 guide article for information on how to customize the appearance.

Example

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

Default

NutrientViewer.Theme.DARK

`Optional`toolbarItems

toolbarItems?: 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, ... });

Default

Default NutrientViewer.defaultTextComparisonToolbarItems

`Optional`wordLevel

wordLevel?: boolean

Interface TextComparisonConfiguration

Hierarchy

Index

Properties

Properties

Optionalai

OptionalbaseCoreUrl

Example

Default

OptionalbaseUrl

Example

Default

OptionalcomparisonSidebarConfig

Example

container

Example

StandalonedocumentA

Example

Example

StandalonedocumentB

Example: Load a PDF document from an URI

Example: Load a document from an ArrayBuffer

OptionalinnerToolbarItems

Example

Default

Optional StandalonelicenseKey

Example: Activate with a license key

Optionallocale

Example

OptionalserverUrl

Example

Default

OptionalstyleSheets

Example

Default

Optionaltheme

Example

Default

OptionaltoolbarItems

Example

Default

OptionalwordLevel

Settings

On This Page

`Optional`ai

`Optional`baseCoreUrl

`Optional`baseUrl

`Optional`comparisonSidebarConfig

`Standalone`documentA

`Standalone`documentB

`Optional`innerToolbarItems

`Optional` `Standalone`licenseKey

`Optional`locale

`Optional`serverUrl

`Optional`styleSheets

`Optional`theme

`Optional`toolbarItems

`Optional`wordLevel