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

package/theme/comment.css

@@ -1,182 +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/_shadow.css";
-
-:root {
-	--ck-color-comment-background: hsl(210, 52%, 97%);
-	--ck-color-comment-separator: hsl(210, 52%, 87%);
-	--ck-color-comment-remove-background: var(--ck-color-light-red);
-	--ck-color-comment-input-background: var(--ck-color-comment-background);
-	/* Because of default content styles that are inherited from `.ck-content` are affecting the comment font family
-	(it's not inherited from `body`) we need to set the `font-family` manually; similar situation is with:
-	`font-size` and `color` properties.
-	See https://github.com/ckeditor/ckeditor5/issues/18710 */
-	--ck-comment-content-font-family: var(--ck-font-face);
-	--ck-comment-content-font-size: var(--ck-font-size-base);
-	--ck-comment-content-font-color: var(--ck-color-base-text);
-}
-
-.ck .ck-comment__wrapper {
-	font-size: var(--ck-font-size-base);
-	position: relative;
-	outline: 0;
-	transition: all 300ms linear;
-
-	@media (prefers-reduced-motion: reduce) {
-		transition: none;
-	}
-
-	&:first-of-type {
-		border-top-right-radius: var(--ck-border-radius);
-		border-top-left-radius: var(--ck-border-radius);
-	}
-
-	&:focus {
-		background: var(--ck-color-button-default-hover-background);
-	}
-}
-
-.ck .ck-comment {
-	&::after {
-		content: '';
-		display: block;
-		position: absolute;
-		opacity: 1;
-		top: calc( var(--ck-user-avatar-size) + var(--ck-spacing-small) );
-		left: calc(
-			var(--ck-spacing-standard) + ( var(--ck-user-avatar-size) / 2 )
-
-			/* Half width of line. */
-			- 2px
-		);
-		width: 4px;
-		height: 100%;
-		background-color: var(--ck-color-comment-separator);
-	}
-}
-
-.ck .ck-comment--edit {
-	background-color: var(--ck-color-comment-input-background);
-
-	&::after {
-		opacity: 0;
-	}
-
-	.ck-comment__input-actions {
-		margin-top: var(--ck-spacing-standard);
-	}
-}
-
-.ck .ck-comment__content {
-	word-break: normal;
-	overflow-wrap: anywhere;
-	font-family: var(--ck-comment-content-font-family);
-	color: var(--ck-comment-content-font-color);
-}
-
-.ck .ck-comment--info {
-	& .ck-comment__content {
-		font-style: italic;
-		/* Override the default content styles that are inherited from `.ck-content`.
-		See https://github.com/ckeditor/ckeditor5/issues/18710 */
-		font-family: var(--ck-comment-content-font-family);
-		font-size: var(--ck-comment-content-font-size);
-		color: var(--ck-comment-content-font-color);
-	}
-}
-
-/* Common styles for typography inside comment element and editable input.
-We are styling resetting list-style because of parent <ul> element. */
-.ck .ck-comment,
-.ck .ck-comment__input {
-	& p {
-		margin: 0;
-	}
-
-	& ul,
-	& ol {
-		padding-left: 10px;
-		margin-left: 10px;
-	}
-
-	& ul {
-		list-style: disc;
-		margin-bottom: 5px;
-		margin-top: 0;
-
-		& ul {
-			list-style: circle;
-
-			& ul {
-				list-style: square;
-			}
-		}
-	}
-}
-
-.ck .ck-comment__main {
-	& .ck-comment__input-wrapper {
-		display: flex;
-		flex-direction: column;
-		position: relative;
-		transition: all 300ms linear;
-
-		& .ck-comment__input {
-			padding: 0;
-		}
-	}
-}
-
-.ck .ck-comment__user {
-	/* Display user above vertical line. */
-	z-index: var(--ck-z-default);
-}
-
-/* We need specificity 030 to beat styles in `commentinput.css`. */
-.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit {
-	background: var(--ck-color-base-action);
-	color: hsl(0, 0%, 100%);
-
-	&:hover {
-		background: var(--ck-color-button-save);
-	}
-}
-
-.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--cancel {
-	color: var(--ck-color-text);
-}
-
-.ck .ck-comment__external {
-	font-style: italic;
-	color: var(--ck-color-annotation-info);
-	font-size: var(--ck-font-size-tiny);
-	margin-top: var(--ck-spacing-standard);
-}
-
-.ck .ck-comment .ck-dropdown {
-	& .ck-dropdown__arrow {
-		display: none;
-	}
-
-	& .ck-list {
-		margin: 0;
-		padding: var(--ck-spacing-small) 0;
-
-		& .ck-list__item {
-			font-size: 1.2em;
-			color: var(--ck-color-base-text);
-			min-width: auto;
-
-			& .ck-button {
-				color: var(--ck-color-text);
-			}
-		}
-	}
-}

