Nutrient Web SDK
    Preparing search index...

    Interface TextComparisonToolbarItem

    interface TextComparisonToolbarItem {
        className?: string;
        disabled?: boolean;
        dropdownGroup?: string;
        icon?: string;
        id?: string;
        mediaQueries?: string[];
        node?: Node;
        onPress?: (
            event: MouseEvent | KeyboardEvent,
            documentEditorUIHandler: DocumentEditorUIHandler,
            id: string,
        ) => void;
        responsiveGroup?: string;
        selected?: boolean;
        title?: string;
        type: string;
    }

    Hierarchy

    • Omit<ToolItem, "type" | "onPress">
      • TextComparisonToolbarItem
    Index

    Properties

    className? disabled? dropdownGroup? icon? id? mediaQueries? node? onPress? responsiveGroup? selected? title? type

    Properties

    className?: string

    Useful to set a custom CSS class name on the item.

    For default text comparison toolbar items the className is appended to the default item ones.

    disabled?: boolean

    Whether the item is disabled or not.

    The property can be used to force a default item to be disabled by setting it to true.

    dropdownGroup?: string
    icon?: string

    Icon for the item.

    The icon should either be an URL, a base64 encoded image or the HTML for an inline SVG. This property can override the default items' ones.

    id?: string

    Unique identifier for the item.

    This is useful to identify items whose type is custom.

    // In your JavaScript
    const toolbarItems = NutrientViewer.defaultTextComparisonToolbarItems
    toolbarItems.push({ type: 'custom', id: 'my-button', ... })
    NutrientViewer.loadTextComparison({
     ...otherOptions,
     toolbarItems
    });

    Note: It is ***not*** possible to override this option for built-in text comparison toolbar items.
    mediaQueries?: string[]
    node?: Node

    Optionally custom tool items can define a DOM node. NutrientViewer renders this node instead of a standard tool button.

    In this case the tool item is rendered inside of a container which gets the title and className attributes set.

    The icon property is ignored. The selected and disabled are used just to toggle the PSPDFKit-Tool-Node-active and PSPDFKit-Tool-Node-disabled class names but making the node effectively selected or disabled is up to the implementation of the item.

    The onPress event is registered and fires any time the item is either clicked or selected with keyboard (if part of a dropdownGroup).

    onPress?: (
        event: MouseEvent | KeyboardEvent,
        documentEditorUIHandler: DocumentEditorUIHandler,
        id: string,
    ) => void

    Callback to invoke when the item is clicked or tapped (on touch devices). It gets the event as first argument, a document editor UI handler object as the second, and the id of the tool item as the third.

    Type Declaration

    responsiveGroup?: string
    selected?: boolean

    Whether a custom item is selected or not.

    The selected status of default items cannot be altered.

    Note: It is not possible to override this option for built-in text comparison toolbar items.

    title?: string

    Title for the tool items.

    It is shown on hover or when the item doesn't have an icon.

    type: string

    The type of a text comparison toolbar item.

    It can either be custom for user defined items or one from the NutrientViewer.defaultTextComparisonToolbarItems.

    Note: It is not possible to override this option for built-in toolbar items.

    // In your JavaScript
    const toolbarItems = NutrientViewer.defaultTextComparisonToolbarItems
    toolbarItems.push({ type: 'custom', ... })
    NutrientViewer.loadTextComparison({
     ...otherOptions,
     toolbarItems
    });

    Settings

    Member Visibility

    On This Page

    Properties