@ckeditor/ckeditor5-ai 47.0.0-alpha.6 → 47.0.0-alpha.8

package/theme/aichat/aichathistory.css

@@ -201,15 +201,32 @@
 			margin: var(--ck-spacing-large) 0;
 		}
 
-		.ck-ai-chat-history__open-chat-button {
-			font-size: 0.9em;
-			border: none;
-			padding: 0 var(--ck-spacing-standard);
-			min-height: 22px;
-			height: 22px;
-
-			background-color: var(--ck-ai-background-color-action-button);
-			color: var(--ck-ai-font-color-action-button);
+		.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);
+			}
 		}
 	}
 

package/theme/aichat/aiminitoolbar.css

@@ -25,6 +25,14 @@
 	bottom: 0;
 	transform: translateY(50%);
 
+
+
+	& .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);

package/theme/aichat/aisuggestioncontainer.css

@@ -130,6 +130,12 @@
 					padding-bottom: 0;
 					margin-bottom: var(--ck-spacing-medium);
 				}
+
+				&.ck.ck-content:not(:focus) {
+					/* Reset default padding and border of `ck-content` class. */
+					padding: 0;
+					border: 0;
+				}
 			}
 
 			&:hover .ck-ai-suggestion__body__content-part__title .ck-toolbar {

package/theme/aieditorintegration/aitogglebutton.css

@@ -0,0 +1,23 @@
+/*
+ * 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-button.ck-ai-toggle-button {
+	--ck-color-button-default-hover-background: 				hsl(262.1,100%,96.3%);
+	--ck-color-button-default-active-background:				hsl(262.1,100%,96.3%);
+
+	--ck-color-button-on-background: 							hsl(262.1,100%,96.3%);
+	--ck-color-button-on-hover-background: 						hsl(262.1,100%,96.3%);
+	--ck-color-button-on-active-background:						hsl(262.1,100%,96.3%);
+	--ck-color-button-on-disabled-background: 					hsl(262.1,100%,96.3%);
+	--ck-color-button-on-color:									hsl(263.2,59.2%,52%);
+
+	&:hover {
+		color: var(--ck-color-button-on-color);
+	}
+}

package/theme/aiquickactions/aiquickactions.css

@@ -31,13 +31,32 @@
 	& .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);
 	}
 }
+
+.ck-toolbar__items {
+	&>.ck.ck-button.ck-ai-quick-actions-button,  &>.ck-ai-quick-actions-dropdown > .ck.ck-button {
+		--ck-color-button-default-hover-background: 				hsl(262.1,100%,96.3%);
+		--ck-color-button-default-active-background:				hsl(262.1,100%,96.3%);
+	
+		--ck-color-button-on-background: 							hsl(262.1,100%,96.3%);
+		--ck-color-button-on-hover-background: 						hsl(262.1,100%,96.3%);
+		--ck-color-button-on-active-background:						hsl(262.1,100%,96.3%);
+		--ck-color-button-on-disabled-background: 					hsl(262.1,100%,96.3%);
+		--ck-color-button-on-color:									hsl(263.2,59.2%,52%);
+	
+		&:hover {
+			color: var(--ck-color-button-on-color);
+		}
+	}
+}
+
+.ck-ai-quick-actions-dropdown  .ck.ck-button:not(.ck-dropdown__button):focus,
+.ck-ai-quick-actions-group-panel .ck.ck-button:not(.ck-dropdown__button):focus {
+	background-color: var(--ck-ai-quick-actions-button-background-color);
+}
+	

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

@@ -11,9 +11,10 @@
 	& > .ck-ai-review-mode__check-run-result-response {
 		overflow: hidden;
 
-		&.ck.ck-content {
-			/* Reset default padding of `ck-content`. */
+		&.ck.ck-content:not(:focus) {
+			/* Reset default padding and border of `ck-content` class. */
 			padding: 0;
+			border: 0;
 		}
 
 		& > * {

package/theme/aireviewmode/aireviewmode.css

@@ -8,6 +8,7 @@
  */
 
 @import '../common/aiheader.css';
+@import '../common/aitrackchanges.css';
 
 .ck {
 	--ck-color-ai-review-mode-suggestion: hsla(263, 59%, 52%, 0.5);
@@ -70,4 +71,26 @@
 			border: none;
 		}
 	}
+
+	&.ck-ai-review-mode-highlights,
+	&.ck-ai-review-mode-diff {
+
+		.ck-suggestion-marker-insertion,
+		.ck-suggestion-marker-formatInline,
+		.ck-suggestion-marker-deletion {
+			border-top: 3px solid var(--ck-ai-suggestion-inactive-color-border);
+			border-bottom: 3px solid var(--ck-ai-suggestion-inactive-color-border);
+			background: var(--ck-ai-suggestion-inactive-color-background);
+		}
+
+		.ck-suggestion-marker-formatBlock {
+			box-shadow: -7px 0 0 0 var(--ck-color-base-background), -10px 0 0 0 var(--ck-ai-suggestion-inactive-color-background);
+		}
+
+		.ck-suggestion-marker-deletion {
+			text-decoration: line-through;
+			text-decoration-thickness: 3px;
+			text-decoration-color: var(--ck-ai-suggestion-inactive-color-border);
+		}
+	}
 }

