CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Interface

AnnotationUI (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

  • _setSelectedAnnotations : ( Array<Annotation> ) => void | undefined

  • activeAnnotation : null | Annotation

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

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

  • attach : ( 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.

  • detach : () => void

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

  • setActiveAnnotation : ( null | Annotation ) => 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 property.

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