@ckeditor/ckeditor5-document-outline 48.8.1-alpha.4 → 49.0.0-alpha.0

package/dist/index.css

@@ -2,8 +2,8 @@
  * @license 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-document-outline-padding: var(--ck-spacing-large);
+:root, :host {
+  --ck-document-outline-padding: var(--ck-spacing-padding-comfortable);
   --ck-document-outline-base-font-size: .875em;
   --ck-document-outline-placeholder-color: var(--ck-color-engine-placeholder-text);
   --ck-document-outline-indent-level-1: 0;
@@ -12,161 +12,180 @@
   --ck-document-outline-indent-level-4: 4.5em;
   --ck-document-outline-indent-level-5: 6em;
   --ck-document-outline-indent-level-6: 7.5em;
-  --ck-document-outline-item-padding: var(--ck-spacing-small);
+  --ck-document-outline-item-padding: var(--ck-spacing-control-padding-block);
   --ck-document-outline-item-active-color: var(--ck-color-base-active);
   --ck-document-outline-item-default-color: #424242;
-  --ck-document-outline-item-hover-state-color: var(--ck-color-base-text);
+  --ck-document-outline-item-hover-state-color: var(--ck-color-text);
 }
 
 .ck.ck-document-outline {
   padding: var(--ck-document-outline-padding);
   font-size: var(--ck-document-outline-base-font-size);
+  -webkit-user-select: none;
   user-select: none;
-}
-
-.ck.ck-document-outline:empty:before {
-  content: attr(data-document-outline-empty-placeholder);
-  color: var(--ck-document-outline-placeholder-color);
-  display: inline-block;
-}
-
-.ck.ck-document-outline .ck-document-outline__item {
-  padding: var(--ck-document-outline-item-padding);
-  color: var(--ck-document-outline-item-default-color);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  overflow: hidden;
-}
-
-.ck.ck-document-outline .ck-document-outline__item.ck-document-outline__item_empty {
-  font-style: italic;
-}
-
-.ck.ck-document-outline .ck-document-outline__item.ck-document-outline__item_empty:hover, .ck.ck-document-outline .ck-document-outline__item:hover {
-  color: var(--ck-document-outline-item-hover-state-color);
-  text-decoration: underline;
-}
-
-.ck.ck-document-outline .ck-document-outline__item.ck-document-outline__item_active {
-  color: var(--ck-document-outline-item-active-color);
-}
-
-.ck.ck-document-outline[dir="ltr"] .ck-document-outline__item.ck-document-outline__item_level-1 {
-  padding-left: var(--ck-document-outline-indent-level-1);
-}
-
-.ck.ck-document-outline[dir="ltr"] .ck-document-outline__item.ck-document-outline__item_level-2 {
-  padding-left: var(--ck-document-outline-indent-level-2);
-}
-
-.ck.ck-document-outline[dir="ltr"] .ck-document-outline__item.ck-document-outline__item_level-3 {
-  padding-left: var(--ck-document-outline-indent-level-3);
-}
-
-.ck.ck-document-outline[dir="ltr"] .ck-document-outline__item.ck-document-outline__item_level-4 {
-  padding-left: var(--ck-document-outline-indent-level-4);
-}
-
-.ck.ck-document-outline[dir="ltr"] .ck-document-outline__item.ck-document-outline__item_level-5 {
-  padding-left: var(--ck-document-outline-indent-level-5);
-}
-
-.ck.ck-document-outline[dir="ltr"] .ck-document-outline__item.ck-document-outline__item_level-6 {
-  padding-left: var(--ck-document-outline-indent-level-6);
-}
-
-.ck.ck-document-outline[dir="rtl"] .ck-document-outline__item.ck-document-outline__item_level-1 {
-  padding-right: var(--ck-document-outline-indent-level-1);
-}
-
-.ck.ck-document-outline[dir="rtl"] .ck-document-outline__item.ck-document-outline__item_level-2 {
-  padding-right: var(--ck-document-outline-indent-level-2);
-}
-
-.ck.ck-document-outline[dir="rtl"] .ck-document-outline__item.ck-document-outline__item_level-3 {
-  padding-right: var(--ck-document-outline-indent-level-3);
-}
-
-.ck.ck-document-outline[dir="rtl"] .ck-document-outline__item.ck-document-outline__item_level-4 {
-  padding-right: var(--ck-document-outline-indent-level-4);
-}
-
-.ck.ck-document-outline[dir="rtl"] .ck-document-outline__item.ck-document-outline__item_level-5 {
-  padding-right: var(--ck-document-outline-indent-level-5);
-}
-
-.ck.ck-document-outline[dir="rtl"] .ck-document-outline__item.ck-document-outline__item_level-6 {
-  padding-right: var(--ck-document-outline-indent-level-6);
-}
 
