[Document list] GHS integration

packages/ckeditor5-engine/src/view/downcastwriter.js

@@ -1626,10 +1626,18 @@ export default class DowncastWriter {
 	 * 	@returns {Boolean} Returns `true` if elements are merged.
 	 */
 	_wrapAttributeElement( wrapper, toWrap ) {
-		if ( !canBeJoined( wrapper, toWrap ) ) {
+		if ( wrapper.id !== toWrap.id ) {
 			return false;
 		}
 
+		// Those elements have the same ID so just wrap those without further checking.
+		if ( wrapper.id !== null ) {
+			// Move all attributes/classes/styles from wrapper to wrapped AttributeElement.
+			this._mergeElementAttributes( wrapper, toWrap );
+
+			return true;
+		}
+
 		// Can't merge if name or priority differs.
 		if ( wrapper.name !== toWrap.name || wrapper.priority !== toWrap.priority ) {
 			return false;
@@ -1656,6 +1664,17 @@ export default class DowncastWriter {
 		}
 
 		// Move all attributes/classes/styles from wrapper to wrapped AttributeElement.
+		this._mergeElementAttributes( wrapper, toWrap );
+
+		return true;
+	}
+
+	/**
+	 * TODO
+	 *
+	 * @private
+	 */
+	_mergeElementAttributes( wrapper, toWrap ) {
 		for ( const key of wrapper.getAttributeKeys() ) {
 			// Classes and styles should be checked separately.
 			if ( key === 'class' || key === 'style' ) {
@@ -1679,8 +1698,6 @@ export default class DowncastWriter {
 				this.addClass( key, toWrap );
 			}
 		}
-
-		return true;
 	}
 
 	/**
@@ -1694,10 +1711,18 @@ export default class DowncastWriter {
 	 * @returns {Boolean} Returns `true` if elements are unwrapped.
 	 **/
 	_unwrapAttributeElement( wrapper, toUnwrap ) {
-		if ( !canBeJoined( wrapper, toUnwrap ) ) {
+		if ( wrapper.id !== toUnwrap.id ) {
 			return false;
 		}
 
+		// Those elements have the same ID so just unwrap those without further checking.
+		if ( wrapper.id !== null ) {
+			// Remove all wrapper's attributes from unwrapped element.
+			this._unmergeElementAttributes( wrapper, toUnwrap );
+
+			return true;
+		}
+
 		// Can't unwrap if name or priority differs.
 		if ( wrapper.name !== toUnwrap.name || wrapper.priority !== toUnwrap.priority ) {
 			return false;
@@ -1730,6 +1755,17 @@ export default class DowncastWriter {
 		}
 
 		// Remove all wrapper's attributes from unwrapped element.
+		this._unmergeElementAttributes( wrapper, toUnwrap );
+
+		return true;
+	}
+
+	/**
+	 * TODO
+	 *
+	 * @private
+	 */
+	_unmergeElementAttributes( wrapper, toUnwrap ) {
 		for ( const key of wrapper.getAttributeKeys() ) {
 			// Classes and styles should be checked separately.
 			if ( key === 'class' || key === 'style' ) {
@@ -1744,8 +1780,6 @@ export default class DowncastWriter {
 
 		// Remove all wrapper's styles from unwrapped element.
 		this.removeStyle( Array.from( wrapper.getStyleNames() ), toUnwrap );
-
-		return true;
 	}
 
 	/**
@@ -2180,14 +2214,3 @@ function validateRangeContainer( range, errorContext ) {
 		throw new CKEditorError( 'view-writer-invalid-range-container', errorContext );
 	}
 }
-
-// Checks if two attribute elements can be joined together. Elements can be joined together if, and only if
-// they do not have ids specified.
-//
-// @private
-// @param {module:engine/view/element~Element} a
-// @param {module:engine/view/element~Element} b
-// @returns {Boolean}
-function canBeJoined( a, b ) {
-	return a.id === null && b.id === null;
-}

packages/ckeditor5-html-support/src/generalhtmlsupport.js

@@ -18,6 +18,7 @@ import MediaEmbedElementSupport from './integrations/mediaembed';
 import ScriptElementSupport from './integrations/script';
 import TableElementSupport from './integrations/table';
 import StyleElementSupport from './integrations/style';
+import DocumentListElementSupport from './integrations/documentlist';
 
 /**
  * The General HTML Support feature.
@@ -48,7 +49,8 @@ export default class GeneralHtmlSupport extends Plugin {
 			MediaEmbedElementSupport,
 			ScriptElementSupport,
 			TableElementSupport,
-			StyleElementSupport
+			StyleElementSupport,
+			DocumentListElementSupport
 		];
 	}
 

packages/ckeditor5-html-support/src/integrations/documentlist.js

@@ -0,0 +1,169 @@
+/**
+ * @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 { 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' );
+
+		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' } );
+			} );
+
+			// Register downcast strategy.
+			documentListEditing.registerDowncastStrategy( {
+				scope: 'item',
+				attributeName: 'htmlLiAttributes',
+				setAttributeOnDowncast: setViewAttributes
+			} );
+
+			documentListEditing.registerDowncastStrategy( {
+				scope: 'list',
+				attributeName: 'htmlListAttributes',
+				setAttributeOnDowncast: setViewAttributes
+			} );
+
+			// 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 ( 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 ( node.getAttribute( 'htmlLiAttributes' ) != value ) {
+							writer.setAttribute( 'htmlLiAttributes', value, node );
+							evt.return = true;
+						}
+					}
+				}
+			} );
+		} );
+	}
+}
+
+// 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 );
+		}
+	};
+}

packages/ckeditor5-html-support/tests/manual/documentlist.html

@@ -0,0 +1,32 @@
+<head>
+	<meta http-equiv="Content-Security-Policy"
+		content="script-src 'self' https://ckeditor.com 'unsafe-inline' 'unsafe-eval'">
+</head>
+
+<div id="editor">
+	<ul data-main="list" style="background-color: yellow">
+		<li data-main="item" style="background-color: pink">
+			<p data-node="p1">foo</p>
+			<p data-node="p2">bar</p>
+			<ol data-nested="list" style="background-color: orange">
+				<li data-nested="item" style="background-color: red">x</li>
+				<li data-nested="item2" style="background-color: red">y</li>
+			</ol>
+		</li>
+	</ul>
+</div>
+
+<style>
+	ul, ol {
+		border: 2px dashed blue;
+		padding-top: 5px;
+		padding-bottom: 5px;
+		margin: 5px;
+	}
+
+	li {
+		border: 2px dotted red;
+		padding: 5px;
+		margin: 5px;
+	}
+</style>

packages/ckeditor5-html-support/tests/manual/documentlist.js

@@ -0,0 +1,60 @@
+/**
+ * @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
+ */
+
+/* globals console:false, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
+import DocumentListProperties from '@ckeditor/ckeditor5-list/src/documentlistproperties';
+import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';
+
+import GeneralHtmlSupport from '../../src/generalhtmlsupport';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [
+			Bold,
+			DocumentListProperties,
+			Essentials,
+			Italic,
+			Paragraph,
+			Strikethrough,
+			SourceEditing,
+			GeneralHtmlSupport
+		],
+		toolbar: [
+			'sourceEditing', '|',
+			'numberedList', 'bulletedList', '|',
+			'outdent', 'indent', '|',
+			'bold', 'italic', 'strikethrough'
+		],
+		list: {
+			properties: {
+				styles: true,
+				startIndex: true,
+				reversed: true
+			}
+		},
+		htmlSupport: {
+			allow: [
+				{
+					name: /^.*$/,
+					styles: true,
+					attributes: true,
+					classes: true
+				}
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );