@ckeditor/ckeditor5-ai 46.1.1 → 47.0.0-alpha.1

package/theme/aichat/aisuggestioncontainer.css

@@ -0,0 +1,203 @@
+/*
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
+ *
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rounded.css";
+
+:root {
+	--ck-ai-chat-suggestion-container-header-font-size: .9em;
+	--ck-ai-background-color-action-button-semi-transparent: hsla(263, 59%, 52%, 0.5);
+}
+
+/*
+ * Container for the suggestion where the content returned by the AI is displayed.
+ *
+ * It supports the regular output and "Show preview" mode.
+ *
+ * It works in the feed (sidebar) and in the dialog/balloon.
+ */
+.ck.ck-ai-suggestion__container {
+	@mixin ck-rounded-corners;
+
+	--ck-border-radius: 4px;
+
+	border: 1px solid var(--ck-color-base-border);
+	position: relative;
+
+	& .ck-ai-suggestion__header {
+		height: 3.23em; /* 42px */
+		border-bottom: 1px solid var(--ck-color-base-border);
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 var(--ck-spacing-large);
+
+		& > span {
+			font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
+			font-weight: bold;
+			color: var(--ck-ai-chat-color-icon);
+			flex-grow: 1;
+		}
+
+		& > .ck-icon {
+			width: 14px;
+			height: 14px;
+			margin-right: var(--ck-spacing-medium);
+			color: var(--ck-ai-chat-color-icon);
+		}
+
+		& > .ck-switchbutton {
+			--ck-switch-button-toggle-width: 2.307em;
+			--ck-switch-button-toggle-inner-size: 1em;
+			--ck-switch-button-translation: calc(var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2px );
+			--ck-color-switch-button-off-background: var(--ck-ai-chat-color-icon);
+
+			& .ck-button__label {
+				font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
+				margin-right: var(--ck-spacing-standard);
+			}
+
+			& .ck-button__toggle {
+				border-radius: var(--ck-switch-button-toggle-inner-size);
+
+				& .ck-button__toggle__inner {
+					border-radius: 100%;
+				}
+			}
+		}
+	}
+
+	& .ck-ai-suggestion__body {
+		display: flex;
+		flex-direction: column;
+
+		& .ck-ai-suggestion__body__content-parts {
+			display: flex;
+			flex-direction: column;
+		}
+
+		& .ck-ai-suggestion__body__content-part {
+			position: relative;
+			padding-bottom: var(--ck-spacing-large);
+
+			& .ck-ai-suggestion__body__content-part__title {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				color: var(--ck-ai-background-color-action-button);
+				height: 2.308em;
+
+				& > .ck-ai-suggestion__body__content-part__icon-title {
+					position: absolute;
+					left: calc(-1.8 * var(--ck-spacing-large));
+					background: var(--ck-color-base-background);
+					box-shadow: 0 0 5px 6px var(--ck-color-base-background);
+					clip-path: inset(-6px 0 -6px 0);
+					border-radius: 100%;
+				}
+
+				& > .ck-ai-suggestion__body__content-part__icon-accepted {
+					color: var(--ck-color-base-action);
+				}
+
+				& > .ck-ai-suggestion__body__content-part__icon-rejected {
+					color: var(--ck-color-base-error);
+				}
+
+				& > .ck-icon,
+				& > .ck-toolbar .ck-icon {
+					--ck-icon-size: 1.477em;
+				}
+
+				& .ck-toolbar {
+					border: 0;
+
+					& .ck-button {
+						margin: 0;
+						opacity: .6;
+					}
+				}
+			}
+
+			& .ck-ai-suggestion__body__content-part__content {
+				& :last-child {
+					padding-bottom: 0;
+					margin-bottom: var(--ck-spacing-medium);
+				}
+			}
+
+			&:hover .ck-ai-suggestion__body__content-part__title .ck-toolbar {
+				visibility: visible;
+				opacity: 1;
+			}
+
+			&:not(:last-child)::after {
+				content: '...';
+				width: 100%;
+				text-align: center;
+				display: block;
+				clear: both;
+			}
+		}
+
+		/* TODO: This is only a temporary implementation for preview demo purposes. Make it nice. */
+		& .ck-ai-suggestion__body__content-part_active:hover::before {
+			content: '';
+			position: absolute;
+			left: calc((-1 * var(--ck-spacing-large)) - 1px);
+			top: 5px;
+			height: 100%;
+			border-left: 2px solid hsl( 262, 51%, 80% );
+		}
+
+		& .ck-ai-suggestion__body__content-part_active:last-child::before {
+			height: calc(100% - 10px);
+		}
+
+		& .ck-ai-suggestion__body__content-part_active:last-child:first-child::before {
+			display: none;
+		}
+
+		& .ck-ai-suggestion__body__content-part_accepted,
+		& .ck-ai-suggestion__body__content-part_rejected {
+			& .ck-ai-suggestion__body__content-part__content {
+				opacity: 0.5;
+			}
+
+			& .ck-ai-suggestion__body__content-part__title
+			:not(.ck-ai-suggestion__body__content-part__icon-title):not(.ck-ai-suggestion__body__content-part__icon-title *) {
+				opacity: 0.5;
+			}
+
+			/* stylelint-disable no-descending-specificity */
+			& .ck-ai-suggestion__body__content-part__icon-title {
+				/* Icon can not be transparent because the border would be visible, it has to be controlled by the color. */
+				color: var(--ck-ai-background-color-action-button-semi-transparent);
+			}
+			/* stylelint-enable no-descending-specificity */
+
+			&::after {
+				opacity: 0.5;
+			}
+		}
+
+		/* The warning is displayed when some parts of the suggestion are empty. */
+		& .ck.ck-ai-chat__feed__item.ck-ai-chat-error_warning {
+			margin-left: 0;
+			margin-right: 0;
+			margin-bottom: var(--ck-spacing-large);
+		}
+	}
+
+	& .ck-ai-suggestion__body,
+	& .ck-ai-suggestion__changes {
+		padding: var(--ck-spacing-large);
+		padding-bottom: 0px;
+	}
+}

