@ckeditor/ckeditor5-comments 41.3.1 → 41.4.0

package/dist/translations/zh.js

@@ -0,0 +1,23 @@
+/*
+ *             Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ *
+ *
+ *
+ *
+ *          +---------------------------------------------------------------------------------+
+ *          |                                                                                 |
+ *          |                                 Hello stranger!                                 |
+ *          |                                                                                 |
+ *          |                                                                                 |
+ *          |   What you're currently looking at is the source code of a legally protected,   |
+ *          |    proprietary software. Any attempts to deobfuscate / disassemble this code    |
+ *          |               are forbidden and will result in legal consequences.              |
+ *          |                                                                                 |
+ *          |                                                                                 |
+ *          +---------------------------------------------------------------------------------+
+ *
+ *
+ *
+ *
+ */
+export default{'zh':{'dictionary':{'Comment\x20editor':'留言編輯器','NUMBER_OF_COMMENTS':'%0\x20則留言','TOO_LONG_COMMENT_ALERT':'留言內容太長。你的留言有\x20%0\x20個字，上限字數為\x20%1。','Reply...':'回覆...','Reply\x20to\x20reopen\x20discussion...':'回覆以重新開啟討論...','Write\x20a\x20comment...':'撰寫留言...','Comment\x20was\x20made\x20on\x20an\x20element':'對元件進行的留言','Edit':'編輯','Resolve':'解決','Reopen':'重新開啟','Remove':'刪除','Reply':'回覆','Delete\x20comment?':'刪除留言？','Delete\x20comment\x20thread?':'刪除討論串？','Marked\x20as\x20resolved':'已標記為解決','Comment':'留言','ENTER_COMMENT_ANNOUNCEMENT':'正在進入留言。','LEAVE_COMMENT_ANNOUNCEMENT':'正在留下留言。','PENDING_ACTION_COMMENT_THREAD':'討論串尚未儲存。','EXTERNAL_COMMENT':'此留言來自外部來源。','EXTERNAL_IMPORT_WORD_COMMENT':'此留言來自匯入的\x20Word\x20檔案。','EXTERNAL_AVATAR':'顯示的作者名稱來自外部來源（由\x20%0\x20新增）','EXTERNAL_IMPORT_WORD_AVATAR':'顯示的作者名稱來自由\x20%0\x20匯入的\x20Word\x20文件','COMMENTS_ARCHIVE':'留言封存紀錄','EMPTY_COMMENTS_ARCHIVE':'無封存的留言串。'},'getPluralForm':_0x346ee1=>0x0}};

package/dist/translations/zh.umd.js

@@ -0,0 +1,23 @@
+/*
+ *             Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ *
+ *
+ *
+ *
+ *          +---------------------------------------------------------------------------------+
+ *          |                                                                                 |
+ *          |                                 Hello stranger!                                 |
+ *          |                                                                                 |
+ *          |                                                                                 |
+ *          |   What you're currently looking at is the source code of a legally protected,   |
+ *          |    proprietary software. Any attempts to deobfuscate / disassemble this code    |
+ *          |               are forbidden and will result in legal consequences.              |
+ *          |                                                                                 |
+ *          |                                                                                 |
+ *          +---------------------------------------------------------------------------------+
+ *
+ *
+ *
+ *
+ */
+(_0x2027e6=>{const {zh:{dictionary:_0xdf3b1e,getPluralForm:_0x1ca23c}}={'zh':{'dictionary':{'Comment\x20editor':'留言編輯器','NUMBER_OF_COMMENTS':'%0\x20則留言','TOO_LONG_COMMENT_ALERT':'留言內容太長。你的留言有\x20%0\x20個字，上限字數為\x20%1。','Reply...':'回覆...','Reply\x20to\x20reopen\x20discussion...':'回覆以重新開啟討論...','Write\x20a\x20comment...':'撰寫留言...','Comment\x20was\x20made\x20on\x20an\x20element':'對元件進行的留言','Edit':'編輯','Resolve':'解決','Reopen':'重新開啟','Remove':'刪除','Reply':'回覆','Delete\x20comment?':'刪除留言？','Delete\x20comment\x20thread?':'刪除討論串？','Marked\x20as\x20resolved':'已標記為解決','Comment':'留言','ENTER_COMMENT_ANNOUNCEMENT':'正在進入留言。','LEAVE_COMMENT_ANNOUNCEMENT':'正在留下留言。','PENDING_ACTION_COMMENT_THREAD':'討論串尚未儲存。','EXTERNAL_COMMENT':'此留言來自外部來源。','EXTERNAL_IMPORT_WORD_COMMENT':'此留言來自匯入的\x20Word\x20檔案。','EXTERNAL_AVATAR':'顯示的作者名稱來自外部來源（由\x20%0\x20新增）','EXTERNAL_IMPORT_WORD_AVATAR':'顯示的作者名稱來自由\x20%0\x20匯入的\x20Word\x20文件','COMMENTS_ARCHIVE':'留言封存紀錄','EMPTY_COMMENTS_ARCHIVE':'無封存的留言串。'},'getPluralForm':_0x10d2f8=>0x0}};_0x2027e6['zh']||={'dictionary':{},'getPluralForm':null},_0x2027e6['zh']['dictionary']=Object['assign'](_0x2027e6['zh']['dictionary'],_0xdf3b1e),_0x2027e6['zh']['getPluralForm']=_0x1ca23c;})(window['CKEDITOR_TRANSLATIONS']||={});

