@ckeditor/ckeditor5-list 45.2.1 → 46.0.0-alpha.0

package/src/listformatting/listitemfontcolorintegration.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module list/listformatting/listitemfontcolorintegration
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ListEditing } from '../list/listediting.js';
+/**
+ * The list item font color integration plugin.
+ */
+export declare class ListItemFontColorIntegration extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ListItemFontColorIntegration";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ListEditing];
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+}

package/src/listformatting/listitemfontcolorintegration.js

@@ -0,0 +1,92 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module list/listformatting/listitemfontcolorintegration
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ListEditing } from '../list/listediting.js';
+/**
+ * The list item font color integration plugin.
+ */
+export class ListItemFontColorIntegration extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ListItemFontColorIntegration';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ListEditing];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const ListFormatting = editor.plugins.get('ListFormatting');
+        const listEditing = editor.plugins.get(ListEditing);
+        if (!editor.plugins.has('FontColorEditing') || !this.editor.config.get('list.enableListItemMarkerFormatting')) {
+            return;
+        }
+        ListFormatting.registerFormatAttribute('fontColor', 'listItemFontColor');
+        // Register the downcast strategy in init() so that the attribute name is registered before the list editing
+        // registers its converters.
+        // This ensures that the attribute is recognized by downcast strategies and bogus paragraphs are handled correctly.
+        listEditing.registerDowncastStrategy({
+            scope: 'item',
+            attributeName: 'listItemFontColor',
+            setAttributeOnDowncast(writer, value, viewElement) {
+                if (value) {
+                    writer.addClass('ck-list-marker-color', viewElement);
+                    writer.setStyle('--ck-content-list-marker-color', value, viewElement);
+                }
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        const editor = this.editor;
+        const model = editor.model;
+        if (!editor.plugins.has('FontColorEditing') || !this.editor.config.get('list.enableListItemMarkerFormatting')) {
+            return;
+        }
+        model.schema.extend('$listItem', { allowAttributes: 'listItemFontColor' });
+        model.schema.setAttributeProperties('listItemFontColor', {
+            isFormatting: true
+        });
+        model.schema.addAttributeCheck(context => {
+            const item = context.last;
+            if (!item.getAttribute('listItemId')) {
+                return false;
+            }
+        }, 'listItemFontColor');
+        editor.conversion.for('upcast').attributeToAttribute({
+            model: {
+                key: 'listItemFontColor',
+                value: (viewElement) => {
+                    return viewElement.getStyle('--ck-content-list-marker-color');
+                }
+            },
+            view: {
+                name: 'li',
+                classes: 'ck-list-marker-color',
+                styles: {
+                    '--ck-content-list-marker-color': /.*/
+                }
+            }
+        });
+    }
+}

package/src/listformatting/listitemfontfamilyintegration.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module list/listformatting/listitemfontfamilyintegration
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ListEditing } from '../list/listediting.js';
+/**
+ * The list item font family integration plugin.
+ */
+export declare class ListItemFontFamilyIntegration extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ListItemFontFamilyIntegration";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ListEditing];
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+}

package/src/listformatting/listitemfontfamilyintegration.js

@@ -0,0 +1,93 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module list/listformatting/listitemfontfamilyintegration
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ListEditing } from '../list/listediting.js';
+/**
+ * The list item font family integration plugin.
+ */
+export class ListItemFontFamilyIntegration extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ListItemFontFamilyIntegration';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ListEditing];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const ListFormatting = editor.plugins.get('ListFormatting');
+        const listEditing = editor.plugins.get(ListEditing);
+        if (!editor.plugins.has('FontFamilyEditing') || !this.editor.config.get('list.enableListItemMarkerFormatting')) {
+            return;
+        }
+        ListFormatting.registerFormatAttribute('fontFamily', 'listItemFontFamily');
+        // Register the downcast strategy in init() so that the attribute name is registered before the list editing
+        // registers its converters.
+        // This ensures that the attribute is recognized by downcast strategies and bogus paragraphs are handled correctly.
+        listEditing.registerDowncastStrategy({
+            scope: 'item',
+            attributeName: 'listItemFontFamily',
+            setAttributeOnDowncast(writer, value, viewElement) {
+                // There is no need of removing the style because downcast strategies handles it automatically.
+                if (value) {
+                    writer.addClass('ck-list-marker-font-family', viewElement);
+                    writer.setStyle('--ck-content-list-marker-font-family', value, viewElement);
+                }
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        const editor = this.editor;
+        const model = editor.model;
+        if (!editor.plugins.has('FontFamilyEditing') || !this.editor.config.get('list.enableListItemMarkerFormatting')) {
+            return;
+        }
+        model.schema.extend('$listItem', { allowAttributes: 'listItemFontFamily' });
+        model.schema.setAttributeProperties('listItemFontFamily', {
+            isFormatting: true
+        });
+        model.schema.addAttributeCheck(context => {
+            const item = context.last;
+            if (!item.getAttribute('listItemId')) {
+                return false;
+            }
+        }, 'listItemFontFamily');
+        editor.conversion.for('upcast').attributeToAttribute({
+            model: {
+                key: 'listItemFontFamily',
+                value: (viewElement) => {
+                    return viewElement.getStyle('--ck-content-list-marker-font-family');
+                }
+            },
+            view: {
+                name: 'li',
+                classes: 'ck-list-marker-font-family',
+                styles: {
+                    '--ck-content-list-marker-font-family': /.*/
+                }
+            }
+        });
+    }
+}

package/src/listformatting/listitemfontsizeintegration.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module list/listformatting/listitemfontsizeintegration
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ListEditing } from '../list/listediting.js';
+/**
+ * The list item font size integration plugin.
+ */
+export declare class ListItemFontSizeIntegration extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ListItemFontSizeIntegration";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ListEditing];
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+}

