@ckeditor/ckeditor5-collaboration-core 48.2.0 → 48.3.0-alpha.1

package/dist/documentcompare.d.ts

@@ -1,153 +1,153 @@
 /**
- * @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
- */
+* @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 collaboration-core/documentcompare
- */
-import { ContextPlugin, Editor } from '@ckeditor/ckeditor5-core';
-import { ModelPosition, type ModelDocumentFragment, type ModelElement, type Operation } from '@ckeditor/ckeditor5-engine';
+* @module collaboration-core/documentcompare
+*/
+import { ContextPlugin, Editor } from "@ckeditor/ckeditor5-core";
+import { ModelPosition, type ModelDocumentFragment, type ModelElement, type Operation } from "@ckeditor/ckeditor5-engine";
 export declare const DATA_ID_MODEL_ATTRIBUTE = "$elementId";
 export declare const DATA_ID_VIEW_ATTRIBUTE = "data-id";
 /**
- * The `DocumentCompare` plugin provides utilities to compare two documents or documents fragments, and provide set of operations
- * which need to be executed to transform one document into the other.
- */
+* The `DocumentCompare` plugin provides utilities to compare two documents or documents fragments, and provide set of operations
+* which need to be executed to transform one document into the other.
+*/
 export declare class DocumentCompare extends ContextPlugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "DocumentCompare";
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin(): true;
-    /**
-     * @inheritDoc
-     */
-    static get isPremiumPlugin(): true;
-    init(): Promise<void>;
-    get editor(): Editor;
-    getDiff(dataBefore: string, dataAfter: string, options?: DocumentCompareOptions): DocumentDiff;
-    /**
-     * Returns `true` if given `operation` is an operation that marks a content to be removed. This kind of operations can be
-     * returned by {@link module:collaboration-core/documentcompare~DocumentCompare#getOperations} if `markedDeletions` mode is enabled.
-     *
-     * @param operation
-     */
-    isMarkedRemoveOperation(operation: Operation): boolean;
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "DocumentCompare";
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+	/**
+	* @inheritDoc
+	*/
+	static override get isPremiumPlugin(): true;
+	init(): Promise<void>;
+	get editor(): Editor;
+	getDiff(dataBefore: string, dataAfter: string, options?: DocumentCompareOptions): DocumentDiff;
+	/**
+	* Returns `true` if given `operation` is an operation that marks a content to be removed. This kind of operations can be
+	* returned by {@link module:collaboration-core/documentcompare~DocumentCompare#getOperations} if `markedDeletions` mode is enabled.
+	*
+	* @param operation
+	*/
+	isMarkedRemoveOperation(operation: Operation): boolean;
 }
 export interface DocumentCompareOptions {
-    anchor: string | ModelPosition;
-    markDeletions: boolean;
-    /**
-     * When `DocumentCompare` runs on a context with several editors, `DocumentCompare#editor` is the first editor in the context.
-     * Pass the editor whose model/schema should be used for parsing and for resolving a string `anchor` (e.g. multi-root root names).
-     */
-    targetEditor?: Editor;
+	anchor?: string | ModelPosition;
+	markDeletions: boolean;
+	/**
+	* When `DocumentCompare` runs on a context with several editors, `DocumentCompare#editor` is the first editor in the context.
+	* Pass the editor whose model/schema should be used for parsing and for resolving a string `anchor` (e.g. multi-root root names).
+	*/
+	targetEditor?: Editor;
 }
 export declare class DocumentDiff {
-    constructor({ editor, before, after, options }: {
-        editor: Editor;
-        before: ModelDocumentFragment;
-        after: ModelDocumentFragment;
-        options: {
-            markDeletions: boolean;
-            anchor: ModelPosition;
-        };
-    });
-    getOperationsData(): Array<OperationData>;
-    getOperations(): Array<Operation>;
+	constructor({ editor, before, after, options }: {
+		editor: Editor;
+		before: ModelDocumentFragment;
+		after: ModelDocumentFragment;
+		options: {
+			markDeletions: boolean;
+			anchor: ModelPosition;
+		};
+	});
+	getOperationsData(): Array<OperationData>;
+	getOperations(): Array<Operation>;
 }
 export interface InsertOperationData {
-    type: 'insert';
-    path: Path;
-    tokens: Array<ModelToken>;
+	type: "insert";
+	path: Path;
+	tokens: Array<ModelToken>;
 }
 export interface RemoveOperationData {
-    type: 'remove';
-    path: Path;
-    howMany: number;
+	type: "remove";
+	path: Path;
+	howMany: number;
 }
 export interface SplitOperationData {
-    type: 'split';
-    path: Path;
+	type: "split";
+	path: Path;
 }
 export interface MergeOperationData {
-    type: 'merge';
-    path: Path;
+	type: "merge";
+	path: Path;
 }
 export interface RenameOperationData {
-    type: 'rename';
-    path: Path;
-    oldName: string;
-    newName: string;
+	type: "rename";
+	path: Path;
+	oldName: string;
+	newName: string;
 }
 export interface AttributeOperationData {
-    type: 'attribute';
-    path: Path;
-    howMany: number;
-    key: string;
-    oldValue: string;
-    newValue: string;
+	type: "attribute";
+	path: Path;
+	howMany: number;
+	key: string;
+	oldValue: string;
+	newValue: string;
 }
 export interface MarkerOperationData {
-    type: 'marker';
-    name: string;
-    range: null | {
-        start: Path;
-        end: Path;
-    };
+	type: "marker";
+	name: string;
+	range: null | {
+		start: Path;
+		end: Path;
+	};
 }
 export interface UnwrapOperationData {
-    type: 'unwrap';
-    path: Path;
-    howMany: number;
+	type: "unwrap";
+	path: Path;
+	howMany: number;
 }
 export interface WrapOperationData {
-    type: 'wrap';
-    token: ModelElementToken;
-    range: {
-        start: Path;
-        end: Path;
-    };
+	type: "wrap";
+	token: ModelElementToken;
+	range: {
+		start: Path;
+		end: Path;
+	};
 }
 export interface MarkedRemoveData {
-    type: 'markedRemove';
-    range: {
-        start: Path;
-        end: Path;
-    };
+	type: "markedRemove";
+	range: {
+		start: Path;
+		end: Path;
+	};
 }
 export type OperationData = InsertOperationData | RemoveOperationData | SplitOperationData | MergeOperationData | RenameOperationData | AttributeOperationData | MarkerOperationData | UnwrapOperationData | WrapOperationData | MarkedRemoveData;
 export type ModelToken = ModelElementToken | ModelTextToken;
 export interface ModelElementToken {
-    type: 'element';
-    element: ModelElement;
-    elementId: string;
-    /**
-     * Elements category.
-     *
-     * Describes how the element behaves and how it can change. It is used when comparing lists of model tokens to create a better diff.
-     *
-     * * `block` - elements like paragraphs, lists, or headings. Can be renamed. Can be created by splitting. Can be removed by merging.
-     * Its contents can be "moved around" by splitting or merging.
-     *
-     * * `container` - elements like blockquote. Cannot be renamed. Can be created by wrapping. Can be removed by unwrapping. Can be
-     * "resized" by having other elements be moved into or out of them.
-     *
-     * * `solid` - limit-like elements like table or image. Cannot be renamed, split or merged. Can be added by insertion and removed by
-     * deletion. If added or removed, all their content also should be treated as added or removed.
-     */
-    category: 'block' | 'container' | 'solid';
-    isStart: boolean;
-    limitId: string;
+	type: "element";
+	element: ModelElement;
+	elementId: string;
+	/**
+	* Elements category.
+	*
+	* Describes how the element behaves and how it can change. It is used when comparing lists of model tokens to create a better diff.
+	*
+	* * `block` - elements like paragraphs, lists, or headings. Can be renamed. Can be created by splitting. Can be removed by merging.
+	* Its contents can be "moved around" by splitting or merging.
+	*
+	* * `container` - elements like blockquote. Cannot be renamed. Can be created by wrapping. Can be removed by unwrapping. Can be
+	* "resized" by having other elements be moved into or out of them.
+	*
+	* * `solid` - limit-like elements like table or image. Cannot be renamed, split or merged. Can be added by insertion and removed by
+	* deletion. If added or removed, all their content also should be treated as added or removed.
+	*/
+	category: "block" | "container" | "solid";
+	isStart: boolean;
+	limitId: string;
 }
 export interface ModelTextToken {
-    type: 'text';
-    data: string;
-    parent: ModelElement | ModelDocumentFragment;
-    offset: number;
-    limitId: string;
+	type: "text";
+	data: string;
+	parent: ModelElement | ModelDocumentFragment;
+	offset: number;
+	limitId: string;
 }
 export type Path = Array<number>;

