@ckeditor/ckeditor5-comments 41.3.1 → 41.4.0-alpha.0

package/dist/index-content.css

@@ -0,0 +1,4 @@
+/**
+ * @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
+ */

package/dist/index-editor.css

@@ -0,0 +1,596 @@
+/**
+ * @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
+ */
+:root {
+--ck-color-comment-marker: hsl(55, 98%, 83%);
+--ck-color-comment-marker-active: hsl(55, 98%, 68%);
+--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);
+--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-inline-annotation-container-width: 300px;
+--ck-inline-annotation-container-max-height: 400px;
+--ck-color-annotation-wrapper-background: hsl(0, 0%, 100%);
+--ck-color-annotation-wrapper-drop-shadow: 0 1px 1px 1px hsl(0, 0%, 90%);
+--ck-annotation-counter-icon-size: 16px;
+--ck-annotation-counter-number-size: 10px;
+--ck-color-annotation-counter-comment: hsl(55, 98%, 48%);
+--ck-color-annotation-counter-suggestion-insertion: hsl(128, 62%, 60%);
+--ck-color-annotation-counter-suggestion-deletion: hsl(345, 62%, 60%);
+--ck-color-annotation-counter-suggestion-format: hsl(191, 62%, 60%);
+--ck-color-annotation-icon: hsl(0, 0%, 50%);
+--ck-color-annotation-info: hsl(0, 0%, 46%);
+--ck-annotation-button-size: 0.85em;
+}
+.ck-comment-marker {
+background: var(--ck-color-comment-marker);
+border-top: 3px solid transparent;
+border-bottom: 3px solid transparent;
+}
+.ck-comment-marker.ck-widget {
+background-color: transparent;
+border: 3px solid var(--ck-color-comment-marker);
+}
+.ck-comment-marker--active {
+background: var(--ck-color-comment-marker-active);
+}
+.ck-comment-marker--active .ck-comment-marker {
+background: var(--ck-color-comment-marker-active);
+}
+.ck-comment-marker--active.ck-widget {
+border-color: var(--ck-color-comment-marker-active);
+}
+.ck-comment-marker--active.ck-widget .ck-comment-marker {
+background-color: var(--ck-color-comment-marker);
+}
+.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 .ck-comments-archive .ck-annotation {
+animation: none;
+}
+.ck .ck-comments-archive .ck-comments-archive__header {
+overflow: auto;
+max-height: 410px;
+padding: var( --ck-spacing-large );
+}
+.ck .ck-comments-archive .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 .ck-comments-archive .ck-comments-archive__content .ck-annotation-wrapper:not(:last-child) {
+margin-bottom: var( --ck-spacing-large );
+}
+.ck .ck-comments-archive .ck-comments-archive__info {
+text-align: center;
+font-style: italic;
+color: var( --ck-color-annotation-info );
+}
+.ck .ck-comment__wrapper {
+font-size: var(--ck-font-size-base);
+position: relative;
+outline: 0;
+transition: all 300ms linear;
+}
+.ck .ck-comment__wrapper.ck-comment--remove-confirmation {
+transform: translate3d( -100%, 0, 0 );
+}
+.ck .ck-comment__wrapper:first-of-type {
+border-top-right-radius: var(--ck-border-radius);
+border-top-left-radius: var(--ck-border-radius);
+}
+.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 )
+
+			
+			- 2px
+		);
+width: 4px;
+height: 100%;
+background-color: var(--ck-color-comment-separator);
+}
+.ck .ck-comment--remove {
+background-color: var(--ck-color-comment-remove-background);
+}
+.ck .ck-comment--remove::after {
+opacity: 0;
+}
+.ck .ck-comment--edit {
+background-color: var(--ck-color-comment-input-background);
+}
+.ck .ck-comment--edit::after {
+opacity: 0;
+}
+.ck .ck-comment--edit .ck-comment__input-actions {
+margin-top: var(--ck-spacing-standard);
+}
+.ck .ck-comment__content {
+word-break: break-word;
+}
+.ck .ck-comment--info .ck-comment__content {
+font-style: italic;
+}
+.ck .ck-comment p {
+margin: 0;
+}
+.ck .ck-comment ul {
+padding-left: 10px;
+margin-left: 10px;
+}
+.ck .ck-comment ul {
+list-style: disc;
+margin-bottom: 5px;
+margin-top: 0;
+}
+.ck .ck-comment ul ul {
+list-style: circle;
+}
+.ck .ck-comment ul ul ul {
+list-style: square;
+}
+.ck .ck-comment__main .ck-comment__input-wrapper {
+display: flex;
+flex-direction: column;
+position: relative;
+transition: all 300ms linear;
+}
+.ck .ck-comment__main .ck-comment__input-wrapper .ck-comment__input {
+padding: 0;
+}
+.ck .ck-comment__user {
+z-index: var(--ck-z-default);
+}
+.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit {
+background: var(--ck-color-base-action);
+color: hsl(0, 0%, 100%);
+}
+.ck-comment__input-actions .ck.ck-button.ck-comment__input-actions--submit: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 .ck-comment .ck-dropdown .ck-list {
+margin: 0;
+padding: 0;
+}
+.ck .ck-comment .ck-dropdown .ck-list .ck-list__item {
+font-size: 1.2em;
+color: var(--ck-color-base-text);
+min-width: auto;
+}
+.ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button {
+color: var(--ck-color-text);
+}
+.ck .ck-comment .ck-dropdown .ck-list .ck-list__item .ck-button__label {
+margin: 0 var(--ck-spacing-large);
+}
+.ck .ck-thread {
+width: 100%;
+color: var(--ck-color-base-text);
+outline: 0;
+background-color: var(--ck-color-base-background);
+overflow: hidden;
+transition: all 300ms ease;
+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 .ck-thread__header .ck-button {
+font-size: var(--ck-annotation-button-size);
+}
+.ck .ck-thread__header .ck-context-wrapper {
+display: inline-flex;
+width: 100%;
+min-width: 0;
+height: 25px;
+position: relative;
+padding-right: var(--ck-spacing-large);
+}
+.ck .ck-thread__header .ck-context {
+display: flex;
+white-space: nowrap;
+overflow: hidden;
+width: 100%;
+padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+}
+.ck .ck-thread__header .ck-context.ck-context--quotes::after {
+display: inline-block;
+content: '"';
+}
+.ck .ck-thread__header .ck-context .ck-context__type {
+font-weight: bold;
+padding-right: var(--ck-spacing-standard);
+}
+.ck .ck-thread__header .ck-context .ck-context__value {
+overflow: hidden;
+text-overflow: ellipsis;
+}
+.ck .ck-thread__header .ck-context.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 {
+--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;
+transition: background-color 300ms ease;
+}
+.ck .ck-thread__comment-count::before {
+content: '\25BC';
+margin-right: var(--ck-spacing-small);
+}
+.ck .ck-thread--remove .ck-comment {
+background-color: var(--ck-color-comment-remove-background);
+}
+.ck .ck-thread--remove .ck-thread__input--active {
+background-color: var(--ck-color-base-background);
+}
+.ck .ck-thread--remove .ck-thread__input--active.ck-thread__input {
+background-color: var(--ck-color-comment-remove-background);
+}
+.ck .ck-thread--remove .ck-thread__comment-count {
+background-color: var(--ck-color-comment-remove-background);
+}
+.ck .ck-thread--remove .ck-comment__wrapper .ck-comment::after {
+opacity: 0;
+}
+.ck .ck-thread__comments .ck-comment__wrapper:last-of-type .ck-comment::after {
+opacity: 0;
+}
+.ck .ck-thread__container {
+transition: transform 300ms ease;
+}
+.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 {
+width: calc( 100% - var(--ck-user-avatar-size) );
+white-space: normal;
+transition: background-color 200ms ease-in-out;
+border-radius: var(--ck-border-radius);
+min-height: 38px;
+}
+.ck .ck-thread--active .ck-comment__options.ck-dropdown {
+display: block;
+}
+.ck .ck-thread--active .ck-thread__input {
+display: block;
+background-color: var(--ck-color-comment-background);
+}
+.ck .ck-thread--active .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);
+}
+.ck .ck-thread--remove-confirmation .ck-thread__container {
+transform: translate3d( -100%, 0, 0 );
+}
+.ck.ck-button.ck-thread__remove-confirm-submit {
+color: var(--ck-color-button-save);
+}
+.ck.ck-button.ck-thread__remove-confirm-cancel {
+color: var(--ck-color-button-cancel);
+}
+.ck .ck-thread__remove-confirm {
+font-size: var(--ck-font-size-base);
+position: absolute;
+display: flex;
+justify-content: flex-start;
+top: 0;
+left: 100%;
+width: 100%;
+height: 100%;
+background-color: var(--ck-color-comment-remove-background);
+}
+.ck .ck-thread__remove-confirm .ck-thread__remove-confirm-inner {
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+padding-top: var(--ck-spacing-standard);
+height: 100%;
+width: 100%;
+max-height: 400px;
+}
+.ck .ck-thread__remove-confirm p {
+font-weight: bold;
+margin: 0;
+}
+.ck .ck-comment__input-container {
+--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);
+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;
+}
+.ck .ck-comment__input:focus {
+outline: none;
+}
+.ck .ck-comment__input .ck-editor__editable_inline {
+--ck-focus-ring: none;
+--ck-inner-shadow: none;
+padding: 0;
+overflow: visible;
+border: 0;
+background-color: transparent;
+word-break: break-word;
+}
+.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 .ck-comment__input-actions.ck-comment__input-actions--active {
+display: block;
+}
+.ck .ck-comment__input-actions .ck.ck-button {
+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 .ck-comment__input-actions .ck-button.ck-disabled {
+opacity: .3;
+}
+.ck .ck-comment__input-textarea {
+display: block;
+}
+.ck.ck-balloon-panel .ck-annotation-wrapper {
+position: static;
+width: var(--ck-inline-annotation-container-width);
+max-height: var(--ck-inline-annotation-container-max-height);
+overflow-y: auto;
+overscroll-behavior-y: contain;
+overflow-x: hidden;
+}
+.ck.ck-balloon-panel .ck-annotation {
+animation: none;
+}
+.ck.ck-balloon-panel .ck-annotation-wrapper * {
+white-space: normal;
+}
+.ck.ck-balloon-panel .ck-annotation-wrapper strong {
+font-weight: bold;
+}
+.ck.ck-balloon-panel .ck-annotation-wrapper i {
+font-style: italic;
+}
+.ck.ck-sidebar {
+position: relative;
+transition: min-height 250ms ease;
+outline: 0;
+}
+.ck-sidebar-item {
+position: absolute;
+width: 100%;
+transition: top 300ms ease, box-shadow 300ms ease;
+}
+.ck-sidebar-item--no-animation {
+transition: top 0s ease !important;
+}
+.ck.ck-annotation-wrapper {
+outline: 0;
+border-radius: var(--ck-border-radius);
+background: var(--ck-color-annotation-wrapper-background);
+box-shadow: var(--ck-color-annotation-wrapper-drop-shadow);
+}
+.ck.ck-annotation-wrapper--active .ck-annotation__actions {
+opacity: 1;
+}
+.ck.ck-annotation-wrapper--active .ck-annotation__actions .ck-comment--resolve {
+color: var(--ck-color-button-save);
+}
+.ck.ck-annotation-wrapper--active .ck-suggestion--accept {
+color: var(--ck-color-button-save);
+}
+.ck.ck-annotation-wrapper--active .ck-suggestion--discard {
+color: var(--ck-color-button-cancel);
+}
+.ck.ck-annotation-wrapper:not(.ck-annotation-wrapper--active):hover {
+box-shadow: var(--ck-drop-shadow);
+}
+.ck.ck-annotation-wrapper--active {
+box-shadow: var(--ck-drop-shadow-active);
+}
+.ck.ck-sidebar--narrow .ck-sidebar-item {
+display: flex;
+justify-content: center;
+}
+.ck.ck-sidebar--narrow .ck-annotation-counter {
+font-size: var(--ck-annotation-counter-icon-size);
+min-height: unset;
+padding: 0;
+cursor: pointer;
+color: hsl(0, 0%, 50%);
+}
+.ck.ck-sidebar--narrow .ck-annotation-counter:hover {
+background: transparent;
+box-shadow: none;
+color: hsl(0, 0%, 30%);
+}
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge {
+border-radius: 50%;
+position: absolute;
+width: 16px;
+height: 16px;
+background: hsl(0, 0%, 20%);
+font-weight: bold;
+color: hsl(0, 0%, 100%);
+font-size: var(--ck-annotation-counter-number-size);
+font-family: var(--ck-font-face);
+right: 0;
+top: -6px;
+text-shadow: -1px 0 2px hsl(0, 0%, 27%), 1px 0 2px hsl(0, 0%, 27%);
+display: flex;
+justify-content: center;
+line-height: 16px;
+z-index: 1;
+}
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--edit-mode {
+line-height: 1;
+}
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-insertion {
+background: var(--ck-color-annotation-counter-suggestion-insertion);
+}
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-deletion {
+background: var(--ck-color-annotation-counter-suggestion-deletion);
+}
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--suggestion-format {
+background: var(--ck-color-annotation-counter-suggestion-format);
+}
+.ck.ck-sidebar--narrow .ck-annotation-counter__badge--comment {
+background: var(--ck-color-annotation-counter-comment);
+}
+.ck .ck-annotation {
+--ck-user-avatar-size: 28px;
+font-size: var(--ck-font-size-base);
+display: flex;
+position: relative;
+animation: fadeInLeft 300ms;
+transition: background-color 300ms ease;
+padding: var(--ck-spacing-standard);
+white-space: normal;
+}
+.ck .ck-annotation .ck-button {
+background-color: transparent;
+min-width: unset;
+min-height: unset;
+cursor: pointer;
+color: var(--ck-color-annotation-icon);
+border-radius: var(--ck-border-radius);
+font-size: var(--ck-annotation-button-size);
+}
+.ck .ck-annotation .ck-user {
+font-size: 0.85em;
+}
+.ck .ck-annotation__main {
+display: grid;
+grid-template-areas: "info actions"
+		"content content";
+grid-template-columns: minmax(0, 1fr) auto;
+width: calc( 100% - var(--ck-user-avatar-size) );
+transition: all 200ms ease;
+border-radius: var(--ck-border-radius);
+padding-left: var(--ck-spacing-standard);
+}
+.ck .ck-annotation__main p {
+margin: 0;
+white-space: normal;
+font-size: var(--ck-font-size-base);
+line-height: 1.5em;
+}
+.ck .ck-annotation__user {
+margin-top: var(--ck-spacing-small);
+}
+.ck .ck-annotation__info {
+grid-area: info;
+display: flex;
+align-items: center;
+color: var(--ck-color-annotation-info);
+min-height: 2.4em;
+}
+.ck .ck-annotation__info-name {
+font-weight: bold;
+white-space: nowrap;
+overflow: hidden;
+color: var(--ck-color-annotation-info);
+font-size: var(--ck-font-size-small);
+}
+.ck .ck-annotation__info-name {
+text-overflow: ellipsis;
+}
+.ck .ck-annotation__info-time {
+flex: 0 0 auto;
+margin: 0 var(--ck-spacing-large);
+}
+.ck.ck-balloon-panel .ck-annotation-wrapper .ck-annotation__info-name {
+white-space: nowrap;
+}
+.ck .ck-annotation__actions {
+grid-area: actions;
+transition: opacity 200ms ease;
+opacity: 0.5;
+}
+.ck .ck-annotation__content-wrapper {
+grid-area: content;
+width: 100%;
+}