package/dist/types/annotations/annotation.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module comments/annotations/annotation
+ * @publicApi
+ */
+import { Rect, Collection } from 'ckeditor5/src/utils.js';
+import type { View } from 'ckeditor5/src/ui.js';
+import type AnnotationView from './view/annotationview.js';
+import type { AnnotationOptions } from './annotations.js';
+declare const Annotation_base: {
+    new (): import("ckeditor5/src/utils.js").Observable;
+    prototype: import("ckeditor5/src/utils.js").Observable;
+};
+/**
+ * Represents an annotation.
+ *
+ * Annotation is an entity that combines an {@link module:comments/annotations/view/annotationview~AnnotationView}
+ * and an annotation target (a DOM element or a {@link module:utils/dom/rect~Rect}) to which the annotation is bound.
+ */
+export default class Annotation extends Annotation_base {
+    /**
+     * The visibility of the annotation. Annotations that are not visible, are filtered from Annotation UI collections.
+     *
+     * @observable
+     */
+    isVisible: boolean;
+    /**
+     * The annotation view.
+     */
+    view: AnnotationView;
+    /**
+     * A collection of DOM elements which, when focused, make the annotation active.
+     *
+     * By default, this collection only contains the annotation view element.
+     * It can be extended with custom targets that will be tracked by the annotation focus tracking system.
+     */
+    focusableElements: Collection<HTMLElement>;
+    /**
+     * Creates an instance of the {@link module:comments/annotations/annotation~Annotation}.
+     */
+    constructor({ view, target, type, isVisible }: AnnotationOptions);
+    /**
+     * The type of the annotation.
+     */
+    get type(): string;
+    /**
+     * The annotation inner view.
+     *
+     * It is the view that is wrapped by the annotation view.*
+     */
+    get innerView(): View;
+    /**
+     * The annotation target to which the annotation view should be pinned.
+     *
+     * It can be an array of DOM elements or {@link module:utils/dom/rect~Rect a rect instance} or `null`.
+     */
+    get target(): Rect | Array<HTMLElement> | null;
+    /**
+     * The position and dimensions of the annotation target to which the annotation is bound.
+     */
+    get targetRect(): Rect | null;
+    /**
+     * The state of the annotation.
+     */
+    get isActive(): boolean;
+    set isActive(value: boolean);
+    /**
+     * Updates the target rect in the annotation view instance.
+     */
+    updateTargetRect(): void;
+    /**
+     * Clears all event listeners and internal collections.
+     */
+    destroy(): void;
+    /**
+     * Refreshes the visibility of the annotation based on the visibility of the annotation target.
+     *
+     * It sets the {@link #isVisible} property when the target is not attached to DOM or if the target or its descendant has
+     * set the `display` attribute to `none`.
+     *
+     * This method only updates an annotation if the annotation target is an HTML Element.
+     */
+    refreshVisibility(): void;
+}
+type Target = Rect | HTMLElement | null;
+export type AnnotationTarget = Target | (() => Target | Array<Target>);
+export {};