package/dist/index-editor.css

@@ -144,6 +144,52 @@
   max-height:19px;
 }
 
+.ck.ck-pill{
+  --ck-pill-icon-size:12px;
+  --ck-pill-radius:9999px;
+  --ck-pill-line-height:var(--ck-pill-icon-size);
+  --ck-pill-padding-block:var(--ck-spacing-small);
+  --ck-pill-padding-inline:var(--ck-spacing-standard);
+  --ck-pill-gap:var(--ck-spacing-small);
+  --ck-pill-font-size:var(--ck-font-size-small);
+  --ck-pill-background:var(--ck-color-button-default-hover-background);
+  --ck-pill-color:var(--ck-color-text);
+  align-items:center;
+  gap:var(--ck-pill-gap);
+  padding:var(--ck-pill-padding-block) var(--ck-pill-padding-inline);
+  border-radius:var(--ck-pill-radius);
+  background:var(--ck-pill-background);
+  color:var(--ck-pill-color);
+  font-size:var(--ck-pill-font-size);
+  line-height:var(--ck-pill-line-height);
+  white-space:nowrap;
+  cursor:default;
+  display:inline-flex;
+}
+
+.ck.ck-pill.ck-pill_icon-right{
+  flex-direction:row-reverse;
+}
+
+.ck.ck-pill .ck-pill__icon{
+  flex:0 0 var(--ck-pill-icon-size);
+  width:var(--ck-pill-icon-size);
+  height:var(--ck-pill-icon-size);
+  display:inline-flex;
+}
+
+.ck.ck-pill .ck-pill__icon svg{
+  width:100%;
+  height:100%;
+}
+
+.ck.ck-pill .ck-pill__label{
+  color:inherit;
+  font-size:inherit;
+  line-height:inherit;
+  display:inline-block;
+}
+
 .ck.ck-button.ck-confirm-view-submit{
   color:var(--ck-color-button-save);
 }
