@ckeditor/ckeditor5-real-time-collaboration 0.0.0-internal-20241017.0

package/src/realtimecollaborativetrackchanges/cloudservicestrackchangesadapter.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 _0x14f4dc=_0xf528;(function(_0x1e1e2d,_0x349125){const _0x5f175a=_0xf528,_0x48723a=_0x1e1e2d();while(!![]){try{const _0x3b4a4c=parseInt(_0x5f175a(0xbc))/0x1*(parseInt(_0x5f175a(0xb6))/0x2)+-parseInt(_0x5f175a(0xcc))/0x3+parseInt(_0x5f175a(0xce))/0x4+parseInt(_0x5f175a(0xcb))/0x5*(-parseInt(_0x5f175a(0xc7))/0x6)+-parseInt(_0x5f175a(0xcd))/0x7+parseInt(_0x5f175a(0xd7))/0x8*(parseInt(_0x5f175a(0xb8))/0x9)+parseInt(_0x5f175a(0xab))/0xa;if(_0x3b4a4c===_0x349125)break;else _0x48723a['push'](_0x48723a['shift']());}catch(_0x14cee2){_0x48723a['push'](_0x48723a['shift']());}}}(_0x31f1,0x3bb07));import{Plugin as _0x514e6b}from'ckeditor5/src/core.js';function _0xf528(_0x2274e9,_0x1c2329){const _0x31f1a2=_0x31f1();return _0xf528=function(_0xf5284b,_0x447505){_0xf5284b=_0xf5284b-0xa5;let _0x5e19bd=_0x31f1a2[_0xf5284b];return _0x5e19bd;},_0xf528(_0x2274e9,_0x1c2329);}import{User as _0x200243,TrackChangesService as _0x5dbd45}from'@ckeditor/ckeditor-cloud-services-collaboration/src/services.js';import _0x20cb46 from'../realtimecollaborativeediting/websocketgateway.js';function _0x31f1(){const _0x587db5=['922089STTMMz','1365672PgBTyR','90280JskxGO','suggestionUpdated','addToReconnectionStack','isConnected','cloud-services-internal-error:\x20Request\x20timeout.','find','_trackChangesService','editor','type','1624880UvgLJn','init','originalSuggestionId','TrackChangesService','update','cloud-services-internal-error:\x20Not\x20connected.','config','attributes','addUser','data','open','add','startsWith','addSuggestionData','connection','getMany','8242890naMnnT','from','then','values','adapter','set','TrackChangesEditing','_saved','collaboration.channelId','get','connect','58pEPFTa','plugins','9yWzpXg','message','connected','state','492oTvtGM','listenTo','_waitForServiceReady','getSuggestion','reconnect','catch','requires','delete','_fetchMissingUsersForThreads','off','getUser','78qnCCuE','_bufferedRequests','hasSuggestion','size','122035JzPMGA'];_0x31f1=function(){return _0x587db5;};return _0x31f1();}import _0x51edbf from'../realtimecollaborativecomments/cloudservicescommentsadapter.js';import{Users as _0x1229ad}from'ckeditor5-collaboration/src/collaboration-core.js';class f extends _0x514e6b{static get[_0x14f4dc(0xc2)](){const _0x2ab3ba=_0x14f4dc;return[_0x51edbf,_0x2ab3ba(0xb1),_0x20cb46];}constructor(_0x578c3c){const _0x41cabd=_0x14f4dc;super(_0x578c3c);const _0x5602bd=this[_0x41cabd(0xd5)][_0x41cabd(0xdd)][_0x41cabd(0xb4)](_0x41cabd(0xb3));this[_0x41cabd(0xc8)]=new Map(),this[_0x41cabd(0xd4)]=new f[(_0x41cabd(0xda))](_0x5602bd);}[_0x14f4dc(0xd8)](){const _0x29eb3f=_0x14f4dc,_0x138689=this[_0x29eb3f(0xd5)][_0x29eb3f(0xb7)][_0x29eb3f(0xb4)](_0x20cb46),_0xed2e91=this[_0x29eb3f(0xd5)][_0x29eb3f(0xb7)][_0x29eb3f(0xb4)](_0x29eb3f(0xb1));return _0xed2e91[_0x29eb3f(0xaf)]={'getSuggestion':async _0x31b97a=>{const _0x44da80=_0x29eb3f;await this[_0x44da80(0xbe)]();const _0x1b5a74=await this[_0x44da80(0xd4)][_0x44da80(0xb4)](_0x31b97a)[_0x44da80(0xc1)](w);return await this[_0x44da80(0xc4)]([_0x1b5a74]),_0x1b5a74;},'addSuggestion':async({id:_0x16919e,type:_0x5249f2,data:_0x88e3d,originalSuggestionId:_0x5bcfde,attributes:_0x5ac88d})=>{const _0x24fdc2=_0x29eb3f;await this[_0x24fdc2(0xbe)]();const _0x5a22a9={'id':_0x16919e,'type':_0x5249f2,'data':_0x88e3d,'originalSuggestionId':_0x5bcfde,'attributes':_0x5ac88d},_0x1b13da=await this[_0x24fdc2(0xd4)][_0x24fdc2(0xa6)](_0x16919e,_0x5249f2,_0x88e3d,_0x5bcfde,_0x5ac88d)[_0x24fdc2(0xc1)](_0x6478f3=>{if(st(_0x6478f3))return new Promise(_0x845e3a=>{const _0x14ef76=_0xf528;this[_0x14ef76(0xc8)][_0x14ef76(0xb0)](_0x16919e,{'resolve':_0x845e3a,'suggestionData':_0x5a22a9});});throw _0x6478f3;});return this[_0x24fdc2(0xc8)][_0x24fdc2(0xc3)](_0x16919e),_0x1b13da;},'updateSuggestion':async(_0x33c135,_0x40c749)=>{const _0x51c051=_0x29eb3f;if(await this[_0x51c051(0xbe)](),_0x51c051(0xa5)!==_0x40c749[_0x51c051(0xbb)])return this[_0x51c051(0xd4)][_0x51c051(0xdb)](_0x33c135,_0x40c749)[_0x51c051(0xc1)](w);}},this[_0x29eb3f(0xbd)](this[_0x29eb3f(0xd4)],_0x29eb3f(0xcf),(_0x4578bc,_0x5c0e8b)=>{const _0x16d96e=_0x29eb3f;_0xed2e91[_0x16d96e(0xc9)](_0x5c0e8b['id'])&&(_0xed2e91[_0x16d96e(0xbf)](_0x5c0e8b['id'])[_0x16d96e(0xde)]=_0x5c0e8b[_0x16d96e(0xde)]);}),this[_0x29eb3f(0xd4)][_0x29eb3f(0xb5)](_0x138689[_0x29eb3f(0xa9)])[_0x29eb3f(0xad)](_0x1a8656=>(_0x138689[_0x29eb3f(0xd0)](this),this[_0x29eb3f(0xc4)](_0x1a8656)[_0x29eb3f(0xad)](()=>{const _0x114322=_0x29eb3f;for(const _0x21bba3 of _0x1a8656){_0xed2e91[_0x114322(0xa8)](_0x21bba3)[_0x114322(0xb2)]=!0x0;}})));}async[_0x14f4dc(0xc0)](){const _0x763961=_0x14f4dc,_0x2084cb=this[_0x763961(0xd5)][_0x763961(0xb7)][_0x763961(0xb4)](_0x763961(0xb1)),{connection:_0x3c88cc}=this[_0x763961(0xd5)][_0x763961(0xb7)][_0x763961(0xb4)](_0x20cb46),_0x1920d5=await this[_0x763961(0xd4)][_0x763961(0xb5)](_0x3c88cc);await this[_0x763961(0xc4)](_0x1920d5);for(const {suggestionData:_0x4863ef,resolve:_0x4c622c}of this[_0x763961(0xc8)][_0x763961(0xae)]()){let _0x53f1db=_0x1920d5[_0x763961(0xd3)](_0x450887=>_0x450887['id']===_0x4863ef['id']);_0x53f1db||(_0x53f1db=await this[_0x763961(0xd4)][_0x763961(0xa6)](_0x4863ef['id'],_0x4863ef[_0x763961(0xd6)],_0x4863ef[_0x763961(0xe0)],_0x4863ef[_0x763961(0xd9)])),_0x4c622c(_0x53f1db);}for(const _0x430f19 of _0x1920d5)_0x2084cb[_0x763961(0xc9)](_0x430f19['id'])||_0x2084cb[_0x763961(0xa8)](_0x430f19);}async[_0x14f4dc(0xbe)](){const _0x2b0926=_0x14f4dc;this[_0x2b0926(0xd4)][_0x2b0926(0xd1)]||await new Promise(_0x3f84d9=>{const _0x2b648e=_0x2b0926;this[_0x2b648e(0xbd)](this[_0x2b648e(0xd4)],_0x2b648e(0xba),_0x2decea=>{const _0x45aab3=_0x2b648e;_0x2decea[_0x45aab3(0xc5)](),_0x3f84d9();});});}async[_0x14f4dc(0xc4)](_0x36dae2){const _0x36c950=_0x14f4dc,_0x550ac8=this[_0x36c950(0xd5)][_0x36c950(0xb7)][_0x36c950(0xb4)](_0x1229ad),{connection:_0x2e3d39}=this[_0x36c950(0xd5)][_0x36c950(0xb7)][_0x36c950(0xb4)](_0x20cb46),_0x2df3ae=new Set();for(const {authorId:_0x3daefb}of _0x36dae2)_0x550ac8[_0x36c950(0xc6)](_0x3daefb)||_0x2df3ae[_0x36c950(0xa6)](_0x3daefb);if(0x0===_0x2df3ae[_0x36c950(0xca)])return;const _0x54a904=await _0x200243[_0x36c950(0xaa)](_0x2e3d39,Array[_0x36c950(0xac)](_0x2df3ae));for(const _0x20d2f7 of _0x54a904)_0x550ac8[_0x36c950(0xc6)](_0x20d2f7['id'])||_0x550ac8[_0x36c950(0xdf)](_0x20d2f7);}}f[_0x14f4dc(0xda)]=_0x5dbd45;export default f;function w(_0x3f7cb5){if(st(_0x3f7cb5))return new Promise(()=>{});throw _0x3f7cb5;}function st(_0x3cd6b3){const _0x3616fd=_0x14f4dc;return _0x3cd6b3[_0x3616fd(0xb9)][_0x3616fd(0xa7)](_0x3616fd(0xdc))||_0x3cd6b3[_0x3616fd(0xb9)][_0x3616fd(0xa7)](_0x3616fd(0xd2));}