package/dist/types/annotations/annotationcollection.d.ts

@@ -0,0 +1,102 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module comments/annotations/annotationcollection
+ * @publicApi
+ */
+import { Collection } from 'ckeditor5/src/utils.js';
+import type { View } from 'ckeditor5/src/ui.js';
+import type Annotation from './annotation.js';
+/**
+ * A collection of {@link module:comments/annotations/annotation~Annotation annotations}.
+ *
+ * It implements methods for managing annotations and creates a focus tracker for them to make it easier to manage
+ * the focus for all annotations.
+ *
+ * `AnnotationCollection` fires {@link module:comments/annotations/annotationcollection~AnnotationCollection#event:focus} when an annotation
+ * becomes focused and {@link module:comments/annotations/annotationcollection~AnnotationCollection#event:blur} when all annotations
+ * lose focus.
+ */
+export default class AnnotationCollection extends Collection<Annotation> {
+    /**
+     * @param annotations Initial annotations.
+     */
+    constructor(annotations?: Iterable<Annotation>);
+    /**
+    * Equals to `true` when one of the annotation in the collection is focused.
+    */
+    get isFocused(): boolean;
+    /**
+     * Adds an annotation to the collection.
+     */
+    add(annotation: Annotation): this;
+    /**
+     * Removes the annotation from the collection.
+     */
+    remove(annotation: Annotation): Annotation;
+    /**
+     * Gets the annotation for a given annotation view's inner view.
+     */
+    getByInnerView(innerView: View): Annotation | undefined;
+    /**
+     * Gets the annotation for a given annotation view.
+     */
+    getByView(view: View): Annotation | undefined;
+    /**
+     * Destroys all bindings and clears the collection.
+     */
+    destroy(): void;
+    /**
+     * Refreshes the positioning of all annotations and sorts them topmost and leftmost.
+     */
+    refreshPositioning(): void;
+}
+/**
+ * Fired when an annotation becomes active.
+ *
+ * @eventName ~AnnotationCollection#focus
+ * @param annotation An annotation that was focused.
+ */
+export type AnnotationFocusEvent = {
+    name: 'focus';
+    args: [annotation: Annotation];
+};
+/**
+ * Fired when all annotations become blurred.
+ *
+ * @eventName ~AnnotationCollection#blur
+ */
+export type AnnotationBlurEvent = {
+    name: 'blur';
+    args: [];
+};
+/**
+ * A helper function that binds two {@link module:comments/annotations/annotationcollection~AnnotationCollection AnnotationCollection}s
+ * and allows filtering items based on the passed callback.
+ *
+ * Since {@link module:comments/annotations/annotationcollection~AnnotationCollection#refreshPositioning}
+ * sorts the annotations by removing and inserting items, the binding implemented by the `bindTo()` method is lost. This is why
+ * this helper needs to be used.
+ *
+ * This helper is used by the annotations UIs to filter which annotations from the
+ * {@link module:comments/annotations/annotations~Annotations#collection main annotation collection} should be handled by
+ * a given annotations UI.
+ *
+ * @param `options.source` The source collection
+ * from which the annotations will be taken.
+ * @param `options.target` The target collection
+ * that will be synced to the source collection.
+ * @param options.filter Filtering function that gets an annotation and should return `true` if the annotation should be
+ * copied to the `target` collection.
+ */
+export declare function bindAnnotationCollections({ source, target, filter }: {
+    source: AnnotationCollection;
+    target: AnnotationCollection;
+    filter: (annotation: Annotation) => boolean;
+}): void;

package/dist/types/annotations/annotations.d.ts

