AnnotationUI (comments/annotations)
@ckeditor/ckeditor5-comments/src/annotations/annotationsuis
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
module:comments/annotations/annotationsuis~AnnotationUI#_setSelectedAnnotations
-
activeAnnotation : null | Annotation
module:comments/annotations/annotationsuis~AnnotationUI#activeAnnotation
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
module:comments/annotations/annotationsuis~AnnotationUI#attach
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
module:comments/annotations/annotationsuis~AnnotationUI#detach
Destroys the UI and removes all listeners. This method is called when the UI is deactivated.
-
setActiveAnnotation : ( null | Annotation ) => void
module:comments/annotations/annotationsuis~AnnotationUI#setActiveAnnotation
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.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.