Fixed sidebar items

In some cases you may want to give an author aggregated information or the ability to solve annotations in bulk. One way to do this is to create a fixed sidebar item. A fixed sidebar item is a card which is shown on the top of the sidebar, it can either be always visible or hidden depending on the available annotations.

Registering a fixed sidebar item

Create a package

Created a package in the editor by following the steps in the Create a package chapter if you have not already done so.

Register the fixed sidebar item with the Content Quality manager

To register a fixed sidebar item, you must call the contentQualityManager.registerFixedSidebarItem() method and supply its configuration. See the documentation for registerFixedSidebarItem() in the ContentQualityManager for more information and available options.

JavaScript

contentQualityManager.registerFixedSidebarItem({
	renderSidebarDetails,
	renderSidebarListCardContent
});

Create the sidebar list card content renderer

You should return a ReactNode which shows the sidebar's list card content. This usually consists of some information about all annotations or some specific annotation types.

Card contents should only contain the minimally needed information to determine what it is about, and should not have actions available. All actions should be done in either the details card.

JavaScript

import { Flex, Label, Text } from 'fds/components';

({ annotations }) => {
	const automaticallyFixableAnnotations = annotations.filter(annotation => annotation.isType('<urn>', '<auto-fixable-annotation-type>'));
	return (
		<Flex flexDirection="column" justifyContent="flex-start" spaceSize="m">
			<Label isBold>{LABEL_SUMMARY}</Label>
			<Text>
				{t(
					'{NUM_SPECIFIC_ANNOTATIONS, plural, =0{no errors} on{one error} other{# errors} in can be fixed automatically',
					{ NUM_SPECIFIC_ANNOTATIONS: automaticallyFixableAnnotations.length }
				)}
			</Text>
		</Flex>
	);
}

Create the sidebar details renderer

You should return a ReactNode which shows the sidebar's details. This usually consists of some information about all annotations or some specific annotation types, optionally a choice from a list or filter based on annotation type, and a few operations which can be performed (in bulk).

JavaScript

import { Flex } from 'fds/components';

({ annotations, next }) => {
	const automaticallyFixableAnnotations = annotations.filter(annotation => annotation.isType('<urn>', '<auto-fixable-annotation-type>'));
	return (
		<Flex flexDirection="column" flex="1">
			{ /* Some inlay with the aggregated information, optionally some choice/filter/data on the annotations. */ }
			{ /* Some Button which triggers an series of operations to solve the annotations in bulk, if applicable.  */ }
		</Flex>
	);
}

Call the next function after executing an operation and make sure to pass along an array with the Annotations which are resolved by the operation. This ensures the next card in the list is shown and does not try to highlight a resolved annotation.

Please note that you should not execute an operation which mutates multiple documents at once. If you need to perform mutations on multiple documents, you must execute an operation for each document you wish to mutate.

Also if you want to perform an operation on multiple annotations in a document, create a custom mutation which does this in a single operation in order for the undo function to be able to undo all changes at once.