package/theme/commentinput.css

@@ -1,103 +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-comment__input-container {
-	/* Make avatar size in the comment smaller than in presence list. */
-	--ck-user-avatar-size: 28px;
-
-	font-size: var(--ck-font-size-base);
-
-	display: none;
-	padding: var(--ck-spacing-standard);
-	background: var(--ck-color-comment-background);
-}
-
-.ck .ck-comment__input-container--active {
-	display: flex;
-}
-
-.ck .ck-comment__input {
-	padding: var(--ck-spacing-standard);
-
-	/* To keep vertical align with avatar. */
-	padding-top: var(--ck-spacing-medium);
-
-	color: var(--ck-color-base-text);
-	border-width: 0;
-	resize: none;
-	background-color: transparent;
-	transition: color 300ms ease-in-out;
-
-	@media (prefers-reduced-motion: reduce) {
-		transition: none;
-	}
-
-	&:focus {
-		outline: none;
-	}
-
-	& .ck-editor__editable_inline {
-		/* Disable default outline and border in editable input. */
-		--ck-focus-ring: none;
-		--ck-inner-shadow: none;
-
-		/* Override the default content styles that are inherited from `.ck-content`.
-		See https://github.com/ckeditor/ckeditor5/issues/18710 */
-		font-family: var(--ck-comment-content-font-family);
-		font-size: var(--ck-comment-content-font-size);
-		color: var(--ck-comment-content-font-color);
-
-		padding: 0;
-		overflow: visible;
-		border: 0;
-		background-color: transparent;
-		word-break: normal;
-		overflow-wrap: anywhere;
-	}
-}
-
-/* Overwrite default CKEditor 5 margin of editable children.
-See: ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css. */
-.ck-comment__input-wrapper .ck.ck-editor__editable_inline *:first-child {
-	margin-top: 0;
-}
-.ck-comment__input-wrapper .ck.ck-editor__editable_inline *:last-child {
-	margin-bottom: 0;
-}
-
-.ck .ck-comment__input-actions {
-	width: 100%;
-	text-align: right;
-	display: none;
-
-	&.ck-comment__input-actions--active {
-		display: block;
-	}
-
-	& .ck.ck-button {
-		/* Overwrite CK5 button default styles. */
-		display: inline-flex;
-		justify-content: center;
-		align-items: center;
-		cursor: pointer;
-		min-height: var(--ck-ui-component-min-height);
-		min-width: 60px;
-		font-size: var(--ck-annotation-button-size);
-		margin-left: var(--ck-spacing-large);
-		padding: 0 var(--ck-spacing-medium);
-	}
-
-	& .ck-button.ck-disabled {
-		opacity: .3;
-	}
-}
-
-.ck .ck-comment__input-textarea {
-	display: block;
-}

package/theme/commentmarker.css

@@ -1,45 +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-comment-marker: hsl(55, 98%, 83%);
-	--ck-color-comment-marker-active: hsl(55, 98%, 68%);
-}
-
-.ck-content .ck-comment-marker {
-	background: var(--ck-color-comment-marker);
-
-	/* Match size with suggestion markers */
-	border-top: 3px solid transparent;
-	border-bottom: 3px solid transparent;
-
-	/* #152. In the image case, we change marker background to border. */
-	&.ck-widget {
-		background-color: transparent;
-		border: 3px solid var(--ck-color-comment-marker);
-	}
-}
-
-.ck-content .ck-comment-marker--active {
-	background: var(--ck-color-comment-marker-active);
-
-	/* See #2469. Inactive comment marker inside an active one should be highlighted too. */
-	& .ck-comment-marker {
-		background: var(--ck-color-comment-marker-active);
-	}
-
-	&.ck-widget {
-		border-color: var(--ck-color-comment-marker-active);
-
-		/* See #2469. Inactive comment in a widget inside an active comment should not be highlighted. */
-		& .ck-comment-marker {
-			background-color: var(--ck-color-comment-marker);
-		}
-	}
-}

