@ckeditor/ckeditor5-track-changes 0.0.0-internal-20241017.0

package/src/ui/view/basesuggestionthreadview.d.ts

@@ -0,0 +1,205 @@
+/**
+ * @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 track-changes/ui/view/basesuggestionthreadview
+ * @publicApi
+ */
+import { FocusCycler, View, ViewCollection, type FocusableView } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
+import type { EditorConfig } from 'ckeditor5/src/core.js';
+import type Suggestion from '../../suggestion.js';
+import type { CommentsListView, CommentThreadInputView, CommentView } from '@ckeditor/ckeditor5-comments';
+import { AriaDescriptionView, type User } from 'ckeditor5-collaboration/src/collaboration-core.js';
+import type { Description } from '../../suggestiondescriptionfactory.js';
+import type SuggestionView from './suggestionview.js';
+/**
+ * An abstract suggestion thread view class that should be used as a base for suggestion thread view implementations.
+ * It provides some behaviors, flags and building blocks to use when creating a custom suggestion thread view class.
+ *
+ * All events fired by {@link module:comments/comments/ui/view/basecommentview~BaseCommentView}
+ * are delegated to {@link module:track-changes/ui/view/basesuggestionthreadview~BaseSuggestionThreadView}.
+ * This means that {@link module:track-changes/ui/view/basesuggestionthreadview~BaseSuggestionThreadView} can also fire these
+ * events to communicate with CKEditor 5 collaboration features.
+ *
+ * For the usage examples check the {@glink features/collaboration/annotations/annotations-custom-view
+ * Annotations custom view} guide.
+ */
+export default abstract class BaseSuggestionThreadView extends View {
+    /**
+     * The list of comment views. It should be used as a part of the view template when present.
+     */
+    commentsListView: CommentsListView | null;
+    /**
+     * The comment input area view. It should be used as a part of the view template when present.
+     */
+    commentThreadInputView: CommentThreadInputView | null;
+    /**
+     * A helper view that provides an ARIA description for the comment thread used by
+     * assistive technologies.
+     */
+    readonly ariaDescriptionView: AriaDescriptionView;
+    /**
+     * A boolean value that informs if the comment thread view is in the active state ("highlighted").
+     * A comment thread view is in this state when it is focused or was activated by the user in any different way.
+     *
+     * @observable
+     */
+    isActive: boolean;
+    /**
+     * Suggestion creation date.
+     *
+     * @observable
+     */
+    authoredAt: Date | null;
+    /**
+     * Flag that indicates whether suggestion acceptation is possible.
+     *
+     * @observable
+     */
+    canAccept: boolean;
+    /**
+     * Flag that indicates whether suggestion discarding is possible.
+     *
+     * @observable
+     */
+    canDiscard: boolean;
+    /**
+     * Stores description entries generated for this suggestion that describe what is the suggested change.
+     * They are used to create the final description presented in the suggestion view to the user.
+     *
+     * Note that one suggestion may include multiple changes.
+     *
+     * Most cases are simple and include just one description item:
+     *
+     *  ```ts
+     * [
+     *		{ type: 'insertion', content: '*Insert:* "Foo"' }
+     * ]
+     *	```
+     *
+     * This description item represents a suggestion for inserting the "Foo" text. The `type` property describes the performed action
+     * while the `content` property contains additional information about the action and is optional.
+     *
+     * A more complex example is presented below:
+     *
+     * ```ts
+     * [
+     *		{ type: 'insertion', content: '*Insert:* 2 paragraphs' },
+     *		{ type: 'insertion', content: '*Insert:* image' },
+     *		{ type: 'replace', content: '*Replace:* "Foo" *with* "Bar"' }
+     * ]
+     * ```
+     *
+     * In this example, there are three description instances (or lines). Two new (empty) paragraphs were added,
+     * an image was added and then "Foo" text was replaced by "Bar". The above structure could be rendered as:
+     *
+     *  ```html
+     *	<p><strong>Insert:</strong> 2 paragraphs</p>
+     *	<p><strong>Insert:</strong> image</p>
+     *	<p><strong>Replace:</strong> "Foo" <strong>with</strong> "Bar"</p>
+     *	```
+     *
+     * @observable
+     */
+    descriptionParts: Array<Description>;
+    /**
+     * Informs whether the suggestion thread has any changes that have not been saved.
+     *
+     * @observable
+     */
+    isDirty: boolean;
+    /**
+     * Informs whether the suggestion can be accepted or discarded.
+     *
+     * @observable
+     */
+    isEnabled: boolean;
+    /**
+     * The number of items in the view, where the suggestion itself counts as one.
+     *
+     * In other words, it is equal to the number of comments in the suggestion thread view plus one.
+     *
+     * @observable
+     */
+    readonly length: number;
+    /**
+     * An accessible thread label text exposed to assistive technologies.
+     */
+    ariaLabel: string;
+    /**
+     * A collection of focusable child views.
+     */
+    readonly focusables: ViewCollection<FocusableView>;
+    /**
+     * Tracks information about DOM focus in the thread.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * Helps cycling over focusable views in the thread.
+     */
+    readonly focusCycler: FocusCycler;
+    constructor(locale: Locale, model: Suggestion, localUser: User, config: SuggestionThreadConfig);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * Focuses the view.
+     */
+    focus(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+}
+/**
+ * Fired when a user performed an action that should lead to accepting the suggestion.
+ *
+ * This event is not fired by default by any component created by `BaseSuggestionThreadView`.
+ * If you create a view class extending `BaseSuggestionCommentView`, you should provide
+ * a UI element that will fire this event.
+ *
+ * @eventName ~BaseSuggestionThreadView#acceptSuggestion
+ */
+export type AcceptSuggestionEvent = {
+    name: 'acceptSuggestion';
+    args: [
+        id: string
+    ];
+};
+/**
+ * Fired when a user performed an action that should lead to discarding the suggestion.
+ *
+ * This event is not fired by default by any component created by `BaseSuggestionThreadView`.
+ * If you create a view class extending `BaseSuggestionCommentView`, you should provide
+ * a UI element that will fire this event.
+ *
+ * @eventName ~BaseSuggestionThreadView#discardSuggestion
+ */
+export type DiscardSuggestionEvent = {
+    name: 'discardSuggestion';
+    args: [
+        id: string
+    ];
+};
+/**
+ * Config used for suggestion thread views.
+ */
+export interface SuggestionThreadConfig {
+    disableComments: boolean;
+    editorConfig: EditorConfig;
+    maxCommentsWhenCollapsed: number;
+    maxThreadTotalWeight: number;
+    maxCommentCharsWhenCollapsed: number;
+    formatDateTime: (date: Date | string) => string;
+    CommentView: typeof CommentView;
+    CommentsListView: typeof CommentsListView;
+    CommentThreadInputView: typeof CommentThreadInputView;
+    SuggestionView: typeof SuggestionView;
+}

package/src/ui/view/basesuggestionthreadview.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.              |
+ *          |                                                                                 |
+ *          |                                                                                 |
+ *          +---------------------------------------------------------------------------------+
+ *
+ *
+ *
+ *
+ */
+const _0x507929=_0x2b46;(function(_0x16f16c,_0x11b95b){const _0x2a94d9=_0x2b46,_0x580542=_0x16f16c();while(!![]){try{const _0x4259a7=parseInt(_0x2a94d9(0x108))/0x1+parseInt(_0x2a94d9(0xea))/0x2+parseInt(_0x2a94d9(0xe2))/0x3*(-parseInt(_0x2a94d9(0x110))/0x4)+parseInt(_0x2a94d9(0xf5))/0x5+parseInt(_0x2a94d9(0xe6))/0x6+parseInt(_0x2a94d9(0x113))/0x7*(parseInt(_0x2a94d9(0x11a))/0x8)+parseInt(_0x2a94d9(0x101))/0x9*(-parseInt(_0x2a94d9(0x114))/0xa);if(_0x4259a7===_0x11b95b)break;else _0x580542['push'](_0x580542['shift']());}catch(_0x26b6a4){_0x580542['push'](_0x580542['shift']());}}}(_0x4bfb,0xdaa6e));import{FocusCycler as _0x442de0,View as _0x1c6bb6,ViewCollection as _0x1a0bb5}from'ckeditor5/src/ui.js';import{FocusTracker as _0x1acb8a,KeystrokeHandler as _0x120901}from'ckeditor5/src/utils.js';import{AriaDescriptionView as _0x581443,setupThreadKeyboardNavigation as _0x50f829}from'ckeditor5-collaboration/src/collaboration-core.js';function _0x2b46(_0x240480,_0x1783f6){const _0x4bfb3f=_0x4bfb();return _0x2b46=function(_0x2b46d7,_0xb2c9a0){_0x2b46d7=_0x2b46d7-0xdc;let _0x3a7e4b=_0x4bfb3f[_0x2b46d7];return _0x3a7e4b;},_0x2b46(_0x240480,_0x1783f6);}import{getTranslation as _0x21af87}from'../../utils/common-translations.js';import{renderDescription as _0x5e6be8}from'../../utils/utils.js';export default class as extends _0x1c6bb6{constructor(_0x213967,_0x4485e8,_0xc5fd49,_0xe22fa){const _0x3db5df=_0x2b46;super(_0x213967),this[_0x3db5df(0x109)]=null,this[_0x3db5df(0xf8)]=null,this[_0x3db5df(0xe5)]=new _0x581443(_0x213967,_0x21af87(_0x213967,_0x3db5df(0x120))),this[_0x3db5df(0x10a)](_0x3db5df(0xf6),!0x1),this[_0x3db5df(0x10a)](_0x3db5df(0xf3),_0x4485e8[_0x3db5df(0xf3)]),this[_0x3db5df(0x11f)](_0x3db5df(0xf3))['to'](_0x4485e8),this[_0x3db5df(0x10a)](_0x3db5df(0xff),[]),this[_0x3db5df(0x10a)](_0x3db5df(0xdd),!0x1),this[_0x3db5df(0x10a)](_0x3db5df(0x107),!0x1),this[_0x3db5df(0x10a)](_0x3db5df(0xf9),!0x1),this[_0x3db5df(0x10a)](_0x3db5df(0x112),!0x1),this[_0x3db5df(0x11f)](_0x3db5df(0xfd))['to'](this,_0x3db5df(0x10e),_0x4485e8,_0x3db5df(0xf3),this,_0x3db5df(0xff),(_0x24c26d,_0x430afa,_0x481652)=>{const _0x51f7e1=_0x3db5df,_0x1c8b54=_0x481652[_0x51f7e1(0xf7)](_0x3c8091=>_0x5e6be8(_0x3c8091[_0x51f7e1(0xfa)]))[_0x51f7e1(0xe0)]('.\x20')+'.';return _0x21af87(this[_0x51f7e1(0xe9)],_0x51f7e1(0xfc),[_0x24c26d-0x1,_0x4485e8[_0x51f7e1(0x102)][_0x51f7e1(0x105)],_0x430afa?_0xe22fa[_0x51f7e1(0x11e)](_0x430afa):'',new DOMParser()[_0x51f7e1(0x100)](_0x1c8b54,_0x51f7e1(0x122))[_0x51f7e1(0xec)][_0x51f7e1(0x119)]]);}),this[_0x3db5df(0x104)]=new _0x1a0bb5(),this[_0x3db5df(0x103)]=new _0x1acb8a(),this[_0x3db5df(0xe8)]=new _0x120901(),this[_0x3db5df(0x10f)]=new _0x442de0({'focusables':this[_0x3db5df(0x104)],'focusTracker':this[_0x3db5df(0x103)],'keystrokeHandler':this[_0x3db5df(0xe8)],'keystrokeHandlerOptions':{'filter':_0x1dfae4=>_0x1dfae4[_0x3db5df(0xe4)]!==this[_0x3db5df(0x10c)]},'actions':{'focusPrevious':_0x3db5df(0xde),'focusNext':_0x3db5df(0xf4)}}),this[_0x3db5df(0x10d)]=_0x4485e8,this[_0x3db5df(0xee)]=_0xc5fd49,this[_0x3db5df(0x121)]=_0xe22fa,_0xe22fa[_0x3db5df(0x111)]?this[_0x3db5df(0x10a)](_0x3db5df(0x10e),0x1):this[_0x3db5df(0x106)]();}[_0x507929(0xeb)](){const _0x255907=_0x507929;super[_0x255907(0xeb)](),_0x50f829(this,this[_0x255907(0x104)]);}[_0x507929(0xf0)](){const _0x12d206=_0x507929;this[_0x12d206(0x10c)][_0x12d206(0xf0)]();}[_0x507929(0xed)](){const _0x55bed9=_0x507929;this[_0x55bed9(0x109)]&&this[_0x55bed9(0x109)][_0x55bed9(0xed)](),this[_0x55bed9(0xf8)]&&this[_0x55bed9(0xf8)][_0x55bed9(0xed)](),super[_0x55bed9(0xed)]();}[_0x507929(0x106)](){const _0x49aafc=_0x507929,{CommentsListView:_0x3d3f29}=this[_0x49aafc(0x121)];this[_0x49aafc(0x109)]=new _0x3d3f29(this[_0x49aafc(0xe9)],this[_0x49aafc(0x10d)][_0x49aafc(0x117)],Object[_0x49aafc(0x11d)]({'CommentView':this[_0x49aafc(0x121)][_0x49aafc(0x124)]},this[_0x49aafc(0x121)])),this[_0x49aafc(0x109)][_0x49aafc(0x11c)](_0x49aafc(0xdc))['to'](this),this[_0x49aafc(0x109)][_0x49aafc(0x11c)](_0x49aafc(0xef))['to'](this),this[_0x49aafc(0x109)][_0x49aafc(0x11f)](_0x49aafc(0xf6))['to'](this),this[_0x49aafc(0x10a)](_0x49aafc(0x10e),this[_0x49aafc(0x109)][_0x49aafc(0x10e)]+0x1),this[_0x49aafc(0x11f)](_0x49aafc(0x10e))['to'](this[_0x49aafc(0x109)],_0x49aafc(0x10e),_0x145c60=>_0x145c60+0x1),this[_0x49aafc(0xf8)]=this[_0x49aafc(0x116)](),this['on'](_0x49aafc(0xdc),()=>this[_0x49aafc(0xf0)]()),this[_0x49aafc(0x11f)](_0x49aafc(0xdd))['to'](this[_0x49aafc(0x109)],_0x49aafc(0x10b),this[_0x49aafc(0xf8)][_0x49aafc(0xf2)],_0x49aafc(0x115),(_0x265553,_0x5d88d4)=>_0x265553||!!_0x5d88d4);}[_0x507929(0x116)](){const _0x54b5cd=_0x507929,{CommentThreadInputView:_0x1fc753}=this[_0x54b5cd(0x121)],_0x2921e2=new _0x1fc753(this[_0x54b5cd(0xe9)],this[_0x54b5cd(0xee)],this[_0x54b5cd(0x121)][_0x54b5cd(0xe1)]),_0x146a2f=_0x2921e2[_0x54b5cd(0xf2)];return _0x2921e2[_0x54b5cd(0x11f)](_0x54b5cd(0xdf))['to'](this,_0x54b5cd(0xf6),this[_0x54b5cd(0x10d)][_0x54b5cd(0x117)],_0x54b5cd(0xfb),_0x146a2f,_0x54b5cd(0x115),(_0x1c4ea0,_0x3abcc0,_0x5964b3)=>!!_0x5964b3||_0x1c4ea0&&!_0x3abcc0),_0x146a2f['on'](_0x54b5cd(0xfe),(_0x4384be,_0xcb3926)=>{const _0x5de667=_0x54b5cd;this[_0x5de667(0xf1)](_0x5de667(0xe3),_0xcb3926),_0x146a2f[_0x5de667(0x11b)][_0x5de667(0x118)]('');}),_0x146a2f['on'](_0x54b5cd(0x123),()=>this[_0x54b5cd(0xf0)]()),_0x146a2f[_0x54b5cd(0x11f)](_0x54b5cd(0xe7))['to'](this[_0x54b5cd(0x10d)][_0x54b5cd(0x117)],_0x54b5cd(0xfb)),_0x2921e2;}}function _0x4bfb(){const _0xe446a1=['14LhYifG','150IwfMKd','value','_createCommentThreadInputView','commentThread','setData','textContent','4042792DMEWID','editor','delegate','assign','formatDateTime','bind','SUGGESTION_THREAD_DESCRIPTION','_config','text/html','cancel','CommentView','removeComment','isDirty','shift+tab','showInput','join','editorConfig','57YmhuIY','addComment','target','ariaDescriptionView','1648200FuipLL','disabledSubmit','keystrokes','locale','3247472PZgYgD','render','body','destroy','_localUser','updateComment','focus','fire','commentInputView','authoredAt','tab','7095450TnxwcA','isActive','map','commentThreadInputView','canAccept','content','isReadOnly','SUGGESTION_THREAD_ARIA_LABEL','ariaLabel','submit','descriptionParts','parseFromString','2675061JcvkUS','author','focusTracker','focusables','name','_createCommentViews','isEnabled','1128998jAxulM','commentsListView','set','hasDirtyComment','element','_model','length','focusCycler','21724SaxRmq','disableComments','canDiscard'];_0x4bfb=function(){return _0xe446a1;};return _0x4bfb();}

package/src/ui/view/suggestionthreadview.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
+ */
+/**
+ * @module track-changes/ui/view/suggestionthreadview
+ * @publicApi
+ */
+import { default as BaseSuggestionThreadView, type SuggestionThreadConfig } from './basesuggestionthreadview.js';
+import { type TemplateDefinition, type ViewWithFocusCycler } from 'ckeditor5/src/ui.js';
+import { type User } from 'ckeditor5-collaboration/src/collaboration-core.js';
+import { type Locale } from 'ckeditor5/src/utils.js';
+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 default 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;
+}

