@ckeditor/ckeditor5-comments 36.0.1 → 37.0.0-rc.0

package/src/index.d.ts

@@ -0,0 +1,19 @@
+export { default as Comments } from './comments';
+export { default as CommentsOnly } from './comments';
+export { default as CommentsUI } from './comments/commentsui';
+export { default as CommentsRepository, CommentThread, Comment } from './comments/commentsrepository';
+export { default as CommentThreadController } from './comments/ui/commentthreadcontroller';
+export { default as Annotations } from './annotations/annotations';
+export { default as AnnotationsUIs } from './annotations/annotationsuis';
+export { default as EditorAnnotations } from './annotations/editorannotations';
+export { default as InlineAnnotations } from './annotations/inlineannotations';
+export { default as WideSidebar } from './annotations/widesidebar';
+export { default as NarrowSidebar } from './annotations/narrowsidebar';
+export { default as AnnotationView } from './annotations/view/annotationview';
+export { default as BaseCommentView } from './comments/ui/view/basecommentview';
+export { default as BaseCommentThreadView } from './comments/ui/view/basecommentthreadview';
+export { default as CommentsListView } from './comments/ui/view/commentslistview';
+export { default as CommentView } from './comments/ui/view/commentview';
+export { default as CommentThreadInputView } from './comments/ui/view/commentthreadinputview';
+export type { CommentsConfig, SidebarConfig } from './config';
+import './augmentation';

package/src/index.js

@@ -20,4 +20,4 @@
  *
  *
  */
-export{default as Comments}from'./comments';export{default as CommentsOnly}from'./comments';export{default as Annotations}from'./annotations/annotations';export{default as AnnotationsUIs}from'./annotations/annotationsuis';export{default as InlineAnnotations}from'./annotations/inlineannotations';export{default as WideSidebar}from'./annotations/widesidebar';export{default as NarrowSidebar}from'./annotations/narrowsidebar';export{default as BaseCommentView}from'./comments/ui/view/basecommentview';export{default as BaseCommentThreadView}from'./comments/ui/view/basecommentthreadview';
+export{default as Comments}from'./comments';export{default as CommentsOnly}from'./comments';export{default as CommentsUI}from'./comments/commentsui';export{default as CommentsRepository,CommentThread,Comment}from'./comments/commentsrepository';export{default as CommentThreadController}from'./comments/ui/commentthreadcontroller';export{default as Annotations}from'./annotations/annotations';export{default as AnnotationsUIs}from'./annotations/annotationsuis';export{default as EditorAnnotations}from'./annotations/editorannotations';export{default as InlineAnnotations}from'./annotations/inlineannotations';export{default as WideSidebar}from'./annotations/widesidebar';export{default as NarrowSidebar}from'./annotations/narrowsidebar';export{default as AnnotationView}from'./annotations/view/annotationview';export{default as BaseCommentView}from'./comments/ui/view/basecommentview';export{default as BaseCommentThreadView}from'./comments/ui/view/basecommentthreadview';export{default as CommentsListView}from'./comments/ui/view/commentslistview';export{default as CommentView}from'./comments/ui/view/commentview';export{default as CommentThreadInputView}from'./comments/ui/view/commentthreadinputview';import'./augmentation';

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

@@ -0,0 +1,5 @@
+/**
+ * @module comments/utils/common-translations
+ */
+import type { Locale } from 'ckeditor5/src/utils';
+export declare function getTranslation(locale: Locale, id: string, values?: string | Array<string> | number): string;

package/src/utils/common-translations.js

@@ -20,4 +20,4 @@
  *
  *
  */
