@ckeditor/ckeditor5-list 35.4.0 → 36.0.1

package/src/todolist/todolistediting.js

@@ -1,33 +1,14 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
-/**
- * @module list/todolist/todolistediting
- */
-
 import { Plugin } from 'ckeditor5/src/core';
-import {
-	getCode,
-	parseKeystroke,
-	getLocalizedArrowKeyCodeDirection
-} from 'ckeditor5/src/utils';
-
+import { getCode, parseKeystroke, getLocalizedArrowKeyCodeDirection } from 'ckeditor5/src/utils';
 import ListCommand from '../list/listcommand';
 import ListEditing from '../list/listediting';
 import CheckTodoListCommand from './checktodolistcommand';
-import {
-	dataModelViewInsertion,
-	dataViewModelCheckmarkInsertion,
-	mapModelToViewPosition,
-	modelViewChangeChecked,
-	modelViewChangeType,
-	modelViewInsertion
-} from './todolistconverters';
-
-const ITEM_TOGGLE_KEYSTROKE = parseKeystroke( 'Ctrl+Enter' );
-
+import { dataModelViewInsertion, dataViewModelCheckmarkInsertion, mapModelToViewPosition, modelViewChangeChecked, modelViewChangeType, modelViewInsertion } from './todolistconverters';
+const ITEM_TOGGLE_KEYSTROKE = parseKeystroke('Ctrl+Enter');
 /**
  * The engine of the to-do list feature. It handles creating, editing and removing to-do lists and their items.
  *
@@ -37,190 +18,144 @@ const ITEM_TOGGLE_KEYSTROKE = parseKeystroke( 'Ctrl+Enter' );
  * - `'todoList'`,
  * - `'checkTodoList'`,
  * - `'todoListCheck'` as an alias for `checkTodoList` command.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class TodoListEditing extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'TodoListEditing';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ ListEditing ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const { editing, data, model } = editor;
-
-		// Extend schema.
-		model.schema.extend( 'listItem', {
-			allowAttributes: [ 'todoListChecked' ]
-		} );
-
-		// Disallow todoListChecked attribute on other nodes than listItem with to-do listType.
-		model.schema.addAttributeCheck( ( context, attributeName ) => {
-			const item = context.last;
-
-			if ( attributeName == 'todoListChecked' && item.name == 'listItem' && item.getAttribute( 'listType' ) != 'todo' ) {
-				return false;
-			}
-		} );
-
-		// Register `todoList` command.
-		editor.commands.add( 'todoList', new ListCommand( editor, 'todo' ) );
-
-		const checkTodoListCommand = new CheckTodoListCommand( editor );
-
-		// Register `checkTodoList` command and add `todoListCheck` command as an alias for backward compatibility.
-		editor.commands.add( 'checkTodoList', checkTodoListCommand );
-		editor.commands.add( 'todoListCheck', checkTodoListCommand );
-
-		// Define converters.
-		data.downcastDispatcher.on( 'insert:listItem', dataModelViewInsertion( model ), { priority: 'high' } );
-		data.upcastDispatcher.on( 'element:input', dataViewModelCheckmarkInsertion, { priority: 'high' } );
-
-		editing.downcastDispatcher.on(
-			'insert:listItem',
-			modelViewInsertion( model, listItem => this._handleCheckmarkChange( listItem ) ),
-			{ priority: 'high' }
-		);
-		editing.downcastDispatcher.on(
-			'attribute:listType:listItem',
-			modelViewChangeType( listItem => this._handleCheckmarkChange( listItem ), editing.view )
-		);
-		editing.downcastDispatcher.on(
-			'attribute:todoListChecked:listItem',
-			modelViewChangeChecked( listItem => this._handleCheckmarkChange( listItem ) )
-		);
-
-		editing.mapper.on( 'modelToViewPosition', mapModelToViewPosition( editing.view ) );
-		data.mapper.on( 'modelToViewPosition', mapModelToViewPosition( editing.view ) );
-
-		// Jump at the end of the previous node on left arrow key press, when selection is after the checkbox.
-		//
-		// <blockquote><p>Foo</p></blockquote>
-		// <ul><li><checkbox/>{}Bar</li></ul>
-		//
-		// press: `<-`
-		//
-		// <blockquote><p>Foo{}</p></blockquote>
-		// <ul><li><checkbox/>Bar</li></ul>
-		//
-		this.listenTo( editing.view.document, 'arrowKey', jumpOverCheckmarkOnSideArrowKeyPress( model, editor.locale ), { context: 'li' } );
-
-		// Toggle check state of selected to-do list items on keystroke.
-		this.listenTo( editing.view.document, 'keydown', ( evt, data ) => {
-			if ( getCode( data ) === ITEM_TOGGLE_KEYSTROKE ) {
-				editor.execute( 'checkTodoList' );
-				evt.stop();
-			}
-		}, { priority: 'high' } );
-
-		// Remove `todoListChecked` attribute when a host element is no longer a to-do list item.
-		const listItemsToFix = new Set();
-
-		this.listenTo( model, 'applyOperation', ( evt, args ) => {
-			const operation = args[ 0 ];
-
-			if ( operation.type == 'rename' && operation.oldName == 'listItem' ) {
-				const item = operation.position.nodeAfter;
-
-				if ( item.hasAttribute( 'todoListChecked' ) ) {
-					listItemsToFix.add( item );
-				}
-			} else if ( operation.type == 'changeAttribute' && operation.key == 'listType' && operation.oldValue === 'todo' ) {
-				for ( const item of operation.range.getItems() ) {
-					if ( item.hasAttribute( 'todoListChecked' ) && item.getAttribute( 'listType' ) !== 'todo' ) {
-						listItemsToFix.add( item );
-					}
-				}
-			}
-		} );
-
-		model.document.registerPostFixer( writer => {
-			let hasChanged = false;
-
-			for ( const listItem of listItemsToFix ) {
-				writer.removeAttribute( 'todoListChecked', listItem );
-				hasChanged = true;
-			}
-
-			listItemsToFix.clear();
-
-			return hasChanged;
-		} );
-	}
-
-	/**
-	 * Handles the checkbox element change, moves the selection to the corresponding model item to make it possible
-	 * to toggle the `todoListChecked` attribute using the command, and restores the selection position.
-	 *
-	 * Some say it's a hack :) Moving the selection only for executing the command on a certain node and restoring it after,
-	 * is not a clear solution. We need to design an API for using commands beyond the selection range.
-	 * See https://github.com/ckeditor/ckeditor5/issues/1954.
-	 *
-	 * @private
-	 * @param {module:engine/model/element~Element} listItem
-	 */
-	_handleCheckmarkChange( listItem ) {
-		const editor = this.editor;
-		const model = editor.model;
-		const previousSelectionRanges = Array.from( model.document.selection.getRanges() );
-
-		model.change( writer => {
-			writer.setSelection( listItem, 'end' );
-			editor.execute( 'checkTodoList' );
-			writer.setSelection( previousSelectionRanges );
-		} );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TodoListEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ListEditing];
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const { editing, data, model } = editor;
+        // Extend schema.
+        model.schema.extend('listItem', {
+            allowAttributes: ['todoListChecked']
+        });
+        // Disallow todoListChecked attribute on other nodes than listItem with to-do listType.
+        model.schema.addAttributeCheck((context, attributeName) => {
+            const item = context.last;
+            if (attributeName == 'todoListChecked' && item.name == 'listItem' && item.getAttribute('listType') != 'todo') {
+                return false;
+            }
+        });
+        // Register `todoList` command.
+        editor.commands.add('todoList', new ListCommand(editor, 'todo'));
+        const checkTodoListCommand = new CheckTodoListCommand(editor);
+        // Register `checkTodoList` command and add `todoListCheck` command as an alias for backward compatibility.
+        editor.commands.add('checkTodoList', checkTodoListCommand);
+        editor.commands.add('todoListCheck', checkTodoListCommand);
+        // Define converters.
+        data.downcastDispatcher.on('insert:listItem', dataModelViewInsertion(model), { priority: 'high' });
+        data.upcastDispatcher.on('element:input', dataViewModelCheckmarkInsertion, { priority: 'high' });
+        editing.downcastDispatcher.on('insert:listItem', modelViewInsertion(model, listItem => this._handleCheckmarkChange(listItem)), { priority: 'high' });
+        editing.downcastDispatcher.on('attribute:listType:listItem', modelViewChangeType(listItem => this._handleCheckmarkChange(listItem), editing.view));
+        editing.downcastDispatcher.on('attribute:todoListChecked:listItem', modelViewChangeChecked(listItem => this._handleCheckmarkChange(listItem)));
+        editing.mapper.on('modelToViewPosition', mapModelToViewPosition(editing.view));
+        data.mapper.on('modelToViewPosition', mapModelToViewPosition(editing.view));
+        // Jump at the end of the previous node on left arrow key press, when selection is after the checkbox.
+        //
+        // <blockquote><p>Foo</p></blockquote>
+        // <ul><li><checkbox/>{}Bar</li></ul>
+        //
+        // press: `<-`
+        //
+        // <blockquote><p>Foo{}</p></blockquote>
+        // <ul><li><checkbox/>Bar</li></ul>
+        //
+        this.listenTo(editing.view.document, 'arrowKey', jumpOverCheckmarkOnSideArrowKeyPress(model, editor.locale), { context: 'li' });
+        // Toggle check state of selected to-do list items on keystroke.
+        this.listenTo(editing.view.document, 'keydown', (evt, data) => {
+            if (getCode(data) === ITEM_TOGGLE_KEYSTROKE) {
+                editor.execute('checkTodoList');
+                evt.stop();
+            }
+        }, { priority: 'high' });
+        // Remove `todoListChecked` attribute when a host element is no longer a to-do list item.
+        const listItemsToFix = new Set();
+        this.listenTo(model, 'applyOperation', (evt, args) => {
+            const operation = args[0];
+            if (operation.type == 'rename' && operation.oldName == 'listItem') {
+                const item = operation.position.nodeAfter;
+                if (item.hasAttribute('todoListChecked')) {
+                    listItemsToFix.add(item);
+                }
+            }
+            else if (operation.type == 'changeAttribute' && operation.key == 'listType' && operation.oldValue === 'todo') {
+                for (const item of operation.range.getItems()) {
+                    if (item.hasAttribute('todoListChecked') && item.getAttribute('listType') !== 'todo') {
+                        listItemsToFix.add(item);
+                    }
+                }
+            }
+        });
+        model.document.registerPostFixer(writer => {
+            let hasChanged = false;
+            for (const listItem of listItemsToFix) {
+                writer.removeAttribute('todoListChecked', listItem);
+                hasChanged = true;
+            }
+            listItemsToFix.clear();
+            return hasChanged;
+        });
+    }
+    /**
+     * Handles the checkbox element change, moves the selection to the corresponding model item to make it possible
+     * to toggle the `todoListChecked` attribute using the command, and restores the selection position.
+     *
+     * Some say it's a hack :) Moving the selection only for executing the command on a certain node and restoring it after,
+     * is not a clear solution. We need to design an API for using commands beyond the selection range.
+     * See https://github.com/ckeditor/ckeditor5/issues/1954.
+     */
+    _handleCheckmarkChange(listItem) {
+        const editor = this.editor;
+        const model = editor.model;
+        const previousSelectionRanges = Array.from(model.document.selection.getRanges());
+        model.change(writer => {
+            writer.setSelection(listItem, 'end');
+            editor.execute('checkTodoList');
+            writer.setSelection(previousSelectionRanges);
+        });
+    }
 }
