@ckeditor/ckeditor5-html-support 33.0.0 → 34.0.0

package/src/integrations/documentlist.js

@@ -0,0 +1,200 @@
+/**
+ * @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 html-support/integrations/documentlist
+ */
+
+import { isEqual } from 'lodash-es';
+import { Plugin } from 'ckeditor5/src/core';
+import { setViewAttributes } from '../conversionutils.js';
+
+import DataFilter from '../datafilter';
+
+/**
+ * Provides the General HTML Support integration with {@link module:list/documentlist~DocumentList Document List} feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class DocumentListElementSupport extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DataFilter ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		if ( !editor.plugins.has( 'DocumentListEditing' ) ) {
+			return;
+		}
+
+		const schema = editor.model.schema;
+		const conversion = editor.conversion;
+		const dataFilter = editor.plugins.get( DataFilter );
+		const documentListEditing = editor.plugins.get( 'DocumentListEditing' );
+
+		// Register downcast strategy.
+		// Note that this must be done before document list editing registers conversion in afterInit.
+		documentListEditing.registerDowncastStrategy( {
+			scope: 'item',
+			attributeName: 'htmlLiAttributes',
+
+			setAttributeOnDowncast( writer, attributeValue, viewElement ) {
+				setViewAttributes( writer, attributeValue, viewElement );
+			}
+		} );
+
+		documentListEditing.registerDowncastStrategy( {
+			scope: 'list',
+			attributeName: 'htmlListAttributes',
+
+			setAttributeOnDowncast( writer, viewAttributes, viewElement ) {
+				setViewAttributes( writer, viewAttributes, viewElement );
+			}
+		} );
+
+		dataFilter.on( 'register', ( evt, definition ) => {
+			if ( ![ 'ul', 'ol', 'li' ].includes( definition.view ) ) {
+				return;
+			}
+
+			evt.stop();
+
+			// Do not register same converters twice.
+			if ( schema.checkAttribute( '$block', 'htmlListAttributes' ) ) {
+				return;
+			}
+
+			schema.extend( '$block', { allowAttributes: [ 'htmlListAttributes', 'htmlLiAttributes' ] } );
+			schema.extend( '$blockObject', { allowAttributes: [ 'htmlListAttributes', 'htmlLiAttributes' ] } );
+			schema.extend( '$container', { allowAttributes: [ 'htmlListAttributes', 'htmlLiAttributes' ] } );
+
+			conversion.for( 'upcast' ).add( dispatcher => {
+				dispatcher.on( 'element:ul', viewToModelListAttributeConverter( 'htmlListAttributes', dataFilter ), { priority: 'low' } );
+				dispatcher.on( 'element:ol', viewToModelListAttributeConverter( 'htmlListAttributes', dataFilter ), { priority: 'low' } );
+				dispatcher.on( 'element:li', viewToModelListAttributeConverter( 'htmlLiAttributes', dataFilter ), { priority: 'low' } );
+			} );
+		} );
+
+		// Make sure that all items in a single list (items at the same level & listType) have the same properties.
+		// Note: This is almost exact copy from DocumentListPropertiesEditing.
+		documentListEditing.on( 'postFixer', ( evt, { listNodes, writer } ) => {
+			const previousNodesByIndent = []; // Last seen nodes of lower indented lists.
+
+			for ( const { node, previous } of listNodes ) {
+				// For the first list block there is nothing to compare with.
+				if ( !previous ) {
+					continue;
+				}
+
+				const nodeIndent = node.getAttribute( 'listIndent' );
+				const previousNodeIndent = previous.getAttribute( 'listIndent' );
+
+				let previousNodeInList = null; // It's like `previous` but has the same indent as current node.
+
+				// Let's find previous node for the same indent.
+				// We're going to need that when we get back to previous indent.
+				if ( nodeIndent > previousNodeIndent ) {
+					previousNodesByIndent[ previousNodeIndent ] = previous;
+				}
+				// Restore the one for given indent.
+				else if ( nodeIndent < previousNodeIndent ) {
+					previousNodeInList = previousNodesByIndent[ nodeIndent ];
+					previousNodesByIndent.length = nodeIndent;
+				}
+				// Same indent.
+				else {
+					previousNodeInList = previous;
+				}
+
+				// This is a first item of a nested list.
+				if ( !previousNodeInList ) {
+					continue;
+				}
+
+				if ( previousNodeInList.getAttribute( 'listType' ) == node.getAttribute( 'listType' ) ) {
+					const value = previousNodeInList.getAttribute( 'htmlListAttributes' );
+
+					if ( !isEqual( node.getAttribute( 'htmlListAttributes' ), value ) ) {
+						writer.setAttribute( 'htmlListAttributes', value, node );
+						evt.return = true;
+					}
+				}
+
+				if ( previousNodeInList.getAttribute( 'listItemId' ) == node.getAttribute( 'listItemId' ) ) {
+					const value = previousNodeInList.getAttribute( 'htmlLiAttributes' );
+
+					if ( !isEqual( node.getAttribute( 'htmlLiAttributes' ), value ) ) {
+						writer.setAttribute( 'htmlLiAttributes', value, node );
+						evt.return = true;
+					}
+				}
+			}
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	afterInit() {
+		const editor = this.editor;
+
+		if ( !editor.commands.get( 'indentList' ) ) {
+			return;
+		}
+
+		// Reset list attributes after indenting list items.
+		this.listenTo( editor.commands.get( 'indentList' ), 'afterExecute', ( evt, changedBlocks ) => {
+			editor.model.change( writer => {
+				for ( const node of changedBlocks ) {
+					// Just reset the attribute.
+					// If there is a previous indented list that this node should be merged into,
+					// the postfixer will unify all the attributes of both sub-lists.
+					writer.setAttribute( 'htmlListAttributes', {}, node );
+				}
+			} );
+		} );
+	}
+}
+
+// View-to-model conversion helper preserving allowed attributes on {@link TODO}
+// feature model element.
+//
+// @private
+// @param {String} attributeName
+// @param {module:html-support/datafilter~DataFilter} dataFilter
+// @returns {Function} Returns a conversion callback.
+function viewToModelListAttributeConverter( attributeName, dataFilter ) {
+	return ( evt, data, conversionApi ) => {
+		const viewElement = data.viewItem;
+
+		if ( !data.modelRange ) {
+			Object.assign( data, conversionApi.convertChildren( data.viewItem, data.modelCursor ) );
+		}
+
+		const viewAttributes = dataFilter._consumeAllowedAttributes( viewElement, conversionApi );
+
+		for ( const item of data.modelRange.getItems( { shallow: true } ) ) {
+			// Apply only to list item blocks.
+			if ( !item.hasAttribute( 'listItemId' ) ) {
+				continue;
+			}
+
+			// Set list attributes only on same level items, those nested deeper are already handled
+			// by the recursive conversion.
+			if ( item.hasAttribute( attributeName ) ) {
+				continue;
+			}
+
+			conversionApi.writer.setAttribute( attributeName, viewAttributes || {}, item );
+		}
+	};
+}

package/src/integrations/image.js

@@ -10,7 +10,10 @@
 import { Plugin } from 'ckeditor5/src/core';
 
 import DataFilter from '../datafilter';
-import { setViewAttributes } from '../conversionutils.js';
+import {
+	setViewAttributes,
+	updateViewAttributes
+} from '../conversionutils.js';
 
 /**
  * Provides the General HTML Support integration with the {@link module:image/image~Image Image} feature.
@@ -84,6 +87,10 @@ export default class ImageElementSupport extends Plugin {
 function viewToModelImageAttributeConverter( dataFilter ) {
 	return dispatcher => {
 		dispatcher.on( 'element:img', ( evt, data, conversionApi ) => {
+			if ( !data.modelRange ) {
+				return;
+			}
+
 			const viewImageElement = data.viewItem;
 			const viewContainerElement = viewImageElement.parent;
 
@@ -130,7 +137,7 @@ function modelToViewImageAttributeConverter() {
 
 		addBlockAttributeConversion( 'img', 'htmlAttributes' );
 		addBlockAttributeConversion( 'figure', 'htmlFigureAttributes' );
-		addBlockImageLinkAttributeConversion();
+		addBlockAttributeConversion( 'a', 'htmlLinkAttributes' );
 
 		function addInlineAttributeConversion( attributeName ) {
 			dispatcher.on( `attribute:${ attributeName }:imageInline`, ( evt, data, conversionApi ) => {
@@ -138,38 +145,42 @@ function modelToViewImageAttributeConverter() {
 					return;
 				}
 
+				const { attributeOldValue, attributeNewValue } = data;
 				const viewElement = conversionApi.mapper.toViewElement( data.item );
 
-				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+				updateViewAttributes( conversionApi.writer, attributeOldValue, attributeNewValue, viewElement );
 			}, { priority: 'low' } );
 		}
 
 		function addBlockAttributeConversion( elementName, attributeName ) {
 			dispatcher.on( `attribute:${ attributeName }:imageBlock`, ( evt, data, conversionApi ) => {
-				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+				if ( !conversionApi.consumable.test( data.item, evt.name ) ) {
 					return;
 				}
 
+				const { attributeOldValue, attributeNewValue } = data;
 				const containerElement = conversionApi.mapper.toViewElement( data.item );
 				const viewElement = getDescendantElement( conversionApi.writer, containerElement, elementName );
 
-				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+				if ( viewElement ) {
+					updateViewAttributes( conversionApi.writer, attributeOldValue, attributeNewValue, viewElement );
+					conversionApi.consumable.consume( data.item, evt.name );
+				}
 			}, { priority: 'low' } );
-		}
 
-		// To have a link element in the view, we need to attach a converter to the `linkHref` attribute.
-		// Doing this directly on `htmlLinkAttributes` will fail, as the link wrapper is not yet called at that moment.
-		function addBlockImageLinkAttributeConversion( ) {
-			dispatcher.on( 'attribute:linkHref:imageBlock', ( evt, data, conversionApi ) => {
-				if ( !conversionApi.consumable.consume( data.item, 'attribute:htmlLinkAttributes:imageBlock' ) ) {
-					return;
-				}
+			if ( elementName === 'a' ) {
+				// To have a link element in the view, we need to attach a converter to the `linkHref` attribute as well.
+				dispatcher.on( 'attribute:linkHref:imageBlock', ( evt, data, conversionApi ) => {
+					if ( !conversionApi.consumable.consume( data.item, 'attribute:htmlLinkAttributes:imageBlock' ) ) {
+						return;
+					}
 
-				const containerElement = conversionApi.mapper.toViewElement( data.item );
-				const viewElement = getDescendantElement( conversionApi.writer, containerElement, 'a' );
+					const containerElement = conversionApi.mapper.toViewElement( data.item );
+					const viewElement = getDescendantElement( conversionApi.writer, containerElement, 'a' );
 
-				setViewAttributes( conversionApi.writer, data.item.getAttribute( 'htmlLinkAttributes' ), viewElement );
-			}, { priority: 'low' } );
+					setViewAttributes( conversionApi.writer, data.item.getAttribute( 'htmlLinkAttributes' ), viewElement );
+				}, { priority: 'low' } );
+			}
 		}
 	};
 }

package/src/integrations/mediaembed.js

@@ -9,9 +9,9 @@
 
 import { Plugin } from 'ckeditor5/src/core';
 
-import { setViewAttributes } from '../conversionutils.js';
 import DataFilter from '../datafilter';
 import DataSchema from '../dataschema';
+import { updateViewAttributes } from '../conversionutils.js';
 
 /**
  * Provides the General HTML Support integration with {@link module:media-embed/mediaembed~MediaEmbed Media Embed} feature.
@@ -100,10 +100,11 @@ function modelToViewMediaAttributeConverter( mediaElementName ) {
 					return;
 				}
 
+				const { attributeOldValue, attributeNewValue } = data;
 				const containerElement = conversionApi.mapper.toViewElement( data.item );
 				const viewElement = getDescendantElement( conversionApi.writer, containerElement, elementName );
 
-				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+				updateViewAttributes( conversionApi.writer, attributeOldValue, attributeNewValue, viewElement );
 			} );
 		}
 	};

package/src/schemadefinitions.js

@@ -108,14 +108,6 @@ export default {
 		},
 
 		// Compatibility features
-		{
-			model: '$htmlSection',
-			modelSchema: {
-				allowChildren: '$block',
-				allowIn: [ '$root', '$htmlSection' ],
-				isBlock: true
-			}
-		},
 		{
 			model: 'htmlP',
 			view: 'p',
@@ -127,14 +119,14 @@ export default {
 			model: 'htmlBlockquote',
 			view: 'blockquote',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container'
 			}
 		},
 		{
 			model: 'htmlTable',
 			view: 'table',
 			modelSchema: {
-				allowIn: [ '$htmlSection', '$root' ],
+				allowWhere: '$block',
 				isBlock: true
 			}
 		},
@@ -175,8 +167,7 @@ export default {
 			model: 'htmlTr',
 			view: 'tr',
 			modelSchema: {
-				allowIn: [ 'htmlTable', 'htmlThead', 'htmlTbody' ],
-				isBlock: true
+				allowIn: [ 'htmlTable', 'htmlThead', 'htmlTbody' ]
 			}
 		},
 		// TODO can also include text.
@@ -185,8 +176,7 @@ export default {
 			view: 'td',
 			modelSchema: {
 				allowIn: 'htmlTr',
-				allowChildren: [ '$block', '$htmlSection' ],
-				isBlock: true
+				allowContentOf: '$container'
 			}
 		},
 		// TODO can also include text.
@@ -195,8 +185,7 @@ export default {
 			view: 'th',
 			modelSchema: {
 				allowIn: 'htmlTr',
-				allowChildren: [ '$block', '$htmlSection' ],
-				isBlock: true
+				allowContentOf: '$container'
 			}
 		},
 		// TODO can also include text.
@@ -204,7 +193,7 @@ export default {
 			model: 'htmlFigure',
 			view: 'figure',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection',
+				inheritAllFrom: '$container',
 				isBlock: true
 			}
 		},
@@ -223,7 +212,8 @@ export default {
 			model: 'htmlAddress',
 			view: 'address',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		},
 		// TODO can also include text.
@@ -231,7 +221,8 @@ export default {
 			model: 'htmlAside',
 			view: 'aside',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		},
 		// TODO can also include text.
@@ -239,7 +230,8 @@ export default {
 			model: 'htmlMain',
 			view: 'main',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		},
 		// TODO can also include text.
@@ -247,7 +239,8 @@ export default {
 			model: 'htmlDetails',
 			view: 'details',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		},
 		{
@@ -264,7 +257,7 @@ export default {
 			view: 'div',
 			paragraphLikeModel: 'htmlDivParagraph',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container'
 			}
 		},
 		// TODO can also include text.
@@ -272,7 +265,8 @@ export default {
 			model: 'htmlFieldset',
 			view: 'fieldset',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		},
 		// TODO can also include h1-h6.
@@ -289,7 +283,8 @@ export default {
 			model: 'htmlHeader',
 			view: 'header',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		},
 		// TODO can also include text.
@@ -297,7 +292,8 @@ export default {
 			model: 'htmlFooter',
 			view: 'footer',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		},
 		// TODO can also include text.
@@ -305,7 +301,8 @@ export default {
 			model: 'htmlForm',
 			view: 'form',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		},
 		{
@@ -368,7 +365,7 @@ export default {
 		{
 			model: '$htmlList',
 			modelSchema: {
-				allowWhere: '$htmlSection',
+				allowWhere: '$container',
 				allowChildren: [ '$htmlList', 'htmlLi' ],
 				isBlock: true
 			}
@@ -422,14 +419,16 @@ export default {
 			model: 'htmlArticle',
 			view: 'article',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		},
 		{
 			model: 'htmlSection',
 			view: 'section',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		},
 		// TODO can also include text.
@@ -437,14 +436,15 @@ export default {
 			model: 'htmlNav',
 			view: 'nav',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		},
 		{
 			model: 'htmlDl',
 			view: 'dl',
 			modelSchema: {
-				allowIn: [ '$htmlSection', '$root' ],
+				allowWhere: '$container',
 				allowChildren: [ 'htmlDt', 'htmlDd' ],
 				isBlock: true
 			}
@@ -469,17 +469,8 @@ export default {
 			model: 'htmlCenter',
 			view: 'center',
 			modelSchema: {
-				inheritAllFrom: '$htmlSection'
-			}
-		},
-		// Objects
-		{
-			model: '$htmlObjectBlock',
-			isObject: true,
-			modelSchema: {
-				isObject: true,
-				isBlock: true,
-				allowWhere: '$block'
+				inheritAllFrom: '$container',
+				isBlock: true
 			}
 		}
 	],
@@ -706,22 +697,12 @@ export default {
 		},
 
 		// Objects
-		{
-			model: '$htmlObjectInline',
-			isObject: true,
-			modelSchema: {
-				isObject: true,
-				isInline: true,
-				allowWhere: '$text',
-				allowAttributesOf: '$text'
-			}
-		},
 		{
 			model: 'htmlObject',
 			view: 'object',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -729,7 +710,7 @@ export default {
 			view: 'iframe',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -737,7 +718,7 @@ export default {
 			view: 'input',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -745,7 +726,7 @@ export default {
 			view: 'button',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -753,7 +734,7 @@ export default {
 			view: 'textarea',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -761,7 +742,7 @@ export default {
 			view: 'select',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -769,7 +750,7 @@ export default {
 			view: 'video',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -777,7 +758,7 @@ export default {
 			view: 'embed',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -785,7 +766,7 @@ export default {
 			view: 'oembed',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -793,7 +774,7 @@ export default {
 			view: 'audio',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -801,7 +782,7 @@ export default {
 			view: 'img',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -809,7 +790,7 @@ export default {
 			view: 'canvas',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		// TODO it could be probably represented as non-object element, although it has graphical representation,
@@ -819,7 +800,7 @@ export default {
 			view: 'meter',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		// TODO it could be probably represented as non-object element, although it has graphical representation,
@@ -829,7 +810,7 @@ export default {
 			view: 'progress',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{

package/theme/datafilter.css

@@ -1,3 +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
+ */
+
 :root {
 	--ck-html-object-embed-unfocused-outline-width: 1px;
 }