-:root {
-  --ck-content-table-of-contents-padding: 1em;
-  --ck-content-table-of-contents-line-height: 1.5;
-  --ck-content-table-of-contents-items-start-padding: 24px;
-  --ck-table-of-contents-border-color: var(--ck-color-base-border);
-  --ck-table-of-contents-label-background-color: #757575;
+  &:empty:before {
+    content: attr(data-document-outline-empty-placeholder);
+    color: var(--ck-document-outline-placeholder-color);
+    display: inline-block;
+  }
+
+  & .ck-document-outline__item {
+    padding: var(--ck-document-outline-item-padding);
+    color: var(--ck-document-outline-item-default-color);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    overflow: hidden;
+
+    &.ck-document-outline__item_empty {
+      font-style: italic;
+    }
+
+    &.ck-document-outline__item_empty:hover, &:hover {
+      color: var(--ck-document-outline-item-hover-state-color);
+      text-decoration: underline;
+    }
+
+    &.ck-document-outline__item_active {
+      color: var(--ck-document-outline-item-active-color);
+    }
+  }
+
+  &[dir="ltr"] {
+    & .ck-document-outline__item {
+      &.ck-document-outline__item_level-1 {
+        padding-left: var(--ck-document-outline-indent-level-1);
+      }
+
+      &.ck-document-outline__item_level-2 {
+        padding-left: var(--ck-document-outline-indent-level-2);
+      }
+
+      &.ck-document-outline__item_level-3 {
+        padding-left: var(--ck-document-outline-indent-level-3);
+      }
+
+      &.ck-document-outline__item_level-4 {
+        padding-left: var(--ck-document-outline-indent-level-4);
+      }
+
+      &.ck-document-outline__item_level-5 {
+        padding-left: var(--ck-document-outline-indent-level-5);
+      }
+
+      &.ck-document-outline__item_level-6 {
+        padding-left: var(--ck-document-outline-indent-level-6);
+      }
+    }
+  }
+
+  &[dir="rtl"] {
+    & .ck-document-outline__item {
+      &.ck-document-outline__item_level-1 {
+        padding-right: var(--ck-document-outline-indent-level-1);
+      }
+
+      &.ck-document-outline__item_level-2 {
+        padding-right: var(--ck-document-outline-indent-level-2);
+      }
+
+      &.ck-document-outline__item_level-3 {
+        padding-right: var(--ck-document-outline-indent-level-3);
+      }
+
+      &.ck-document-outline__item_level-4 {
+        padding-right: var(--ck-document-outline-indent-level-4);
+      }
+
+      &.ck-document-outline__item_level-5 {
+        padding-right: var(--ck-document-outline-indent-level-5);
+      }
+
+      &.ck-document-outline__item_level-6 {
+        padding-right: var(--ck-document-outline-indent-level-6);
+      }
+    }
+  }
+}
+
+:root, :host {
+  --ck-table-of-contents-border-color: var(--ck-color-border-container);
+  --ck-table-of-contents-label-background-color: var(--ck-color-base-text-light);
   --ck-table-of-contents-background-color: var(--ck-color-base-foreground);
 }
 
-.ck-content .table-of-contents {
-  margin: .9em auto;
-}
-
-.ck-content .table-of-contents.table-of-contents_empty {
-  display: none;
-}
-
-.ck-content .table-of-contents .table-of-contents__placeholder {
-  padding: var(--ck-content-table-of-contents-padding);
-  margin: 0;
-  font-style: italic;
-}
-
-.ck-content .table-of-contents > ol {
-  padding: var(--ck-content-table-of-contents-padding);
-}
-
-.ck-content .table-of-contents ol {
-  line-height: var(--ck-content-table-of-contents-line-height);
-  margin: 0;
-  list-style-type: none;
-}
-
-.ck-content .table-of-contents ol ol {
-  padding-inline-start: var(--ck-content-table-of-contents-items-start-padding);
-}
-
-.ck-content .table-of-contents ol li {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: default;
-  overflow: hidden;
-}
-
 .ck-editor__editable .ck-widget.table-of-contents {
   background-color: var(--ck-table-of-contents-background-color);
   border: 1px solid var(--ck-table-of-contents-border-color);
   min-width: 15em;
   display: flow-root;
   position: relative;
-}
 
