@ckeditor/ckeditor5-list 33.0.0 → 34.0.0

package/src/documentlistproperties/documentliststartcommand.js

@@ -0,0 +1,76 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module list/documentlistproperties/documentliststartcommand
+ */
+
+import { Command } from 'ckeditor5/src/core';
+import { first } from 'ckeditor5/src/utils';
+import {
+	expandListBlocksToCompleteList,
+	isListItemBlock
+} from '../documentlist/utils/model';
+
+/**
+ * The list start index command. It changes the `listStart` attribute of the selected list items,
+ * letting the user to choose the starting point of an ordered list.
+ * It is used by the {@link module:list/documentlistproperties~DocumentListProperties list properties feature}.
+ *
+ * @extends module:core/command~Command
+ */
+export default class DocumentListStartCommand extends Command {
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		const value = this._getValue();
+
+		this.value = value;
+		this.isEnabled = value != null;
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 * @param {Object} [options]
+	 * @param {Number} [options.startIndex=1] The list start index.
+	 */
+	execute( options = {} ) {
+		const model = this.editor.model;
+		const document = model.document;
+
+		let blocks = Array.from( document.selection.getSelectedBlocks() )
+			.filter( block => isListItemBlock( block ) && block.getAttribute( 'listType' ) == 'numbered' );
+
+		blocks = expandListBlocksToCompleteList( blocks );
+
+		model.change( writer => {
+			for ( const block of blocks ) {
+				writer.setAttribute( 'listStart', options.startIndex || 1, block );
+			}
+		} );
+	}
+
+	/**
+	 * Checks the command's {@link #value}.
+	 *
+	 * @private
+	 * @returns {Number|null} The current value.
+	 */
+	_getValue() {
+		const model = this.editor.model;
+		const document = model.document;
+
+		const block = first( document.selection.getSelectedBlocks() );
+
+		if ( block && isListItemBlock( block ) && block.getAttribute( 'listType' ) == 'numbered' ) {
+			return block.getAttribute( 'listStart' );
+		}
+
+		return null;
+	}
+}

package/src/documentlistproperties/documentliststylecommand.js

