@ckeditor/ckeditor5-comments 49.0.0-alpha.1 → 49.0.0-alpha.11

package/dist/comments/ui/view/basecommentview.d.ts

@@ -32,6 +32,13 @@ export declare class BaseCommentView extends View implements FocusableView {
 	*/
 	isSystemComment: boolean;
 	/**
+	* An excerpt of the commented item (the comment thread context) displayed above the comment content.
+	* It is set only for the first comment in the thread. `null` means no excerpt is displayed.
+	*
+	* @observable
+	*/
+	contextValue: string | null;
+	/**
 	* Stores the currently displayed sub-view.
 	*
 	* This is a collection that always includes one view: comment content view or comment input view.

package/dist/comments/ui/view/commentcontentview.d.ts

@@ -9,6 +9,13 @@ import { View } from "@ckeditor/ckeditor5-ui";
 import { type Locale } from "@ckeditor/ckeditor5-utils";
 export declare class CommentContentView extends View {
 	content: string;
+	/**
+	* An excerpt of the commented item (the comment thread context) displayed above the comment content.
+	* Set to `null` to hide it.
+	*
+	* @observable
+	*/
+	contextValue: string | null;
 	constructor(locale: Locale);
 	override render(): void;
 }

package/dist/index-content.css

@@ -8,28 +8,28 @@
 }
 
 .ck-content .ck-comment-marker {
-  background: var(--ck-comment-marker-color);
+  background: var(--ck-color-comment-marker, var(--ck-comment-marker-color));
   border-top: 3px solid #0000;
   border-bottom: 3px solid #0000;
 
   &.ck-widget {
-    border: 3px solid var(--ck-comment-marker-color);
+    border: 3px solid var(--ck-color-comment-marker, var(--ck-comment-marker-color));
     background-color: #0000;
   }
 }
 
 .ck-content .ck-comment-marker--active {
-  background: var(--ck-comment-marker-active-color);
+  background: var(--ck-color-comment-marker-active, var(--ck-comment-marker-active-color));
 
   & .ck-comment-marker {
-    background: var(--ck-comment-marker-active-color);
+    background: var(--ck-color-comment-marker-active, var(--ck-comment-marker-active-color));
   }
 
   &.ck-widget {
-    border-color: var(--ck-comment-marker-active-color);
+    border-color: var(--ck-color-comment-marker-active, var(--ck-comment-marker-active-color));
 
     & .ck-comment-marker {
-      background-color: var(--ck-comment-marker-color);
+      background-color: var(--ck-color-comment-marker, var(--ck-comment-marker-color));
     }
   }
 }

package/dist/index-editor.css