package/theme/aitabs/aitabsview.css

@@ -31,6 +31,11 @@
 		&>* {
 			flex-grow: 1;
 		}
+
+		&.ck-tab-panel_disabled {
+			pointer-events: none;
+			opacity: 0.5;
+		}
 	}
 
 	&.ck-ai-tabs__overlay {
@@ -61,4 +66,4 @@
 			border-right: 0;
 		}
 	}
-}
+}

package/theme/common/aibutton.css

@@ -46,7 +46,7 @@
 	&.ck-ai-button-primary {
 		color: var(--ck-ai-button-primary-color);
 		background-color: var(--ck-ai-button-primary-background-color);
-		border: none;
+		border: 1px solid transparent;
 
 		&:hover {
 			background-color: var(--ck-ai-button-primary-hover-background-color);
@@ -56,7 +56,6 @@
 		&.ck-disabled {
 			color: var(--ck-ai-button-primary-disabled-color);
 			background-color: var(--ck-ai-button-primary-disabled-background-color);
-			cursor: not-allowed;
 
 			& > .ck.ck-button__label,
 			& > .ck-button__icon {
@@ -84,7 +83,6 @@
 			color: var(--ck-ai-button-secondary-disabled-color);
 			background-color: var(--ck-ai-button-secondary-disabled-background-color);
 			border: 1px solid var(--ck-ai-button-secondary-disabled-border-color);
-			cursor: not-allowed;
 
 			& > .ck.ck-button__label,
 			& > .ck-button__icon {
@@ -105,7 +103,6 @@
 		&:disabled,
 		&.ck-disabled {
 			color: var(--ck-ai-button-tertiary-disabled-text-color);
-			cursor: not-allowed;
 
 			& > .ck.ck-button__label,
 			& > .ck-button__icon {
@@ -134,7 +131,6 @@
 		&.ck-disabled {
 			color: var(--ck-ai-button-tertiary-filled-disabled-color);
 			background-color: var(--ck-ai-button-tertiary-filled-disabled-background-color);
-			cursor: not-allowed;
 
 			& > .ck.ck-button__label,
 			& > .ck-button__icon {

package/theme/common/aiheader.css

@@ -28,6 +28,7 @@
 	}
 
 	& > .ck.ck-button.ck-ai-chat__start-conversation {
+		/* TODO: Extract this to a separate class to avoid duplication (same component and styling in Chat history - empty viewr) */
 		/* Custom value unlike the rest of editor UI (derived from --ck-font-size-base, defaults to 13px). */
 		font-size: 11.7px;
 		min-height: unset;

package/theme/common/aitrackchanges.css

@@ -0,0 +1,13 @@
+/*
+ * 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-suggestion-inactive-color-background: hsla(128, 6%, 93%, 0.35);
+	--ck-ai-suggestion-inactive-color-border: hsla(128, 1%, 73%, 0.35);
+}

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

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

package/src/aiquickactions/utils/common-translations.js

@@ -1,23 +0,0 @@
-/*
- *             Copyright (c) 2003-2025, 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.              |
- *          |                                                                                 |
- *          |                                                                                 |
- *          +---------------------------------------------------------------------------------+
- *
- *
- *
- *
- */
-export function getTranslation(_0x104f67,_0x232d74,_0x5ef8ad){const t=_0x104f67['t'];switch(_0x232d74){case'AI_QUICK_ACTIONS_HEADING':return t({'id':'AI_QUICK_ACTIONS_HEADING','string':'AI\x20Quick\x20Actions'});case'AI_QUICK_ACTIONS_ASK_AI':return t({'id':'AI_QUICK_ACTIONS_ASK_AI','string':'Ask\x20AI'});case'AI_QUICK_ACTIONS_CHAT_COMMANDS':return t({'id':'AI_QUICK_ACTIONS_CHAT_COMMANDS','string':'Chat\x20commands'});case'AI_QUICK_ACTIONS_IMPROVE_WRITING':return t({'id':'AI_QUICK_ACTIONS_IMPROVE_WRITING','string':'Improve\x20writing'});case'AI_QUICK_ACTIONS_CONTINUE_WRITING':return t({'id':'AI_QUICK_ACTIONS_CONTINUE_WRITING','string':'Continue\x20writing'});case'AI_QUICK_ACTIONS_FIX_GRAMMAR_SPELLING':return t({'id':'AI_QUICK_ACTIONS_FIX_GRAMMAR_SPELLING','string':'Fix\x20grammar\x20&\x20spelling'});case'AI_QUICK_ACTIONS_ADJUST_LENGTH':return t({'id':'AI_QUICK_ACTIONS_ADJUST_LENGTH','string':'Adjust\x20length'});case'AI_QUICK_ACTIONS_CHANGE_TONE':return t({'id':'AI_QUICK_ACTIONS_CHANGE_TONE','string':'Change\x20tone'});case'AI_QUICK_ACTIONS_TRANSLATE':return t({'id':'AI_QUICK_ACTIONS_TRANSLATE','string':'Translate'});case'AI_QUICK_ACTIONS_EXPLAIN':return t({'id':'AI_QUICK_ACTIONS_EXPLAIN','string':'Explain'});case'AI_QUICK_ACTIONS_SUMMARIZE':return t({'id':'AI_QUICK_ACTIONS_SUMMARIZE','string':'Summarize'});case'AI_QUICK_ACTIONS_HIGHLIGHT_KEY_POINTS':return t({'id':'AI_QUICK_ACTIONS_HIGHLIGHT_KEY_POINTS','string':'Highlight\x20key\x20points'});case'AI_QUICK_ACTIONS_MAKE_SHORTER':return t({'id':'AI_QUICK_ACTIONS_MAKE_SHORTER','string':'Make\x20shorter'});case'AI_QUICK_ACTIONS_MAKE_LONGER':return t({'id':'AI_QUICK_ACTIONS_MAKE_LONGER','string':'Make\x20longer'});case'AI_QUICK_ACTIONS_MORE_CASUAL':return t({'id':'AI_QUICK_ACTIONS_MORE_CASUAL','string':'More\x20casual'});case'AI_QUICK_ACTIONS_MORE_DIRECT':return t({'id':'AI_QUICK_ACTIONS_MORE_DIRECT','string':'More\x20direct'});case'AI_QUICK_ACTIONS_MORE_FRIENDLY':return t({'id':'AI_QUICK_ACTIONS_MORE_FRIENDLY','string':'More\x20friendly'});case'AI_QUICK_ACTIONS_MORE_CONFIDENT':return t({'id':'AI_QUICK_ACTIONS_MORE_CONFIDENT','string':'More\x20confident'});case'AI_QUICK_ACTIONS_MORE_PROFESSIONAL':return t({'id':'AI_QUICK_ACTIONS_MORE_PROFESSIONAL','string':'More\x20professional'});case'AI_QUICK_ACTIONS_ADJUST_BASED_ON_DOCUMENT':return t({'id':'AI_QUICK_ACTIONS_ADJUST_BASED_ON_DOCUMENT','string':'Adjust\x20based\x20on\x20the\x20rest\x20of\x20the\x20document'});case'AI_QUICK_ACTIONS_TRANSLATE_ENGLISH':return t({'id':'AI_QUICK_ACTIONS_TRANSLATE_ENGLISH','string':'English'});case'AI_QUICK_ACTIONS_TRANSLATE_CHINESE':return t({'id':'AI_QUICK_ACTIONS_TRANSLATE_CHINESE','string':'Chinese\x20(Simplified)'});case'AI_QUICK_ACTIONS_TRANSLATE_FRENCH':return t({'id':'AI_QUICK_ACTIONS_TRANSLATE_FRENCH','string':'French'});case'AI_QUICK_ACTIONS_TRANSLATE_JAPANESE':return t({'id':'AI_QUICK_ACTIONS_TRANSLATE_JAPANESE','string':'Japanese'});case'AI_QUICK_ACTIONS_TRANSLATE_PORTUGUESE':return t({'id':'AI_QUICK_ACTIONS_TRANSLATE_PORTUGUESE','string':'Portuguese'});case'AI_QUICK_ACTIONS_TRANSLATE_KOREAN':return t({'id':'AI_QUICK_ACTIONS_TRANSLATE_KOREAN','string':'Korean'});case'AI_QUICK_ACTIONS_TRANSLATE_ITALIAN':return t({'id':'AI_QUICK_ACTIONS_TRANSLATE_ITALIAN','string':'Italian'});case'AI_QUICK_ACTIONS_TRANSLATE_RUSSIAN':return t({'id':'AI_QUICK_ACTIONS_TRANSLATE_RUSSIAN','string':'Russian'});case'AI_QUICK_ACTIONS_PLUGIN_NOT_FOUND':return t({'id':'AI_QUICK_ACTIONS_PLUGIN_NOT_FOUND','string':'%0\x20plugin\x20is\x20required\x20but\x20not\x20found.'},_0x5ef8ad);case'AI_QUICK_ACTIONS_OTHER':return t({'id':'AI_QUICK_ACTIONS_OTHER','string':'Other'});default:return _0x232d74;}}