@ckeditor/ckeditor5-track-changes
Version:
CKEditor 5 track changes plugin.
95 lines (94 loc) • 3.44 kB
TypeScript
/**
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* @module track-changes/ui/view/suggestionthreadview
* @publicApi
*/
import { BaseSuggestionThreadView, type SuggestionThreadConfig } from './basesuggestionthreadview.js';
import { type TemplateDefinition, type ViewWithFocusCycler } from '@ckeditor/ckeditor5-ui';
import { type User } from '@ckeditor/ckeditor5-collaboration-core';
import { type Locale } from '@ckeditor/ckeditor5-utils';
import { type Suggestion } from '../../suggestion.js';
import { type SuggestionView } from './suggestionview.js';
/**
* The default view for a suggestion thread.
*
* This view can be replaced by other view by overwriting the
* {@link module:track-changes/trackchangesconfig~TrackChangesConfig#SuggestionThreadView} configuration.
*/
export declare class SuggestionThreadView extends BaseSuggestionThreadView implements ViewWithFocusCycler {
/**
* The suggestion thread view type.
*
* This value is not equal to the suggestion (model) type. It is evaluated based on the type of the first suggestion for
* the suggestion thread view template purposes.
*
* @observable
*/
type: 'format' | 'replace' | 'deletion' | 'insertion' | '';
/**
* A suggestion description explaining what has been changed. To be presented to the user.
*
* @observable
*/
description: string;
/**
* A view displaying a detailed information about the suggestion as well as controls to accept or discard it.
*/
suggestionView: SuggestionView;
constructor(locale: Locale, model: Suggestion, localUser: User, config: SuggestionThreadConfig);
/**
* Returns a template definition that will be passed to {@link module:ui/view~View#setTemplate}.
*
* Overwrite this method if you want to set a custom template for the suggestion thread view.
*
* The template looks as follows:
*
* ```ts
* const bind = this.bindTemplate;
* const suggestionThreadChildren = [
* this.suggestionView
* ];
*
* if ( this.commentsListView ) {
* suggestionThreadChildren.push( this.commentsListView );
* }
*
* if ( this.commentThreadInputView ) {
* suggestionThreadChildren.push( this.commentThreadInputView );
* }
*
* suggestionThreadChildren.push( this.ariaDescriptionView );
*
* return {
* tag: 'div',
* attributes: {
* class: [
* 'ck',
* 'ck-rounded-corners',
* 'ck-suggestion-wrapper',
* bind.if( 'isActive', 'ck-suggestion-wrapper--active' ),
* bind.to( 'type', value => `ck-suggestion-${ value }` ),
* this._config.disableComments && 'ck-suggestion--disabled-comments'
* ],
* 'data-suggestion-id': this._model.id,
* 'data-thread-id': this._model.commentThread!.id,
* 'data-author-id': this._model.author.id,
* // Needed for managing focus after adding new comment.
* tabindex: 0,
* role: 'listitem',
* 'aria-label': bind.to( 'ariaLabel' ),
* 'aria-describedby': this.ariaDescriptionView.id
* },
* children: suggestionThreadChildren
* };
* ```
*/
getTemplate(): TemplateDefinition;
/**
* @inheritDoc
*/
render(): void;
}