@@ -4,18 +4,20 @@
  */
 :root, :host {
   --ck-comment-background-color: #f7f9fd;
+  --ck-comment-focus-background-color: var(--ck-color-interactive-hover-surface);
   --ck-comment-separator-color: var(--ck-color-comment-separator, #cddeef);
   --ck-comment-remove-background-color: var(--ck-color-comment-remove-background, var(--ck-color-light-red));
   --ck-comment-input-background-color: var(--ck-color-surface-canvas);
   --ck-comment-content-font-family: var(--ck-font-face, var(--ck-font-family));
   --ck-comment-content-font-size: var(--ck-font-size-md);
   --ck-comment-content-font-color: var(--ck-color-text);
+  --ck-comment-context-border-color: var(--ck-color-base-attention);
   --ck-comment-thread-line-size: 1px;
   --ck-comment-border-radius: var(--ck-border-radius-surface);
 }
 
 .ck .ck-comment__wrapper {
-  font-size: var(--ck-font-size-base);
+  font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
   transition: all var(--ck-transition-duration-control-emphasized) linear;
   outline: 0;
   position: relative;
@@ -29,6 +31,10 @@
     border-top-left-radius: var(--ck-comment-border-radius);
   }
 
+  &:focus {
+    background: var(--ck-comment-focus-background-color);
+  }
+
   &:has( + .ck-thread__comment-count) {
     & .ck-comment {
       &:after {
@@ -50,7 +56,7 @@
 			/* Avatar margin size) */
 			+ 2px);
     width: var(--ck-comment-thread-line-size);
-    background-color: var(--ck-comment-separator-color);
+    background-color: var(--ck-color-comment-separator, var(--ck-comment-separator-color));
     top: calc(var(--ck-user-avatar-size) + (2 * var(--ck-spacing-padding, var(--ck-spacing-sm))));
     height: calc(100% - var(--ck-user-avatar-size) - var(--ck-spacing-padding));
     border-radius: var(--ck-comment-border-radius);
@@ -60,7 +66,7 @@
 }
 
 .ck .ck-comment--edit {
-  background-color: var(--ck-comment-input-background-color);
+  background-color: var(--ck-color-comment-input-background, var(--ck-comment-input-background-color));
 
   &:after {
     opacity: 0;
@@ -76,6 +82,20 @@
   overflow-wrap: anywhere;
   font-family: var(--ck-comment-content-font-family);
   color: var(--ck-comment-content-font-color);
+
+  & .ck-comment__context {
+    border-inline-start: 3px solid var(--ck-comment-context-border-color);
+    margin-top: var(--ck-spacing-tiny, var(--ck-spacing-xs));
+    margin-bottom: var(--ck-spacing-standard, var(--ck-spacing-base));
+    color: var(--ck-color-base-text-light);
+    padding-inline-start: var(--ck-spacing-standard, var(--ck-spacing-base));
+
+    & > p {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
 }
 
 .ck .ck-comment--info {
@@ -142,7 +162,7 @@
 }
 
 .ck .ck-comment__external {
-  color: var(--ck-annotation-info-color);
+  color: var(--ck-color-annotation-info, var(--ck-annotation-info-color));
   font-style: italic;
   font-size: var(--ck-font-size-tiny, var(--ck-font-size-xs));
   margin-top: var(--ck-spacing-standard, var(--ck-spacing-base));
@@ -172,8 +192,8 @@
 :root, :host {
   --ck-thread-remove-background-color: var(--ck-color-thread-remove-background, var(--ck-comment-remove-background-color));
   --ck-comment-count-color: #223047;
-  --ck-thread-header-background-color: #f3f6fd;
-  --ck-thread-header-active-background-color: var(--ck-color-interactive-selected-surface);
+  --ck-thread-header-background-color: var(--ck-color-thread-header-background, #f3f6fd);
+  --ck-thread-header-active-background-color: var(--ck-color-thread-header-active-background, var(--ck-color-interactive-selected-surface));
   --ck-thread-header-button-hover-background: var(--ck-color-interactive-primary-surface-muted);
   --ck-thread-unlinked-background-color: var(--ck-color-unlinked-background, #f5f5f5);
   --ck-thread-unlinked-active-background-color: var(--ck-color-unlinked-active-background, #ebebeb);
@@ -208,7 +228,7 @@
 
 .ck-balloon-panel:has(.ck-thread:focus) {
   border: var(--ck-interactive-focus-ring);
-  box-shadow: var(--ck-shadow-surface-floating), var(--ck-interactive-focus-shadow), 0 0;
+  box-shadow: var(--ck-shadow-surface-floating), var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
   outline: none;
 }
 
@@ -216,7 +236,7 @@
   padding: var(--ck-thread-header-padding);
   background-color: var(--ck-thread-header-background-color);
   line-height: 1.57;
-  font-size: var(--ck-font-size-base);
+  font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
   justify-content: space-between;
   display: flex;
 
@@ -267,7 +287,7 @@
 
       &:focus {
         border: var(--ck-interactive-focus-ring);
-        box-shadow: var(--ck-interactive-focus-shadow), 0 0;
+        box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
         outline: none;
       }
     }
@@ -287,27 +307,36 @@
 }
 
 .ck .ck-thread__comment-count {
-  --ck-user-avatar-size: 32px;
+  --ck-user-avatar-size: 28px;
   padding-left: calc(var(--ck-user-avatar-size) + var(--ck-spacing-standard, var(--ck-spacing-base)) * 2);
-  color: var(--ck-comment-count-color);
-  font-size: var(--ck-font-size-sm);
+  color: var(--ck-color-comment-count, var(--ck-color-base-text-light));
+  font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
   cursor: pointer;
   transition: background-color var(--ck-transition-duration-control-emphasized) ease;
+
+  & .ck-button {
+    color: var(--ck-color-base-text-light);
+  }
+
+  & .ck-button .ck-button__icon {
+    width: calc(.5 * var(--ck-icon-size));
+    height: calc(.5 * var(--ck-icon-size));
+  }
 }
 
 .ck .ck-thread--remove {
   & .ck-comment {
-    background-color: var(--ck-comment-remove-background-color);
+    background-color: var(--ck-color-comment-remove-background, var(--ck-comment-remove-background-color));
   }
 
   & .ck-thread__input--active {
     &.ck-thread__input {
-      background-color: var(--ck-comment-remove-background-color);
+      background-color: var(--ck-color-comment-remove-background, var(--ck-comment-remove-background-color));
     }
   }
 
   & .ck-thread__comment-count {
-    background-color: var(--ck-comment-remove-background-color);
+    background-color: var(--ck-color-comment-remove-background, var(--ck-comment-remove-background-color));
   }
 
   & .ck-comment__wrapper {
@@ -336,7 +365,7 @@
 .ck .ck-thread__comments {
   z-index: var(--ck-z-default, var(--ck-z-base));
   border-radius: var(--ck-thread-comments-border-radius);
-  background-color: var(--ck-comment-thread-comments-background-color);
+  background-color: var(--ck-color-comment-background, var(--ck-comment-thread-comments-background-color));
   margin: 0;
   padding: 0;
   list-style: none;
@@ -372,11 +401,11 @@
 }
 
 .ck.ck-button.ck-confirm-view-submit {
-  color: var(--ck-button-save-color);
+  color: var(--ck-color-button-save, var(--ck-button-save-color));
 }
 
 .ck.ck-button.ck-confirm-view-cancel {
-  color: var(--ck-button-cancel-color);
+  color: var(--ck-color-button-cancel, var(--ck-button-cancel-color));
 }
 
 :root, :host {
@@ -384,10 +413,14 @@
 }
 
 .ck .ck-comment__input-container {
-  --ck-user-avatar-size: 32px;
-  font-size: var(--ck-font-size-base);
+  --ck-user-avatar-size: 28px;
+  font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
   padding: var(--ck-comment-input-padding);
   display: none;
+
+  & .ck-user {
+    margin-top: calc(var(--ck-spacing-padding) * .8);
+  }
 }
 
 .ck .ck-comment__input-container--active {
@@ -497,12 +530,17 @@
 }
 
 :root, :host {
-  --ck-annotation-counter-icon-size: 16px;
-  --ck-annotation-counter-number-size: 10px;
-  --ck-annotation-counter-comment-color: #fcbf49;
-  --ck-annotation-counter-suggestion-insertion-color: #499167;
-  --ck-annotation-counter-suggestion-deletion-color: #ca3c25;
-  --ck-annotation-counter-suggestion-format-color: var(--ck-color-base-active);
+  --ck-annotation-counter-icon-font-size: var(--ck-annotation-counter-icon-size, 14px);
+  --ck-annotation-counter-icon-left: 3px;
+  --ck-annotation-counter-icon-top: 9px;
+  --ck-annotation-counter-number-size: .642em;
+  --ck-annotation-counter-badge-left: 15px;
+  --ck-annotation-counter-badge-top: 1px;
+  --ck-annotation-counter-badge-gap: 1px;
+  --ck-annotation-counter-badge-size: var(--ck-annotation-counter-icon-font-size);
+  --ck-annotation-counter-color: var(--ck-color-base-text-light);
+  --ck-annotation-counter-hover-color: var(--ck-color-base-text);
+  --ck-annotation-counter-focus-color: var(--ck-color-base-active);
 }
 
 .ck.ck-sidebar--narrow .ck-sidebar-item {
@@ -511,68 +549,71 @@
 }
 
 .ck.ck-sidebar--narrow .ck-annotation-counter {
-  font-size: var(--ck-annotation-counter-icon-size);
-  min-height: unset;
+  font-size: var(--ck-annotation-counter-icon-font-size);
   cursor: pointer;
-  color: gray;
+  color: var(--ck-annotation-counter-color);
   padding: 0;
-}
 
-.ck.ck-sidebar--narrow .ck-annotation-counter:hover {
-  box-shadow: none;
-  color: #4d4d4d;
-  background: none;
-}
-
-.ck.ck-sidebar--narrow .ck-annotation-counter:focus {
-  border-color: var(--ck-input-focus-border-color);
-  box-shadow: var(--ck-interactive-focus-shadow), 0 0;
-  outline: none;
-}
+  &:hover {
+    color: var(--ck-annotation-counter-hover-color);
+    box-shadow: none;
+    background: none;
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge {
-  color: #fff;
-  width: 16px;
-  height: 16px;
-  font-weight: bold;
-  font-size: var(--ck-annotation-counter-number-size);
-  font-family: var(--ck-font-face, var(--ck-font-family));
-  text-shadow: -1px 0 2px #454545, 1px 0 2px #454545;
-  z-index: 1;
-  background: #333;
-  border-radius: 50%;
-  justify-content: center;
-  line-height: 16px;
-  display: flex;
-  position: absolute;
-  top: -6px;
-  right: 0;
-}
+    & .ck-annotation-counter__badge {
+      background: var(--ck-annotation-counter-hover-color);
+    }
+  }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--edit-mode {
-  line-height: 1;
-}
+  &:focus {
+    color: var(--ck-annotation-counter-focus-color);
+    border-color: var(--ck-input-focus-border-color);
+    box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
+    outline: none;
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-insertion, .ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-replace {
-  background: var(--ck-annotation-counter-suggestion-insertion-color);
-}
+    & .ck-annotation-counter__badge {
+      background: var(--ck-annotation-counter-focus-color);
+    }
+  }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-deletion {
-  background: var(--ck-annotation-counter-suggestion-deletion-color);
-}
+  & .ck-icon {
+    --ck-annotation-counter-icon-mask-x: calc(var(--ck-annotation-counter-badge-left) - var(--ck-annotation-counter-icon-left) + calc(var(--ck-annotation-counter-badge-size) / 2));
+    --ck-annotation-counter-icon-mask-y: calc(var(--ck-annotation-counter-badge-top) - var(--ck-annotation-counter-icon-top) + calc(var(--ck-annotation-counter-badge-size) / 2));
+    left: var(--ck-annotation-counter-icon-left);
+    top: var(--ck-annotation-counter-icon-top);
+    mask: radial-gradient(circle at var(--ck-annotation-counter-icon-mask-x) var(--ck-annotation-counter-icon-mask-y),
+			transparent calc(var(--ck-annotation-counter-badge-size) / 2 + var(--ck-annotation-counter-badge-gap)),
+			#000 calc(var(--ck-annotation-counter-badge-size) / 2 + var(--ck-annotation-counter-badge-gap) + .5px));
+    position: absolute;
+  }
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-format {
-  background: var(--ck-annotation-counter-suggestion-format-color);
-}
+  & .ck-annotation-counter__badge {
+    width: var(--ck-annotation-counter-badge-size);
+    height: var(--ck-annotation-counter-badge-size);
+    background: var(--ck-annotation-counter-color);
+    color: #fff;
+    font-weight: bold;
+    font-size: var(--ck-annotation-counter-number-size);
+    font-family: var(--ck-font-face, var(--ck-font-family));
+    left: var(--ck-annotation-counter-badge-left);
+    top: var(--ck-annotation-counter-badge-top);
+    line-height: var(--ck-annotation-counter-badge-size);
+    z-index: 1;
+    border-radius: 50%;
+    justify-content: center;
+    display: flex;
+    position: absolute;
 
-.ck.ck-sidebar--narrow .ck-annotation-counter__badge--comment {
-  background: var(--ck-annotation-counter-comment-color);
+    &.ck-annotation-counter__badge--edit-mode {
+      line-height: 1;
+    }
+  }
 }
 
 :root, :host {
   --ck-annotation-icon-color: var(--ck-color-text);
   --ck-annotation-info-color: var(--ck-color-text);
   --ck-annotation-info-name-color: var(--ck-color-text);
+  --ck-annotation-info-icon-color: var(--ck-color-text-secondary);
   --ck-annotation-info-time-color: var(--ck-color-text-secondary);
   --ck-annotation-button-size: .85em;
   --ck-annotation-dropdown-button-size: 14px;
@@ -583,8 +624,8 @@
 }
 
 .ck .ck-annotation {
-  --ck-user-avatar-size: 32px;
-  font-size: var(--ck-font-size-base);
+  --ck-user-avatar-size: 28px;
+  font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
   animation: annotationFadeInLeft var(--ck-animation-duration-surface-entrance);
   transition: background-color var(--ck-transition-duration-control-emphasized) ease;
   padding: var(--ck-annotation-padding);
@@ -600,7 +641,7 @@
   & .ck-button {
     min-width: unset;
     min-height: unset;
-    color: var(--ck-annotation-icon-color);
+    color: var(--ck-color-annotation-icon, var(--ck-annotation-icon-color));
     border-radius: var(--ck-annotation-button-border-radius);
 
     &:not(.ck-disabled) {
@@ -657,28 +698,37 @@
 .ck .ck-annotation__info {
   min-height: 2.4em;
   margin-bottom: var(--ck-spacing-gap-compact);
-  flex-direction: column;
   grid-area: info;
-  display: flex;
+  grid-template-columns: auto minmax(0, 1fr);
+  display: grid;
 }
 
 .ck .ck-annotation__info-name, .ck .ck-annotation__info-time {
   white-space: nowrap;
+  text-overflow: ellipsis;
   font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
   line-height: var(--ck-line-height-base);
   overflow: hidden;
 }
 
+.ck .ck-annotation__info .ck-icon {
+  font-size: var(--ck-font-size-tiny, var(--ck-font-size-xs));
+  color: var(--ck-annotation-info-icon-color);
+  grid-column: 1;
+  align-self: center;
+  margin-inline-end: var(--ck-spacing-padding-compact);
+}
+
 .ck .ck-annotation__info-name {
   font-weight: 500;
   font-size: var(--ck-font-size-control);
-  color: var(--ck-annotation-info-name-color);
-  text-overflow: ellipsis;
+  color: var(--ck-color-annotation-info, var(--ck-annotation-info-name-color));
+  grid-column: 1 / -1;
 }
 
 .ck .ck-annotation__info-time {
-  color: var(--ck-annotation-info-time-color);
-  flex: none;
+  color: var(--ck-color-annotation-info, var(--ck-annotation-info-time-color));
+  grid-column: 2;
 }
 
 .ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-name, .ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-time {
@@ -698,9 +748,12 @@
 }
 
 .ck .ck-annotation__content-wrapper {
-  width: 100%;
   grid-area: content;
-  padding-inline-end: var(--ck-annotation-content-wrapper-padding-inline-end);
+  width: 100%;
+
+  &:not(:has(.ck-comment__input-wrapper)), & .ck-comment__input-wrapper .ck-comment__input {
+    padding-inline-end: var(--ck-annotation-content-wrapper-padding-inline-end);
+  }
 }
 
 @keyframes annotationFadeInLeft {
@@ -747,7 +800,7 @@
 
 .ck.ck-annotation-wrapper {
   border-radius: var(--ck-annotation-wrapper-border-radius);
-  background: var(--ck-annotation-wrapper-background-color);
+  background: var(--ck-color-annotation-wrapper-background, var(--ck-annotation-wrapper-background-color));
   border: var(--ck-border-surface);
   outline: 0;
 }
@@ -786,7 +839,7 @@
 
   & .ck-comments-archive__header {
     max-height: 40px;
-    line-height: var(--ck-font-size-base);
+    line-height: var(--ck-font-size-normal, var(--ck-font-size-base));
     border-bottom: var(--ck-border-divider);
     font-weight: bold;
   }