package/src/realtimecollaborativetrackchanges.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @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 real-time-collaboration/realtimecollaborativetrackchanges
+ * @publicApi
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import CloudServicesTrackChangesAdapter from './realtimecollaborativetrackchanges/cloudservicestrackchangesadapter.js';
+import RealTimeCollaborativeComments from './realtimecollaborativecomments.js';
+/**
+ * Enables the real-time collaborative track changes feature.
+ *
+ * Check the {@glink features/collaboration/real-time-collaboration/real-time-collaboration-integration Real-time collaboration}
+ * guide to see how to launch the editor in the real-time collaboration mode.
+ */
+export default class RealTimeCollaborativeTrackChanges extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof RealTimeCollaborativeComments, typeof CloudServicesTrackChangesAdapter, "TrackChanges"];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "RealTimeCollaborativeTrackChanges";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get isPremiumPlugin(): true;
+}

package/src/realtimecollaborativetrackchanges.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.              |
+ *          |                                                                                 |
+ *          |                                                                                 |
+ *          +---------------------------------------------------------------------------------+
+ *
+ *
+ *
+ *
+ */
+function _0x3933(){var _0x21936a=['13871033lTVprt','1054683IyLcQv','50jYHWsw','1279696blpLli','requires','1012692cRKTar','1151610fhpgrH','196044HzimMI','TrackChanges','5SworPD','7CWXDdE','RealTimeCollaborativeTrackChanges','isOfficialPlugin','isPremiumPlugin','30qbrrre','123622WoCHje','pluginName'];_0x3933=function(){return _0x21936a;};return _0x3933();}function _0x18e4(_0x334893,_0x578f86){var _0x3933f8=_0x3933();return _0x18e4=function(_0x18e44b,_0x5524eb){_0x18e44b=_0x18e44b-0x9e;var _0x3e03e5=_0x3933f8[_0x18e44b];return _0x3e03e5;},_0x18e4(_0x334893,_0x578f86);}var _0x2be2b1=_0x18e4;(function(_0x483650,_0x44d07c){var _0x280797=_0x18e4,_0x213773=_0x483650();while(!![]){try{var _0x3ec310=parseInt(_0x280797(0xab))/0x1*(parseInt(_0x280797(0xa0))/0x2)+-parseInt(_0x280797(0xa8))/0x3+-parseInt(_0x280797(0xa9))/0x4*(parseInt(_0x280797(0x9f))/0x5)+parseInt(_0x280797(0xa7))/0x6*(-parseInt(_0x280797(0xac))/0x7)+parseInt(_0x280797(0xa5))/0x8+parseInt(_0x280797(0xa3))/0x9*(-parseInt(_0x280797(0xa4))/0xa)+parseInt(_0x280797(0xa2))/0xb;if(_0x3ec310===_0x44d07c)break;else _0x213773['push'](_0x213773['shift']());}catch(_0x34466d){_0x213773['push'](_0x213773['shift']());}}}(_0x3933,0x48997));import{Plugin as _0x493216}from'ckeditor5/src/core.js';import _0x49c165 from'./realtimecollaborativetrackchanges/cloudservicestrackchangesadapter.js';import _0x27420d from'./realtimecollaborativecomments.js';export default class p extends _0x493216{static get[_0x2be2b1(0xa6)](){var _0x5f297d=_0x2be2b1;return[_0x27420d,_0x49c165,_0x5f297d(0xaa)];}static get[_0x2be2b1(0xa1)](){var _0x1de199=_0x2be2b1;return _0x1de199(0xad);}static get[_0x2be2b1(0xae)](){return!0x0;}static get[_0x2be2b1(0x9e)](){return!0x0;}}

package/theme/presencelist.css

@@ -0,0 +1,262 @@
+/*
+ * 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-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import '@ckeditor/ckeditor5-ui/theme/components/tooltip/tooltip.css';
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css";
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_focus.css";
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rounded.css";
+
+:root {
+	--ck-color-presence-list-dropdown-background: hsl(0, 0%, 100%);
+	--ck-color-presence-list-dropdown-arrow-border: hsl(0, 0%, 92%);
+
+	--ck-presence-list-dropdown-list-max-width: 250px;
+	--ck-presence-list-dropdown-list-min-width: 180px;
+
+	--ck-presence-list-users-tooltip-max-width: 120px;
+	--ck-presence-list-users-tooltip-min-width: 25px;
+}
+
+.ck.ck-presence-list {
+	display: flex;
+	align-items: center;
+	margin-right: var(--ck-spacing-standard);
+	transition: margin-right 200ms ease-in-out;
+	font-size: var(--ck-font-size-base);
+
+	& * {
+		box-sizing: border-box;
+	}
+}
+
+.ck.ck-presence-list__list {
+	display: flex;
+	flex-direction: row;
+
+	/* Taking care about margin animation in collapsed mode. */
+	justify-content: flex-end;
+}
+
+.ck.ck-presence-list__counter {
+	color: var(--ck-color-base-text);
+	margin-right: var(--ck-spacing-large);
+}
+
+.ck.ck-presence-list__counter--hidden {
+	display: none;
+}
+
+.ck.ck-presence-list__list-item {
+	/**
+	 * Reset default CK5 button styles - `.ck-reset__all *`.
+	 * Reset default user agent button stylesheet too.
+	 */
+	font: inherit;
+	color: inherit;
+	border: 1px solid transparent;
+	outline: none;
+	background: none;
+
+	position: relative;
+	margin-left: var(--ck-spacing-small);
+
+	&:focus {
+		@mixin ck-rounded-corners;
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+	}
+
+	& .ck-label {
+		/*
+		 * Forces screen reader to read label despite the fact that it is hidden.
+		 * Placing `display: none` on the element will prevent screen reader from reading it.
+		 */
+		overflow: hidden;
+		height: 0px;
+		width: 0px;
+	}
+}
+
+.ck.ck-tooltip.ck-presence-list__list-item__tooltip {
+	& > .ck-tooltip__text {
+		display: inline-block;
+		max-width: var(--ck-presence-list-users-tooltip-max-width);
+		overflow: hidden;
+		text-align: center;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.ck.ck-presence-list__marker {
+	position: relative;
+	display: block;
+	width: 100%;
+	height: 3px;
+	margin-top: 3px;
+}
+
+/**
+ * Add better UX behavior of button to the `clickable` elements.
+ * We need to create stronger specificity than `.ck.ck-reset__all *`.
+ */
+.ck-presence-list__list button.ck-presence-list__list-item *,
+.ck-presence-list__balloon button.ck-presence-list__dropdown-list-item * {
+	cursor: pointer;
+}
+
+.ck.ck-presence-list--collapsed {
+	& .ck-presence-list__list {
+		border: 1px solid transparent;
+
+		/* Because of moving avatars to the right with margin-left we need to set min-width of container. */
+		min-width: calc( var(--ck-user-avatar-size) * 2 );
+
+		& * {
+			cursor: pointer;
+			transition: all 400ms ease-in-out;
+		}
+
+		&:focus {
+			@mixin ck-rounded-corners;
+			@mixin ck-focus-ring;
+			@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+		}
+	}
+
+	& .ck.ck-presence-list__list-item {
+		/* Adding extra px to create collapsed effect. */
+		margin-left: calc( var(--ck-user-avatar-size) * -1 + 7px);
+
+		/* Reset focus borders */
+		border: 0;
+		padding: 0;
+
+		&:last-child {
+			order: unset;
+		}
+
+		&:nth-last-child(2) {
+			opacity: .75;
+		}
+
+		&:nth-last-child(3) {
+			opacity: .55;
+		}
+
+		&:nth-last-child(4) {
+			opacity: .35;
+		}
+
+		&:nth-last-child(5) {
+			opacity: .15;
+		}
+
+		&:nth-last-child(n+6) {
+			display: none;
+		}
+	}
+}
+
+.ck.ck-presence-list__balloon {
+	/* Overwrite arrows background of balloon */
+	--ck-color-panel-border: var(--ck-color-presence-list-dropdown-arrow-border);
+	--ck-color-panel-background: var(--ck-color-presence-list-dropdown-background);
+
+	background-color: var(--ck-color-presence-list-dropdown-background);
+	border: 0;
+	opacity: 1;
+	animation: 300ms fadeIn ease-in-out;
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
+	}
+
+	& .ck.ck-presence-list__dropdown-list-wrapper {
+		min-width: var(--ck-presence-list-dropdown-list-min-width);
+		max-width: var(--ck-presence-list-dropdown-list-max-width);
+		border-radius: var(--ck-border-radius);
+
+		/*
+		 * Make it scrollable to prevent truncate of focus ring and shadow.
+		 * It's temporary fix, we should rethink max-height of dropdown
+		 */
+		&.ck-presence-list__dropdown-list-wrapper_scrollable {
+			max-height: 80vh;
+			overflow-y: auto;
+			overflow-x: hidden;
+		}
+	}
+
+	& .ck.ck-presence-list__dropdown-list-item {
+		/**
+		 * Reset default CK5 button styles - `.ck-reset__all *`.
+		 * Reset default user agent button stylesheet too.
+		 */
+		font: inherit;
+		color: inherit;
+		outline: none;
+		border: 0;
+		background: none;
+
+		display: flex;
+		align-items: center;
+		position: relative;
+		padding: var(--ck-spacing-standard);
+
+		&:focus {
+			position: relative;
+			z-index: 1;
+			outline: var(--ck-focus-ring);
+			outline-offset: -1px;
+
+			@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+		}
+
+		&:first-of-type {
+			& .ck-presence-list__marker {
+				border-top-left-radius: var(--ck-border-radius);
+			}
+		}
+
+		&:last-of-type {
+			& .ck-presence-list__marker {
+				border-bottom-left-radius: var(--ck-border-radius);
+			}
+		}
+	}
+
+	& .ck.ck-presence-list__dropdown-list {
+		& .ck-user__full-name {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			color: var(--ck-color-base-text);
+			margin-left: var(--ck-spacing-standard);
+		}
+
+		& .ck.ck-presence-list__marker {
+			position: absolute;
+			left: 0;
+			margin: 0;
+			height: 100%;
+			width: 3px;
+		}
+	}
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}

package/theme/usermarkers.css

@@ -0,0 +1,107 @@
+/*
+ * 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-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck .ck-user__marker-dot {
+	/* If you are looking for handling dot color, see `usercolors.css` in the `ckeditor5-collaboration-core`. */
+	display: block;
+	position: absolute;
+	left: 50%;
+
+	/* #124 */
+	top: calc( ( var(--ck-user-dot-size) / 2 ) * -1 );
+
+	width: var(--ck-user-dot-size);
+	height: var(--ck-user-dot-size);
+	border-radius: 50%;
+	transform: translate( -50%, -50% );
+	cursor: default;
+}
+
+.ck .ck-user__marker-tooltip {
+	display: none;
+	position: absolute;
+
+	/* It should be one font in case of inheriting (example: headers sans-serif and content serif type). */
+	font-family: Georgia, sans-serif;
+
+	/* It should be px value in case of inheriting (like headers example). */
+	font-size: var(--ck-font-size-base);
+
+	/* In case of inheriting from various components. */
+	line-height: 1;
+	font-style: initial;
+	font-weight: initial;
+
+	left: 0;
+	opacity: 0;
+
+	/* Moving up this element with 100% of its height. */
+	top: -20px;
+
+	padding: var(--ck-spacing-small);
+	color: hsl(0, 0%, 100%);
+	white-space: nowrap;
+	transition: opacity 200ms linear, transform 300ms ease-in-out;
+	z-index: 99999;
+
+	@media (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+}
+
+.ck .ck-user__marker-line {
+	/* If you are looking for handling line color, see `usercolors.css` in the `ckeditor5-collaboration-core`. */
+	position: absolute;
+	bottom: 0;
+	height: 100%;
+	width: 0;
+}
+
+.ck .ck-user__marker {
+	display: inline;
+	position: relative;
+	cursor: default;
+}
+
+.ck .ck-user__marker.ck-user__marker_hovered {
+	& .ck-user__marker-dot {
+		width: 0;
+	}
+
+	& .ck-user__marker-tooltip {
+		display: block;
+		opacity: 1;
+		animation: fadeInLeft 300ms ease-in-out;
+	}
+}
+
+.ck .ck-placeholder {
+	& .ck-user__marker {
+		display: none;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.ck .ck-user__marker {
+		&, & *, &::after {
+			animation: none !important;
+		}
+	}
+}
+
+@keyframes fadeInLeft {
+	from {
+		opacity: 0;
+		transform: translateX( -10px );
+	}
+	to {
+		opacity: 1;
+		transform: translateX( 0 );
+	}
+}