package/src/listformatting/listitemfontsizeintegration.js

@@ -0,0 +1,119 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module list/listformatting/listitemfontsizeintegration
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { _normalizeFontSizeOptions } from '@ckeditor/ckeditor5-font';
+import { ListEditing } from '../list/listediting.js';
+/**
+ * The list item font size integration plugin.
+ */
+export class ListItemFontSizeIntegration extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ListItemFontSizeIntegration';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ListEditing];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const ListFormatting = editor.plugins.get('ListFormatting');
+        const listEditing = editor.plugins.get(ListEditing);
+        if (!editor.plugins.has('FontSizeEditing') || !this.editor.config.get('list.enableListItemMarkerFormatting')) {
+            return;
+        }
+        const normalizedFontSizeOptions = _normalizeFontSizeOptions(editor.config.get('fontSize.options'));
+        ListFormatting.registerFormatAttribute('fontSize', 'listItemFontSize');
+        // Register the downcast strategy in init() so that the attribute name is registered before the list editing
+        // registers its converters.
+        // This ensures that the attribute is recognized by downcast strategies and bogus paragraphs are handled correctly.
+        listEditing.registerDowncastStrategy({
+            scope: 'item',
+            attributeName: 'listItemFontSize',
+            setAttributeOnDowncast(writer, value, viewElement) {
+                if (value) {
+                    const fontSizeOption = normalizedFontSizeOptions.find(option => option.model == value);
+                    if (fontSizeOption && fontSizeOption.view && typeof fontSizeOption.view != 'string') {
+                        if (fontSizeOption.view.styles) {
+                            writer.addClass('ck-list-marker-font-size', viewElement);
+                            writer.setStyle('--ck-content-list-marker-font-size', fontSizeOption.view.styles['font-size'], viewElement);
+                        }
+                        else if (fontSizeOption.view.classes) {
+                            writer.addClass(`ck-list-marker-font-size-${value}`, viewElement);
+                        }
+                    }
+                    else {
+                        writer.addClass('ck-list-marker-font-size', viewElement);
+                        writer.setStyle('--ck-content-list-marker-font-size', value, viewElement);
+                    }
+                }
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        const editor = this.editor;
+        const model = editor.model;
+        if (!editor.plugins.has('FontSizeEditing') || !this.editor.config.get('list.enableListItemMarkerFormatting')) {
+            return;
+        }
+        model.schema.extend('$listItem', { allowAttributes: 'listItemFontSize' });
+        model.schema.setAttributeProperties('listItemFontSize', {
+            isFormatting: true
+        });
+        model.schema.addAttributeCheck(context => {
+            const item = context.last;
+            if (!item.getAttribute('listItemId')) {
+                return false;
+            }
+        }, 'listItemFontSize');
+        editor.conversion.for('upcast').elementToAttribute({
+            model: {
+                key: 'listItemFontSize',
+                value: (viewElement) => viewElement.getStyle('--ck-content-list-marker-font-size')
+            },
+            view: {
+                name: 'li',
+                classes: 'ck-list-marker-font-size',
+                styles: {
+                    '--ck-content-list-marker-font-size': /.*/
+                }
+            }
+        });
+        const fontSizeOptions = _normalizeFontSizeOptions(editor.config.get('fontSize.options'));
+        for (const option of fontSizeOptions) {
+            if (option.model && option.view) {
+                editor.conversion.for('upcast').elementToAttribute({
+                    model: {
+                        key: 'listItemFontSize',
+                        value: option.model
+                    },
+                    view: {
+                        name: 'li',
+                        classes: `ck-list-marker-font-size-${option.model}`
+                    }
+                });
+            }
+        }
+    }
+}

package/src/listformatting/listitemitalicintegration.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module list/listformatting/listitemitalicintegration
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ListEditing } from '../list/listediting.js';
+/**
+ * The list item italic integration plugin.
+ */
+export declare class ListItemItalicIntegration extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ListItemItalicIntegration";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ListEditing];
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+}