-.ck-editor__editable .ck-widget.table-of-contents[data-table-of-contents-label]:after {
-  content: attr(data-table-of-contents-label);
-  padding: var(--ck-spacing-tiny) var(--ck-spacing-medium);
-  background-color: var(--ck-table-of-contents-label-background-color);
-  font-size: 10px;
-  font-family: var(--ck-font-face);
-  color: #fff;
-  white-space: nowrap;
-  line-height: 16px;
-  position: absolute;
-  top: -1px;
-  right: 10px;
+  &.table-of-contents_empty {
+    display: flow-root;
+  }
+
+  &[data-table-of-contents-label]:after {
+    content: attr(data-table-of-contents-label);
+    padding: var(--ck-spacing-control-padding-block-compact) var(--ck-spacing-control-padding-inline);
+    background-color: var(--ck-table-of-contents-label-background-color);
+    border-radius: var(--ck-widget-label-border-radius);
+    font-size: 10px;
+    font-family: var(--ck-font-face, var(--ck-font-family));
+    color: #fff;
+    white-space: nowrap;
+    line-height: 16px;
+    position: absolute;
+    top: -1px;
+    right: 10px;
+
+    [dir="rtl"] & {
+      left: 10px;
+      right: auto;
+    }
+  }
+}
+
+:root, :host {
+  --ck-content-table-of-contents-padding: 1em;
+  --ck-content-table-of-contents-line-height: 1.5;
+  --ck-content-table-of-contents-items-start-padding: 24px;
 }
 
-[dir="rtl"] :is(.ck-editor__editable .ck-widget.table-of-contents[data-table-of-contents-label]:after) {
-  left: 10px;
-  right: auto;
+.ck-content {
+  & .table-of-contents {
+    margin: .9em auto;
+
+    &.table-of-contents_empty {
+      display: none;
+    }
+
+    & .table-of-contents__placeholder {
+      padding: var(--ck-content-table-of-contents-padding);
+      margin: 0;
+      font-style: italic;
+    }
+
+    & > ol {
+      padding: var(--ck-content-table-of-contents-padding);
+    }
+
+    & ol {
+      line-height: var(--ck-content-table-of-contents-line-height);
+      margin: 0;
+      list-style-type: none;
+
+      & ol {
+        padding-inline-start: var(--ck-content-table-of-contents-items-start-padding);
+      }
+
+      & li {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: default;
+        overflow: hidden;
+      }
+    }
+  }
 }

package/dist/index.d.ts

@@ -1,16 +1,18 @@
 /**
- * @license 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
- */
+* @license 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
+*/
 /**
- * @module document-outline
- */
-export { DocumentOutline, type DocumentOutlineConfig } from './documentoutline.js';
-export { DocumentOutlineUI } from './documentoutline/documentoutlineui.js';
-export { DocumentOutlineUtils } from './documentoutline/documentoutlineutils.js';
-export { TableOfContents, type DocumentOutlineTableOfContentsConfig } from './tableofcontents.js';
-export { TableOfContentsCommand } from './tableofcontents/tableofcontentscommand.js';
-export { TableOfContentsEditing } from './tableofcontents/tableofcontentsediting.js';
-export { TableOfContentsUI } from './tableofcontents/tableofcontentsui.js';
-export { HeadingId } from './tableofcontents/headingid.js';
-import './augmentation.js';
+* @module document-outline
+*/
+export { DocumentOutline, type DocumentOutlineConfig } from "./documentoutline.js";
+export { DocumentOutlineUI } from "./documentoutline/documentoutlineui.js";
+export { DocumentOutlineUtils } from "./documentoutline/documentoutlineutils.js";
+export { TableOfContents, type DocumentOutlineTableOfContentsConfig } from "./tableofcontents.js";
+export { TableOfContentsCommand } from "./tableofcontents/tableofcontentscommand.js";
+export { TableOfContentsEditing } from "./tableofcontents/tableofcontentsediting.js";
+export { TableOfContentsUI } from "./tableofcontents/tableofcontentsui.js";
+export { HeadingId } from "./tableofcontents/headingid.js";
+import "../theme/index-editor.css";
+import "../theme/index-content.css";
+import "./augmentation.js";