@@ -0,0 +1,158 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module comments/annotations/annotations
+ * @publicApi
+ */
+import { ContextPlugin, type Context, type Editor } from 'ckeditor5/src/core.js';
+import type { View } from 'ckeditor5/src/ui.js';
+import { type Locale } from 'ckeditor5/src/utils.js';
+import Annotation, { type AnnotationTarget } from './annotation.js';
+import AnnotationCollection from './annotationcollection.js';
+import AnnotationView, { type AnnotationMainView } from './view/annotationview.js';
+/**
+ * Stores and manages all {@link module:comments/annotations/annotation~Annotation annotations} created
+ * for the entire {@link module:core/context~Context} or {@link module:core/editor/editor~Editor}.
+ *
+ * It allows for {@link module:comments/annotations/annotations~Annotations#add adding} and
+ * {@link module:comments/annotations/annotations~Annotations#remove removing} annotations.
+ *
+ * It manages {@link module:comments/annotations/annotations~Annotations#activate activating} and
+ * {@link module:comments/annotations/annotations~Annotations#deactivateAll deactivating} annotations. Using those methods will
+ * result in setting {@link module:comments/annotations/annotationsuis~AnnotationUI#activeAnnotation} in the appropriate
+ * {@link module:comments/annotations/annotationsuis~AnnotationsUI annotations UI} plugins.
+ *
+ * All active annotations are stored in {@link module:comments/annotations/annotations~Annotations#activeAnnotations}.
+ *
+ * `Annotations` is linked with {@link module:comments/annotations/annotationsuis~AnnotationsUIs}, which listens to events fired by
+ * `Annotations` and propagates information to and from annotations UI plugins.
+ */
+export default class Annotations extends ContextPlugin {
+    /**
+     * A set of currently active annotations.
+     *
+     * @observable
+     */
+    activeAnnotations: Set<Annotation>;
+    /**
+     * A collection of all annotations. It should not be operated on directly.
+     */
+    readonly collection: AnnotationCollection;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "Annotations";
+    /**
+     * @inheritDoc
+     */
+    constructor(context: Context | Editor);
+    /**
+     * Adds an annotation to the collection.
+     */
+    add(annotation: Annotation): void;
+    /**
+     * Removes the given annotation from the collection.
+     */
+    remove(annotation: Annotation): void;
+    /**
+     * Refreshes the visibility of annotations based on the visibility of their annotation targets.
+     *
+     * This method should be called when one or more annotations' targets changed their visibility,
+     * for example when one of the editors was shown or hidden.
+     *
+     * This method recalculates all annotations' {@link module:comments/annotations/annotation~Annotation#isVisible `isVisible`} property.
+     */
+    refreshVisibility(): void;
+    /**
+     * Refreshes the positioning of all visible annotations and sorts them topmost and leftmost.
+     */
+    refreshPositioning(): void;
+    /**
+     * Returns the annotation that "contains" the given annotation view's inner view.
+     */
+    getByInnerView(innerView: View): Annotation | undefined;
+    /**
+     * Deactivates all active annotations.
+     *
+     * @fires _deactivateAllAnnotations
+     */
+    deactivateAll(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Activates the given annotation.
+     *
+     * If annotations UI that handles the given annotation already has an active annotation,
+     * then it deactivates it and activates the provided one.
+     *
+     * @fires _activateAnnotation
+     */
+    activate(annotation: Annotation): void;
+    /**
+     * Creates an annotation.
+     *
+     * ```ts
+     * const annotationView = annotations.createAnnotationView( editor.locale, innerView );
+     *
+     * const annotation = annotations.createAnnotation( {
+     * 	view: annotationView,
+     * 	target: document.getElementById( 'target' ),
+     * 	type: 'comment'
+     * } );
+     * ```
+     *
+     * @returns An annotation.
+     */
+    createAnnotation(options: AnnotationOptions): Annotation;
+    /**
+     * Creates an annotation view wrapper for the annotation content.
+     *
+     * ```ts
+     * const innerView = createCustomView();
+     * const annotationView = annotations.createAnnotationView( editor.locale, innerView );
+     * ```
+     *
+     * @returns An annotation view.
+     */
+    createAnnotationView(locale: Locale, view: AnnotationMainView): AnnotationView;
+}
+/**
+ * The configuration options which are used to create new {@link module:comments/annotations/annotation~Annotation annotations}.
+ *
+ * @param view The annotation view.
+ * @param target The annotation target.
+ * @param type The annotation type.
+ * @param isVisible The initial visibility of the annotation.
+ */
+export interface AnnotationOptions {
+    view: AnnotationView;
+    target: AnnotationTarget;
+    type: string | (() => string);
+    isVisible?: boolean;
+}
+/**
+ * An internal event that fires when the annotation should be activated.
+ *
+ * @eventName ~Annotations#_activateAnnotation
+ */
+export type ActivateAnnotationEvent = {
+    name: '_activateAnnotation';
+    args: [annotation: Annotation];
+};
+/**
+ * An internal event that fires when all annotations should be deactivated.
+ *
+ * @eventName ~Annotations#_deactivateAllAnnotations
+ */
+export type DeactivateAllAnnotationsEvent = {
+    name: '_deactivateAllAnnotations';
+    args: [];
+};

package/dist/types/annotations/annotationsuis.d.ts

@@ -0,0 +1,236 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module comments/annotations/annotationsuis
+ * @publicApi
+ */
+import { ContextPlugin, type Plugin, type Editor, type Context } from 'ckeditor5/src/core.js';
+import { type Emitter } from 'ckeditor5/src/utils.js';
+import AnnotationCollection from './annotationcollection.js';
+import Annotations from './annotations.js';
+import type Annotation from './annotation.js';
+/**
+ * A repository of annotations UIs.
+ *
+ * The main entry point for {@link module:comments/annotations/annotationsuis~AnnotationsUIs#register registering} UIs
+ * and activating the annotations UI(s), which display annotation views.
+ *
+ * To register a custom annotations UI use following code in the annotations UI plugin `init()` function:
+ *
+ * ```ts
+ * const annotationsUIs = editor.plugins.get( 'annotationsUIs' );
+ *
+ * annotationsUIs.register( customAnnotationsUIPlugin );
+ * ```
+ *
+ * Note that the custom annotations UI must implement {@link module:comments/annotations/annotationsuis~AnnotationsUI
+ * the `AnnotationsUI` interface}.
+ *
+ * To activate an annotations UI, use the {@link module:comments/annotations/annotationsuis~AnnotationsUIs#switchTo
+ * `switchTo( uiName )`} method. This method activates the given UI and deactivates all the other UIs.
+ * All annotations will be handled by the activated UI.
+ *
+ * It is also possible to activate multiple annotations UIs at the same time and make the UIs handle different sets of annotations.
+ * To do that, use the {@link module:comments/annotations/annotationsuis~AnnotationsUIs#activate `activate( uiName, filter )`} method.
+ *
+ * ```ts
+ * // Suggestions annotations are shown inline in a balloon:
+ * annotationsUIs.activate( 'inline', annotation => annotation.type.startsWith( 'suggestion' ) );
+ *
+ * // At the same time, comments annotations are shown in a sidebar:
+ * annotationsUIs.activate( 'wideSidebar', annotation => annotation.type === 'comment' );
+ * ```
+ *
+ * Limitations:
+ *
+ * * Some annotations UI plugins might collide with each other (like {@link module:comments/annotations/narrowsidebar~NarrowSidebar} and
+ * {@link module:comments/annotations/widesidebar~WideSidebar} that operates on the same sidebar). They cannot be activated at the same
+ * time.
+ * * It is not possible to display the same annotation in two different annotations UIs. In this scenario an error will be thrown.
+ */
+export default class AnnotationsUIs extends ContextPlugin {
+    /**
+     * A set of names of the active annotations UIs.
+     *
+     * To activate the annotations UI, use {@link module:comments/annotations/annotationsuis~AnnotationsUIs#activate}
+     * or {@link #switchTo} methods.
+     */
+    activeUIs: Set<string>;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof Annotations];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "AnnotationsUIs";
+    /**
+     * @inheritDoc
+     */
+    constructor(context: Context | Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Returns `true` if at least one registered UI is active.
+     */
+    hasActive(): boolean;
+    /**
+     * Returns `true` if the given UI is active.
+     */
+    isActive(uiName: string): boolean;
+    /**
+     * Activates an annotations UI.
+     *
+     * Note that the custom annotations UI should be {@link #register registered} before the activation.
+     *
+     * The `filter` parameter can be used to display on some of the annotations in the given annotations UI. Thanks to that,
+     * all annotations can be split into various annotations UIs.
+     *
+     * The `filter` function takes an {@link module:comments/annotations/annotation~Annotation} instance as the first and only parameter,
+     * and should return `true` if that annotation should be placed in the given annotations UI.
+     *
+     * @param uiName The name of the annotations UI to activate.
+     * @param filter The annotation filter function. If not specified, the UI will use all annotations.
+     */
+    activate(uiName: string, filter?: () => boolean): void;
+    /**
+     * Deactivates annotations UI with given name.
+     *
+     * @param uiName The name of the annotations UI to deactivate.
+     */
+    deactivate(uiName: string): void;
+    /**
+     * Switches the annotations UI to the one with given name.
+     *
+     * It preserves the currently active annotation.
+     *
+     * @param uiName The name of the annotations UI to switch to.
+     */
+    switchTo(uiName: string): void;
+    /**
+     * Deactivates all annotations UIs.
+     */
+    deactivateAll(): void;
+    /**
+     * Registers an annotations UI. It might be one of:
+     *
+     * * {@link module:comments/annotations/widesidebar~WideSidebar},
+     * * {@link module:comments/annotations/narrowsidebar~NarrowSidebar},
+     * * {@link module:comments/annotations/inlineannotations~InlineAnnotations}.
+     *
+     * It is possible to provide your own, custom annotations UI plugin. It has to implement
+     * {@link module:comments/annotations/annotationsuis~AnnotationsUI the `AnnotationsUI` interface}.
+     *
+     * @param uiName Annotations UI name.
+     * @param annotationsUI Annotations UI plugin instance.
+     */
+    register(uiName: string, annotationsUI: AnnotationsUI<ContextPlugin | Plugin>): void;
+    /**
+     * Refilters annotations to proper UIs based on filters provided earlier during the
+     * {@link module:comments/annotations/annotationsuis~AnnotationsUIs#activate annotations UIs activation}.
+     *
+     * This method should be used if the annotations UIs filtering functions return different results than before
+     * for some annotations. It only reattaches these annotations, which should change their UIs.
+     */
+    refilterAnnotations(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+}
+/**
+ * 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 {@link module:core/plugin~Plugin} or
+ * {@link module:core/contextplugin~ContextPlugin} class.
+ *
+ * Examples of `AnnotationsUI` are:
+ *
+ * * {@link module:comments/annotations/widesidebar~WideSidebar},
+ * * {@link module:comments/annotations/narrowsidebar~NarrowSidebar},
+ * * {@link module:comments/annotations/inlineannotations~InlineAnnotations}.
+ *
+ * You can use the following snippet as a base for your own annotations UI:
+ *
+ * ```ts
+ * 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.
+ * 	}
+ * }
+ * ```
+ */
+export interface AnnotationUI {
+    /**
+     * Observable `activeAnnotation` property. {@link module:comments/annotations/annotationsuis~AnnotationsUIs} listens to changes on that
+     * property.
+     *
+     * To make this property observable use `this.set( 'activeAnnotation', null )` in the constructor.
+     */
+    activeAnnotation: Annotation | null;
+    /**
+     * 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.
+     */
+    attach: (annotationCollection: AnnotationCollection) => void;
+    /**
+     * Destroys the UI and removes all listeners. This method is called when the UI is deactivated.
+     */
+    detach: () => 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
+     * {@link #activeAnnotation `AnnotationUI#activeAnnotation`} property.
+     *
+     * It also should set {@link module:comments/annotations/annotation~Annotation#isActive `Annotation#isActive`} of the deactivated
+     * and the activated annotation.
+     *
+     * @param annotation The new active annotation or null when no annotation is active.
+     */
+    setActiveAnnotation: (annotation: Annotation | null) => void;
+    _setSelectedAnnotations?: (annotations: Array<Annotation>) => void;
+}
+export type AnnotationsUI<T extends Emitter> = T & AnnotationUI;