@@ -190,6 +236,9 @@
   --ck-color-suggestion-box-deletion-border:#d85a79;
   --ck-color-suggestion-box-insertion-border:#5ad86b;
   --ck-color-suggestion-box-format-border:#5ac1d8;
+  --ck-color-suggestion-ai-accent:#743ccd;
+  --ck-color-suggestion-ai-accent-background:#f2ebff;
+  --ck-suggestion-ai-author-icon-size:18px;
 }
 
 .ck .ck-suggestion{
@@ -271,6 +320,37 @@
   border-left-color:var(--ck-color-suggestion-box-format-border);
 }
 
+.ck.ck-pill.ck-pill_ai{
+  --ck-pill-background:var(--ck-color-suggestion-ai-accent-background);
+  --ck-pill-color:var(--ck-color-suggestion-ai-accent);
+  --ck-pill-font-size:calc(var(--ck-font-size-base) * .9);
+  --ck-pill-line-height:1em;
+  --ck-pill-padding-block:calc(var(--ck-font-size-base) * .3);
+  --ck-pill-padding-inline:calc(var(--ck-font-size-base) * .6);
+  --ck-pill-gap:calc(var(--ck-font-size-base) * .3);
+}
+
+.ck .ck-user[data-user-id="ck-ai-author"] .ck-user__img.ck-user__avatar{
+  background-color:var(--ck-color-base-foreground);
+  box-shadow:0 0 0 1.5px var(--ck-color-suggestion-ai-accent);
+  color:var(--ck-color-suggestion-ai-accent);
+  justify-content:center;
+  align-items:center;
+  display:flex;
+}
+
+.ck .ck-user[data-user-id="ck-ai-author"] .ck-user__avatar-icon{
+  width:var(--ck-suggestion-ai-author-icon-size);
+  height:var(--ck-suggestion-ai-author-icon-size);
+}
+
+.ck .ck-suggestion__ai-source-pill{
+  margin-top:var(--ck-spacing-small);
+  grid-column:1 / -1;
+  justify-content:flex-end;
+  display:flex;
+}
+
 :root{
   --ck-color-suggestion-marker-insertion-border:#1eae3159;
   --ck-color-suggestion-marker-insertion-border-active:#126d1f80;

package/dist/index.css

@@ -144,6 +144,52 @@
   max-height: 19px;
 }
 