-export function getTranslation(_0x5209e8,_0x2f6b20,_0x5e89e3){const t=_0x5209e8['t'];switch(_0x2f6b20){case'PENDING_ACTION_COMMENT_THREAD':return t({'string':'Unsaved\x20change\x20in\x20comment\x20thread.','id':'PENDING_ACTION_COMMENT_THREAD'});case'Comment':return t('Comment');case'Reply...':return t('Reply...');case'Write\x20a\x20comment...':return t('Write\x20a\x20comment...');case'Comment\x20editor':return t('Comment\x20editor');case'Delete\x20comment\x20thread?':return t('Delete\x20comment\x20thread?');case'Delete\x20comment?':return t('Delete\x20comment?');case'Cancel':return t('Cancel');case'Edit':return t('Edit');case'Remove':return t('Remove');case'Submit':return t('Submit');case'NUMBER_OF_COMMENTS':return t({'string':'%0\x20Comment','plural':'%0\x20Comments','id':'NUMBER_OF_COMMENTS'},_0x5e89e3);case'TOO_LONG_COMMENT_ALERT':return t({'string':'Comment\x20content\x20is\x20too\x20long.\x20Your\x20comment\x20has\x20%0\x20characters\x20but\x20the\x20limit\x20is\x20%1\x20characters.','id':'TOO_LONG_COMMENT_ALERT'},_0x5e89e3);case'EXTERNAL_COMMENT':return t({'string':'This\x20comment\x20comes\x20from\x20an\x20external\x20source.','id':'EXTERNAL_COMMENT'});case'EXTERNAL_IMPORT_WORD_COMMENT':return t({'string':'This\x20comment\x20comes\x20from\x20an\x20imported\x20Word\x20file.','id':'EXTERNAL_IMPORT_WORD_COMMENT'});case'EXTERNAL_AVATAR':return t({'string':'Displayed\x20author\x20name\x20comes\x20from\x20external\x20source\x20(added\x20by\x20%0)','id':'EXTERNAL_AVATAR'},_0x5e89e3);case'EXTERNAL_IMPORT_WORD_AVATAR':return t({'string':'Displayed\x20author\x20name\x20comes\x20from\x20a\x20Word\x20document\x20imported\x20by\x20%0','id':'EXTERNAL_IMPORT_WORD_AVATAR'},_0x5e89e3);}}
+export function getTranslation(_0x325b1f,_0x28a934,_0x2297b7){const t=_0x325b1f['t'];switch(_0x28a934){case'PENDING_ACTION_COMMENT_THREAD':return t({'string':'Unsaved\x20change\x20in\x20comment\x20thread.','id':'PENDING_ACTION_COMMENT_THREAD'});case'Comment':return t('Comment');case'Reply...':return t('Reply...');case'Reply\x20to\x20reopen\x20discussion...':return t('Reply\x20to\x20reopen\x20discussion...');case'Write\x20a\x20comment...':return t('Write\x20a\x20comment...');case'Comment\x20was\x20made\x20on\x20an\x20element':return t('Comment\x20was\x20made\x20on\x20an\x20element');case'Comment\x20editor':return t('Comment\x20editor');case'Delete\x20comment\x20thread?':return t('Delete\x20comment\x20thread?');case'Delete\x20comment?':return t('Delete\x20comment?');case'Marked\x20as\x20resolved':return t('Marked\x20as\x20resolved');case'Show\x20more\x20items':return t('Show\x20more\x20items');case'Cancel':return t('Cancel');case'Edit':return t('Edit');case'Resolve':return t('Resolve');case'Reopen':return t('Reopen');case'Remove':return t('Remove');case'Submit':return t('Submit');case'NUMBER_OF_COMMENTS':return t({'string':'%0\x20Comment','plural':'%0\x20Comments','id':'NUMBER_OF_COMMENTS'},_0x2297b7);case'TOO_LONG_COMMENT_ALERT':return t({'string':'Comment\x20content\x20is\x20too\x20long.\x20Your\x20comment\x20has\x20%0\x20characters\x20but\x20the\x20limit\x20is\x20%1\x20characters.','id':'TOO_LONG_COMMENT_ALERT'},_0x2297b7);case'EXTERNAL_COMMENT':return t({'string':'This\x20comment\x20comes\x20from\x20an\x20external\x20source.','id':'EXTERNAL_COMMENT'});case'EXTERNAL_IMPORT_WORD_COMMENT':return t({'string':'This\x20comment\x20comes\x20from\x20an\x20imported\x20Word\x20file.','id':'EXTERNAL_IMPORT_WORD_COMMENT'});case'EXTERNAL_AVATAR':return t({'string':'Displayed\x20author\x20name\x20comes\x20from\x20external\x20source\x20(added\x20by\x20%0)','id':'EXTERNAL_AVATAR'},_0x2297b7);case'EXTERNAL_IMPORT_WORD_AVATAR':return t({'string':'Displayed\x20author\x20name\x20comes\x20from\x20a\x20Word\x20document\x20imported\x20by\x20%0','id':'EXTERNAL_IMPORT_WORD_AVATAR'},_0x2297b7);case'COMMENTS_ARCHIVE':return t({'string':'Comments\x20archive','id':'COMMENTS_ARCHIVE'});case'EMPTY_COMMENTS_ARCHIVE':return t({'string':'There\x20are\x20no\x20archived\x20comment\x20threads.','id':'EMPTY_COMMENTS_ARCHIVE'});default:return'';}}

