@ckeditor/ckeditor5-comments 49.0.0-alpha.6 → 49.0.0-alpha.7

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-editor.css

@@ -11,6 +11,7 @@
   --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);
 }
@@ -81,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 {
@@ -292,7 +307,7 @@
 }
 
 .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-color-comment-count, var(--ck-color-base-text-light));
   font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
@@ -398,10 +413,14 @@
 }
 
 .ck .ck-comment__input-container {
-  --ck-user-avatar-size: 32px;
+  --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 {
@@ -511,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 {
@@ -525,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;
-}
+  &:hover {
+    color: var(--ck-annotation-counter-hover-color);
+    box-shadow: none;
+    background: none;
 
-.ck.ck-sidebar--narrow .ck-annotation-counter:focus {
-  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 {
-  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;
@@ -597,7 +624,7 @@
 }
 
 .ck .ck-annotation {
-  --ck-user-avatar-size: 32px;
+  --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;
@@ -671,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-color-annotation-info, var(--ck-annotation-info-name-color));
-  text-overflow: ellipsis;
+  grid-column: 1 / -1;
 }
 
 .ck .ck-annotation__info-time {
   color: var(--ck-color-annotation-info, var(--ck-annotation-info-time-color));
-  flex: none;
+  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 {

package/dist/index.css

@@ -11,6 +11,7 @@
   --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);
 }
@@ -81,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 {
@@ -292,7 +307,7 @@
 }
 
 .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-color-comment-count, var(--ck-color-base-text-light));
   font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
@@ -398,10 +413,14 @@
 }
 
 .ck .ck-comment__input-container {
-  --ck-user-avatar-size: 32px;
+  --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 {
@@ -511,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 {
@@ -525,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;
-}
+  &:hover {
+    color: var(--ck-annotation-counter-hover-color);
+    box-shadow: none;
+    background: none;
 
-.ck.ck-sidebar--narrow .ck-annotation-counter:focus {
-  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 {
-  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;
@@ -597,7 +624,7 @@
 }
 
 .ck .ck-annotation {
-  --ck-user-avatar-size: 32px;
+  --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;
@@ -671,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-color-annotation-info, var(--ck-annotation-info-name-color));
-  text-overflow: ellipsis;
+  grid-column: 1 / -1;
 }
 
 .ck .ck-annotation__info-time {
   color: var(--ck-color-annotation-info, var(--ck-annotation-info-time-color));
-  flex: none;
+  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 {