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

package/dist/documentoutline.d.ts

@@ -1,99 +1,99 @@
 /**
- * @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/documentoutline
- * @publicApi
- */
-import { Plugin } from '@ckeditor/ckeditor5-core';
-import { DocumentOutlineUtils } from './documentoutline/documentoutlineutils.js';
-import { DocumentOutlineUI } from './documentoutline/documentoutlineui.js';
+* @module document-outline/documentoutline
+* @publicApi
+*/
+import { Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
+import { DocumentOutlineUtils } from "./documentoutline/documentoutlineutils.js";
+import { DocumentOutlineUI } from "./documentoutline/documentoutlineui.js";
 /**
- * The document outline feature.
- * It allows for an easy access to a predefined list of headings in the document.
- */
+* The document outline feature.
+* It allows for an easy access to a predefined list of headings in the document.
+*/
 export declare class DocumentOutline extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires(): readonly [typeof DocumentOutlineUtils, typeof DocumentOutlineUI];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "DocumentOutline";
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin(): true;
-    /**
-     * @inheritDoc
-     */
-    static get isPremiumPlugin(): true;
-    init(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
+	/**
+	* @inheritDoc
+	*/
+	static get requires(): PluginDependenciesOf<[DocumentOutlineUtils, DocumentOutlineUI]>;
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "DocumentOutline";
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+	/**
+	* @inheritDoc
+	*/
+	static override get isPremiumPlugin(): true;
+	init(): void;
+	/**
+	* @inheritDoc
+	*/
+	override destroy(): void;
 }
 /**
- * The configuration of the {@link module:document-outline/documentoutline~DocumentOutline document outline feature}.
- *
- * ```ts
- * ClassicEditor
- * 	.create( {
- * 		documentOutline:  ... // Document outline feature configuration.
- * 	} )
- * 	.then( /* ... *\/ )
- * 	.catch( /* ... *\/ );
- * ```
- *
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
- */
+* The configuration of the {@link module:document-outline/documentoutline~DocumentOutline document outline feature}.
+*
+* ```ts
+* ClassicEditor
+* 	.create( {
+* 		documentOutline:  ... // Document outline feature configuration.
+* 	} )
+* 	.then( /* ... *\/ )
+* 	.catch( /* ... *\/ );
+* ```
+*
+* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+*/
 export interface DocumentOutlineConfig {
-    /**
-     * The container element for the document outline to render. This should be a reference to an existing
-     * container element in the DOM.
-     */
-    container?: HTMLElement;
-    /**
-     * An array of {@glink framework/architecture/editing-engine#model model} element names considered
-     * as headings in the document outline.
-     *
-     * The index of the heading in the array reflects the heading nesting level. It can be used e.g. for reducing
-     * the number of visible headings.
-     *
-     * ```ts
-     * ClassicEditor
-     * 	.create( {
-     * 		plugins: [ DocumentOutline, /* ... *\/ ],
-     * 		documentOutline: {
-     * 			headings: [ 'heading1', 'heading2', /* ... *\/ ],
-     * 			// ...
-     * 		}
-     * 	} )
-     * 	.then( /* ... *\/ )
-     * 	.catch( /* ... *\/ );
-     * ```
-     *
-     * If this configuration is not defined, the feature will use the following defaults instead:
-     *
-     * 1. If the {@glink features/headings Headings feature} is loaded, it equals
-     * * {@link module:heading/headingconfig~HeadingConfig#options `config.heading.options`}.
-     * * `[ 'heading1', 'heading2', 'heading3' ]` if `config.heading.options` is not defined.
-     * 2. If the {@glink features/html/general-html-support General HTML Support} feature is loaded, it equals
-     * `[ 'htmlH1', 'htmlH2', 'htmlH3', 'htmlH4', 'htmlH5', 'htmlH6' ]`.
-     *
-     * **Note**: The Headings feature takes precedence over the General HTML Support feature when
-     * both are loaded.
-     */
-    headings?: Array<string>;
-    /**
-     * Allows you to display a placeholder text: [Empty heading] for empty headings.
-     *
-     * By default, the display of a placeholder is disabled. To enable it, set this parameter to true.
-     *
-     * **Note**: This setting also affects Table of contents feature.
-     */
-    showEmptyHeadings?: boolean;
+	/**
+	* The container element for the document outline to render. This should be a reference to an existing
+	* container element in the DOM.
+	*/
+	container?: HTMLElement;
+	/**
+	* An array of {@glink framework/architecture/editing-engine#model model} element names considered
+	* as headings in the document outline.
+	*
+	* The index of the heading in the array reflects the heading nesting level. It can be used e.g. for reducing
+	* the number of visible headings.
+	*
+	* ```ts
+	* ClassicEditor
+	* 	.create( {
+	* 		plugins: [ DocumentOutline, /* ... *\/ ],
+	* 		documentOutline: {
+	* 			headings: [ 'heading1', 'heading2', /* ... *\/ ],
+	* 			// ...
+	* 		}
+	* 	} )
+	* 	.then( /* ... *\/ )
+	* 	.catch( /* ... *\/ );
+	* ```
+	*
+	* If this configuration is not defined, the feature will use the following defaults instead:
+	*
+	* 1. If the {@glink features/headings Headings feature} is loaded, it equals
+	* * {@link module:heading/headingconfig~HeadingConfig#options `config.heading.options`}.
+	* * `[ 'heading1', 'heading2', 'heading3' ]` if `config.heading.options` is not defined.
+	* 2. If the {@glink features/html/general-html-support General HTML Support} feature is loaded, it equals
+	* `[ 'htmlH1', 'htmlH2', 'htmlH3', 'htmlH4', 'htmlH5', 'htmlH6' ]`.
+	*
+	* **Note**: The Headings feature takes precedence over the General HTML Support feature when
+	* both are loaded.
+	*/
+	headings?: Array<string>;
+	/**
+	* Allows you to display a placeholder text: [Empty heading] for empty headings.
+	*
+	* By default, the display of a placeholder is disabled. To enable it, set this parameter to true.
+	*
+	* **Note**: This setting also affects Table of contents feature.
+	*/
+	showEmptyHeadings?: boolean;
 }

package/dist/index-content.css

@@ -2,43 +2,45 @@
  * @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-content-table-of-contents-padding:1em;
-  --ck-content-table-of-contents-line-height:1.5;
-  --ck-content-table-of-contents-items-start-padding:24px;
+: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;
 }
 