package/src/utils/createmutationobserver.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @module comments/annotations/createmutationobserver
+ */
+/**
+ * Creates mutation observer to observe changes that might cause height change.
+ *
+ * @param callback Callback executed after throttled mutations.
+ */
+export default function createMutationObserver(callback: (...args: Array<any>) => unknown): MutationObserver;
+export interface MutationObserver {
+    attach: (element: Node) => void;
+    detach: () => void;
+}

package/src/utils/createmutationobserver.js

@@ -20,4 +20,4 @@
  *
  *
  */
-const _0x1644=['disconnect','attributeName','attributes','type','observe','childList','cancel','class'];(function(_0x5496d9,_0x1644e1){const _0x4b0532=function(_0x305d02){while(--_0x305d02){_0x5496d9['push'](_0x5496d9['shift']());}};_0x4b0532(++_0x1644e1);}(_0x1644,0x1c7));const _0x4b05=function(_0x5496d9,_0x1644e1){_0x5496d9=_0x5496d9-0x0;let _0x4b0532=_0x1644[_0x5496d9];return _0x4b0532;};import{throttle as _0x418539}from'lodash-es';export default function lt(_0x3c8558){const _0x446637=_0x418539(_0x3c8558,0x1e),_0x4310f6=new MutationObserver(_0x4c0d51=>{for(const _0x32d601 of _0x4c0d51)(_0x4b05('0x3')==_0x32d601[_0x4b05('0x4')]&&_0x4b05('0x0')==_0x32d601[_0x4b05('0x2')]||_0x4b05('0x6')==_0x32d601[_0x4b05('0x4')])&&_0x446637();});return{'attach'(_0x27e656){_0x4310f6[_0x4b05('0x5')](_0x27e656,{'attributes':!0x0,'childList':!0x0,'subtree':!0x0});},'detach'(){_0x4310f6[_0x4b05('0x1')](),_0x446637[_0x4b05('0x7')]();}};}
+const _0x4e8c=['childList','attributes','observe','cancel','disconnect','type','attributeName'];(function(_0x5af9e9,_0x4e8cbe){const _0x417088=function(_0x3af56c){while(--_0x3af56c){_0x5af9e9['push'](_0x5af9e9['shift']());}};_0x417088(++_0x4e8cbe);}(_0x4e8c,0x1e2));const _0x4170=function(_0x5af9e9,_0x4e8cbe){_0x5af9e9=_0x5af9e9-0x0;let _0x417088=_0x4e8c[_0x5af9e9];return _0x417088;};import{throttle as _0x365e48}from'lodash-es';export default function Lt(_0x3e9987){const _0x1e55d9=_0x365e48(_0x3e9987,0x1e),_0x2a2485=new MutationObserver(_0x1fbfbc=>{for(const _0x2f13a1 of _0x1fbfbc)(_0x4170('0x2')==_0x2f13a1[_0x4170('0x6')]&&'class'==_0x2f13a1[_0x4170('0x0')]||_0x4170('0x1')==_0x2f13a1[_0x4170('0x6')])&&_0x1e55d9();});return{'attach'(_0x25ab4f){_0x2a2485[_0x4170('0x3')](_0x25ab4f,{'attributes':!0x0,'childList':!0x0,'subtree':!0x0});},'detach'(){_0x2a2485[_0x4170('0x5')](),_0x1e55d9[_0x4170('0x4')]();}};}