@@ -0,0 +1,140 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module list/documentlistproperties/documentliststylecommand
+ */
+
+import { Command } from 'ckeditor5/src/core';
+import { first } from 'ckeditor5/src/utils';
+import {
+	expandListBlocksToCompleteList,
+	isListItemBlock
+} from '../documentlist/utils/model';
+import { getListTypeFromListStyleType } from './utils/style';
+
+/**
+ * The list style command. It changes `listStyle` attribute of the selected list items,
+ * letting the user choose styles for the list item markers.
+ * It is used by the {@link module:list/documentlistproperties~DocumentListProperties list properties feature}.
+ *
+ * @extends module:core/command~Command
+ */
+export default class DocumentListStyleCommand extends Command {
+	/**
+	 * Creates an instance of the command.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor The editor instance.
+	 * @param {String} defaultType The list type that will be used by default if the value was not specified during
+	 * the command execution.
+	 */
+	constructor( editor, defaultType ) {
+		super( editor );
+
+		/**
+		 * The default type of the list style.
+		 *
+		 * @protected
+		 * @member {String}
+		 */
+		this._defaultType = defaultType;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		this.value = this._getValue();
+		this.isEnabled = this._checkEnabled();
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 * @param {Object} options
+	 * @param {String|null} [options.type] The type of the list style, e.g. `'disc'` or `'square'`. If `null` is specified, the default
+	 * style will be applied.
+	 */
+	execute( options = {} ) {
+		const model = this.editor.model;
+		const document = model.document;
+
+		model.change( writer => {
+			this._tryToConvertItemsToList( options );
+
+			let blocks = Array.from( document.selection.getSelectedBlocks() )
+				.filter( block => block.hasAttribute( 'listType' ) );
+
+			if ( !blocks.length ) {
+				return;
+			}
+
+			blocks = expandListBlocksToCompleteList( blocks );
+
+			for ( const block of blocks ) {
+				writer.setAttribute( 'listStyle', options.type || this._defaultType, block );
+			}
+		} );
+	}
+
+	/**
+	 * Checks the command's {@link #value}.
+	 *
+	 * @private
+	 * @returns {String|null} The current value.
+	 */
+	_getValue() {
+		const listItem = first( this.editor.model.document.selection.getSelectedBlocks() );
+
+		if ( isListItemBlock( listItem ) ) {
+			return listItem.getAttribute( 'listStyle' );
+		}
+
+		return null;
+	}
+
+	/**
+	 * Checks whether the command can be enabled in the current context.
+	 *
+	 * @private
+	 * @returns {Boolean} Whether the command should be enabled.
+	 */
+	_checkEnabled() {
+		const editor = this.editor;
+
+		const numberedList = editor.commands.get( 'numberedList' );
+		const bulletedList = editor.commands.get( 'bulletedList' );
+
+		return numberedList.isEnabled || bulletedList.isEnabled;
+	}
+
+	/**
+	 * Check if the provided list style is valid. Also change the selection to a list if it's not set yet.
+	 *
+	 * @private
+	 * @param {Object} options
+	 * @param {String|null} [options.type] The type of the list style. If `null` is specified, the function does nothing.
+	*/
+	_tryToConvertItemsToList( options ) {
+		if ( !options.type ) {
+			return;
+		}
+
+		const listType = getListTypeFromListStyleType( options.type );
+
+		if ( !listType ) {
+			return;
+		}
+
+		const editor = this.editor;
+		const commandName = listType + 'List';
+		const command = editor.commands.get( commandName );
+
+		if ( !command.value ) {
+			editor.execute( commandName );
+		}
+	}
+}

package/src/documentlistproperties/utils/style.js

@@ -0,0 +1,41 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+* @module list/documentlistproperties/utils/style
+*/
+
+const BULLETED_LIST_STYLE_TYPES = [ 'disc', 'circle', 'square' ];
+
+// There's a lot of them (https://www.w3.org/TR/css-counter-styles-3/#typedef-counter-style).
+// Let's support only those that can be selected by ListPropertiesUI.
+const NUMBERED_LIST_STYLE_TYPES = [
+	'decimal',
+	'decimal-leading-zero',
+	'lower-roman',
+	'upper-roman',
+	'lower-latin',
+	'upper-latin',
+	'lower-alpha',
+	'upper-alpha'
+];
+
+/**
+* Checks whether the given list-style-type is supported by numbered or bulleted list.
+*
+* @param {String} listStyleType
+* @returns {'bulleted'|'numbered'|null}
+*/
+export function getListTypeFromListStyleType( listStyleType ) {
+	if ( BULLETED_LIST_STYLE_TYPES.includes( listStyleType ) ) {
+		return 'bulleted';
+	}
+
+	if ( NUMBERED_LIST_STYLE_TYPES.includes( listStyleType ) ) {
+		return 'numbered';
+	}
+
+	return null;
+}

package/src/documentlistproperties.js

@@ -0,0 +1,37 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module list/documentlistproperties
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import DocumentListPropertiesEditing from './documentlistproperties/documentlistpropertiesediting';
+import ListPropertiesUI from './listproperties/listpropertiesui';
+
+/**
+ * The document list properties feature.
+ *
+ * This is a "glue" plugin that loads the
+ * {@link module:list/documentlistproperties/documentlistpropertiesediting~DocumentListPropertiesEditing document list properties
+ * editing feature} and the {@link module:list/listproperties/listpropertiesui~ListPropertiesUI list properties UI feature}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class DocumentListProperties extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DocumentListPropertiesEditing, ListPropertiesUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'DocumentListProperties';
+	}
+}

package/src/list/converters.js

@@ -218,6 +218,10 @@ export function modelViewChangeIndent( model ) {
  * @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi Conversion interface.
  */
 export function modelViewSplitOnInsert( evt, data, conversionApi ) {
+	if ( !conversionApi.consumable.test( data.item, evt.name ) ) {
+		return;
+	}
+
 	if ( data.item.name != 'listItem' ) {
 		let viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
 

package/src/list/listediting.js

@@ -171,19 +171,18 @@ export default class ListEditing extends Plugin {
 			evt.stop();
 		}, { context: 'li' } );
 
-		const getCommandExecuter = commandName => {
-			return ( data, cancel ) => {
-				const command = this.editor.commands.get( commandName );
-
-				if ( command.isEnabled ) {
-					this.editor.execute( commandName );
-					cancel();
-				}
-			};
-		};
-
-		editor.keystrokes.set( 'Tab', getCommandExecuter( 'indentList' ) );
-		editor.keystrokes.set( 'Shift+Tab', getCommandExecuter( 'outdentList' ) );
+		this.listenTo( editor.editing.view.document, 'tab', ( evt, data ) => {
+			const commandName = data.shiftKey ? 'outdentList' : 'indentList';
+			const command = this.editor.commands.get( commandName );
+
+			if ( command.isEnabled ) {
+				editor.execute( commandName );
+
+				data.stopPropagation();
+				data.preventDefault();
+				evt.stop();
+			}
+		}, { context: 'li' } );
 	}
 
 	/**

package/src/list.js

@@ -37,7 +37,8 @@ export default class List extends Plugin {
 }
 
 /**
- * The configuration of the {@link module:list/list~List list} feature.
+ * The configuration of the {@link module:list/list~List list} feature
+ * and the {@link module:list/documentlist~DocumentList document list} feature.
  *
  *		ClassicEditor
  *			.create( editorElement, {
@@ -52,7 +53,7 @@ export default class List extends Plugin {
  */
 
 /**
- * The configuration of the {@link module:list/list~List} feature.
+ * The configuration of the {@link module:list/list~List} feature and the {@link module:list/documentlist~DocumentList} feature.
  *
  * Read more in {@link module:list/list~ListConfig}.
  *

package/src/listproperties/listpropertiesediting.js

@@ -626,7 +626,7 @@ function fixListAttributesOnListItemElements( editor, attributeStrategies ) {
 		// ■ List item 1.
 		// ■ Paragraph[]  // <-- The inserted item.
 		if ( !existingListItem || !existingListItem.is( 'element', 'listItem' ) ) {
-			existingListItem = insertedListItems[ insertedListItems.length - 1 ].previousSibling;
+			existingListItem = insertedListItems[ 0 ].previousSibling;
 
 			if ( existingListItem ) {
 				const indent = insertedListItems[ 0 ].getAttribute( 'listIndent' );

package/src/listproperties/listreversedcommand.js

@@ -30,9 +30,9 @@ export default class ListReversedCommand extends Command {
 	/**
 	 * Executes the command.
 	 *
+	 * @fires execute
 	 * @param {Object} options
 	 * @param {Boolean} [options.reversed=false] Whether the list should be reversed.
-	 * @protected
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;

package/src/listproperties/liststartcommand.js

@@ -29,9 +29,9 @@ export default class ListStartCommand extends Command {
 	/**
 	 * Executes the command.
 	 *
+	 * @fires execute
 	 * @param {Object} options
 	 * @param {Number} [options.startIndex=1] The list start index.
-	 * @protected
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;

package/src/listproperties/liststylecommand.js

@@ -50,10 +50,10 @@ export default class ListStyleCommand extends Command {
 	/**
 	 * Executes the command.
 	 *
+	 * @fires execute
 	 * @param {Object} options
 	 * @param {String|null} [options.type] The type of the list style, e.g. `'disc'` or `'square'`. If `null` is specified, the default
 	 * style will be applied.
-	 * @protected
 	 */
 	execute( options = {} ) {
 		this._tryToConvertItemsToList( options );

package/src/listproperties.js

@@ -36,13 +36,17 @@ export default class ListProperties extends Plugin {
 }
 
 /**
- * The configuration of the {@link module:list/listproperties~ListProperties list properties} feature.
+ * The configuration of the {@link module:list/listproperties~ListProperties list properties} feature and the
+ * {@link module:list/documentlistproperties~DocumentListProperties document list properties} feature.
  *
  * This configuration controls the individual list properties. For instance, it enables or disables specific editor commands
- * operating on lists ({@link module:list/listproperties/liststylecommand~ListStyleCommand `listStyle`},
- * {@link module:list/listproperties/liststartcommand~ListStartCommand `listStart`},
- * {@link module:list/listproperties/listreversedcommand~ListReversedCommand `listReversed`}), the look of the UI
- * (`numberedList` and `bulletedList` dropdowns), and the editor data pipeline (allowed HTML attributes).
+ * operating on lists ({@link module:list/listproperties/liststylecommand~ListStyleCommand `'listStyle'`},
+ * {@link module:list/listproperties/liststartcommand~ListStartCommand `'listStart'`},
+ * {@link module:list/listproperties/listreversedcommand~ListReversedCommand `'listReversed'`}, or on the document lists
+ * {@link module:list/documentlistproperties/documentliststylecommand~DocumentListStyleCommand `'listStyle'`},
+ * {@link module:list/documentlistproperties/documentliststartcommand~DocumentListStartCommand `'listStart'`},
+ * {@link module:list/documentlistproperties/documentlistreversedcommand~DocumentListReversedCommand `'listReversed'`}), the look of the UI
+ * (`'numberedList'` and `'bulletedList'` dropdowns), and the editor data pipeline (allowed HTML attributes).
  *
  *		ClassicEditor
  *			.create( editorElement, {
@@ -88,7 +92,8 @@ export default class ListProperties extends Plugin {
  */
 
 /**
- * The configuration of the {@link module:list/listproperties~ListProperties} feature.
+ * The configuration of the {@link module:list/listproperties~ListProperties} feature and the
+ * {@link module:list/documentlistproperties~DocumentListProperties document list properties} feature.
  *
  * Read more in {@link module:list/listproperties~ListPropertiesConfig}.
  *

package/theme/documentlist.css

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck-editor__editable .ck-list-bogus-paragraph {
+	display: block;
+}