@ckeditor/ckeditor5-html-support 29.0.0 → 31.0.0

package/src/integrations/image.js

@@ -0,0 +1,193 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module html-support/integrations/image
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+
+import DataFilter from '../datafilter';
+import { setViewAttributes } from '../conversionutils.js';
+
+/**
+ * Provides the General HTML Support integration with the {@link module:image/image~Image Image} feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageElementSupport extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DataFilter ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		// At least one image plugin should be loaded for the integration to work properly.
+		if ( !editor.plugins.has( 'ImageInlineEditing' ) && !editor.plugins.has( 'ImageBlockEditing' ) ) {
+			return;
+		}
+
+		const schema = editor.model.schema;
+		const conversion = editor.conversion;
+		const dataFilter = editor.plugins.get( DataFilter );
+
+		dataFilter.on( 'register:img', ( evt, definition ) => {
+			if ( definition.model !== 'imageBlock' && definition.model !== 'imageInline' ) {
+				return;
+			}
+
+			if ( schema.isRegistered( 'imageBlock' ) ) {
+				schema.extend( 'imageBlock', {
+					allowAttributes: [
+						'htmlAttributes',
+						// Figure and Link don't have model counterpart.
+						// We will preserve attributes on image model element using these attribute keys.
+						'htmlFigureAttributes',
+						'htmlLinkAttributes'
+					]
+				} );
+			}
+
+			if ( schema.isRegistered( 'imageInline' ) ) {
+				schema.extend( 'imageInline', {
+					allowAttributes: [
+						// `htmlA` is needed for standard GHS link integration.
+						'htmlA',
+						'htmlAttributes'
+					]
+				} );
+			}
+
+			conversion.for( 'upcast' ).add( viewToModelImageAttributeConverter( dataFilter ) );
+			conversion.for( 'downcast' ).add( modelToViewImageAttributeConverter() );
+
+			evt.stop();
+		} );
+	}
+}
+
+// View-to-model conversion helper preserving allowed attributes on the {@link module:image/image~Image Image}
+// feature model element.
+//
+// @private
+// @param {module:html-support/datafilter~DataFilter} dataFilter
+// @returns {Function} Returns a conversion callback.
+function viewToModelImageAttributeConverter( dataFilter ) {
+	return dispatcher => {
+		dispatcher.on( 'element:img', ( evt, data, conversionApi ) => {
+			const viewImageElement = data.viewItem;
+			const viewContainerElement = viewImageElement.parent;
+
+			preserveElementAttributes( viewImageElement, 'htmlAttributes' );
+
+			if ( viewContainerElement.is( 'element', 'figure' ) ) {
+				preserveElementAttributes( viewContainerElement, 'htmlFigureAttributes' );
+			} else if ( viewContainerElement.is( 'element', 'a' ) ) {
+				preserveLinkAttributes( viewContainerElement );
+			}
+
+			function preserveElementAttributes( viewElement, attributeName ) {
+				const viewAttributes = dataFilter._consumeAllowedAttributes( viewElement, conversionApi );
+
+				if ( viewAttributes ) {
+					conversionApi.writer.setAttribute( attributeName, viewAttributes, data.modelRange );
+				}
+			}
+
+			// For a block image, we want to preserve the attributes on our own.
+			// The inline image attributes will be handled by the GHS automatically.
+			function preserveLinkAttributes( viewContainerElement ) {
+				if ( data.modelRange && data.modelRange.getContainedElement().is( 'element', 'imageBlock' ) ) {
+					preserveElementAttributes( viewContainerElement, 'htmlLinkAttributes' );
+				}
+
+				// If we're in a link, then the `<figure>` element should be one level higher.
+				if ( viewContainerElement.parent.is( 'element', 'figure' ) ) {
+					preserveElementAttributes( viewContainerElement.parent, 'htmlFigureAttributes' );
+				}
+			}
+		}, { priority: 'low' } );
+	};
+}
+
+// A model-to-view conversion helper applying attributes from the {@link module:image/image~Image Image}
+// feature.
+//
+// @private
+// @returns {Function} Returns a conversion callback.
+function modelToViewImageAttributeConverter() {
+	return dispatcher => {
+		addInlineAttributeConversion( 'htmlAttributes' );
+
+		addBlockAttributeConversion( 'img', 'htmlAttributes' );
+		addBlockAttributeConversion( 'figure', 'htmlFigureAttributes' );
+		addBlockImageLinkAttributeConversion();
+
+		function addInlineAttributeConversion( attributeName ) {
+			dispatcher.on( `attribute:${ attributeName }:imageInline`, ( evt, data, conversionApi ) => {
+				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+					return;
+				}
+
+				const viewElement = conversionApi.mapper.toViewElement( data.item );
+
+				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+			}, { priority: 'low' } );
+		}
+
+		function addBlockAttributeConversion( elementName, attributeName ) {
+			dispatcher.on( `attribute:${ attributeName }:imageBlock`, ( evt, data, conversionApi ) => {
+				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+					return;
+				}
+
+				const containerElement = conversionApi.mapper.toViewElement( data.item );
+				const viewElement = getDescendantElement( conversionApi.writer, containerElement, elementName );
+
+				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+			}, { 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;
+				}
+
+				const containerElement = conversionApi.mapper.toViewElement( data.item );
+				const viewElement = getDescendantElement( conversionApi.writer, containerElement, 'a' );
+
+				setViewAttributes( conversionApi.writer, data.item.getAttribute( 'htmlLinkAttributes' ), viewElement );
+			}, { priority: 'low' } );
+		}
+	};
+}
+
+// Returns the first view element descendant matching the given view name.
+// Includes view element itself.
+//
+// @private
+// @param {module:engine/view/downcastwriter~DowncastWriter} writer
+// @param {module:engine/view/element~Element} containerElement
+// @param {String} elementName
+// @returns {module:engine/view/element~Element|null}
+function getDescendantElement( writer, containerElement, elementName ) {
+	const range = writer.createRangeOn( containerElement );
+
+	for ( const { item } of range.getWalker() ) {
+		if ( item.is( 'element', elementName ) ) {
+			return item;
+		}
+	}
+}

package/src/integrations/mediaembed.js

@@ -0,0 +1,128 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module html-support/integrations/mediaembed
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+
+import { setViewAttributes } from '../conversionutils.js';
+import DataFilter from '../datafilter';
+import DataSchema from '../dataschema';
+
+/**
+ * Provides the General HTML Support integration with {@link module:media-embed/mediaembed~MediaEmbed Media Embed} feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class MediaEmbedElementSupport extends Plugin {
+	static get requires() {
+		return [ DataFilter ];
+	}
+
+	init() {
+		const editor = this.editor;
+
+		// Stop here if MediaEmbed plugin is not provided or the integrator wants to output markup with previews as
+		// we do not support filtering previews.
+		if ( !editor.plugins.has( 'MediaEmbed' ) || editor.config.get( 'mediaEmbed.previewsInData' ) ) {
+			return;
+		}
+
+		const schema = editor.model.schema;
+		const conversion = editor.conversion;
+		const dataFilter = this.editor.plugins.get( DataFilter );
+		const dataSchema = this.editor.plugins.get( DataSchema );
+		const mediaElementName = editor.config.get( 'mediaEmbed.elementName' );
+
+		// Overwrite GHS schema definition for a given elementName.
+		dataSchema.registerBlockElement( {
+			model: 'media',
+			view: mediaElementName
+		} );
+
+		dataFilter.on( `register:${ mediaElementName }`, ( evt, definition ) => {
+			if ( definition.model !== 'media' ) {
+				return;
+			}
+
+			schema.extend( 'media', {
+				allowAttributes: [
+					'htmlAttributes',
+					'htmlFigureAttributes'
+				]
+			} );
+
+			conversion.for( 'upcast' ).add( viewToModelMediaAttributesConverter( dataFilter, mediaElementName ) );
+			conversion.for( 'dataDowncast' ).add( modelToViewMediaAttributeConverter( mediaElementName ) );
+
+			evt.stop();
+		} );
+	}
+}
+
+function viewToModelMediaAttributesConverter( dataFilter, mediaElementName ) {
+	return dispatcher => {
+		dispatcher.on( `element:${ mediaElementName }`, upcastMedia );
+	};
+
+	function upcastMedia( evt, data, conversionApi ) {
+		const viewMediaElement = data.viewItem;
+		const viewParent = viewMediaElement.parent;
+
+		preserveElementAttributes( viewMediaElement, 'htmlAttributes' );
+
+		if ( viewParent.is( 'element', 'figure' ) && viewParent.hasClass( 'media' ) ) {
+			preserveElementAttributes( viewParent, 'htmlFigureAttributes' );
+		}
+
+		function preserveElementAttributes( viewElement, attributeName ) {
+			const viewAttributes = dataFilter._consumeAllowedAttributes( viewElement, conversionApi );
+
+			if ( viewAttributes ) {
+				conversionApi.writer.setAttribute( attributeName, viewAttributes, data.modelRange );
+			}
+		}
+	}
+}
+
+function modelToViewMediaAttributeConverter( mediaElementName ) {
+	return dispatcher => {
+		addAttributeConversionDispatcherHandler( mediaElementName, 'htmlAttributes' );
+		addAttributeConversionDispatcherHandler( 'figure', 'htmlFigureAttributes' );
+
+		function addAttributeConversionDispatcherHandler( elementName, attributeName ) {
+			dispatcher.on( `attribute:${ attributeName }:media`, ( evt, data, conversionApi ) => {
+				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+					return;
+				}
+
+				const containerElement = conversionApi.mapper.toViewElement( data.item );
+				const viewElement = getDescendantElement( conversionApi.writer, containerElement, elementName );
+
+				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+			} );
+		}
+	};
+}
+
+// Returns the first view element descendant matching the given view name.
+// Includes view element itself.
+//
+// @private
+// @param {module:engine/view/downcastwriter~DowncastWriter} writer
+// @param {module:engine/view/element~Element} containerElement
+// @param {String} elementName
+// @returns {module:engine/view/element~Element|null}
+function getDescendantElement( writer, containerElement, elementName ) {
+	const range = writer.createRangeOn( containerElement );
+
+	for ( const { item } of range.getWalker() ) {
+		if ( item.is( 'element', elementName ) ) {
+			return item;
+		}
+	}
+}

package/src/integrations/table.js

@@ -0,0 +1,146 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module html-support/integrations/table
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { setViewAttributes } from '../conversionutils.js';
+
+import DataFilter from '../datafilter';
+
+/**
+ * Provides the General HTML Support integration with {@link module:table/table~Table Table} feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class TableElementSupport extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DataFilter ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		if ( !editor.plugins.has( 'TableEditing' ) ) {
+			return;
+		}
+
+		const schema = editor.model.schema;
+		const conversion = editor.conversion;
+		const dataFilter = editor.plugins.get( DataFilter );
+
+		dataFilter.on( 'register:table', ( evt, definition ) => {
+			if ( definition.model !== 'table' ) {
+				return;
+			}
+
+			schema.extend( 'table', {
+				allowAttributes: [
+					'htmlAttributes',
+					// Figure, thead and tbody elements don't have model counterparts.
+					// We will be preserving attributes on table element using these attribute keys.
+					'htmlFigureAttributes', 'htmlTheadAttributes', 'htmlTbodyAttributes'
+				]
+			} );
+
+			conversion.for( 'upcast' ).add( viewToModelTableAttributeConverter( dataFilter ) );
+			conversion.for( 'downcast' ).add( modelToViewTableAttributeConverter() );
+
+			evt.stop();
+		} );
+	}
+}
+
+// View-to-model conversion helper preserving allowed attributes on {@link module:table/table~Table Table}
+// feature model element.
+//
+// @private
+// @param {module:html-support/datafilter~DataFilter} dataFilter
+// @returns {Function} Returns a conversion callback.
+function viewToModelTableAttributeConverter( dataFilter ) {
+	return dispatcher => {
+		dispatcher.on( 'element:table', ( evt, data, conversionApi ) => {
+			const viewTableElement = data.viewItem;
+
+			preserveElementAttributes( viewTableElement, 'htmlAttributes' );
+
+			const viewFigureElement = viewTableElement.parent;
+			if ( viewFigureElement.is( 'element', 'figure' ) ) {
+				preserveElementAttributes( viewFigureElement, 'htmlFigureAttributes' );
+			}
+
+			for ( const childNode of viewTableElement.getChildren() ) {
+				if ( childNode.is( 'element', 'thead' ) ) {
+					preserveElementAttributes( childNode, 'htmlTheadAttributes' );
+				}
+
+				if ( childNode.is( 'element', 'tbody' ) ) {
+					preserveElementAttributes( childNode, 'htmlTbodyAttributes' );
+				}
+			}
+
+			function preserveElementAttributes( viewElement, attributeName ) {
+				const viewAttributes = dataFilter._consumeAllowedAttributes( viewElement, conversionApi );
+
+				if ( viewAttributes ) {
+					conversionApi.writer.setAttribute( attributeName, viewAttributes, data.modelRange );
+				}
+			}
+		}, { priority: 'low' } );
+	};
+}
+
+// Model-to-view conversion helper applying attributes from {@link module:table/table~Table Table}
+// feature.
+//
+// @private
+// @returns {Function} Returns a conversion callback.
+function modelToViewTableAttributeConverter() {
+	return dispatcher => {
+		addAttributeConversionDispatcherHandler( 'table', 'htmlAttributes' );
+		addAttributeConversionDispatcherHandler( 'figure', 'htmlFigureAttributes' );
+		addAttributeConversionDispatcherHandler( 'thead', 'htmlTheadAttributes' );
+		addAttributeConversionDispatcherHandler( 'tbody', 'htmlTbodyAttributes' );
+
+		function addAttributeConversionDispatcherHandler( elementName, attributeName ) {
+			dispatcher.on( `attribute:${ attributeName }:table`, ( evt, data, conversionApi ) => {
+				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+					return;
+				}
+
+				const containerElement = conversionApi.mapper.toViewElement( data.item );
+				const viewElement = getDescendantElement( conversionApi.writer, containerElement, elementName );
+
+				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+			} );
+		}
+	};
+}
+
+// Returns the first view element descendant matching the given view name.
+// Includes view element itself.
+//
+// @private
+// @param {module:engine/view/downcastwriter~DowncastWriter} writer
+// @param {module:engine/view/element~Element} containerElement
+// @param {String} elementName
+// @returns {module:engine/view/element~Element|null}
+function getDescendantElement( writer, containerElement, elementName ) {
+	const range = writer.createRangeOn( containerElement );
+
+	for ( const { item } of range.getWalker() ) {
+		if ( item.is( 'element', elementName ) ) {
+			return item;
+		}
+	}
+}

package/src/schemadefinitions.js

@@ -51,18 +51,6 @@
 export default {
 	block: [
 		// Existing features
-		{
-			model: 'heading1',
-			view: 'h2'
-		},
-		{
-			model: 'heading2',
-			view: 'h3'
-		},
-		{
-			model: 'heading3',
-			view: 'h4'
-		},
 		{
 			model: 'codeBlock',
 			view: 'pre'
@@ -87,6 +75,38 @@ export default {
 			model: 'rawHtml',
 			view: 'div'
 		},
+		{
+			model: 'table',
+			view: 'table'
+		},
+		{
+			model: 'tableRow',
+			view: 'tr'
+		},
+		{
+			model: 'tableCell',
+			view: 'td'
+		},
+		{
+			model: 'tableCell',
+			view: 'th'
+		},
+		{
+			model: 'caption',
+			view: 'caption'
+		},
+		{
+			model: 'caption',
+			view: 'figcaption'
+		},
+		{
+			model: 'imageBlock',
+			view: 'img'
+		},
+		{
+			model: 'imageInline',
+			view: 'img'
+		},
 
 		// Compatibility features
 		{
@@ -232,7 +252,7 @@ export default {
 			}
 		},
 		{
-			model: 'htmlSumary',
+			model: 'htmlSummary',
 			view: 'summary',
 			modelSchema: {
 				allowChildren: '$text',
@@ -240,10 +260,10 @@ export default {
 				isBlock: true
 			}
 		},
-		// TODO can also include text.
 		{
 			model: 'htmlDiv',
 			view: 'div',
+			paragraphLikeModel: 'htmlDivParagraph',
 			modelSchema: {
 				inheritAllFrom: '$htmlSection'
 			}
@@ -294,15 +314,12 @@ export default {
 			view: 'hgroup',
 			modelSchema: {
 				allowChildren: [
-					'htmlHeading1',
-					'htmlHeading2',
-					'htmlHeading3',
-					'htmlHeading4',
-					'htmlHeading5',
-					'htmlHeading6',
-					'heading1',
-					'heading2',
-					'heading3'
+					'htmlH1',
+					'htmlH2',
+					'htmlH3',
+					'htmlH4',
+					'htmlH5',
+					'htmlH6'
 				],
 				isBlock: true
 			}
@@ -609,7 +626,7 @@ export default {
 				copyOnEnter: true
 			}
 		},
-		// TODO According to HTML-spec can behave as div-like element, althouth CKE4 only handles it as an inline element.
+		// TODO According to HTML-spec can behave as div-like element, although CKE4 only handles it as an inline element.
 		{
 			model: 'htmlDel',
 			view: 'del',
@@ -617,7 +634,7 @@ export default {
 				copyOnEnter: true
 			}
 		},
-		// TODO According to HTML-spec can behave as div-like element, althouth CKE4 only handles it as an inline element.
+		// TODO According to HTML-spec can behave as div-like element, although CKE4 only handles it as an inline element.
 		{
 			model: 'htmlIns',
 			view: 'ins',
@@ -764,6 +781,14 @@ export default {
 				inheritAllFrom: '$htmlObjectInline'
 			}
 		},
+		{
+			model: 'htmlOembed',
+			view: 'oembed',
+			isObject: true,
+			modelSchema: {
+				inheritAllFrom: '$htmlObjectInline'
+			}
+		},
 		{
 			model: 'htmlAudio',
 			view: 'audio',

package/CHANGELOG.md

@@ -1,4 +0,0 @@
-Changelog
-=========
-
-All changes in the package are documented in the main repository. See: https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md.