package/theme/annotation.css

@@ -25,6 +25,7 @@
 	animation: fadeInLeft 300ms;
 	transition: background-color 300ms ease;
 	padding: var(--ck-spacing-standard);
+	white-space: normal;
 }
 
 .ck .ck-annotation {

package/theme/comment.css

@@ -64,6 +64,12 @@
 	}
 }
 
+.ck .ck-comment--info {
+	& .ck-comment__content {
+		font-style: italic;
+	}
+}
+
 .ck .ck-comment__main {
 	& .ck-comment__input-wrapper {
 		display: flex;
@@ -130,3 +136,28 @@ We are styling resetting list-style because of parent <ul> element. */
 	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: 0;
+
+		& .ck-list__item {
+			font-size: 1.2em;
+			color: var(--ck-color-base-text);
+			min-width: auto;
+
+			& .ck-button {
+				color: var(--ck-color-text);
+			}
+
+			& .ck-button__label {
+				margin: 0 var(--ck-spacing-large);
+			}
+	 	}
+	}
+}

package/theme/commentsarchive.css

@@ -0,0 +1,40 @@
+/*
+ * 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-2022, CKSource Holding sp. z o.o. All rights reserved.
+ */
+
+.ck .ck-comments-archive {
+	width: 315px;
+	max-height: 450px;
+	overflow: auto;
+	box-sizing: content-box;
+
+	& .ck-annotation {
+		animation: none;
+	}
+
+	& .ck-comments-archive__header, & .ck-comments-archive__content {
+		padding: var( --ck-spacing-large );
+	}
+
+	& .ck-comments-archive__header {
+		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

@@ -9,6 +9,9 @@
 :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: #FDFADF;
+	--ck-color-thread-header-active-background: #FFF4A8;
 }
 
 .ck .ck-thread {
@@ -21,6 +24,66 @@
 	border-radius: var(--ck-border-radius);
 }
 
+.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;
+		}
+
+		&.overlay {
+			display: inline-block;
+			position: absolute;
+			top: 0;
+			z-index: 2;
+
+			background: var(--ck-color-base-background);
+			box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
+			border-radius: 2px;
+			white-space: normal;
+			box-sizing: border-box;
+		}
+	}
+}
+
 /* Handle visibility of vertical line below avatars. */
 .ck .ck-thread__comments .ck-comment__wrapper {
 	&:last-of-type {
@@ -41,7 +104,6 @@
 	margin: 0;
 	padding: 0;
 	border-radius: var(--ck-border-radius);
-	overflow: hidden;
 }
 
 .ck .ck-thread__comment-count {
@@ -73,6 +135,10 @@
 		display: block;
 		background-color: var(--ck-color-comment-background);
 	}
+
+	& .ck-thread__header {
+		background-color: var(--ck-color-thread-header-active-background);
+	}
 }
 
 .ck .ck-thread--remove {
@@ -148,6 +214,7 @@
 .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);

package/theme/icons/add-comment.svg