+.ck.ck-pill {
+  --ck-pill-icon-size: 12px;
+  --ck-pill-radius: 9999px;
+  --ck-pill-line-height: var(--ck-pill-icon-size);
+  --ck-pill-padding-block: var(--ck-spacing-small);
+  --ck-pill-padding-inline: var(--ck-spacing-standard);
+  --ck-pill-gap: var(--ck-spacing-small);
+  --ck-pill-font-size: var(--ck-font-size-small);
+  --ck-pill-background: var(--ck-color-button-default-hover-background);
+  --ck-pill-color: var(--ck-color-text);
+  align-items: center;
+  gap: var(--ck-pill-gap);
+  padding: var(--ck-pill-padding-block) var(--ck-pill-padding-inline);
+  border-radius: var(--ck-pill-radius);
+  background: var(--ck-pill-background);
+  color: var(--ck-pill-color);
+  font-size: var(--ck-pill-font-size);
+  line-height: var(--ck-pill-line-height);
+  white-space: nowrap;
+  cursor: default;
+  display: inline-flex;
+}
+
+.ck.ck-pill.ck-pill_icon-right {
+  flex-direction: row-reverse;
+}
+
+.ck.ck-pill .ck-pill__icon {
+  flex: 0 0 var(--ck-pill-icon-size);
+  width: var(--ck-pill-icon-size);
+  height: var(--ck-pill-icon-size);
+  display: inline-flex;
+}
+
+.ck.ck-pill .ck-pill__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ck.ck-pill .ck-pill__label {
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  display: inline-block;
+}
+
 .ck.ck-button.ck-confirm-view-submit {
   color: var(--ck-color-button-save);
 }
@@ -190,6 +236,9 @@
   --ck-color-suggestion-box-deletion-border: #d85a79;
   --ck-color-suggestion-box-insertion-border: #5ad86b;
   --ck-color-suggestion-box-format-border: #5ac1d8;
+  --ck-color-suggestion-ai-accent: #743ccd;
+  --ck-color-suggestion-ai-accent-background: #f2ebff;
+  --ck-suggestion-ai-author-icon-size: 18px;
 }
 
 .ck .ck-suggestion {
@@ -271,6 +320,37 @@
   border-left-color: var(--ck-color-suggestion-box-format-border);
 }
 