package/src/ui/view/suggestionthreadview.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.              |
+ *          |                                                                                 |
+ *          |                                                                                 |
+ *          +---------------------------------------------------------------------------------+
+ *
+ *
+ *
+ *
+ */
+const _0x2cd7aa=_0x35d3;(function(_0x769807,_0x511749){const _0x4a19b6=_0x35d3,_0x1c8c57=_0x769807();while(!![]){try{const _0x4395cd=parseInt(_0x4a19b6(0x7e))/0x1*(-parseInt(_0x4a19b6(0xa4))/0x2)+parseInt(_0x4a19b6(0x7c))/0x3*(-parseInt(_0x4a19b6(0x7f))/0x4)+parseInt(_0x4a19b6(0x91))/0x5+parseInt(_0x4a19b6(0xa2))/0x6*(-parseInt(_0x4a19b6(0x87))/0x7)+parseInt(_0x4a19b6(0xa3))/0x8+-parseInt(_0x4a19b6(0xa0))/0x9+-parseInt(_0x4a19b6(0x96))/0xa*(-parseInt(_0x4a19b6(0x84))/0xb);if(_0x4395cd===_0x511749)break;else _0x1c8c57['push'](_0x1c8c57['shift']());}catch(_0x4218d6){_0x1c8c57['push'](_0x1c8c57['shift']());}}}(_0x4ee0,0xe7194));import{default as _0x10184c}from'./basesuggestionthreadview.js';function _0x35d3(_0x30ca81,_0x11c8a6){const _0x4ee01a=_0x4ee0();return _0x35d3=function(_0x35d342,_0x373186){_0x35d342=_0x35d342-0x70;let _0x33bd0e=_0x4ee01a[_0x35d342];return _0x33bd0e;},_0x35d3(_0x30ca81,_0x11c8a6);}function _0x4ee0(){const _0x4baddd=['_config','50919WzhEHZ','isActive','set','5422501AnvlLl','ck-rounded-corners','ariaLabel','suggestionView','ck-suggestion-wrapper','disableComments','discardButton','commentThreadInputView','formatDateTime','ck-suggestion-','6793775rSPUaK','descriptionParts','<p>','getTemplate','ariaDescriptionView','1790NqGwjI','delegate','_descriptionElement','setTemplate','render','div','content','add','commentThread','_model','3785589jFgkeQ','author','6zYZEwH','6540384mkJvYK','2qCuLwT','bind','acceptSuggestion','editorDestroyed','canAccept','canDiscard','discardSuggestion','ck-suggestion-wrapper--active','</p>','bindTemplate','commentsListView','description','acceptButton','listitem','SuggestionView','focusables','color','type','404007pkjVRD','push','728381XqZvBC','4wWMkmB','isEnabled','ck-suggestion--disabled-comments','editorReady'];_0x4ee0=function(){return _0x4baddd;};return _0x4ee0();}import{trimHtml as _0x49c82b}from'ckeditor5-collaboration/src/collaboration-core.js';import{renderDescription as _0x37e403}from'../../utils/utils.js';export default class de extends _0x10184c{constructor(_0x1e148a,_0x2bbffd,_0x510cae,_0x2dd407){const _0x4f43bb=_0x35d3;super(_0x1e148a,_0x2bbffd,_0x510cae,_0x2dd407),this[_0x4f43bb(0x86)](_0x4f43bb(0x7b),''),this[_0x4f43bb(0xa5)](_0x4f43bb(0x7b))['to'](this,_0x4f43bb(0x92),_0x235efc=>_0x235efc&&_0x235efc[0x0]?_0x235efc[0x0][_0x4f43bb(0x7b)]:''),this[_0x4f43bb(0xa5)](_0x4f43bb(0x75))['to'](this,_0x4f43bb(0x92),this,_0x4f43bb(0x85),(_0x581a51,_0x4997a7)=>{const _0x3417e1=_0x4f43bb;let _0x2331ca='';for(const _0xacac2c of _0x581a51)_0x2331ca+=_0x3417e1(0x93)+_0x37e403(_0xacac2c[_0x3417e1(0x9c)],_0xacac2c[_0x3417e1(0x7a)])+_0x3417e1(0x72);return _0x4997a7?_0x2331ca:_0x49c82b(_0x2331ca,{'limit':0x8c});}),this[_0x4f43bb(0x98)]=null,this[_0x4f43bb(0x8a)]=new _0x2dd407[(_0x4f43bb(0x78))](_0x1e148a,_0x2bbffd,{'formatDateTime':_0x2dd407[_0x4f43bb(0x8f)]}),this[_0x4f43bb(0x8a)][_0x4f43bb(0xa5)](_0x4f43bb(0x75))['to'](this),this[_0x4f43bb(0x8a)][_0x4f43bb(0x97)](_0x4f43bb(0xa6),_0x4f43bb(0x70))['to'](this),this[_0x4f43bb(0x8a)][_0x4f43bb(0x76)][_0x4f43bb(0xa5)](_0x4f43bb(0x80))['to'](this,_0x4f43bb(0xa8)),this[_0x4f43bb(0x8a)][_0x4f43bb(0x8d)][_0x4f43bb(0xa5)](_0x4f43bb(0x80))['to'](this,_0x4f43bb(0xa9)),this[_0x4f43bb(0x79)][_0x4f43bb(0x9d)](this[_0x4f43bb(0x8a)]),this[_0x4f43bb(0x74)]&&this[_0x4f43bb(0x79)][_0x4f43bb(0x9d)](this[_0x4f43bb(0x74)]),this[_0x4f43bb(0x8e)]&&this[_0x4f43bb(0x79)][_0x4f43bb(0x9d)](this[_0x4f43bb(0x8e)]),this[_0x4f43bb(0x99)](this[_0x4f43bb(0x94)]());}[_0x2cd7aa(0x94)](){const _0x141aa9=_0x2cd7aa,_0x147cff=this[_0x141aa9(0x73)],_0x535461=[this[_0x141aa9(0x8a)]];return this[_0x141aa9(0x74)]&&_0x535461[_0x141aa9(0x7d)](this[_0x141aa9(0x74)]),this[_0x141aa9(0x8e)]&&_0x535461[_0x141aa9(0x7d)](this[_0x141aa9(0x8e)]),_0x535461[_0x141aa9(0x7d)](this[_0x141aa9(0x95)]),{'tag':_0x141aa9(0x9b),'attributes':{'class':['ck',_0x141aa9(0x88),_0x141aa9(0x8b),_0x147cff['if'](_0x141aa9(0x85),_0x141aa9(0x71)),_0x147cff['to'](_0x141aa9(0x7b),_0x28a6e6=>_0x141aa9(0x90)+_0x28a6e6),this[_0x141aa9(0x83)][_0x141aa9(0x8c)]&&_0x141aa9(0x81)],'data-suggestion-id':this[_0x141aa9(0x9f)]['id'],'data-thread-id':this[_0x141aa9(0x9f)][_0x141aa9(0x9e)]['id'],'data-author-id':this[_0x141aa9(0x9f)][_0x141aa9(0xa1)]['id'],'tabindex':0x0,'role':_0x141aa9(0x77),'aria-label':_0x147cff['to'](_0x141aa9(0x89)),'aria-describedby':this[_0x141aa9(0x95)]['id']},'children':_0x535461};}[_0x2cd7aa(0x9a)](){const _0x4e469d=_0x2cd7aa;super[_0x4e469d(0x9a)](),this[_0x4e469d(0x74)]&&(this[_0x4e469d(0x74)][_0x4e469d(0x97)](_0x4e469d(0x82))['to'](this),this[_0x4e469d(0x74)][_0x4e469d(0x97)](_0x4e469d(0xa7))['to'](this)),this[_0x4e469d(0x8e)]&&(this[_0x4e469d(0x8e)][_0x4e469d(0x97)](_0x4e469d(0x82))['to'](this),this[_0x4e469d(0x8e)][_0x4e469d(0x97)](_0x4e469d(0xa7))['to'](this));}}

package/src/ui/view/suggestionview.d.ts

@@ -0,0 +1,190 @@
+/**
+ * @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 track-changes/ui/view/suggestionview
+ * @publicApi
+ */
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
+import { View, type TemplateDefinition, type FocusableView, ViewCollection, FocusCycler } from 'ckeditor5/src/ui.js';
+import { LateFocusButtonView, UserView } from 'ckeditor5-collaboration/src/collaboration-core.js';
+import type Suggestion from '../../suggestion.js';
+/**
+ * A view displaying a detailed information about the suggestion as well as controls to accept or discard it.
+ *
+ * This view can be replaced by other view by overwriting the
+ * {@link module:track-changes/trackchangesconfig~TrackChangesConfig#SuggestionView} configuration.
+ */
+export default class SuggestionView extends View implements FocusableView {
+    /**
+     * A suggestion description explaining what has been changed. To be presented to the user.
+     *
+     * @observable
+     */
+    description: string;
+    /**
+     * A user view for the suggestion author.
+     */
+    userView: UserView;
+    /**
+     * A button view for the button that accepts the suggestion.
+     */
+    acceptButton: LateFocusButtonView;
+    /**
+     * A button view for the button that discards the suggestion.
+     */
+    discardButton: LateFocusButtonView;
+    /**
+     * A collection of focusable child views.
+     */
+    readonly focusables: ViewCollection<FocusableView>;
+    /**
+     * Tracks information about DOM focus in the suggestion.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * Helps cycling over focusable views in the suggestion.
+     */
+    readonly focusCycler: FocusCycler;
+    /**
+     * Suggestion creation date.
+     *
+     * @observable
+     */
+    authoredAt: Date | null;
+    constructor(locale: Locale, model: Suggestion, config: SuggestionConfig);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * 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 view.
+     *
+     * The template looks as follows:
+     *
+     * ```ts
+     * const bind = this.bindTemplate;
+     * const suggestionContentElements = [
+     * 	{
+     * 		tag: 'div',
+     *
+     * 		attributes: {
+     * 			class: [ 'ck-suggestion__info', 'ck-annotation__info' ]
+     * 		},
+     *
+     * 		children: [
+     * 			{
+     * 				tag: 'span',
+     *
+     * 				children: [
+     * 					{
+     * 						text: this.userView.name
+     * 					}
+     * 				],
+     *
+     * 				attributes: {
+     * 					class: [ 'ck-suggestion__info-name', 'ck-annotation__info-name' ]
+     * 				}
+     * 			},
+     * 			{
+     * 				tag: 'time',
+     *
+     * 				attributes: {
+     * 					datetime: bind.to( 'authoredAt' ),
+     * 					class: [ 'ck-comment__info-time', 'ck-annotation__info-time' ]
+     * 				},
+     *
+     * 				children: [
+     * 					{
+     * 						text: bind.to( 'authoredAt', value => this._config.formatDateTime( value ) )
+     * 					}
+     * 				]
+     * 			}
+     * 		]
+     * 	},
+     * 	{
+     * 		tag: 'div',
+     *
+     * 		attributes: {
+     * 			class: [ 'ck-suggestion__actions', 'ck-annotation__actions' ]
+     * 		},
+     *
+     * 		children: [
+     * 			this.acceptButton,
+     * 			this.discardButton
+     * 		]
+     * 	},
+     * 	{
+     * 		tag: 'div',
+     *
+     * 		attributes: {
+     * 			class: [ 'ck-annotation__content-wrapper' ]
+     * 		}
+     * 	}
+     * ];
+     *
+     * if ( this._model.isExternal ) {
+     * 	suggestionContentElements.push( {
+     * 		tag: 'div',
+     *
+     * 		attributes: {
+     * 			class: [ 'ck-comment__external' ]
+     * 		},
+     *
+     * 		children: [ {
+     * 			text: this.getExternalSuggestionNote()
+     * 		} ]
+     * 	} );
+     * }
+     *
+     * return {
+     * 	tag: 'div',
+     *
+     * 	attributes: {
+     * 		class: [
+     * 			'ck-suggestion',
+     * 			'ck-annotation'
+     * 		],
+     * 		tabindex: -1
+     * 	},
+     *
+     * 	children: [
+     * 		this.userView,
+     * 		{
+     * 			tag: 'div',
+     *
+     * 			attributes: {
+     * 				class: [ 'ck-suggestion__main', 'ck-annotation__main' ],
+     * 				role: 'presentation'
+     * 			},
+     *
+     * 			children: suggestionContentElements
+     * 		}
+     * 	]
+     * };
+     * ```
+     */
+    getTemplate(): TemplateDefinition;
+    /**
+     * @inheritDoc
+     */
+    focus(): void;
+    /**
+     * Gets the translated notification text which indicates that the author name comes from an external source.
+     */
+    getUserViewNotificationText(): string | null;
+    /**
+     * Gets the translated note which indicates that the suggestion comes from an external source.
+     */
+    getExternalSuggestionNote(): string;
+}
+export interface SuggestionConfig {
+    formatDateTime: (date: Date | string) => string;
+}

