@ckeditor/ckeditor5-list 47.6.1-alpha.1 → 48.0.0-alpha.0

package/src/list/utils/view.js

@@ -1,117 +0,0 @@
-/**
- * @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
- */
-/**
- * Checks if view element is a list type (ul or ol).
- *
- * @internal
- */
-export function isListView(viewElement) {
-    return viewElement.is('element', 'ol') || viewElement.is('element', 'ul');
-}
-/**
- * Checks if view element is a list item (li).
- *
- * @internal
- */
-export function isListItemView(viewElement) {
-    return viewElement.is('element', 'li');
-}
-/**
- * Calculates the indent value for a list item. Handles HTML compliant and non-compliant lists.
- *
- * Also, fixes non HTML compliant lists indents:
- *
- * ```
- * before:                                     fixed list:
- * OL                                          OL
- * |-> LI (parent LIs: 0)                      |-> LI     (indent: 0)
- *     |-> OL                                  |-> OL
- *         |-> OL                                  |
- *         |   |-> OL                              |
- *         |       |-> OL                          |
- *         |           |-> LI (parent LIs: 1)      |-> LI (indent: 1)
- *         |-> LI (parent LIs: 1)                  |-> LI (indent: 1)
- *
- * before:                                     fixed list:
- * OL                                          OL
- * |-> OL                                      |
- *     |-> OL                                  |
- *          |-> OL                             |
- *              |-> LI (parent LIs: 0)         |-> LI        (indent: 0)
- *
- * before:                                     fixed list:
- * OL                                          OL
- * |-> LI (parent LIs: 0)                      |-> LI         (indent: 0)
- * |-> OL                                          |-> OL
- *     |-> LI (parent LIs: 0)                          |-> LI (indent: 1)
- * ```
- *
- * @internal
- */
-export function getIndent(listItem) {
-    let indent = 0;
-    let parent = listItem.parent;
-    while (parent) {
-        // Each LI in the tree will result in an increased indent for HTML compliant lists.
-        if (isListItemView(parent)) {
-            indent++;
-        }
-        else {
-            // If however the list is nested in other list we should check previous sibling of any of the list elements...
-            const previousSibling = parent.previousSibling;
-            // ...because the we might need increase its indent:
-            //		before:                           fixed list:
-            //		OL                                OL
-            //		|-> LI (parent LIs: 0)            |-> LI         (indent: 0)
-            //		|-> OL                                |-> OL
-            //		    |-> LI (parent LIs: 0)                |-> LI (indent: 1)
-            if (previousSibling && isListItemView(previousSibling)) {
-                indent++;
-            }
-        }
-        parent = parent.parent;
-    }
-    return indent;
-}
-/**
- * Creates a list attribute element (ol or ul).
- *
- * @internal
- */
-export function createListElement(writer, indent, type, id = getViewElementIdForListType(type, indent)) {
-    // Negative priorities so that restricted editing attribute won't wrap lists.
-    return writer.createAttributeElement(getViewElementNameForListType(type), null, {
-        priority: 2 * indent / 100 - 100,
-        id
-    });
-}
-/**
- * Creates a list item attribute element (li).
- *
- * @internal
- */
-export function createListItemElement(writer, indent, id) {
-    // Negative priorities so that restricted editing attribute won't wrap list items.
-    return writer.createAttributeElement('li', null, {
-        priority: (2 * indent + 1) / 100 - 100,
-        id
-    });
-}
-/**
- * Returns a view element name for the given list type.
- *
- * @internal
- */
-export function getViewElementNameForListType(type) {
-    return type == 'numbered' || type == 'customNumbered' ? 'ol' : 'ul';
-}
-/**
- * Returns a view element ID for the given list type and indent.
- *
- * @internal
- */
-export function getViewElementIdForListType(type, indent) {
-    return `list-${type}-${indent}`;
-}

package/src/list/utils.js

