@ckeditor/ckeditor5-html-support 32.0.0 → 34.1.0

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.
@@ -44,6 +44,10 @@ export default class MediaEmbedElementSupport extends Plugin {
 			view: mediaElementName
 		} );
 
+		dataFilter.on( 'register:figure', ( ) => {
+			conversion.for( 'upcast' ).add( viewToModelFigureAttributesConverter( dataFilter ) );
+		} );
+
 		dataFilter.on( `register:${ mediaElementName }`, ( evt, definition ) => {
 			if ( definition.model !== 'media' ) {
 				return;
@@ -71,16 +75,11 @@ function viewToModelMediaAttributesConverter( dataFilter, mediaElementName ) {
 
 	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 );
+			const viewAttributes = dataFilter.processViewAttributes( viewElement, conversionApi );
 
 			if ( viewAttributes ) {
 				conversionApi.writer.setAttribute( attributeName, viewAttributes, data.modelRange );
@@ -89,6 +88,30 @@ function viewToModelMediaAttributesConverter( dataFilter, mediaElementName ) {
 	}
 }
 
+// View-to-model conversion helper preserving allowed attributes on {@link module:media-embed/mediaembed~MediaEmbed MediaEmbed}
+// feature model element from figure view element.
+//
+// @private
+// @param {module:html-support/datafilter~DataFilter} dataFilter
+// @returns {Function} Returns a conversion callback.
+function viewToModelFigureAttributesConverter( dataFilter ) {
+	return dispatcher => {
+		dispatcher.on( 'element:figure', ( evt, data, conversionApi ) => {
+			const viewFigureElement = data.viewItem;
+
+			if ( !data.modelRange || !viewFigureElement.hasClass( 'media' ) ) {
+				return;
+			}
+
+			const viewAttributes = dataFilter.processViewAttributes( viewFigureElement, conversionApi );
+
+			if ( viewAttributes ) {
+				conversionApi.writer.setAttribute( 'htmlFigureAttributes', viewAttributes, data.modelRange );
+			}
+		}, { priority: 'low' } );
+	};
+}
+
 function modelToViewMediaAttributeConverter( mediaElementName ) {
 	return dispatcher => {
 		addAttributeConversionDispatcherHandler( mediaElementName, 'htmlAttributes' );
@@ -100,10 +123,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/integrations/script.js

@@ -44,7 +44,8 @@ export default class ScriptElementSupport extends Plugin {
 			schema.register( 'htmlScript', definition.modelSchema );
 
 			schema.extend( 'htmlScript', {
-				allowAttributes: [ 'htmlAttributes', 'htmlContent' ]
+				allowAttributes: [ 'htmlAttributes', 'htmlContent' ],
+				isContent: true
 			} );
 
 			editor.data.registerRawContentMatcher( {

package/src/integrations/style.js

@@ -0,0 +1,74 @@
+/**
+ * @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/style
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import {
+	createObjectView,
+	modelToViewBlockAttributeConverter,
+	viewToModelBlockAttributeConverter,
+	viewToModelObjectConverter
+} from '../converters.js';
+
+import DataFilter from '../datafilter';
+
+/**
+ * Provides the General HTML Support for `style` elements.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class StyleElementSupport extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DataFilter ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const dataFilter = this.editor.plugins.get( DataFilter );
+
+		dataFilter.on( 'register:style', ( evt, definition ) => {
+			const editor = this.editor;
+			const schema = editor.model.schema;
+			const conversion = editor.conversion;
+
+			schema.register( 'htmlStyle', definition.modelSchema );
+
+			schema.extend( 'htmlStyle', {
+				allowAttributes: [ 'htmlAttributes', 'htmlContent' ],
+				isContent: true
+			} );
+
+			editor.data.registerRawContentMatcher( {
+				name: 'style'
+			} );
+
+			conversion.for( 'upcast' ).elementToElement( {
+				view: 'style',
+				model: viewToModelObjectConverter( definition )
+			} );
+
+			conversion.for( 'upcast' ).add( viewToModelBlockAttributeConverter( definition, dataFilter ) );
+
+			conversion.for( 'downcast' ).elementToElement( {
+				model: 'htmlStyle',
+				view: ( modelElement, { writer } ) => {
+					return createObjectView( 'style', modelElement, writer );
+				}
+			} );
+
+			conversion.for( 'downcast' ).add( modelToViewBlockAttributeConverter( definition ) );
+
+			evt.stop();
+		} );
+	}
+}

package/src/integrations/table.js

@@ -9,7 +9,6 @@
 
 import { Plugin } from 'ckeditor5/src/core';
 import { setViewAttributes } from '../conversionutils.js';
-
 import DataFilter from '../datafilter';
 
 /**
@@ -39,6 +38,10 @@ export default class TableElementSupport extends Plugin {
 		const conversion = editor.conversion;
 		const dataFilter = editor.plugins.get( DataFilter );
 
+		dataFilter.on( 'register:figure', ( ) => {
+			conversion.for( 'upcast' ).add( viewToModelFigureAttributeConverter( dataFilter ) );
+		} );
+
 		dataFilter.on( 'register:table', ( evt, definition ) => {
 			if ( definition.model !== 'table' ) {
 				return;
@@ -74,11 +77,6 @@ function viewToModelTableAttributeConverter( dataFilter ) {
 
 			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' );
@@ -90,12 +88,36 @@ function viewToModelTableAttributeConverter( dataFilter ) {
 			}
 
 			function preserveElementAttributes( viewElement, attributeName ) {
-				const viewAttributes = dataFilter._consumeAllowedAttributes( viewElement, conversionApi );
+				const viewAttributes = dataFilter.processViewAttributes( viewElement, conversionApi );
 
 				if ( viewAttributes ) {
 					conversionApi.writer.setAttribute( attributeName, viewAttributes, data.modelRange );
 				}
 			}
+		} );
+	};
+}
+
+// View-to-model conversion helper preserving allowed attributes on {@link module:table/table~Table Table}
+// feature model element from figure view element.
+//
+// @private
+// @param {module:html-support/datafilter~DataFilter} dataFilter
+// @returns {Function} Returns a conversion callback.
+function viewToModelFigureAttributeConverter( dataFilter ) {
+	return dispatcher => {
+		dispatcher.on( 'element:figure', ( evt, data, conversionApi ) => {
+			const viewFigureElement = data.viewItem;
+
+			if ( !data.modelRange || !viewFigureElement.hasClass( 'table' ) ) {
+				return;
+			}
+
+			const viewAttributes = dataFilter.processViewAttributes( viewFigureElement, conversionApi );
+
+			if ( viewAttributes ) {
+				conversionApi.writer.setAttribute( 'htmlFigureAttributes', viewAttributes, data.modelRange );
+			}
 		}, { priority: 'low' } );
 	};
 }

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
 			}
 		}
 	],
@@ -586,6 +577,7 @@ export default {
 			model: 'htmlA',
 			view: 'a',
 			priority: 5,
+			coupledAttribute: 'linkHref',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -593,6 +585,7 @@ export default {
 		{
 			model: 'htmlStrong',
 			view: 'strong',
+			coupledAttribute: 'bold',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -600,6 +593,7 @@ export default {
 		{
 			model: 'htmlB',
 			view: 'b',
+			coupledAttribute: 'bold',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -607,6 +601,7 @@ export default {
 		{
 			model: 'htmlI',
 			view: 'i',
+			coupledAttribute: 'italic',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -614,6 +609,7 @@ export default {
 		{
 			model: 'htmlEm',
 			view: 'em',
+			coupledAttribute: 'italic',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -621,6 +617,7 @@ export default {
 		{
 			model: 'htmlS',
 			view: 's',
+			coupledAttribute: 'strikethrough',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -629,6 +626,7 @@ export default {
 		{
 			model: 'htmlDel',
 			view: 'del',
+			coupledAttribute: 'strikethrough',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -644,6 +642,7 @@ export default {
 		{
 			model: 'htmlU',
 			view: 'u',
+			coupledAttribute: 'underline',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -651,6 +650,7 @@ export default {
 		{
 			model: 'htmlSub',
 			view: 'sub',
+			coupledAttribute: 'subscript',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -658,6 +658,7 @@ export default {
 		{
 			model: 'htmlSup',
 			view: 'sup',
+			coupledAttribute: 'superscript',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -665,6 +666,7 @@ export default {
 		{
 			model: 'htmlCode',
 			view: 'code',
+			coupledAttribute: 'code',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -706,22 +708,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 +721,7 @@ export default {
 			view: 'iframe',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -737,7 +729,7 @@ export default {
 			view: 'input',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -745,7 +737,7 @@ export default {
 			view: 'button',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -753,7 +745,7 @@ export default {
 			view: 'textarea',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -761,7 +753,7 @@ export default {
 			view: 'select',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -769,7 +761,7 @@ export default {
 			view: 'video',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -777,7 +769,7 @@ export default {
 			view: 'embed',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -785,7 +777,7 @@ export default {
 			view: 'oembed',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -793,7 +785,7 @@ export default {
 			view: 'audio',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -801,7 +793,7 @@ export default {
 			view: 'img',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -809,7 +801,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,17 +811,17 @@ export default {
 			view: 'meter',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
-		// TODO it could be probably represented as non-object element, although it has grafical representation,
+		// TODO it could be probably represented as non-object element, although it has graphical representation,
 		// so probably makes more sense to keep it as an object.
 		{
 			model: 'htmlProgress',
 			view: 'progress',
 			isObject: true,
 			modelSchema: {
-				inheritAllFrom: '$htmlObjectInline'
+				inheritAllFrom: '$inlineObject'
 			}
 		},
 		{
@@ -839,6 +831,14 @@ export default {
 				allowWhere: [ '$text', '$block' ],
 				isInline: true
 			}
+		},
+		{
+			model: 'htmlStyle',
+			view: 'style',
+			modelSchema: {
+				allowWhere: [ '$text', '$block' ],
+				isInline: true
+			}
 		}
 	]
 };

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;
 }