package/src/ui/view/suggestionview.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.              |
+ *          |                                                                                 |
+ *          |                                                                                 |
+ *          +---------------------------------------------------------------------------------+
+ *
+ *
+ *
+ *
+ */
+const _0x4bf85c=_0x34be;function _0x34be(_0x4abf1e,_0x243fff){const _0x5993ff=_0x5993();return _0x34be=function(_0x34beda,_0x585321){_0x34beda=_0x34beda-0x7f;let _0x42d34d=_0x5993ff[_0x34beda];return _0x42d34d;},_0x34be(_0x4abf1e,_0x243fff);}(function(_0x4aaada,_0xce0040){const _0x133b87=_0x34be,_0x30aa3b=_0x4aaada();while(!![]){try{const _0x52cd60=-parseInt(_0x133b87(0xa0))/0x1*(-parseInt(_0x133b87(0xd5))/0x2)+parseInt(_0x133b87(0xc7))/0x3*(parseInt(_0x133b87(0xd8))/0x4)+-parseInt(_0x133b87(0xc3))/0x5*(parseInt(_0x133b87(0x9c))/0x6)+parseInt(_0x133b87(0xd1))/0x7*(-parseInt(_0x133b87(0xd3))/0x8)+parseInt(_0x133b87(0xa7))/0x9*(-parseInt(_0x133b87(0xc9))/0xa)+parseInt(_0x133b87(0x9b))/0xb+parseInt(_0x133b87(0x89))/0xc;if(_0x52cd60===_0xce0040)break;else _0x30aa3b['push'](_0x30aa3b['shift']());}catch(_0x3c77d4){_0x30aa3b['push'](_0x30aa3b['shift']());}}}(_0x5993,0x36000));import{FocusTracker as _0x807c59,KeystrokeHandler as _0x47a18c}from'ckeditor5/src/utils.js';import{View as _0x306b1a,ViewCollection as _0x343820,FocusCycler as _0x190c1e}from'ckeditor5/src/ui.js';import{LateFocusButtonView as _0x4ea4fc,UserView as _0x401b66}from'ckeditor5-collaboration/src/collaboration-core.js';import{icons as _0x3ce8b8}from'ckeditor5/src/core.js';import{getTranslation as _0x11841d}from'../../utils/common-translations.js';export default class ue extends _0x306b1a{constructor(_0x3fc4f6,_0x3ffa24,_0x45cb99){const _0x2c11e9=_0x34be;super(_0x3fc4f6),this[_0x2c11e9(0x9f)]=_0x3ffa24,this[_0x2c11e9(0xbf)]=_0x45cb99,this[_0x2c11e9(0xaa)](_0x2c11e9(0xa1),''),this[_0x2c11e9(0xa3)](_0x2c11e9(0xd9))['to'](_0x3ffa24),this[_0x2c11e9(0x8b)]=this[_0x2c11e9(0xae)](_0x11841d(_0x3fc4f6,_0x2c11e9(0xc0)),_0x3ce8b8[_0x2c11e9(0xb2)],_0x2c11e9(0xbe),_0x2c11e9(0xc2),'sw'),this[_0x2c11e9(0xce)]=this[_0x2c11e9(0xae)](_0x11841d(_0x3fc4f6,_0x2c11e9(0xaf)),_0x3ce8b8[_0x2c11e9(0xcc)],_0x2c11e9(0xd7),_0x2c11e9(0xdb),'sw'),this[_0x2c11e9(0x84)]=new _0x401b66(_0x3fc4f6,_0x3ffa24[_0x2c11e9(0xa4)],this[_0x2c11e9(0x93)]()),this[_0x2c11e9(0x84)][_0x2c11e9(0xa8)]({'attributes':{'class':[_0x2c11e9(0x8d),_0x2c11e9(0x82)],'aria-hidden':!0x0}}),this[_0x2c11e9(0xd6)]=new _0x343820([this[_0x2c11e9(0x8b)],this[_0x2c11e9(0xce)]]),this[_0x2c11e9(0xbb)]=new _0x807c59(),this[_0x2c11e9(0xba)]=new _0x47a18c(),this[_0x2c11e9(0xb5)]=new _0x190c1e({'focusables':this[_0x2c11e9(0xd6)],'focusTracker':this[_0x2c11e9(0xbb)],'keystrokeHandler':this[_0x2c11e9(0xba)],'actions':{'focusPrevious':_0x2c11e9(0xd0),'focusNext':_0x2c11e9(0x88)},'keystrokeHandlerOptions':{'filter':_0x953f72=>_0x953f72[_0x2c11e9(0x87)]!==this[_0x2c11e9(0x81)]}}),this[_0x2c11e9(0xac)](this[_0x2c11e9(0x90)]());}[_0x4bf85c(0xb3)](){const _0x2de57e=_0x4bf85c;super[_0x2de57e(0xb3)]();const _0x7a812d=this[_0x2de57e(0x81)][_0x2de57e(0xcb)](_0x2de57e(0xb9));_0x7a812d[_0x2de57e(0xd4)]=this[_0x2de57e(0xa1)],this['on'](_0x2de57e(0xad),(_0x1d4dba,_0x24bb1e,_0x2cab88)=>{const _0x44bc14=_0x2de57e;_0x7a812d[_0x44bc14(0xd4)]=_0x2cab88;}),this[_0x2de57e(0xc4)]();}[_0x4bf85c(0x90)](){const _0x2dc61f=_0x4bf85c,_0x27ead9=this[_0x2dc61f(0x8c)],_0x5c982e=[{'tag':_0x2dc61f(0xcd),'attributes':{'class':[_0x2dc61f(0xb8),_0x2dc61f(0xa9)]},'children':[{'tag':_0x2dc61f(0xbd),'children':[{'text':this[_0x2dc61f(0x84)][_0x2dc61f(0xd2)]}],'attributes':{'class':[_0x2dc61f(0x83),_0x2dc61f(0x92)]}},{'tag':_0x2dc61f(0x9e),'attributes':{'datetime':_0x27ead9['to'](_0x2dc61f(0xd9)),'class':[_0x2dc61f(0xb6),_0x2dc61f(0xb4)]},'children':[{'text':_0x27ead9['to'](_0x2dc61f(0xd9),_0x79d71b=>this[_0x2dc61f(0xbf)][_0x2dc61f(0xc6)](_0x79d71b))}]}]},{'tag':_0x2dc61f(0xcd),'attributes':{'class':[_0x2dc61f(0xb7),_0x2dc61f(0x94)]},'children':[this[_0x2dc61f(0x8b)],this[_0x2dc61f(0xce)]]},{'tag':_0x2dc61f(0xcd),'attributes':{'class':[_0x2dc61f(0xa6)]}}];return this[_0x2dc61f(0x9f)][_0x2dc61f(0x8e)]&&_0x5c982e[_0x2dc61f(0x97)]({'tag':_0x2dc61f(0xcd),'attributes':{'class':[_0x2dc61f(0x98)]},'children':[{'text':this[_0x2dc61f(0x8f)]()}]}),{'tag':_0x2dc61f(0xcd),'attributes':{'class':[_0x2dc61f(0xc5),_0x2dc61f(0xcf)],'tabindex':-0x1},'children':[this[_0x2dc61f(0x84)],{'tag':_0x2dc61f(0xcd),'attributes':{'class':[_0x2dc61f(0x7f),_0x2dc61f(0xab)],'role':_0x2dc61f(0xbc)},'children':_0x5c982e}]};}[_0x4bf85c(0xca)](){const _0x4c56b8=_0x4bf85c;this[_0x4c56b8(0x81)][_0x4c56b8(0xca)]();}[_0x4bf85c(0x93)](){const _0x4c006c=_0x4bf85c;return this[_0x4c006c(0x9f)][_0x4c006c(0x8e)]?_0x4c006c(0x80)===this[_0x4c006c(0x9f)][_0x4c006c(0x86)][_0x4c006c(0xda)][_0x4c006c(0xa5)]?_0x11841d(this[_0x4c006c(0x96)],_0x4c006c(0x9a),this[_0x4c006c(0x9f)][_0x4c006c(0xc8)][_0x4c006c(0xd2)]):_0x11841d(this[_0x4c006c(0x96)],_0x4c006c(0xa2),this[_0x4c006c(0x9f)][_0x4c006c(0xc8)][_0x4c006c(0xd2)]):null;}[_0x4bf85c(0x8f)](){const _0x2e8425=_0x4bf85c;return _0x2e8425(0x80)===this[_0x2e8425(0x9f)][_0x2e8425(0x86)][_0x2e8425(0xda)][_0x2e8425(0xa5)]?_0x11841d(this[_0x2e8425(0x96)],_0x2e8425(0xb0)):_0x11841d(this[_0x2e8425(0x96)],_0x2e8425(0x85));}[_0x4bf85c(0xae)](_0x50f31e,_0x14b41a,_0x39f1ca,_0x5be218,_0x360432){const _0x1d8a27=_0x4bf85c,_0x79916a=new _0x4ea4fc(this[_0x1d8a27(0x96)]);return _0x79916a[_0x1d8a27(0xaa)]({'label':_0x50f31e,'icon':_0x14b41a,'tooltip':!0x0,'tooltipPosition':_0x360432}),_0x79916a[_0x1d8a27(0xa8)]({'attributes':{'class':_0x39f1ca}}),_0x79916a['on'](_0x1d8a27(0x9d),()=>{const _0x5e94c4=_0x1d8a27;this[_0x5e94c4(0x99)](_0x5be218,this[_0x5e94c4(0x9f)]['id']);}),_0x79916a;}[_0x4bf85c(0xc4)](){const _0x2476bb=_0x4bf85c,_0x1ff962=this[_0x2476bb(0x81)];this[_0x2476bb(0xba)][_0x2476bb(0x8a)](_0x1ff962);for(const _0x2544ea of this[_0x2476bb(0xd6)])this[_0x2476bb(0xbb)][_0x2476bb(0x91)](_0x2544ea[_0x2476bb(0x81)]),this[_0x2476bb(0xba)][_0x2476bb(0x8a)](_0x2544ea[_0x2476bb(0x81)]);this[_0x2476bb(0xba)][_0x2476bb(0xaa)](_0x2476bb(0xb1),(_0x403b2c,_0xbd0c56)=>{const _0x2ed197=_0x2476bb;_0x1ff962===_0x403b2c[_0x2ed197(0x87)]&&(this[_0x2ed197(0xb5)][_0x2ed197(0x95)](),_0xbd0c56());}),this[_0x2476bb(0xba)][_0x2476bb(0xaa)](_0x2476bb(0xc1),(_0x32946f,_0x4a28cd)=>{const _0x4f959d=_0x2476bb;_0x1ff962!==_0x32946f[_0x4f959d(0x87)]&&(this[_0x4f959d(0xca)](),_0x4a28cd());});}}function _0x5993(){const _0xf0ac3f=['span','ck-suggestion--accept','_config','Accept\x20suggestion','esc','acceptSuggestion','485NfUrZJ','_setupKeyboardNavigation','ck-suggestion','formatDateTime','24yBWJPm','creator','951410ElXnAX','focus','querySelector','cancel','div','discardButton','ck-annotation','shift+tab','553CrTuEW','name','38392CdXlug','innerHTML','4FXCENe','focusables','ck-suggestion--discard','107356OyZVFe','authoredAt','@external','discardSuggestion','ck-suggestion__main','importWord','element','ck-annotation__user','ck-suggestion__info-name','userView','EXTERNAL_SUGGESTION','attributes','target','tab','6961944xZdQlQ','listenTo','acceptButton','bindTemplate','ck-suggestion__user','isExternal','getExternalSuggestionNote','getTemplate','add','ck-annotation__info-name','getUserViewNotificationText','ck-annotation__actions','focusFirst','locale','push','ck-comment__external','fire','EXTERNAL_IMPORT_WORD_AVATAR','1696453jCVsBk','16476tLflhY','execute','time','_model','149067ZeiZjw','description','EXTERNAL_AVATAR','bind','author','source','ck-annotation__content-wrapper','36GNaIyv','extendTemplate','ck-annotation__info','set','ck-annotation__main','setTemplate','change:description','_createButton','Discard\x20suggestion','EXTERNAL_IMPORT_WORD_SUGGESTION','enter','check','render','ck-annotation__info-time','focusCycler','ck-comment__info-time','ck-suggestion__actions','ck-suggestion__info','.ck-annotation__content-wrapper','keystrokes','focusTracker','presentation'];_0x5993=function(){return _0xf0ac3f;};return _0x5993();}

package/src/utils/common-translations.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @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 track-changes/utils/common-translations
+ */
+import { type Locale } from 'ckeditor5/src/utils.js';
+export declare function getTranslation(locale: Locale, id: string, values?: number | string | ReadonlyArray<number | string>): string;