@@ -1,51 +0,0 @@
-/**
- * @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
- */
-import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
-/**
- * Helper method for creating toolbar and menu buttons and linking them with an appropriate command.
- *
- * @internal
- * @param editor The editor instance to which the UI component will be added.
- * @param commandName The name of the command.
- * @param label The button label.
- * @param icon The source of the icon.
- */
-export function createUIComponents(editor, commandName, label, icon) {
-    editor.ui.componentFactory.add(commandName, () => {
-        const buttonView = _createButton(ButtonView, editor, commandName, label, icon);
-        buttonView.set({
-            tooltip: true,
-            isToggleable: true
-        });
-        return buttonView;
-    });
-    editor.ui.componentFactory.add(`menuBar:${commandName}`, () => {
-        const buttonView = _createButton(MenuBarMenuListItemButtonView, editor, commandName, label, icon);
-        buttonView.set({
-            role: 'menuitemcheckbox',
-            isToggleable: true
-        });
-        return buttonView;
-    });
-}
-/**
- * Creates a button to use either in toolbar or in menu bar.
- */
-function _createButton(ButtonClass, editor, commandName, label, icon) {
-    const command = editor.commands.get(commandName);
-    const view = new ButtonClass(editor.locale);
-    view.set({
-        label,
-        icon
-    });
-    // Bind button model to command.
-    view.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
-    // Execute the command.
-    view.on('execute', () => {
-        editor.execute(commandName);
-        editor.editing.view.focus();
-    });
-    return view;
-}

package/src/list.js

@@ -1,36 +0,0 @@
-/**
- * @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 list/list
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ListEditing } from './list/listediting.js';
-import { ListUI } from './list/listui.js';
-/**
- * The list feature.
- *
- * This is a "glue" plugin that loads the {@link module:list/list/listediting~ListEditing  list
- * editing feature} and {@link module:list/list/listui~ListUI list UI feature}.
- */
-export class List extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ListEditing, ListUI];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'List';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-}

package/src/listconfig.js

@@ -1,5 +0,0 @@
-/**
- * @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
- */
-export {};

package/src/listformatting/listitemboldintegration.js

@@ -1,88 +0,0 @@
-/**
- * @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 list/listformatting/listitemboldintegration
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { env } from 'ckeditor5/src/utils.js';
-import { ListEditing } from '../list/listediting.js';
-/**
- * The list item bold integration plugin.
- */
-export class ListItemBoldIntegration extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ListItemBoldIntegration';
-    }
-    /**
-     * @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('BoldEditing') || !this.editor.config.get('list.enableListItemMarkerFormatting')) {
-            return;
-        }
-        ListFormatting.registerFormatAttribute('bold', 'listItemBold');
-        // 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: 'listItemBold',
-            setAttributeOnDowncast(writer, value, viewElement, options) {
-                if (value) {
-                    writer.addClass('ck-list-marker-bold', viewElement);
-                    // See: https://github.com/ckeditor/ckeditor5/issues/18790.
-                    if (env.isSafari && !(options && options.dataPipeline)) {
-                        writer.setStyle('--ck-content-list-marker-dummy-bold', '0', viewElement);
-                    }
-                }
-            }
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    afterInit() {
-        const editor = this.editor;
-        const model = editor.model;
-        if (!editor.plugins.has('BoldEditing') || !this.editor.config.get('list.enableListItemMarkerFormatting')) {
-            return;
-        }
-        model.schema.extend('$listItem', { allowAttributes: 'listItemBold' });
-        model.schema.setAttributeProperties('listItemBold', {
-            isFormatting: true
-        });
-        model.schema.addAttributeCheck(context => {
-            const item = context.last;
-            if (!item.getAttribute('listItemId')) {
-                return false;
-            }
-        }, 'listItemBold');
-        editor.conversion.for('upcast').attributeToAttribute({
-            model: 'listItemBold',
-            view: {
-                name: 'li',
-                classes: 'ck-list-marker-bold'
-            }
-        });
-    }
-}

package/src/listformatting/listitemfontcolorintegration.js

@@ -1,92 +0,0 @@
-/**
- * @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 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.js

@@ -1,93 +0,0 @@
-/**
- * @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 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.js

@@ -1,124 +0,0 @@
-/**
- * @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 list/listformatting/listitemfontsizeintegration
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { env } from 'ckeditor5/src/utils.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, options) {
-                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);
-                            // See: https://github.com/ckeditor/ckeditor5/issues/18790.
-                            if (env.isSafari && !(options && options.dataPipeline)) {
-                                writer.setStyle('--ck-content-list-marker-dummy-font-size', '0', 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}`
-                    }
-                });
-            }
-        }
-    }
-}