+.ck.ck-pill.ck-pill_ai {
+  --ck-pill-background: var(--ck-color-suggestion-ai-accent-background);
+  --ck-pill-color: var(--ck-color-suggestion-ai-accent);
+  --ck-pill-font-size: calc(var(--ck-font-size-base) * .9);
+  --ck-pill-line-height: 1em;
+  --ck-pill-padding-block: calc(var(--ck-font-size-base) * .3);
+  --ck-pill-padding-inline: calc(var(--ck-font-size-base) * .6);
+  --ck-pill-gap: calc(var(--ck-font-size-base) * .3);
+}
+
+.ck .ck-user[data-user-id="ck-ai-author"] .ck-user__img.ck-user__avatar {
+  background-color: var(--ck-color-base-foreground);
+  box-shadow: 0 0 0 1.5px var(--ck-color-suggestion-ai-accent);
+  color: var(--ck-color-suggestion-ai-accent);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.ck .ck-user[data-user-id="ck-ai-author"] .ck-user__avatar-icon {
+  width: var(--ck-suggestion-ai-author-icon-size);
+  height: var(--ck-suggestion-ai-author-icon-size);
+}
+
+.ck .ck-suggestion__ai-source-pill {
+  margin-top: var(--ck-spacing-small);
+  grid-column: 1 / -1;
+  justify-content: flex-end;
+  display: flex;
+}
+
 :root {
   --ck-color-suggestion-marker-insertion-border: #1eae3159;
   --ck-color-suggestion-marker-insertion-border-active: #126d1f80;

package/dist/index.d.ts

@@ -1,28 +1,29 @@
 /**
- * @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
- */
+* @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 collaboration-core
- */
-export { Permissions } from './permissions.js';
-export { Users, User, CollaborationUserColor, type CollaborationUserData } from './users.js';
-export { UserView } from './users/view/userview.js';
-export { AriaDescriptionView } from './suggestions/view/ariadescriptionview.js';
-export { LateFocusButtonView, LateFocusDropdownButtonView } from './suggestions/view/latefocusbuttonview.js';
-export { SuggestionsConversion } from './suggestions/suggestionsconversion.js';
-export { getDateTimeFormatter } from './utils/getdatetimeformatter.js';
-export { getMarkerDomElement, getAllMarkersDomElementsSorted } from './utils/getmarkerdomelement.js';
-export { trimHtml } from './utils/trim-html.js';
-export { ConfirmMixin, type ConfirmApi, type RemoveConfirmEvent } from './utils/confirmmixin.js';
-export { hashObject } from './utils/hashobject.js';
-export { sanitizeEditorConfig } from './utils/sanitizeeditorconfig.js';
-export { surroundingMarkersDetector } from './utils/surroundingmarkersdetector.js';
-export { setupThreadKeyboardNavigation, FOCUS_ANNOTATION_KEYSTROKE, type ThreadEscapeEvent, type ThreadArrowUpEvent, type ThreadArrowDownEvent } from './utils/setupthreadkeyboardnavigation.js';
-export { splitSuggestionMarkerName, fixElementSuggestionRange } from './utils/suggestionmarkerutils.js';
-export { DocumentCompare, DATA_ID_MODEL_ATTRIBUTE, DATA_ID_VIEW_ATTRIBUTE, type DocumentCompareOptions, DocumentDiff, type OperationData, type InsertOperationData, type RemoveOperationData, type SplitOperationData, type MergeOperationData, type RenameOperationData, type AttributeOperationData, type MarkerOperationData, type UnwrapOperationData, type WrapOperationData, type MarkedRemoveData, type ModelToken, type ModelElementToken, type ModelTextToken, type Path } from './documentcompare.js';
-export type { CollaborationOperation, InsertCollaborationOperation, SplitCollaborationOperation, MarkerCollaborationOperation, MoveCollaborationOperation, MergeCollaborationOperation, RootCollaborationOperation, RootAttributeCollaborationOperation } from './collaborationoperation.js';
-export type { CollaborationHistory } from './collaborationhistory.js';
-export type { LocaleConfig, RealTimeCollaborationConfig, CollaborationUsersConfig } from './config.js';
-import './suggestionstyles.js';
-import './augmentation.js';
+* @module collaboration-core
+*/
+export { Permissions } from "./permissions.js";
+export { Users, User, CollaborationUserColor, type CollaborationUserData } from "./users.js";
+export { UserView } from "./users/view/userview.js";
+export { PillView } from "./ui/pillview.js";
+export { AriaDescriptionView } from "./suggestions/view/ariadescriptionview.js";
+export { LateFocusButtonView, LateFocusDropdownButtonView } from "./suggestions/view/latefocusbuttonview.js";
+export { SuggestionsConversion } from "./suggestions/suggestionsconversion.js";
+export { getDateTimeFormatter } from "./utils/getdatetimeformatter.js";
+export { getMarkerDomElement, getAllMarkersDomElementsSorted } from "./utils/getmarkerdomelement.js";
+export { trimHtml } from "./utils/trim-html.js";
+export { ConfirmMixin, type ConfirmApi, type ConfirmMixinConstructor, type RemoveConfirmEvent } from "./utils/confirmmixin.js";
+export { hashObject } from "./utils/hashobject.js";
+export { sanitizeEditorConfig } from "./utils/sanitizeeditorconfig.js";
+export { surroundingMarkersDetector } from "./utils/surroundingmarkersdetector.js";
+export { setupThreadKeyboardNavigation, FOCUS_ANNOTATION_KEYSTROKE, type ThreadEscapeEvent, type ThreadArrowUpEvent, type ThreadArrowDownEvent } from "./utils/setupthreadkeyboardnavigation.js";
+export { splitSuggestionMarkerName, fixElementSuggestionRange } from "./utils/suggestionmarkerutils.js";
+export { DocumentCompare, DATA_ID_MODEL_ATTRIBUTE, DATA_ID_VIEW_ATTRIBUTE, type DocumentCompareOptions, DocumentDiff, type OperationData, type InsertOperationData, type RemoveOperationData, type SplitOperationData, type MergeOperationData, type RenameOperationData, type AttributeOperationData, type MarkerOperationData, type UnwrapOperationData, type WrapOperationData, type MarkedRemoveData, type ModelToken, type ModelElementToken, type ModelTextToken, type Path } from "./documentcompare.js";
+export type { CollaborationOperation, InsertCollaborationOperation, SplitCollaborationOperation, MarkerCollaborationOperation, MoveCollaborationOperation, MergeCollaborationOperation, RootCollaborationOperation, RootAttributeCollaborationOperation } from "./collaborationoperation.js";
+export type { CollaborationHistory } from "./collaborationhistory.js";
+export type { LocaleConfig, RealTimeCollaborationConfig, CollaborationUsersConfig } from "./config.js";
+import "./suggestionstyles.js";
+import "./augmentation.js";