CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

AnnotationsUI (comments/annotations)

@ckeditor/ckeditor5-comments/src/annotations/annotationsuis

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 or ContextPlugin class.

Examples of AnnotationsUI are:

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

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.
	}
}

Filtering

Properties

  • activeAnnotation : Annotation | null

    Observable activeAnnotation property. AnnotationsUIs listens to changes on that property.

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

Methods

  • attach( uiAnnotations )

    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.

    Parameters

    uiAnnotations : AnnotationCollection

  • detach()

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

  • setActiveAnnotation( annotation )

    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 AnnotationsUI#activeAnnotation property.

    It also should set Annotation#isActive of the deactivated and the activated annotation.

    Parameters

    annotation : Annotation | null