@ckeditor/ckeditor5-ai 47.6.1 → 48.0.0-alpha.0

package/theme/aichat/aichathistory.css

@@ -1,264 +0,0 @@
-/*
- * 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-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-:root {
-	--ai-active-icon-size: 17px;
-
-	--ck-ai-loader-icon-color: hsla(0, 0%, 85%, 1);
-	--ck-ai-loader-icon-dot-color: hsla(0, 0%, 65%, 1);
-	--ck-ai-chat-feed-item-spacing: var(--ck-spacing-extra-large);
-}
-
-.ck .ck-ai-chat-history {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	.ck-ai-chat-history__content,
-	.ck-search {
-		display: flex;
-		flex-direction: column;
-		flex: 1 1 auto;
-		min-height: 0;
-		gap: var(--ck-spacing-medium-small);
-		position: relative;
-	}
-
-	.ck-ai-chat-history__content {
-		.ck-ai-notification_error {
-			margin: var(--ck-spacing-extra-large) var(--ck-spacing-large) var(--ck-spacing-medium) var(--ck-spacing-large);
-		}
-	}
-
-	.ck-search > .ck-labeled-field-view {
-		margin-top: var(--ck-spacing-medium);
-		padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-tiny);
-	}
-
-	.ck-search__results {
-		min-height: 0;
-		flex: 1 1 auto;
-		overflow-y: auto;
-		overflow-x: hidden;
-	}
-
-	.ck-dropdown .ck-dropdown__arrow {
-		display: none;
-	}
-
-	.ck-ai-chat-history__sections {
-		gap: var(--ck-spacing-medium-small);
-	}
-
-	.ck.ck-dropdown .ck-button.ck-dropdown__button:not(.ck-button_with-text) {
-		padding: 0;
-	}
-
-	.ck-ai-chat-history__section-title {
-		color: var(--ck-ai-chat-color-icon);
-		font-size: 0.85em;
-		font-weight: 700;
-		line-height: 1.85em;
-		padding: 0.48em 0.9em 0 0.9em;
-	}
-
-	.ck-confirm-view .ck-confirm-view-inner, .ck-ai-chat-history__item {
-		padding: var(--ck-spacing-tiny)
-			var(--ck-spacing-extra-large)
-			var(--ck-spacing-tiny)
-			var(--ck-spacing-large);
-	}
-
-	.ck-ai-chat-history__item {
-		display: flex;
-		position: relative;
-		transition: transform 300ms ease;
-
-		@media (prefers-reduced-motion: reduce) {
-			transition: none;
-		}
-
-		&:hover {
-			background-color: var(--ck-ai-chat-button-active-background-color);
-		}
-	}
-
-	.ck-ai-chat-history__item-title {
-		display: inline-block;
-		width: 100%;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.ck-ai-chat-history__item--active {
-		& .ck-ai-chat-history__item-title {
-			font-weight: 700;
-		}
-	}
-
-	.ck-ai-chat-history__item-row {
-		--ck-icon-font-size: .666em;
-		--ck-ui-component-min-height: 1.7em;
-		--ck-ui-component-min-width: 1.7em;
-
-		width: 100%;
-		min-width: 0;
-		margin-left: 0.3em;
-	}
-
-	.ck-ai-chat-history__item-row, .ck-ai-chat-history__item-actions {
-		display: flex;
-		align-items: center;
-		gap: 0.6em;
-	}
-
-	.ck-ai-chat-history__item-actions {
-		height: 100%;
-
-		& > .ck-button,
-		& > .ck-dropdown .ck-dropdown__button {
-			opacity: .7;
-
-			&:hover {
-				opacity: 1;
-				background: none;
-			}
-
-			&.ck-on {
-				background-color: var(--ck-ai-chat-button-active-background-color);
-				color: var(--ck-ai-chat-button-hover-color);
-
-				svg {
-					color: var(--ck-ai-chat-button-active-color);
-				}
-			}
-		}
-
-		& .ck-dropdown {
-			& .ck-dropdown__panel {
-				& .ck-list__item {
-					& .ck-button {
-						&:hover, &:active {
-							background-color: var(--ck-ai-button-secondary-hover-background-color);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.ck-ai-chat-history__item--edit .ck-input,
-	.ck-ai-chat-history__item--edit .ck-input_focused {
-		width: 100%;
-		padding: 0;
-		border: none;
-		box-shadow: none;
-		background: transparent;
-	}
-
-	.ck-ai-chat-history__item--edit {
-		background: var(--ck-ai-chat-button-active-background-color);
-
-		& .ck-ai-chat-history__item-edit .ck-input {
-			background: var(--ck-ai-chat-button-active-background-color);
-		}
-
-		& .ck-ai-chat-history__item-actions {
-			align-items: center;
-		}
-	}
-
-	.ck-ai-chat-history__item-content {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: flex-start;
-		flex: 1 0 0;
-		overflow: hidden;
-	}
-
-	.ck-ai-chat-history__item-main-content {
-		width: 100%;
-	}
-
-	.ck-ai-chat-history__item-main-content, .ck-ai-chat-history__item-check-container {
-		display: flex;
-		align-items: center;
-		height: 2em;
-	}
-
-	.ck-ai-chat-history__item-check-container {
-		--ck-icon-font-size: .5em;
-
-		min-width: var(--ai-active-icon-size);
-	}
-
-	.ck-ai-chat-history__item-date {
-		line-height: 1.385em;
-		color: var(--ck-ai-chat-color-icon);
-	}
-
-	.ck-ai-chat-history__empty {
-		padding: var(--ck-spacing-tiny) var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-large);
-
-		.ck-ai-chat-history__empty-message {
-			text-wrap: auto;
-			line-height: 1.85em;
-			margin: var(--ck-spacing-large) 0;
-		}
-
-		.ck-ai-chat__start-conversation {
-			/* TODO: Extract this to a separate class to avoid duplication (same component and styling in Chat header) */
-			/* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
-			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);
-
-			&:hover {
-				background-color: var(--ck-ai-chat-button-active-background-color);
-			}
-
-			& > .ck-button__label {
-				/* Custom value unlike the rest of editor UI. */
-				line-height: 1.4em;
-			}
-
-			& > .ck-button__icon {
-				/* Custom value unlike the rest of editor UI (defaults to 14px). See how it's used in the icon.css */
-				--ck-icon-font-size: .632em;
-
-				margin-inline-end: 0;
-				color: var(--ck-ai-chat-color-text);
-			}
-		}
-	}
-
-	.ck-confirm-view {
-		--ck-icon-font-size: .666em;
-		--ck-ui-component-min-height: 1.7em;
-		--ck-ui-component-min-width: 1.7em;
-
-		.ck-confirm-view-inner {
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-			gap: 0.6em;
-			flex: 1 0 0;
-			margin-left: var(--ai-active-icon-size);
-		}
-
-		.ck-confirm-view-actions {
-			display: flex;
-			gap: 0.6em;
-		}
-	}
-}