package/theme/aiquickactions/aiquickactions.css

@@ -0,0 +1,43 @@
+/*
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
+ *
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-ai-quick-actions-button-color: hsla(263, 59%, 52%, 1);
+	--ck-ai-quick-actions-button-background-color: hsla(265, 100%, 96%, 1);
+}
+
+.ck-ai-quick-actions {
+	width: 300px;
+
+	svg.ck-icon {
+		width: 20px;
+		height: 20px;
+	}
+}
+
+& .ck-ai-quick-actions-dropdown,
+& .ck-ai-quick-actions-group-panel {
+	--ck-color-list-button-hover-background: var(--ck-ai-quick-actions-button-background-color);
+	--ck-color-button-default-hover-background: var(--ck-ai-quick-actions-button-background-color);
+	--ck-color-button-on-background: var(--ck-ai-quick-actions-button-background-color);
+	--ck-color-button-on-hover-background: var(--ck-ai-quick-actions-button-background-color);
+
+	& .ck.ck-button:not(.ck-dropdown__button) {
+		border-color: transparent;
+		box-shadow: none;
+
+		&:focus {
+			background-color: var(--ck-ai-quick-actions-button-background-color);
+		}
+	}
+
+	& .ck.ck-button.ck-dropdown__button.ck-on {
+		color: var(--ck-ai-quick-actions-button-color);
+	}
+}

package/theme/aireviewmode/aireviewmode-check-list.css

@@ -0,0 +1,255 @@
+/*
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
+ *
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-ai-check-list-item-hover-border-color: hsla(262, 64%, 78%, 1);
+	--ck-ai-check-list-item-active-border-color: hsla(263, 59%, 52%, 1);
+	--ck-ai-check-list-item-title-color: var(--ck-color-text);
+	--ck-ai-check-list-item-description-color: hsla(0, 0%, 44%, 1);
+	--ck-ai-check-list-item-title-icon-color: hsla(0, 0%, 44%, 1);
+	--ck-ai-check-list-model-dropdown-width: 426px;
+	--ck-ai-check-list-model-dropdown-max-height: 340px;
+	--ck-ai-check-list-model-dropdown-arrow-drop-shadow: 0 -2px 0px var(--ck-color-shadow-drop);
+}
+
+.ck.ck-ai-review-mode {
+	& * {
+		font-family: var(--ck-ai-chat-font-family) !important;
+	}
+
+	& .ck-ai-review-mode__check-list {
+		position: relative;
+		height: 100%;
+		overflow: auto;
+
+		& > .ck-ai-review-mode__check-list-item {
+			padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
+			border-bottom: 1px solid var(--ck-color-base-border);
+			box-shadow: 3px 0px 0px 0px transparent inset;
+			opacity: 0;
+			visibility: hidden;
+
+			transition: box-shadow 0.3s ease-in-out;
+
+			@media (prefers-reduced-motion: reduce) {
+				transition-duration: 0s;
+			}
+
+			& .ck-ai-review-mode__check-list-item-description {
+				color: var(--ck-ai-check-list-item-description-color);
+			}
+
+			& .ck-ai-review-mode__check-list-item-title-text,
+			& .ck-ai-review-mode__check-list-item-description {
+				white-space: normal;
+				line-height: 1.3;
+			}
+
+			&:hover {
+				cursor: pointer;
+
+				& .ck-ai-review-mode__check-list-item-title-text,
+				& .ck-ai-review-mode__check-list-item-description {
+					cursor: pointer;
+				}
+			}
+
+			&.ck-ai-review-mode__check-list-item_rendered {
+				opacity: 1;
+				visibility: visible;
+
+				transition: box-shadow 0.3s ease-in-out,
+					opacity 0.1s calc(0.05s * var(--ck-ai-check-list-item-index)),
+					visibility 0.1s calc(0.05s * var(--ck-ai-check-list-item-index));
+
+				@media (prefers-reduced-motion: reduce) {
+					opacity: 1;
+					visibility: visible;
+				}
+			}
+
+			&.ck-ai-review-mode__check-list-item_selected {
+				box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-active-border-color) inset;
+			}
+
+			& .ck-ai-review-mode__check-list-item-title {
+				display: flex;
+				justify-content: space-between;
+				margin-block-end: var(--ck-spacing-tiny);
+
+				& > .ck-ai-review-mode__check-list-item-title-text {
+					flex-grow: 1;
+					color: var(--ck-ai-check-list-item-title-color);
+					font-weight: 700;
+				}
+
+				& > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
+					--ck-icon-size: 20px;
+
+					flex-shrink: 0;
+					margin-inline-start: var(--ck-spacing-small);
+					color: var(--ck-ai-check-list-item-title-icon-color);
+
+					opacity: 0;
+					visibility: hidden;
+
+					transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+
+					@media (prefers-reduced-motion: reduce) {
+						transition-duration: 0s;
+					}
+				}
+			}
+
+			&:not(.ck-ai-review-mode__check-list-item_selected):hover {
+				box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-hover-border-color) inset;
+
+				& .ck-ai-review-mode__check-list-item-title > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
+					opacity: 1;
+					visibility: visible;
+				}
+			}
+
+			/* Parameterized form view. */
+			& .ck-ai-review-mode__check-list-item-parameterized {
+				& .ck.ck-form__row {
+					padding-left: 0;
+					padding-right: 0;
+
+					& > .ck.ck-ai-review-mode__check-list-item-parameterized-form-element {
+						flex: 1;
+
+						& > *:first-child {
+							width: 100%;
+						}
+
+						&.ck-ai-review-mode__check-list-item-parameterized-form-element_dropdown {
+							& .ck-button.ck-dropdown__button {
+								border-color: hsl(216, 5%, 81%);
+
+								& > .ck-button__label {
+									width: 100%;
+								}
+							}
+						}
+					}
+
+					& .ck.ck-button {
+						flex-shrink: 0;
+					}
+				}
+			}
+
+			& .ck-ai-review-mode__check-list-item-custom-actions {
+				& .ck.ck-form__row {
+					& .ck.ck-input.ck-textarea.ck-review-mode__prompt-input {
+						width: 100%;
+					}
+
+					& .ck-ai-review-mode__check-list-item-custom-actions-footer {
+						display: flex;
+						width: 100%;
+						align-items: center;
+						justify-content: space-between;
+
+						& .ck-ai-review-mode__check-list-item-parameterized-custom-actions-buttons {
+							display: flex;
+							gap: var(--ck-spacing-small);
+						}
+					}
+				}
+			}
+
+			& .ck-ai-review-mode__check-list-item-model-dropdown {
+
+				& > .ck.ck-button.ck-dropdown__button {
+					font-size: .9em;
+
+					&.ck-on,
+					&:active {
+						background-color: var(--ck-ai-button-secondary-active-background-color);
+						color: var(--ck-ai-background-color-action-button);
+					}
+
+					& > .ck.ck-button__label {
+						width: auto;
+					}
+				}
+
+				& .ck-dropdown__panel {
+					width: var(--ck-ai-check-list-model-dropdown-width);
+					padding-top: var(--ck-spacing-standard);
+					top: calc(100% + var(--ck-balloon-arrow-height));
+					bottom: auto;
+
+					&.ck-dropdown__panel_se {
+						&::before,
+						&::after {
+							content: '';
+							position: absolute;
+							left: calc(2 * var(--ck-balloon-arrow-half-width));
+							top: calc(-1 * var(--ck-balloon-arrow-height) + 2px);
+							width: 0;
+							height: 0;
+							border-style: solid;
+							border-width: 0 var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-half-width);
+							border-color: transparent transparent var(--ck-color-panel-background) transparent;
+						}
+
+						&::before {
+							z-index: var(--ck-balloon-panel-arrow-z-index);
+							margin-bottom: calc(-1 * var(--ck-balloon-border-width));
+							filter: drop-shadow(var(--ck-ai-check-list-model-dropdown-arrow-drop-shadow));
+						}
+
+						&::after {
+							z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
+							margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width));
+						}
+
+						& > .ck-list {
+							max-height: var(--ck-ai-check-list-model-dropdown-max-height);
+							overflow-y: scroll;
+						}
+					}
+
+					& > .ck.ck-list {
+						gap: var(--ck-spacing-standard);
+
+						& > .ck.ck-list__item {
+							& > .ck.ck-button.ck-list-item-button {
+								align-items: baseline;
+
+								& .ck-list-item-button__check-holder {
+									flex-shrink: 0;
+								}
+
+								& .ck-ai-review-mode__check-list-item-model-dropdown-name {
+									line-height: 1.3;
+									font-weight: 500;
+								}
+
+								& .ck-ai-review-mode__check-list-item-model-dropdown-description {
+									padding-top: var(--ck-spacing-tiny);
+									line-height: 1.3;
+
+									& > span {
+										color: var(--ck-ai-chat-color-icon);
+										line-height: 1;
+										white-space: normal;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/theme/aireviewmode/aireviewmode-check-run.css

@@ -0,0 +1,202 @@
+/*
+ * What you're currently looking at is the source code of a legally protected, proprietary software.
+ * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
+ * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
+ *
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+.ck.ck-ai-review-mode {
+	& .ck-ai-review-mode__check-run {
+		position: relative;
+		height: 100%;
+		overflow: auto;
+		display: flex;
+		flex-direction: column;
+
+		&:has( .ck-ai-review-mode__check-run-skeleton-container:not(.ck-hidden) ) {
+			overflow: hidden;
+		}
+
+		& .ck-ai-review-mode__check-run-result {
+			opacity: 0;
+			visibility: hidden;
+			box-shadow: 3px 0px 0px 0px transparent inset;
+			padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
+
+			animation: ck-ai-check-run-list-item-show 0.25s 0.1s forwards;
+
+			transition: box-shadow 0.3s ease-in-out;
+			transition-behavior: allow-discrete;
+
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+				opacity: 1;
+				visibility: visible;
+				transition-duration: 0s;
+			}
+
+			&:not(:first-child) {
+				border-top: 1px solid var(--ck-color-base-border);
+			}
+
+			&:last-child {
+				border-bottom: 1px solid var(--ck-color-base-border);
+			}
+
+			& .ck-suggestion-marker {
+				white-space: break-spaces;
+			}
+
+			&:hover {
+				box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-hover-border-color) inset;
+			}
+
+			&.ck-ai-review-mode__check-run-result_active {
+				box-shadow: 3px 0px 0px 0px var(--ck-ai-check-list-item-active-border-color) inset;
+			}
+
+			& > .ck-ai-review-mode__check-run-result-response {
+				overflow: hidden;
+				
+				& > * {
+					white-space: normal;
+				}
+
+				img {
+					max-width: 125px;
+					max-height: 125px;
+				}
+			}
+
+			& > .ck-ai-review-mode__check-run-result-footer {
+				margin-top: var(--ck-spacing-standard);
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				gap: var(--ck-spacing-standard);
+
+				& > .ck-ai-review-mode__check-run-result-action-buttons {
+					display: flex;
+					gap: var(--ck-spacing-standard);
+					flex-grow: 1;
+				}
+
+				& .ck.ck-button.ck-ai-review-mode__check-run-result-info-button {
+					--ck-icon-size: 16px;
+					--ck-ui-component-min-height: 1.75em;
+
+					max-height: var(--ck-ui-component-min-height);
+					margin-left: auto;
+				}
+			}
+
+			&.ck-ai-review-mode__check-run-result_removing {
+				animation: ck-ai-check-run-item-remove 0.2s forwards;
+			}
+		}
+
+		& .ck-ai-review-mode__check-run-results-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			gap: var(--ck-spacing-standard);
+
+			padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
+			border-bottom: 1px solid var(--ck-color-base-border);
+
+			& .ck-ai-review-mode__check-run-results-header-title {
+				align-self: center;
+				font-weight: bold;
+				white-space: nowrap;
+				overflow: hidden;
+				max-width: 100%;
+				text-overflow: ellipsis;
+			}
+
+			& .ck-ai-review-mode__check-run-results-header-buttons {
+				display: flex;
+				gap: var(--ck-spacing-standard);
+				flex-shrink: 0;
+				align-items: center;
+				/* To prevent jumping when visibility of buttons is changing.
+				TODO: probably it will be replaced with different loader UI. */
+				min-height: 30px;
+			}
+		}
+
+		& .ck-ai-review-mode__check-run-results-wrapper {
+			position: relative;
+			height: 100%;
+			overflow: auto;
+
+			&:has( .ck-ai-review-mode__check-run-skeleton-container:not(.ck-hidden) ) {
+				overflow: hidden;
+			}
+		}
+
+		& .ck-ai-review-mode__check-run-skeleton-container {
+			position: absolute;
+			width: 100%;
+			top: 0;
+			height: 100%;
+
+			& .ck-ai-review-mode__check-run-skeleton-item {
+				position: static;
+				height: auto;
+				padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
+				border-bottom: 1px solid var(--ck-color-base-border);
+
+				&.ck-ai-skeleton {
+					--ck-ai-skeleton-gap: var(--ck-spacing-small);
+				}
+			}
+		}
+
+		& .ck-ai-review-mode__check-run-error-container {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+			gap: var(--ck-spacing-medium-small);
+			padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-standard) var(--ck-spacing-large);
+
+			&.ck-ai-review-mode__check-run-error-container_border-bottom {
+				border-bottom: 1px solid var(--ck-color-base-border);
+			}
+
+			& .ck-ai-review-mode__check-run-error-retry-button {
+				font-size: 11.7px;
+				min-height: unset;
+				border: 1px solid var(--ck-ai-border-color-button);
+				border-radius: var(--ck-border-radius);
+				gap: var(--ck-spacing-small);
+				color: var(--ck-ai-chat-color-text);
+			}
+		}
+	}
+}
+
+@keyframes ck-ai-check-run-list-item-show {
+	0% {
+		opacity: 0;
+		visibility: hidden;
+	}
+	100% {
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
+@keyframes ck-ai-check-run-item-remove {
+	0% {
+		opacity: 1;
+		visibility: visible;
+		display: block;
+	}
+	100% {
+		opacity: 0;
+		visibility: hidden;
+		display: none;
+	}
+}