Adding custom color presets to color dropdowns in viewer

By default, Nutrient Web SDK ships with an array of 18 colors, and it comes with a customizable color dropdown.

With our PSPDFKit.Configuration#annotationToolbarColorPresets API, you can remove any of the built-in colors, or you can replace them completely.

Here’s an example of how to remove the last color in the array from our built-in colors in all color dropdowns:

PSPDFKit.load({
  annotationToolbarColorPresets: ({
    defaultAnnotationToolbarColorPresets
  }) => {
    const customColorPresets = defaultAnnotationToolbarColorPresets.slice(
      0,
      -1
    );
    return { presets: customColorPresets };
  }
  // ...
});

We also offer fine-grained control over each of the dropdowns associated with a different annotation color property.

Our built-in color properties are:

  • 'color'
  • 'stroke-color'
  • 'fill-color'
  • 'background-color'
  • 'font-color'
  • 'outline-color'

Here’s an example of fine-grained customization of the dropdown:

PSPDFKit.load({
  annotationToolbarColorPresets: ({
    propertyName,
    defaultAnnotationToolbarColorPresets
  }) => {
    if (propertyName === "font-color") {
      const customColorPresets = defaultAnnotationToolbarColorPresets.slice(
        0,
        -1
      );
      return { presets: customColorPresets };
    }


    if (propertyName === "stroke-color") {
      return {
        presets: [
          {
            color: new PSPDFKit.Color({ r: 0, g: 0, b: 0 }),
            localization: {
              id: "brightRed",
              defaultMessage: "Bright Red"
            }
          },
          {
            color: new PSPDFKit.Color({ r: 100, g: 100, b: 180 }),
            localization: {
              id: "deepBlue",
              defaultMessage: "deepBlue"
            }
          }
        ],
        showColorPicker: false
      };
    }
  }
  //...
});

If propertyName is set to a string that we don’t support — in other words, if it doesn’t match one of the strings of our built-in color properties — an error will be thrown when initializing Nutrient.