@@ -8,4 +8,4 @@
 
 !-->
 
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 1.5h12A3.5 3.5 0 0 1 19.5 5v8l-.005.192a3.501 3.501 0 0 1-2.927 3.262l-.062.008v1.813a1.5 1.5 0 0 1-2.193 1.33l-.371-.193-.38-.212a13.452 13.452 0 0 1-3.271-2.63l-.062-.07H4A3.5 3.5 0 0 1 .5 13V5A3.5 3.5 0 0 1 4 1.5ZM4 3a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h6.924a11.916 11.916 0 0 0 3.71 3.081l.372.194v-3.268L14.962 15H16a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4Zm1.55 5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm4.5 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm4.5 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z"/></svg>
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 1.5h12A3.5 3.5 0 0 1 19.5 5v8l-.005.192a3.5 3.5 0 0 1-2.927 3.262l-.062.008v1.813a1.5 1.5 0 0 1-2.193 1.33l-.371-.193-.38-.212a13.452 13.452 0 0 1-3.271-2.63l-.062-.07H4A3.5 3.5 0 0 1 .5 13V5A3.5 3.5 0 0 1 4 1.5ZM4 3a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h6.924a11.917 11.917 0 0 0 3.71 3.081l.372.194v-3.268L14.962 15H16a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4Z"/><path d="M9.75 5a.75.75 0 0 0-.75.75v2.5H6.5a.75.75 0 0 0 0 1.5H9v2.5a.75.75 0 0 0 1.5 0v-2.5H13a.75.75 0 0 0 0-1.5h-2.5v-2.5A.75.75 0 0 0 9.75 5Z"/></svg>

package/theme/icons/comments-archive.svg

@@ -0,0 +1,11 @@
+<!--
+
+ 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-2022, CKSource Holding sp. z o.o. All rights reserved.
+
+!-->
+
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M14 3.5A3.5 3.5 0 0 1 17.5 7v6l-.005.192a3.501 3.501 0 0 1-2.927 3.262l-.062.008v1.813a1.5 1.5 0 0 1-2.193 1.33l-.37-.193-.38-.212a13.452 13.452 0 0 1-3.272-2.63l-.062-.07-4.729-.046a3.5 3.5 0 0 1-3.5-3.5v-6a3.5 3.5 0 0 1 3.5-3.5L14 3.5ZM3.5 4.954a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2L8.924 15a11.917 11.917 0 0 0 3.71 3.081l.372.194v-3.268L12.962 15H14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2L3.5 4.954Z"/><path d="M16.5.5h-10a3.5 3.5 0 0 0-3.162 2h1.84A2 2 0 0 1 6.5 2h10a2 2 0 0 1 2 2v8.873a3.502 3.502 0 0 0 1.495-2.681L20 10V4A3.5 3.5 0 0 0 16.5.5Z"/><path clip-rule="evenodd" d="M12.013 7.453a.75.75 0 0 1 .034 1.06l-3.75 4a.75.75 0 0 1-1.045.048l-2.25-2a.75.75 0 0 1 .996-1.122l1.704 1.515 3.25-3.467a.75.75 0 0 1 1.061-.034Z"/></svg>

package/theme/icons/undo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m5.042 9.367 2.189 1.837a.75.75 0 0 1-.965 1.149l-3.788-3.18a.747.747 0 0 1-.21-.284.75.75 0 0 1 .17-.945L6.23 4.762a.75.75 0 1 1 .964 1.15L4.863 7.866h8.917A.75.75 0 0 1 14 7.9a4 4 0 1 1-1.477 7.718l.344-1.489a2.5 2.5 0 1 0 1.094-4.73l.008-.032H5.042z"/></svg>

package/theme/sidebar.css

@@ -47,6 +47,10 @@
 .ck.ck-annotation-wrapper--active {
 	& .ck-annotation__actions {
 		opacity: 1;
+
+		& .ck-comment--resolve {
+			color: var(--ck-color-button-save);
+		}
 	}
 
 	& .ck-suggestion--accept {