package/src/listformatting/listitemitalicintegration.js

@@ -0,0 +1,83 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module list/listformatting/listitemitalicintegration
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ListEditing } from '../list/listediting.js';
+/**
+ * The list item italic integration plugin.
+ */
+export class ListItemItalicIntegration extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ListItemItalicIntegration';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ListEditing];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const ListFormatting = editor.plugins.get('ListFormatting');
+        const listEditing = editor.plugins.get(ListEditing);
+        if (!editor.plugins.has('ItalicEditing') || !this.editor.config.get('list.enableListItemMarkerFormatting')) {
+            return;
+        }
+        ListFormatting.registerFormatAttribute('italic', 'listItemItalic');
+        // Register the downcast strategy in init() so that the attribute name is registered before the list editing
+        // registers its converters.
+        // This ensures that the attribute is recognized by downcast strategies and bogus paragraphs are handled correctly.
+        listEditing.registerDowncastStrategy({
+            scope: 'item',
+            attributeName: 'listItemItalic',
+            setAttributeOnDowncast(writer, value, viewElement) {
+                if (value) {
+                    writer.addClass('ck-list-marker-italic', viewElement);
+                }
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        const editor = this.editor;
+        const model = editor.model;
+        if (!editor.plugins.has('ItalicEditing') || !this.editor.config.get('list.enableListItemMarkerFormatting')) {
+            return;
+        }
+        model.schema.extend('$listItem', { allowAttributes: 'listItemItalic' });
+        model.schema.setAttributeProperties('listItemItalic', {
+            isFormatting: true
+        });
+        model.schema.addAttributeCheck(context => {
+            const item = context.last;
+            if (!item.getAttribute('listItemId')) {
+                return false;
+            }
+        }, 'listItemItalic');
+        editor.conversion.for('upcast').attributeToAttribute({
+            model: 'listItemItalic',
+            view: {
+                name: 'li',
+                classes: 'ck-list-marker-italic'
+            }
+        });
+    }
+}

package/src/listformatting.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * @module list/listformatting
+ */
+import { type Editor, Plugin } from 'ckeditor5/src/core.js';
+import { ListItemBoldIntegration } from './listformatting/listitemboldintegration.js';
+import { ListItemItalicIntegration } from './listformatting/listitemitalicintegration.js';
+import { ListItemFontSizeIntegration } from './listformatting/listitemfontsizeintegration.js';
+import { ListItemFontColorIntegration } from './listformatting/listitemfontcolorintegration.js';
+import { ListItemFontFamilyIntegration } from './listformatting/listitemfontfamilyintegration.js';
+import '../theme/listformatting.css';
+/**
+ * The list formatting plugin.
+ *
+ * It enables integration with formatting plugins to style the list marker.
+ * The list marker is styled based on the consistent formatting applied to the content of the list item.
+ *
+ * The list of supported formatting plugins includes:
+ * * Font color.
+ * * Font size.
+ * * Font family.
+ * * Bold.
+ * * Italic.
+ */
+export declare class ListFormatting extends Plugin {
+    /**
+     * The list of loaded formatting.
+     */
+    private readonly _loadedFormatting;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ListFormatting";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ListItemBoldIntegration, typeof ListItemItalicIntegration, typeof ListItemFontSizeIntegration, typeof ListItemFontColorIntegration, typeof ListItemFontFamilyIntegration];
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+    /**
+     * Registers a postfixer that ensures that the list item formatting attribute is consistent with the formatting
+     * applied to the content of the list item.
+     */
+    private _registerPostfixerForListItemFormatting;
+    /**
+     * Registers an integration between a default attribute (e.g., `fontFamily`) and a new attribute
+     * intended specifically for list item elements (e.g., `listItemFontFamily`).
+     *
+     * These attributes are later used by the postfixer logic to determine whether to add the new attribute
+     * to the list item element, based on whether there is a consistent default formatting attribute
+     * applied within its content.
+     */
+    registerFormatAttribute(formatAttribute: string, listItemFormatAttribute: string): void;
+    /**
+     * Returns true if the given model attribute name is a supported inline formatting attribute.
+     */
+    private _isInlineOrSelectionFormatting;
+}