package/theme/aichat/aiminitoolbar.css

@@ -1,79 +0,0 @@
-/*
- * 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-2026, 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-mini-toolbar {
-	& .ck-ai-interaction-counter {
-		color: var(--ck-ai-chat-color-icon);
-		letter-spacing: 2.6px;
-		font-family: var(--ck-ai-balloon-font-family);
-	}
-
-	& .ck.ck-button {
-		font-size: .9em;
-		font-family: var(--ck-ai-chat-font-family);
-		color: var(--ck-ai-chat-color-icon);
-
-		&.ck-button_with-text {
-			min-height: 2.1em;
-			box-sizing: border-box;
-			flex-direction: row-reverse;
-			padding-right: 0.3em;
-			padding-left: 0.3em;
-
-			span {
-				line-height: 1.4em;
-			}
-
-			svg {
-				margin-left: var(--ck-spacing-medium);
-				margin-right: 0;
-				--ck-icon-size: 16px
-			}
-		}
-
-		&.ck-ai-mini-toolbar-copy-button {
-			& .ck-ai-mini-toolbar-copy-button__check-mark {
-				position: absolute;
-				top: 50%;
-				right: 50%;
-				transform: translate(50%, -50%);
-				color: var(--ck-color-base-action);
-				display: none;
-			}
-
-			&.ck-ai-mini-toolbar-copy-button_copied {
-				& .ck-button__icon {
-					display: none;
-				}
-
-				& .ck-ai-mini-toolbar-copy-button__check-mark {
-					display: block;
-					animation-duration: 1s;
-					animation-name: ck-ai-mini-toolbar-copy-animation;
-					animation-iteration-count: 1;
-					animation-timing-function: ease-out;
-				}
-			}
-		}
-	}
-}
-
-@keyframes ck-ai-mini-toolbar-copy-animation {
-	0% {
-		clip-path: inset(0 100% 0 0);
-	}
-
-	50% {
-		clip-path: inset(0 0 0 0);
-	}
-
-	100% {
-		clip-path: inset(0 0 0 0);
-	}
-}

package/theme/aichat/aisuggestioncontainer.css

@@ -1,172 +0,0 @@
-/*
- * 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-2026, 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-color-ai-chat-icon-outdated: var(--ck-ai-chat-suggestion-icon-default-color);
-	--ck-color-ai-suggestion-header-shadow: hsla(0, 0%, 0%, 0.1);
-	--ck-color-ai-suggestion-part-title: hsla(0, 0%, 44%, 1);
-	--ck-color-ai-suggestion-part-active-border: hsla(262, 64%, 78%, 1);
-	--ck-color-ai-suggestion-part-active-shadow: hsla(262, 64%, 78%, 0.15);
-}
-
-/*
- * 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;
-
-	position: relative;
-
-	& .ck-ai-suggestion__header {
-		@mixin ck-rounded-corners {
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-
-		height: 3.23em; /* 42px */
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0 var(--ck-spacing-large);
-		box-shadow: 0 0 3px 1px var(--ck-color-ai-suggestion-header-shadow);
-
-		/* Keep the shadow on top of the body part */
-		position: relative;
-		z-index: 1;
-
-		& > 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 {
-		gap: var(--ck-spacing-large);
-
-		@mixin ck-rounded-corners {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-		}
-
-		display: flex;
-		flex-direction: column;
-		background: var(--ck-ai-chat-feed-item-color-background);
-
-		& .ck-ai-suggestion__body__content-parts {
-			display: flex;
-			flex-direction: column;
-			gap: var(--ck-spacing-large);
-
-			&:empty {
-				display: none;
-			}
-		}
-
-		& .ck-ai-suggestion__body__content-part {
-			@mixin ck-rounded-corners;
-
-			position: relative;
-			padding: var(--ck-spacing-large);
-			padding-top: 0;
-			background: var(--ck-color-base-background);
-
-			& .ck-ai-suggestion__body__content-part__title {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				color: var(--ck-color-ai-suggestion-part-title);
-				height: 2.93em;
-			}
-		}
-
-		& .ck-ai-suggestion__body__content-part_active {
-			box-shadow: 0 1px 3px 1.5px var(--ck-color-ai-suggestion-part-active-shadow);
-			outline: 1px solid var(--ck-color-ai-suggestion-part-active-border);
-
-			& .ck-ai-suggestion__body__content-part__title,
-			& .ck-ai-suggestion__body__content-part__title .ck-toolbar .ck-icon {
-				color: var(--ck-ai-background-color-action-button);
-			}
-		}
-
-		& .ck-ai-suggestion__body__content-part_accepted,
-		& .ck-ai-suggestion__body__content-part_rejected,
-		& .ck-ai-suggestion__body__content-part_outdated {
-			& .ck-ai-suggestion-streamable-content,
-			& .ck-ai-suggestion__body__content-part__title {
-				opacity: 0.5;
-			}
-		}
-
-		& .ck-ai-suggestion__body__content-part:hover {
-			box-shadow: 0 1px 3px 1.5px var(--ck-color-ai-suggestion-header-shadow);
-
-			& .ck-ai-suggestion__body__content-part__title {
-				color: var(--ck-ai-background-color-action-button);
-			}
-		}
-
-		& .ck-ai-suggestion__body__content-part_pending:hover {
-			& .ck-toolbar .ck-icon {
-				color: var(--ck-ai-background-color-action-button);
-			}
-		}
-
-		/* The warning is displayed when some parts of the suggestion are empty. */
-		& .ck.ck-ai-chat__feed__item.ck-ai-notification_warning {
-			margin-left: 0;
-			margin-right: 0;
-			width: 100%;
-		}
-	}
-
-	& .ck-ai-suggestion__body,
-	& .ck-ai-suggestion__changes {
-		padding: var(--ck-spacing-standard);
-	}
-}