package/theme/commentsarchive.css

@@ -1,49 +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-comments-archive-dropdown {
-	&.ck-dropdown__panel {
-		z-index: var( --ck-z-panel );
-	}
-}
-
-.ck .ck-comments-archive {
-	width: 400px;
-	max-height: 450px;
-	box-sizing: content-box;
-
-	& .ck-annotation {
-		animation: none;
-	}
-
-	& .ck-comments-archive__header, & .ck-comments-archive__content {
-		overflow: auto;
-		max-height: 410px;
-		padding: var( --ck-spacing-large );
-	}
-
-	& .ck-comments-archive__header {
-		max-height: 40px;
-		line-height: var( --ck-font-size-base );
-		font-weight: bold;
-		border-bottom: 1px solid var( --ck-color-toolbar-border );
-	}
-
-	& .ck-comments-archive__content {
-		& .ck-annotation-wrapper:not(:last-child) {
-			margin-bottom: var( --ck-spacing-large );
-		}
-	}
-
-	& .ck-comments-archive__info {
-		text-align: center;
-		font-style: italic;
-		color: var( --ck-color-annotation-info );
-	}
-}

package/theme/commentthread.css

@@ -1,256 +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/_focus.css";
-@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css";
-@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rounded.css";
-
-:root {
-	--ck-color-thread-remove-background: var(--ck-color-comment-remove-background);
-	--ck-color-comment-count: hsl(210, 52%, 57%);
-
-	--ck-color-thread-header-background: hsl(54, 88%, 93%);
-	--ck-color-thread-header-active-background: hsl(52, 100%, 83%);
-
-	--ck-color-unlinked-background: hsl(0, 0%, 96%);
-	--ck-color-unlinked-active-background: hsl(0, 0%, 92%);
-}
-
-.ck .ck-thread {
-	@mixin ck-rounded-corners;
-
-	width: 100%;
-	color: var(--ck-color-base-text);
-	outline: 0;
-	background-color: var(--ck-color-base-background);
-	overflow: hidden;
-
-	/*
-	 * Beware: Using "transition: all" breaks focus management (unable to obtain focus on show)
-	 * because the view is displayed in a dialog that gets toggled via "visibility" property.
-	 */
-	transition-property: color, background-color, width, outline;
-	transition-duration: 300ms;
-	transition-timing-function: ease;
-
-	@media (prefers-reduced-motion: reduce) {
-		transition: none;
-	}
-
-	&:focus {
-		/*
-		 * We cannot use the ck-focus-ring mixin here because it adds a border that would need to stay transparent
-		 * in non-focused state and create an odd space inside the surrounding annotation container.
-		 */
-		outline: var(--ck-focus-ring);
-
-		/*
-		 * We cannot use the ck-box-shadow mixin because we're using outline instead of border (see the comment above).
-		 * And the shadow size has to be custom because outline is rendered on top of the shadow.
-		 */
-		box-shadow: 0 0 0 4px var(--ck-color-focus-outer-shadow);
-	}
-}
-
-/*
- * In case of inline annotations, their focus styles get hoisted to the balloon panel to work around overflow that would
- * otherwise get them cropped..
- */
-.ck-balloon-panel:has( .ck-thread:focus ) {
-	@mixin ck-focus-ring;
-	@mixin ck-box-shadow var(--ck-drop-shadow), var(--ck-focus-outer-shadow);
-}
-
-.ck .ck-thread__header {
-	display: flex;
-	justify-content: space-between;
-	line-height: 1.57;
-	padding: var(--ck-spacing-standard);
-	background-color: var(--ck-color-thread-header-background);
-	font-size: var(--ck-font-size-base);
-
-	& .ck-button {
-		font-size: var(--ck-annotation-button-size);
-	}
-
-	& .ck-context-wrapper {
-		display: inline-flex;
-		width: 100%;
-		min-width: 0;
-		height: 25px;
-		position: relative;
-		padding-right: var(--ck-spacing-large);
-	}
-
-	& .ck-context {
-		display: flex;
-		white-space: nowrap;
-		overflow: hidden;
-		width: 100%;
-		padding: var(--ck-spacing-small) var(--ck-spacing-medium);
-
-		&.ck-context--quotes {
-			&::after, &::before {
-				display: inline-block;
-				content: '"';
-			}
-		}
-
-		& .ck-context__type {
-			font-weight: bold;
-			padding-right: var(--ck-spacing-standard);
-		}
-
-		& .ck-context__value {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			border: 1px solid transparent;
-
-			&:focus {
-				@mixin ck-focus-ring;
-				@mixin ck-box-shadow var(--ck-focus-outer-shadow);
-			}
-		}
-
-		&.overlay {
-			display: inline-block;
-			position: absolute;
-			top: 0;
-			z-index: 2;
-
-			background: var(--ck-color-base-background);
-			box-shadow: 0 2px 3px hsla(0, 0%, 100%, 0.2);
-			border-radius: 2px;
-			white-space: normal;
-			box-sizing: border-box;
-		}
-	}
-}
-
-.ck .ck-thread__comment-count {
-	/* Make avatar size in the comment smaller than in presence list. */
-	--ck-user-avatar-size: 28px;
-
-	padding-left: calc( var(--ck-user-avatar-size) + var(--ck-spacing-standard) * 2 );
-
-	color: var(--ck-color-comment-count);
-	font-size: var(--ck-font-size-base);
-	font-weight: bold;
-	cursor: pointer;
-
-	/* Keep similar transition like `ck-annotation`. */
-	transition: background-color 300ms ease;
-
-	&::before {
-		content: '\25BC';
-		margin-right: var(--ck-spacing-small);
-	}
-}
-
-.ck .ck-thread--remove {
-	& .ck-comment {
-		background-color: var(--ck-color-comment-remove-background);
-	}
-
-	& .ck-thread__input--active {
-		background-color: var(--ck-color-base-background);
-
-		&.ck-thread__input {
-			background-color: var(--ck-color-comment-remove-background);
-		}
-	}
-
-	& .ck-thread__comment-count {
-		background-color: var(--ck-color-comment-remove-background);
-	}
-
-	/* Handle visibility of vertical line below avatars. */
-	& .ck-comment__wrapper {
-		& .ck-comment::after {
-			opacity: 0;
-		}
-	}
-}
-
-/* Handle visibility of vertical line below avatars. */
-.ck .ck-thread__comments .ck-comment__wrapper {
-	&:last-of-type {
-		& .ck-comment::after {
-			opacity: 0;
-		}
-	}
-}
-
-.ck .ck-thread__container {
-	transition: transform 300ms ease;
-
-	@media (prefers-reduced-motion: reduce) {
-		transition: none;
-	}
-}
-
-.ck .ck-thread__comments {
-	position: relative;
-	z-index: var(--ck-z-default);
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	border-radius: var(--ck-border-radius);
-}
-
-.ck .ck-thread__user {
-	font-size: 0.85em;
-}
-
-.ck .ck-thread__input {
-	/* #1829. Firefox is wrongly rendering flex container width 100% with overflowed (non-spaced) text. */
-	width: calc( 100% - var(--ck-user-avatar-size) );
-	white-space: normal;
-
-	transition: background-color 200ms ease-in-out;
-	border-radius: var(--ck-border-radius);
-
-	/*
-		This is equal to the height of the wrapper when the editor instance is loaded.
-		Editor instance is loaded _after_ the comment view is created,
-		so the min-height is set to avoid jitter.
-	*/
-	min-height: 38px;
-}
-
-.ck .ck-thread--active {
-	& .ck-comment__options.ck-dropdown {
-		display: block;
-	}
-
-	& .ck-thread__input {
-		display: block;
-		background-color: var(--ck-color-comment-background);
-	}
-
-	& .ck-thread__header {
-		background-color: var(--ck-color-thread-header-active-background);
-	}
-}
-
-.ck .ck-thread--unlinked {
-	--ck-color-comment-box-border: var(--ck-color-base-border);
-
-	--ck-color-thread-header-background: var(--ck-color-unlinked-background);
-	--ck-color-thread-header-active-background: var(--ck-color-unlinked-active-background);
-}
-
-/* We need specificity 020 to beat .ck.ck-button. */
-.ck.ck-button.ck-confirm-view-submit {
-	color: var(--ck-color-button-save);
-}
-
-.ck.ck-button.ck-confirm-view-cancel {
-	color: var(--ck-color-button-cancel);
-}