-
-// Handles the left/right (LTR/RTL content) arrow key and moves the selection at the end of the previous block element
-// if the selection is just after the checkbox element. In other words, it jumps over the checkbox element when
-// moving the selection to the left/right (LTR/RTL).
-//
-// @private
-// @param {module:engine/model/model~Model} model
-// @param {module:utils/locale~Locale} locale
-// @returns {Function} Callback for 'keydown' events.
-function jumpOverCheckmarkOnSideArrowKeyPress( model, locale ) {
-	return ( eventInfo, domEventData ) => {
-		const direction = getLocalizedArrowKeyCodeDirection( domEventData.keyCode, locale.contentLanguageDirection );
-
-		if ( direction != 'left' ) {
-			return;
-		}
-
-		const schema = model.schema;
-		const selection = model.document.selection;
-
-		if ( !selection.isCollapsed ) {
-			return;
-		}
-
-		const position = selection.getFirstPosition();
-		const parent = position.parent;
-
-		if ( parent.name === 'listItem' && parent.getAttribute( 'listType' ) == 'todo' && position.isAtStart ) {
-			const newRange = schema.getNearestSelectionRange( model.createPositionBefore( parent ), 'backward' );
-
-			if ( newRange ) {
-				model.change( writer => writer.setSelection( newRange ) );
-			}
-
-			domEventData.preventDefault();
-			domEventData.stopPropagation();
-			eventInfo.stop();
-		}
-	};
+/**
+ * Handles the left/right (LTR/RTL content) arrow key and moves the selection at the end of the previous block element
+ * if the selection is just after the checkbox element. In other words, it jumps over the checkbox element when
+ * moving the selection to the left/right (LTR/RTL).
+ *
+ * @returns Callback for 'keydown' events.
+ */
+function jumpOverCheckmarkOnSideArrowKeyPress(model, locale) {
+    return (eventInfo, domEventData) => {
+        const direction = getLocalizedArrowKeyCodeDirection(domEventData.keyCode, locale.contentLanguageDirection);
+        if (direction != 'left') {
+            return;
+        }
+        const schema = model.schema;
+        const selection = model.document.selection;
+        if (!selection.isCollapsed) {
+            return;
+        }
+        const position = selection.getFirstPosition();
+        const parent = position.parent;
+        if (parent.name === 'listItem' && parent.getAttribute('listType') == 'todo' && position.isAtStart) {
+            const newRange = schema.getNearestSelectionRange(model.createPositionBefore(parent), 'backward');
+            if (newRange) {
+                model.change(writer => writer.setSelection(newRange));
+            }
+            domEventData.preventDefault();
+            domEventData.stopPropagation();
+            eventInfo.stop();
+        }
+    };
 }

package/src/todolist/todolistui.js

@@ -1,36 +1,29 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module list/todolist/todolistui
  */
-
 import { createUIComponent } from '../list/utils';
 import todoListIcon from '../../theme/icons/todolist.svg';
 import { Plugin } from 'ckeditor5/src/core';
-
 /**
  * The to-do list UI feature. It introduces the `'todoList'` button that
  * allows to convert elements to and from to-do list items and to indent or outdent them.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class TodoListUI extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'TodoListUI';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const t = this.editor.t;
-
-		createUIComponent( this.editor, 'todoList', t( 'To-do List' ), todoListIcon );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TodoListUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const t = this.editor.t;
+        createUIComponent(this.editor, 'todoList', t('To-do List'), todoListIcon);
+    }
 }

package/src/todolist.js

@@ -1,37 +1,31 @@
 /**
- * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
 /**
  * @module list/todolist
  */
-
 import TodoListEditing from './todolist/todolistediting';
 import TodoListUI from './todolist/todolistui';
 import { Plugin } from 'ckeditor5/src/core';
 import '../theme/todolist.css';
-
 /**
  * The to-do list feature.
  *
  * This is a "glue" plugin that loads the {@link module:list/todolist/todolistediting~TodoListEditing to-do list editing feature}
  * and the {@link module:list/todolist/todolistui~TodoListUI to-do list UI feature}.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class TodoList extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ TodoListEditing, TodoListUI ];
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'TodoList';
-	}
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [TodoListEditing, TodoListUI];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'TodoList';
+    }
 }

package/theme/collapsible.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/documentlist.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/list.css

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck-content ol {
+	list-style-type: decimal;
+
+	& ol {
+		list-style-type: lower-latin;
+
+		& ol {
+			list-style-type: lower-roman;
+
+			& ol {
+				list-style-type: upper-latin;
+
+				& ol {
+					list-style-type: upper-roman;
+				}
+			}
+		}
+	}
+}
+
+.ck-content ul {
+	list-style-type: disc;
+
+	& ul {
+		list-style-type: circle;
+
+		& ul {
+			list-style-type: square;
+
+			& ul {
+				list-style-type: square;
+			}
+		}
+	}
+}

package/theme/listproperties.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/theme/liststyles.css

@@ -1,44 +1,8 @@
 /*
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
 .ck.ck-list-styles-list {
 	display: grid;
 }
-
-.ck-content ol {
-	list-style-type: decimal;
-
-	& ol {
-		list-style-type: lower-latin;
-
-		& ol {
-			list-style-type: lower-roman;
-
-			& ol {
-				list-style-type: upper-latin;
-
-				& ol {
-					list-style-type: upper-roman;
-				}
-			}
-		}
-	}
-}
-
-.ck-content ul {
-	list-style-type: circle;
-
-	& ul {
-		list-style-type: disc;
-
-		& ul {
-			list-style-type: square;
-
-			& ul {
-				list-style-type: square;
-			}
-		}
-	}
-}

package/theme/todolist.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */