@ckeditor/ckeditor5-list 34.0.1 → 35.0.0

package/src/documentlist/documentlistediting.js

@@ -34,7 +34,8 @@ import {
 	isLastBlockOfListItem,
 	isSingleListItem,
 	getSelectedBlockObject,
-	isListItemBlock
+	isListItemBlock,
+	removeListAttributes
 } from './utils/model';
 import {
 	getViewElementIdForListType,
@@ -116,8 +117,6 @@ export default class DocumentListEditing extends Plugin {
 			} );
 		}
 
-		model.on( 'insertContent', createModelIndentPasteFixer( model ), { priority: 'high' } );
-
 		// Register commands.
 		editor.commands.add( 'numberedList', new DocumentListCommand( editor, 'numbered' ) );
 		editor.commands.add( 'bulletedList', new DocumentListCommand( editor, 'bulleted' ) );
@@ -134,6 +133,7 @@ export default class DocumentListEditing extends Plugin {
 		this._setupDeleteIntegration();
 		this._setupEnterIntegration();
 		this._setupTabIntegration();
+		this._setupClipboardIntegration();
 	}
 
 	/**
@@ -455,6 +455,54 @@ export default class DocumentListEditing extends Plugin {
 			evt.return = fixListItemIds( listNodes, seenIds, writer ) || evt.return;
 		}, { priority: 'high' } );
 	}
+
+	/**
+	 * Integrates the feature with the clipboard via {@link module:engine/model/model~Model#insertContent} and
+	 * {@link module:engine/model/model~Model#getSelectedContent}.
+	 *
+	 * @private
+	 */
+	_setupClipboardIntegration() {
+		const model = this.editor.model;
+
+		this.listenTo( model, 'insertContent', createModelIndentPasteFixer( model ), { priority: 'high' } );
+
+		// To enhance the UX, the editor should not copy list attributes to the clipboard if the selection
+		// started and ended in the same list item.
+		//
+		// If the selection was enclosed in a single list item, there is a good chance the user did not want it
+		// copied as a list item but plain blocks.
+		//
+		// This avoids pasting orphaned list items instead of paragraphs, for instance, straight into the root.
+		//
+		//	                       ┌─────────────────────┬───────────────────┐
+		//	                       │ Selection           │ Clipboard content │
+		//	                       ├─────────────────────┼───────────────────┤
+		//	                       │ [* <Widget />]      │ <Widget />        │
+		//	                       ├─────────────────────┼───────────────────┤
+		//	                       │ [* Foo]             │ Foo               │
+		//	                       ├─────────────────────┼───────────────────┤
+		//	                       │ * Foo [bar] baz     │ bar               │
+		//	                       ├─────────────────────┼───────────────────┤
+		//	                       │ * Fo[o              │ o                 │
+		//	                       │   ba]r              │ ba                │
+		//	                       ├─────────────────────┼───────────────────┤
+		//	                       │ * Fo[o              │ * o               │
+		//	                       │ * ba]r              │ * ba              │
+		//	                       ├─────────────────────┼───────────────────┤
+		//	                       │ [* Foo              │ * Foo             │
+		//	                       │  * bar]             │ * bar             │
+		//	                       └─────────────────────┴───────────────────┘
+		//
+		// See https://github.com/ckeditor/ckeditor5/issues/11608.
+		this.listenTo( model, 'getSelectedContent', ( evt, [ selection ] ) => {
+			const isSingleListItemSelected = isSingleListItem( Array.from( selection.getSelectedBlocks() ) );
+
+			if ( isSingleListItemSelected ) {
+				model.change( writer => removeListAttributes( Array.from( evt.return.getChildren() ), writer ) );
+			}
+		} );
+	}
 }
 
 /**

package/src/documentlistproperties/documentlistpropertiesediting.js

@@ -14,7 +14,12 @@ import DocumentListStartCommand from './documentliststartcommand';
 import DocumentListStyleCommand from './documentliststylecommand';
 import DocumentListReversedCommand from './documentlistreversedcommand';
 import { listPropertiesUpcastConverter } from './converters';
-import { getListTypeFromListStyleType } from './utils/style';
+import {
+	getAllSupportedStyleTypes,
+	getListTypeFromListStyleType,
+	getListStyleTypeFromTypeAttribute,
+	getTypeAttributeFromListStyleType
+} from './utils/style';
 
 const DEFAULT_LIST_TYPE = 'default';
 
@@ -221,7 +226,8 @@ export default class DocumentListPropertiesEditing extends Plugin {
 // Creates an array of strategies for dealing with enabled listItem attributes.
 //
 // @param {Object} enabledProperties
-// @param {Boolean} enabledProperties.styles
+// @param {Boolean|Object} enabledProperties.styles
+// @param {Boolean} [enabledProperties.styles.useAttribute]
 // @param {Boolean} enabledProperties.reversed
 // @param {Boolean} enabledProperties.startIndex
 // @returns {Array.<module:list/documentlistproperties/documentlistpropertiesediting~AttributeStrategy>}
@@ -229,13 +235,21 @@ function createAttributeStrategies( enabledProperties ) {
 	const strategies = [];
 
 	if ( enabledProperties.styles ) {
+		const useAttribute = typeof enabledProperties.styles == 'object' && enabledProperties.styles.useAttribute;
+
 		strategies.push( {
 			attributeName: 'listStyle',
 			defaultValue: DEFAULT_LIST_TYPE,
 			viewConsumables: { styles: 'list-style-type' },
 
 			addCommand( editor ) {
-				editor.commands.add( 'listStyle', new DocumentListStyleCommand( editor, DEFAULT_LIST_TYPE ) );
+				let supportedTypes = getAllSupportedStyleTypes();
+
+				if ( useAttribute ) {
+					supportedTypes = supportedTypes.filter( styleType => !!getTypeAttributeFromListStyleType( styleType ) );
+				}
+
+				editor.commands.add( 'listStyle', new DocumentListStyleCommand( editor, DEFAULT_LIST_TYPE, supportedTypes ) );
 			},
 
 			appliesToListItem() {
@@ -258,14 +272,39 @@ function createAttributeStrategies( enabledProperties ) {
 
 			setAttributeOnDowncast( writer, listStyle, element ) {
 				if ( listStyle && listStyle !== DEFAULT_LIST_TYPE ) {
-					writer.setStyle( 'list-style-type', listStyle, element );
-				} else {
-					writer.removeStyle( 'list-style-type', element );
+					if ( useAttribute ) {
+						const value = getTypeAttributeFromListStyleType( listStyle );
+
+						if ( value ) {
+							writer.setAttribute( 'type', value, element );
+
+							return;
+						}
+					} else {
+						writer.setStyle( 'list-style-type', listStyle, element );
+
+						return;
+					}
 				}
+
+				writer.removeStyle( 'list-style-type', element );
+				writer.removeAttribute( 'type', element );
 			},
 
 			getAttributeOnUpcast( listParent ) {
-				return listParent.getStyle( 'list-style-type' ) || DEFAULT_LIST_TYPE;
+				const style = listParent.getStyle( 'list-style-type' );
+
+				if ( style ) {
+					return style;
+				}
+
+				const attribute = listParent.getAttribute( 'type' );
+
+				if ( attribute ) {
+					return getListStyleTypeFromTypeAttribute( attribute );
+				}
+
+				return DEFAULT_LIST_TYPE;
 			}
 		} );
 	}

package/src/documentlistproperties/documentliststylecommand.js

@@ -29,8 +29,9 @@ export default class DocumentListStyleCommand extends 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.
+	 * @param {Array.<String>} [supportedTypes] The list of supported style types by this command.
 	 */
-	constructor( editor, defaultType ) {
+	constructor( editor, defaultType, supportedTypes ) {
 		super( editor );
 
 		/**
@@ -40,6 +41,14 @@ export default class DocumentListStyleCommand extends Command {
 		 * @member {String}
 		 */
 		this._defaultType = defaultType;
+
+		/**
+		 * The list of supported style types by this command.
+		 *
+		 * @private
+		 * @member {Array.<String>|undefined}
+		 */
+		this._supportedTypes = supportedTypes;
 	}
 
 	/**
@@ -80,6 +89,20 @@ export default class DocumentListStyleCommand extends Command {
 		} );
 	}
 
+	/**
+	 * Checks if the given style type is supported by this plugin.
+	 *
+	 * @param {String} value
+	 * @returns {Boolean}
+	 */
+	isStyleTypeSupported( value ) {
+		if ( !this._supportedTypes ) {
+			return true;
+		}
+
+		return this._supportedTypes.includes( value );
+	}
+
 	/**
 	 * Checks the command's {@link #value}.
 	 *

package/src/documentlistproperties/utils/style.js

@@ -7,21 +7,42 @@
 * @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'
+const LIST_STYLE_TO_LIST_TYPE = {};
+const LIST_STYLE_TO_TYPE_ATTRIBUTE = {};
+const TYPE_ATTRIBUTE_TO_LIST_STYLE = {};
+
+const LIST_STYLE_TYPES = [
+	{ listStyle: 'disc', typeAttribute: 'disc', listType: 'bulleted' },
+	{ listStyle: 'circle', typeAttribute: 'circle', listType: 'bulleted' },
+	{ listStyle: 'square', typeAttribute: 'square', listType: 'bulleted' },
+	{ listStyle: 'decimal', typeAttribute: '1', listType: 'numbered' },
+	{ listStyle: 'decimal-leading-zero', typeAttribute: null, listType: 'numbered' },
+	{ listStyle: 'lower-roman', typeAttribute: 'i', listType: 'numbered' },
+	{ listStyle: 'upper-roman', typeAttribute: 'I', listType: 'numbered' },
+	{ listStyle: 'lower-alpha', typeAttribute: 'a', listType: 'numbered' },
+	{ listStyle: 'upper-alpha', typeAttribute: 'A', listType: 'numbered' },
+	{ listStyle: 'lower-latin', typeAttribute: 'a', listType: 'numbered' },
+	{ listStyle: 'upper-latin', typeAttribute: 'A', listType: 'numbered' }
 ];
 
+for ( const { listStyle, typeAttribute, listType } of LIST_STYLE_TYPES ) {
+	LIST_STYLE_TO_LIST_TYPE[ listStyle ] = listType;
+	LIST_STYLE_TO_TYPE_ATTRIBUTE[ listStyle ] = typeAttribute;
+
+	if ( typeAttribute ) {
+		TYPE_ATTRIBUTE_TO_LIST_STYLE[ typeAttribute ] = listStyle;
+	}
+}
+
+/**
+ * Gets all the style types supported by given list type.
+ *
+ * @returns {Array.<String>}
+ */
+export function getAllSupportedStyleTypes() {
+	return LIST_STYLE_TYPES.map( x => x.listStyle );
+}
+
 /**
 * Checks whether the given list-style-type is supported by numbered or bulleted list.
 *
@@ -29,13 +50,25 @@ const NUMBERED_LIST_STYLE_TYPES = [
 * @returns {'bulleted'|'numbered'|null}
 */
 export function getListTypeFromListStyleType( listStyleType ) {
-	if ( BULLETED_LIST_STYLE_TYPES.includes( listStyleType ) ) {
-		return 'bulleted';
-	}
+	return LIST_STYLE_TO_LIST_TYPE[ listStyleType ] || null;
+}
 
-	if ( NUMBERED_LIST_STYLE_TYPES.includes( listStyleType ) ) {
-		return 'numbered';
-	}
+/**
+ * Converts `type` attribute of `<ul>` or `<ol>` elements to `list-style-type` equivalent.
+ *
+ * @param {String} value
+ * @returns {String|null}
+ */
+export function getListStyleTypeFromTypeAttribute( value ) {
+	return TYPE_ATTRIBUTE_TO_LIST_STYLE[ value ] || null;
+}
 
-	return null;
+/**
+ * Converts `list-style-type` style to `type` attribute of `<ul>` or `<ol>` elements.
+ *
+ * @param {String} value
+ * @returns {String|null}
+ */
+export function getTypeAttributeFromListStyleType( value ) {
+	return LIST_STYLE_TO_TYPE_ATTRIBUTE[ value ] || null;
 }

package/src/listproperties/listpropertiesui.js

@@ -8,7 +8,7 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
-import { ButtonView, SplitButtonView, createDropdown } from 'ckeditor5/src/ui';
+import { ButtonView, SplitButtonView, createDropdown, focusChildOnDropdownOpen } from 'ckeditor5/src/ui';
 
 import ListPropertiesView from './ui/listpropertiesview';
 
@@ -184,6 +184,15 @@ function getDropdownViewCreator( { editor, parentCommandName, buttonLabel, butto
 
 		dropdownView.panelView.children.add( listPropertiesView );
 
+		// Accessibility: focus the first active style when opening the dropdown.
+		focusChildOnDropdownOpen( dropdownView, () => listPropertiesView.stylesView.children.find( child => child.isOn ) );
+
+		// Focus the editable after executing the command.
+		// Overrides a default behaviour where the focus is moved to the dropdown button (#12125).
+		dropdownView.on( 'execute', () => {
+			editor.editing.view.focus();
+		} );
+
 		return dropdownView;
 	};
 }
@@ -234,8 +243,6 @@ function getStyleButtonCreator( { editor, listStyleCommand, parentCommandName }
 					editor.execute( 'listStyle', { type } );
 				} );
 			}
-
-			editor.editing.view.focus();
 		} );
 
 		return button;
@@ -277,7 +284,12 @@ function createListPropertiesView( {
 			listStyleCommand
 		} );
 
-		styleButtonViews = styleDefinitions.map( styleButtonCreator );
+		// The command can be ListStyleCommand or DocumentListStyleCommand.
+		const isStyleTypeSupported = typeof listStyleCommand.isStyleTypeSupported == 'function' ?
+			styleDefinition => listStyleCommand.isStyleTypeSupported( styleDefinition.type ) :
+			() => true;
+
+		styleButtonViews = styleDefinitions.filter( isStyleTypeSupported ).map( styleButtonCreator );
 	}
 
 	const listPropertiesView = new ListPropertiesView( locale, {

package/src/listproperties.js

@@ -65,10 +65,14 @@ export default class ListProperties extends Plugin {
  */
 
 /**
- * When set, the list style feature will be enabled. It allows changing the `list-style-type` HTML attribute of the lists.
+ * When set, the list style feature will be enabled. It allows changing the `list-style-type` style or the `type` HTML attribute of a list.
+ *
+ * **Note**: Styling using the `type` HTML attribute is only available in
+ * {@link module:list/documentlistproperties~DocumentListProperties document list properties}
+ * ({@link module:list/listproperties~ListPropertiesStyleConfig learn more}).
  *
  * @default true
- * @member {Boolean} module:list/listproperties~ListPropertiesConfig#styles
+ * @member {Boolean|module:list/listproperties~ListPropertiesStyleConfig} module:list/listproperties~ListPropertiesConfig#styles
  */
 
 /**
@@ -99,3 +103,33 @@ export default class ListProperties extends Plugin {
  *
  * @member {module:list/listproperties~ListPropertiesConfig} module:list/list~ListConfig#properties
  */
+
+/**
+ * @interface ListPropertiesStyleConfig
+ */
+
+/**
+ * When set `true`, the list style feature will use the `type` attribute of `<ul>` and `<ol>` elements instead of the `list-style-type`
+ * style.
+ *
+ *		{
+ *			list: {
+ *				properties: {
+ *					styles: {
+ *						useAttribute: true
+ *					},
+ *
+ *					// ...
+ *				}
+ *			},
+ *
+ *			// ...
+ *		}
+ *
+ * **Note**: Due to limitations of HTML, the "Decimal with leading zero" style is impossible to set using the `type` attribute.
+ *
+ * **Note**: This configuration works only with {@link module:list/documentlistproperties~DocumentListProperties document list properties}.
+ *
+ * @default false
+ * @member {Boolean} module:list/listproperties~ListPropertiesStyleConfig#useAttribute
+ */