-.ck-content .table-of-contents{
-  margin:.9em auto;
-}
+.ck-content {
+  & .table-of-contents {
+    margin: .9em auto;
 
-.ck-content .table-of-contents.table-of-contents_empty{
-  display:none;
-}
+    &.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;
-}
+    & .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);
-}
+    & > 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;
-}
+    & 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);
-}
+      & 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;
+      & li {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: default;
+        overflow: hidden;
+      }
+    }
+  }
 }

package/dist/index-editor.css

@@ -2,136 +2,147 @@
  * @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);
-  --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;
-  --ck-document-outline-indent-level-2:1.5em;
-  --ck-document-outline-indent-level-3:3em;
-  --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-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.ck-document-outline{
-  padding:var(--ck-document-outline-padding);
-  font-size:var(--ck-document-outline-base-font-size);
-  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;
-  --ck-table-of-contents-background-color:var(--ck-color-base-foreground);
-}
-
-.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;
-}
-
-[dir="rtl"] :is(.ck-editor__editable .ck-widget.table-of-contents[data-table-of-contents-label]:after){
-  left:10px;
-  right:auto;
+: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;
+  --ck-document-outline-indent-level-2: 1.5em;
+  --ck-document-outline-indent-level-3: 3em;
+  --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-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-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;
+
+  &: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-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;
+
+  &.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;
+    }
+  }
 }