package/theme/aichatshortcuts/aichatshortcuts.css

@@ -1,84 +0,0 @@
-/*
- * 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-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-:root {
-	--ck-color-ai-chat-shortcut-border-color: hsla(261, 100%, 93%, 1);
-	--ck-color-ai-chat-shortcut-icon-color: hsl(263, 59%, 52%);
-	--ck-color-ai-chat-shortcut-icon-color-hover: hsla(262, 100%, 96%, 1);
-	--ck-color-ai-chat-shortcuts-prompt-input-animation-background: hsl(266, 100%, 64%, .05);
-
-	--ck-ai-chat-shortcut-border-radius: .6em;
-	--ck-ai-chat-shortcut-padding: var(--ck-spacing-medium) calc(2 * var(--ck-spacing-standard));
-	--ck-ai-chat-shortcut-min-height: 3.07em;
-	--ck-ai-chat-shortcut-icon-size: 1.385em;
-
-	--ck-ai-chat-shortcuts-prompt-input-animation: ck-ai-chat-shortcuts-prompt-input-glow .8s ease-in-out;
-	--ck-ai-chat-shortcuts-prompt-input-animation-box-shadow: 0 0 0 4px hsla(263, 59.20%, 52.00%, 0.34);
-	--ck-ai-chat-shortcuts-prompt-input-animation-border: 1px solid hsla(263, 59.20%, 52.00%, 1);
-}
-
-/* A list of shortcut buttons. */
-.ck.ck-ai-chat-shortcuts {
-	& > .ck-list {
-		gap: var(--ck-spacing-medium);
-		padding: 0;
-
-		/* A single shortcut button on the shortcuts list. */
-		& .ck.ck-button.ck-ai-chat-shortcut {
-			border-radius: var(--ck-ai-chat-shortcut-border-radius);
-			border-color: var(--ck-color-ai-chat-shortcut-border-color);
-			padding: var(--ck-ai-chat-shortcut-padding);
-			min-height: var(--ck-ai-chat-shortcut-min-height);
-			font-weight: 500;
-
-			& .ck-icon {
-				--ck-icon-size: var(--ck-ai-chat-shortcut-icon-size);
-				--ck-icon-font-size: 1em;
-
-				color: var(--ck-color-ai-chat-shortcut-icon-color);
-				margin-right: var(--ck-spacing-standard);
-				flex: 0 0 auto;
-			}
-
-			&:hover {
-				background-color: var(--ck-color-ai-chat-shortcut-icon-color-hover);
-			}
-		}
-	}
-}
-
-/*
- * By default, the messages in the AI Chat are listed at the top of the Chat feed space.
- * This moves the welcome message and shortcuts to the bottom of the feed but does not affect the scrolling behavior.
- */
-.ck.ck-ai-chat__feed .ck.ck-ai-chat__feed__items {
-	margin-top: auto;
-}
-
-/**
- * When the prompt input gets highlighted from the shortcuts, animate the border and box-shadow
- * using AI tint to make it more visible.
- */
-.ck.ck-ai-chat__prompt-input.ck-search.ck-ai-chat__prompt-input_highlighted .ck.ck-input.ck-textarea {
-	--ck-color-ai-chat-prompt-input-animation-background: var(--ck-color-ai-chat-shortcuts-prompt-input-animation-background);
-
-	animation: var(--ck-ai-chat-prompt-input-animation), var(--ck-ai-chat-shortcuts-prompt-input-animation);
-}
-
-@keyframes ck-ai-chat-shortcuts-prompt-input-glow {
-	0% {
-		box-shadow: var(--ck-ai-chat-shortcuts-prompt-input-animation-box-shadow);
-		border: var(--ck-ai-chat-shortcuts-prompt-input-animation-border);
-	}
-
-	100% {
-		box-shadow: var(--ck-focus-outer-shadow);
-		border: var(--ck-focus-ring);
-	}
-}

package/theme/aieditorintegration/aitogglebutton.css

@@ -1,17 +0,0 @@
-/*
- * 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-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck.ck-button.ck-ai-toggle-button {
-
-	--ck-color-button-on-background: 							hsl(262,100%,96%);
-	--ck-color-button-on-hover-background: 						hsl(261, 100%, 93%);
-	--ck-color-button-on-active-background:						hsl(261, 100%, 93%);
-	--ck-color-button-on-disabled-background: 					hsl(262,100%,96%);
-	--ck-color-button-on-color:									hsl(263,59%,52%);
-}