# AnnotationUI

interface

An interface for the annotations UI plugin class.

The annotations UI class handles displaying, focusing, activating and hiding annotations views.

The annotations UI class must be a plugin, so it has to extend the [`Plugin`](module_core_plugin-Plugin.md) or [`ContextPlugin`](module_core_contextplugin-ContextPlugin.md) class.

Examples of `AnnotationsUI` are:

* [`WideSidebar`](module_comments_annotations_widesidebar-WideSidebar.md),
* [`NarrowSidebar`](module_comments_annotations_narrowsidebar-NarrowSidebar.md),
* [`InlineAnnotations`](module_comments_annotations_inlineannotations-InlineAnnotations.md).

You can use the following snippet as a base for your own annotations UI:

```typescript
class MyAnnotationsUI extends ContextPlugin {
	constructor( ...args ) {
		super( ...args );

		this.set( 'activeAnnotation', null );
	}

	attach( annotations ) {
		// Do something when an annotation is added.
		this.listenTo( annotations, 'add', ( evt, annotation ) => { ... } );

		// Do something when an annotation is removed.
		this.listenTo( annotations, 'remove', ( evt, annotation ) => { ... } );
	}

	detach() {
		this.stopListening();
	}

	setActiveAnnotation( annotation ) {
		if ( this.activeAnnotation ) {
			this.activeAnnotation.isActive = false;

			// You can do something in your UI with the annotation that is no longer active.
		}

		this.activeAnnotation = annotation;
		this.activeAnnotation.isActive = true;

		// You can do something in your UI to highlight the active annotation.
	}
}
```

<a id="properties">

## Properties

<a id="member-_setSelectedAnnotations">

### `_setSelectedAnnotations?: ( annotations: Array<Annotation> ) => void`

<a id="member-activeAnnotation">

### `activeAnnotation: Annotation | null`

Observable `activeAnnotation` property. [`AnnotationsUIs`](module_comments_annotations_annotationsuis-AnnotationsUIs.md) listens to changes on that property.

To make this property observable use `this.set( 'activeAnnotation', null )` in the constructor.

<a id="member-attach">

### `attach: ( annotationCollection: AnnotationCollection ) => void`

Creates everything needed for the UI and attaches all listeners. This method is called when the UI is activated.

The observable collection of annotations is passed as the first argument, and the annotations UI is responsible for reacting to its changes.

<a id="member-detach">

### `detach: () => void`

Destroys the UI and removes all listeners. This method is called when the UI is deactivated.

<a id="member-setActiveAnnotation">

### `setActiveAnnotation: ( annotation: Annotation | null ) => void`

Sets or unsets the active annotation. This method is called when an annotation is activated, for example, user puts their selection into a marker connected with given annotation.

This method should change the UI so the new active annotation is differentiated from other annotations.

This method should set the [`AnnotationUI#activeAnnotation`](#member-activeAnnotation) property.

It also should set [`Annotation#isActive`](module_comments_annotations_annotation-Annotation.md#member-isActive) of the deactivated and the activated annotation.

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)