From 3599a2440d6b5c297dd898b7da34dd72f7adf366 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maksymilian=20Barnas=CC=81?= <m.barnas@cksource.com>
Date: Thu, 3 Feb 2022 13:44:41 +0100
Subject: [PATCH 1/7] Add support for `<style>` in GHS.

---
 .../ckeditor5-engine/src/view/domconverter.js |  2 +-
 .../src/generalhtmlsupport.js                 |  4 +-
 .../src/integrations/style.js                 | 79 +++++++++++++++++++
 .../src/schemadefinitions.js                  | 10 ++-
 4 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 packages/ckeditor5-html-support/src/integrations/style.js

diff --git a/packages/ckeditor5-engine/src/view/domconverter.js b/packages/ckeditor5-engine/src/view/domconverter.js
index 8aaca8c009c..183581323d6 100644
--- a/packages/ckeditor5-engine/src/view/domconverter.js
+++ b/packages/ckeditor5-engine/src/view/domconverter.js
@@ -1546,7 +1546,7 @@ export default class DomConverter {
 	 * @returns {Boolean}
 	 */
 	_shouldRenameElement( elementName ) {
-		return this.renderingMode == 'editing' && elementName.toLowerCase() == 'script';
+		return this.renderingMode == 'editing' && ( elementName.toLowerCase() == 'script' || elementName.toLowerCase() == 'style' );
 	}
 
 	/**
diff --git a/packages/ckeditor5-html-support/src/generalhtmlsupport.js b/packages/ckeditor5-html-support/src/generalhtmlsupport.js
index 6dc605e3b6d..d6f02478db5 100644
--- a/packages/ckeditor5-html-support/src/generalhtmlsupport.js
+++ b/packages/ckeditor5-html-support/src/generalhtmlsupport.js
@@ -17,6 +17,7 @@ import ImageElementSupport from './integrations/image';
 import MediaEmbedElementSupport from './integrations/mediaembed';
 import ScriptElementSupport from './integrations/script';
 import TableElementSupport from './integrations/table';
+import StyleElementSupport from './integrations/style';
 
 /**
  * The General HTML Support feature.
@@ -46,7 +47,8 @@ export default class GeneralHtmlSupport extends Plugin {
 			ImageElementSupport,
 			MediaEmbedElementSupport,
 			ScriptElementSupport,
-			TableElementSupport
+			TableElementSupport,
+			StyleElementSupport
 		];
 	}
 
diff --git a/packages/ckeditor5-html-support/src/integrations/style.js b/packages/ckeditor5-html-support/src/integrations/style.js
new file mode 100644
index 00000000000..992e8592065
--- /dev/null
+++ b/packages/ckeditor5-html-support/src/integrations/style.js
@@ -0,0 +1,79 @@
+/**
+ * @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' ]
+			} );
+
+			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( 'editingDowncast' ).elementToElement( {
+			// 	model: 'htmlStyle',
+			// 	view: ( modelElement, { writer } ) => {
+			// 		return createObjectView( 'div', modelElement, writer );
+			// 	}
+			// } );
+
+			conversion.for( 'downcast' ).add( modelToViewBlockAttributeConverter( definition ) );
+
+			evt.stop();
+		} );
+	}
+}
diff --git a/packages/ckeditor5-html-support/src/schemadefinitions.js b/packages/ckeditor5-html-support/src/schemadefinitions.js
index 935e576a6ed..397c28b75b1 100644
--- a/packages/ckeditor5-html-support/src/schemadefinitions.js
+++ b/packages/ckeditor5-html-support/src/schemadefinitions.js
@@ -822,7 +822,7 @@ export default {
 				inheritAllFrom: '$htmlObjectInline'
 			}
 		},
-		// 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',
@@ -839,6 +839,14 @@ export default {
 				allowWhere: [ '$text', '$block' ],
 				isInline: true
 			}
+		},
+		{
+			model: 'htmlStyle',
+			view: 'style',
+			modelSchema: {
+				allowWhere: [ '$text', '$block' ],
+				isInline: true
+			}
 		}
 	]
 };

From daa10d4773b1d50420447b8018320f9c5dd53807 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maksymilian=20Barnas=CC=81?= <m.barnas@cksource.com>
Date: Mon, 7 Feb 2022 12:18:35 +0100
Subject: [PATCH 2/7] Cleaned the code a bit. Added separate error message to
 the docs.

---
 .../ckeditor5-engine/src/view/domconverter.js | 32 ++++++++++++++++---
 .../src/integrations/style.js                 |  6 ----
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/ckeditor5-engine/src/view/domconverter.js b/packages/ckeditor5-engine/src/view/domconverter.js
index 183581323d6..c6368e74246 100644
--- a/packages/ckeditor5-engine/src/view/domconverter.js
+++ b/packages/ckeditor5-engine/src/view/domconverter.js
@@ -35,6 +35,7 @@ const NBSP_FILLER_REF = NBSP_FILLER( document ); // eslint-disable-line new-cap
 const MARKED_NBSP_FILLER_REF = MARKED_NBSP_FILLER( document ); // eslint-disable-line new-cap
 const UNSAFE_ATTRIBUTE_NAME_PREFIX = 'data-ck-unsafe-attribute-';
 const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
+const UNSAFE_ELEMENTS = [ 'script', 'style' ];
 
 /**
  * `DomConverter` is a set of tools to do transformations between DOM nodes and view nodes. It also handles
@@ -323,7 +324,7 @@ export default class DomConverter {
 
 			// There are certain nodes, that should be renamed to <span> in editing pipeline.
 			if ( this._shouldRenameElement( elementName ) ) {
-				logWarning( 'domconverter-unsafe-element-detected', { unsafeElement: currentNode } );
+				_logUnsafeElement( elementName );
 
 				currentNode.replaceWith( this._createReplacementDomElement( elementName, currentNode ) );
 			}
@@ -384,7 +385,7 @@ export default class DomConverter {
 			} else {
 				// Create DOM element.
 				if ( this._shouldRenameElement( viewNode.name ) ) {
-					logWarning( 'domconverter-unsafe-element-detected', { unsafeElement: viewNode } );
+					_logUnsafeElement( viewNode.name );
 
 					domElement = this._createReplacementDomElement( viewNode.name );
 				} else if ( viewNode.hasAttribute( 'xmlns' ) ) {
@@ -1546,7 +1547,9 @@ export default class DomConverter {
 	 * @returns {Boolean}
 	 */
 	_shouldRenameElement( elementName ) {
-		return this.renderingMode == 'editing' && ( elementName.toLowerCase() == 'script' || elementName.toLowerCase() == 'style' );
+		const name = elementName.toLocaleLowerCase();
+
+		return this.renderingMode === 'editing' && UNSAFE_ELEMENTS.includes( name );
 	}
 
 	/**
@@ -1626,6 +1629,18 @@ function hasBlockParent( domNode, blockElements ) {
 	return parent && parent.tagName && blockElements.includes( parent.tagName.toLowerCase() );
 }
 
+// Log to console the information about element that was replaced.
+// Check UNSAFE_ELEMENTS for all recognized unsafe elements.
+//
+// @param {String} elementName The name of the view element
+function _logUnsafeElement( elementName ) {
+	if ( elementName === 'script' ) {
+		logWarning( 'domconverter-unsafe-script-element-detected' );
+	} else if ( elementName === 'style' ) {
+		logWarning( 'domconverter-unsafe-style-element-detected' );
+	}
+}
+
 /**
  * Enum representing the type of the block filler.
  *
@@ -1644,8 +1659,15 @@ function hasBlockParent( domNode, blockElements ) {
  * {@glink framework/guides/architecture/editing-engine#editing-pipeline editing pipeline} of the editor. To avoid this,
  * the `<script>` element was renamed to `<span data-ck-unsafe-element="script"></span>`.
  *
- * @error domconverter-unsafe-element-detected
- * @param {module:engine/model/element~Element|HTMLElement} unsafeElement The editing view or DOM element
+ * @error domconverter-unsafe-script-element-detected
+ * that was renamed.
+ */
+
+/**
+ * The {@link module:engine/view/domconverter~DomConverter} detected a `<style>` element that may affect the editing experience.
+ * To avoid this, the `<style>` element was renamed to `<span data-ck-unsafe-element="style"></span>`.
+ *
+ * @error domconverter-unsafe-style-element-detected
  * that was renamed.
  */
 
diff --git a/packages/ckeditor5-html-support/src/integrations/style.js b/packages/ckeditor5-html-support/src/integrations/style.js
index 992e8592065..a1ecb27d35b 100644
--- a/packages/ckeditor5-html-support/src/integrations/style.js
+++ b/packages/ckeditor5-html-support/src/integrations/style.js
@@ -64,12 +64,6 @@ export default class StyleElementSupport extends Plugin {
 					return createObjectView( 'style', modelElement, writer );
 				}
 			} );
-			// conversion.for( 'editingDowncast' ).elementToElement( {
-			// 	model: 'htmlStyle',
-			// 	view: ( modelElement, { writer } ) => {
-			// 		return createObjectView( 'div', modelElement, writer );
-			// 	}
-			// } );
 
 			conversion.for( 'downcast' ).add( modelToViewBlockAttributeConverter( definition ) );
 

From 003e5373354cc785f6c650b079e07a81e57f31a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maksymilian=20Barnas=CC=81?= <m.barnas@cksource.com>
Date: Tue, 8 Feb 2022 13:23:47 +0100
Subject: [PATCH 3/7] Add tests GHS style integration plugin and for
 DomConverter style replacement.

---
 .../ckeditor5-engine/src/view/domconverter.js |   4 +-
 .../tests/view/domconverter/domconverter.js   |  28 ++-
 .../tests/view/domconverter/view-to-dom.js    |  49 ++++-
 .../tests/integrations/style.js               | 179 ++++++++++++++++++
 4 files changed, 254 insertions(+), 6 deletions(-)
 create mode 100644 packages/ckeditor5-html-support/tests/integrations/style.js

diff --git a/packages/ckeditor5-engine/src/view/domconverter.js b/packages/ckeditor5-engine/src/view/domconverter.js
index c6368e74246..ea692a41f24 100644
--- a/packages/ckeditor5-engine/src/view/domconverter.js
+++ b/packages/ckeditor5-engine/src/view/domconverter.js
@@ -1636,7 +1636,9 @@ function hasBlockParent( domNode, blockElements ) {
 function _logUnsafeElement( elementName ) {
 	if ( elementName === 'script' ) {
 		logWarning( 'domconverter-unsafe-script-element-detected' );
-	} else if ( elementName === 'style' ) {
+	}
+
+	if ( elementName === 'style' ) {
 		logWarning( 'domconverter-unsafe-style-element-detected' );
 	}
 }
diff --git a/packages/ckeditor5-engine/tests/view/domconverter/domconverter.js b/packages/ckeditor5-engine/tests/view/domconverter/domconverter.js
index 6f676acea44..a6f2bfd1a7b 100644
--- a/packages/ckeditor5-engine/tests/view/domconverter/domconverter.js
+++ b/packages/ckeditor5-engine/tests/view/domconverter/domconverter.js
@@ -603,6 +603,16 @@ describe( 'DomConverter', () => {
 
 				expect( element.innerHTML ).to.equal( '<div>foo<script onclick="foo">bar</script></div>' );
 			} );
+
+			it( 'should keep style element', () => {
+				const element = document.createElement( 'p' );
+				const html = '<div>foo<style nonce="foo">bar</style></div>';
+
+				converter.renderingMode = 'data';
+				converter.setContentOf( element, html );
+
+				expect( element.innerHTML ).to.equal( '<div>foo<style nonce="foo">bar</style></div>' );
+			} );
 		} );
 
 		describe( 'editing pipeline', () => {
@@ -736,7 +746,7 @@ describe( 'DomConverter', () => {
 				);
 			} );
 
-			it( 'should warn when an unsafe element was detected and renamed', () => {
+			it( 'should warn when an unsafe script element was detected and renamed', () => {
 				const element = document.createElement( 'p' );
 				const html = '<div>foo<script class="foo-class" style="foo-style" data-foo="bar">bar</script></div>';
 
@@ -744,8 +754,20 @@ describe( 'DomConverter', () => {
 
 				sinon.assert.calledOnce( warnStub );
 				sinon.assert.calledWithExactly( warnStub,
-					sinon.match( /^domconverter-unsafe-element-detected/ ),
-					sinon.match.has( 'unsafeElement', sinon.match.has( 'tagName', 'SCRIPT' ) ),
+					sinon.match( /^domconverter-unsafe-script-element-detected/ ),
+					sinon.match.string // Link to the documentation
+				);
+			} );
+
+			it( 'should warn when an unsafe style element was detected and renamed', () => {
+				const element = document.createElement( 'p' );
+				const html = '<div>foo<style class="foo-class" nonce="foo-nonce" data-foo="bar">bar</style></div>';
+
+				converter.setContentOf( element, html );
+
+				sinon.assert.calledOnce( warnStub );
+				sinon.assert.calledWithExactly( warnStub,
+					sinon.match( /^domconverter-unsafe-style-element-detected/ ),
 					sinon.match.string // Link to the documentation
 				);
 			} );
diff --git a/packages/ckeditor5-engine/tests/view/domconverter/view-to-dom.js b/packages/ckeditor5-engine/tests/view/domconverter/view-to-dom.js
index 6d671f1c76c..ac2d25fe839 100644
--- a/packages/ckeditor5-engine/tests/view/domconverter/view-to-dom.js
+++ b/packages/ckeditor5-engine/tests/view/domconverter/view-to-dom.js
@@ -324,8 +324,53 @@ describe( 'DomConverter', () => {
 
 				sinon.assert.calledOnce( warnStub );
 				sinon.assert.calledWithExactly( warnStub,
-					sinon.match( /^domconverter-unsafe-element-detected/ ),
-					sinon.match.has( 'unsafeElement', sinon.match.has( 'name', 'script' ) ),
+					sinon.match( /^domconverter-unsafe-script-element-detected/ ),
+					sinon.match.string // Link to the documentation
+				);
+			} );
+
+			it( 'should replace style with span and add special data attribute', () => {
+				const viewScript = new ViewElement( viewDocument, 'style' );
+				const viewText = new ViewText( viewDocument, 'foo' );
+				const viewP = new ViewElement( viewDocument, 'p', { class: 'foo' } );
+
+				viewP._appendChild( viewScript );
+				viewP._appendChild( viewText );
+
+				converter = new DomConverter( viewDocument, {
+					renderingMode: 'editing'
+				} );
+
+				const domP = converter.viewToDom( viewP, document );
+
+				expect( domP ).to.be.an.instanceof( HTMLElement );
+				expect( domP.tagName ).to.equal( 'P' );
+				expect( domP.getAttribute( 'class' ) ).to.equal( 'foo' );
+				expect( domP.attributes.length ).to.equal( 1 );
+
+				expect( domP.childNodes.length ).to.equal( 2 );
+				expect( domP.childNodes[ 0 ].tagName ).to.equal( 'SPAN' );
+				expect( domP.childNodes[ 0 ].getAttribute( 'data-ck-unsafe-element' ) ).to.equal( 'style' );
+				expect( domP.childNodes[ 1 ].data ).to.equal( 'foo' );
+			} );
+
+			it( 'should warn when an unsafe style was filtered out', () => {
+				const viewStyle = new ViewElement( viewDocument, 'style' );
+				const viewText = new ViewText( viewDocument, 'foo' );
+				const viewP = new ViewElement( viewDocument, 'p', { class: 'foo' } );
+
+				viewP._appendChild( viewStyle );
+				viewP._appendChild( viewText );
+
+				converter = new DomConverter( viewDocument, {
+					renderingMode: 'editing'
+				} );
+
+				converter.viewToDom( viewP, document );
+
+				sinon.assert.calledOnce( warnStub );
+				sinon.assert.calledWithExactly( warnStub,
+					sinon.match( /^domconverter-unsafe-style-element-detected/ ),
 					sinon.match.string // Link to the documentation
 				);
 			} );
diff --git a/packages/ckeditor5-html-support/tests/integrations/style.js b/packages/ckeditor5-html-support/tests/integrations/style.js
new file mode 100644
index 00000000000..9da533a4665
--- /dev/null
+++ b/packages/ckeditor5-html-support/tests/integrations/style.js
@@ -0,0 +1,179 @@
+/**
+ * @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
+ */
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import GeneralHtmlSupport from '../../src/generalhtmlsupport';
+import { getModelDataWithAttributes } from '../_utils/utils';
+import { getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+
+/* global console, document */
+
+describe( 'StyleElementSupport', () => {
+	const STYLE = 'div { color: red; }';
+	const CODE_CPP = 'cout << "Hello World" << endl;';
+
+	let editor, model, editorElement, dataFilter, warnStub;
+
+	beforeEach( async () => {
+		editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		editor = await ClassicTestEditor.create( editorElement, {
+			plugins: [ Paragraph, GeneralHtmlSupport ]
+		} );
+		model = editor.model;
+		dataFilter = editor.plugins.get( 'DataFilter' );
+
+		dataFilter.allowElement( 'style' );
+
+		warnStub = sinon.stub( console, 'warn' );
+	} );
+
+	afterEach( () => {
+		warnStub.restore();
+		editorElement.remove();
+
+		return editor.destroy();
+	} );
+
+	it( 'should allow element', () => {
+		editor.setData( `<p>Foo</p><style>${ STYLE }</style>` );
+
+		expect( getModelData( model, { withoutSelection: true } ) ).to.equal(
+			`<paragraph>Foo</paragraph><htmlStyle htmlContent="${ STYLE }"></htmlStyle>`
+		);
+
+		expect( editor.getData() ).to.equal( `<p>Foo</p><style>${ STYLE }</style>` );
+	} );
+
+	it( 'should allow attributes', () => {
+		dataFilter.allowAttributes( { name: 'style', attributes: [ 'type', 'nonce' ] } );
+
+		editor.setData( `<p>Foo</p><style type="c++" nonce="qwerty">${ CODE_CPP }</style>` );
+
+		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
+			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ CODE_CPP }"></htmlStyle>`,
+			attributes: {
+				1: {
+					attributes: {
+						nonce: 'qwerty',
+						type: 'c++'
+					}
+				},
+				2: CODE_CPP
+			}
+		} );
+
+		expect( editor.getData() ).to.equal( `<p>Foo</p><style type="c++" nonce="qwerty">${ CODE_CPP }</style>` );
+	} );
+
+	it( 'should disallow attributes', () => {
+		dataFilter.allowAttributes( { name: 'style', attributes: true } );
+		dataFilter.disallowAttributes( { name: 'style', attributes: 'nonce' } );
+
+		editor.setData( `<p>Foo</p><style type="c++" nonce="qwerty">${ CODE_CPP }</style>` );
+
+		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
+			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ CODE_CPP }"></htmlStyle>`,
+			attributes: {
+				1: {
+					attributes: {
+						type: 'c++'
+					}
+				},
+				2: CODE_CPP
+			}
+		} );
+
+		expect( editor.getData() ).to.equal( `<p>Foo</p><style type="c++">${ CODE_CPP }</style>` );
+	} );
+
+	describe( 'element position', () => {
+		const testCases = [ {
+			name: 'paragraph',
+			data: `<article><section><p>Foo<style>${ STYLE }</style>Bar</p></section></article>`,
+			model:
+				'<htmlArticle>' +
+					`<htmlSection><paragraph>Foo<htmlStyle htmlContent="${ STYLE }"></htmlStyle>Bar</paragraph></htmlSection>` +
+				'</htmlArticle>'
+		}, {
+			name: 'section',
+			data: `<article><section><p>Foo</p><style>${ STYLE }</style></section></article>`,
+			model:
+				'<htmlArticle>' +
+					`<htmlSection><paragraph>Foo</paragraph><htmlStyle htmlContent="${ STYLE }"></htmlStyle></htmlSection>` +
+				'</htmlArticle>'
+		}, {
+			name: 'article',
+			data: `<article><section><p>Foo</p></section><style>${ STYLE }</style></article>`,
+			model:
+				'<htmlArticle>' +
+					`<htmlSection><paragraph>Foo</paragraph></htmlSection><htmlStyle htmlContent="${ STYLE }"></htmlStyle>` +
+				'</htmlArticle>'
+		}, {
+			name: 'root',
+			data: `<article><section><p>Foo</p></section></article><style>${ STYLE }</style>`,
+			model:
+				'<htmlArticle><htmlSection><paragraph>Foo</paragraph></htmlSection></htmlArticle>' +
+				`<htmlStyle htmlContent="${ STYLE }"></htmlStyle>`
+		} ];
+
+		for ( const { name, data, model: modelData } of testCases ) {
+			it( `should allow element inside ${ name }`, () => {
+				dataFilter.allowElement( 'article' );
+				dataFilter.allowElement( 'section' );
+
+				editor.setData( data );
+
+				expect( getModelData( model, { withoutSelection: true } ) ).to.equal( modelData );
+
+				expect( editor.getData() ).to.equal( data );
+			} );
+		}
+	} );
+
+	it( 'should not consume attributes already consumed (downcast)', () => {
+		dataFilter.allowAttributes( { name: 'style', attributes: true } );
+
+		editor.conversion.for( 'downcast' ).add( dispatcher => {
+			dispatcher.on( 'attribute:htmlAttributes:htmlStyle', ( evt, data, conversionApi ) => {
+				conversionApi.consumable.consume( data.item, evt.name );
+			}, { priority: 'high' } );
+		} );
+
+		editor.setData( `<p>Foo</p><style nonce="qwerty">${ STYLE }</style>` );
+
+		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
+			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ STYLE }"></htmlStyle>`,
+			attributes: {
+				1: { attributes: { nonce: 'qwerty' } },
+				2: STYLE
+			}
+		} );
+
+		expect( editor.getData() ).to.equal( `<p>Foo</p><style>${ STYLE }</style>` );
+	} );
+
+	it( 'should not consume attributes already consumed (upcast)', () => {
+		dataFilter.allowAttributes( { name: 'style', attributes: true } );
+
+		editor.conversion.for( 'upcast' ).add( dispatcher => {
+			dispatcher.on( 'element:style', ( evt, data, conversionApi ) => {
+				conversionApi.consumable.consume( data.viewItem, { attributes: 'nonce' } );
+			}, { priority: 'high' } );
+		} );
+
+		editor.setData( `<p>Foo</p><style type="text/css" nonce="qwerty">${ STYLE }</style>` );
+
+		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
+			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ STYLE }"></htmlStyle>`,
+			attributes: {
+				1: { attributes: { type: 'text/css' } },
+				2: STYLE
+			}
+		} );
+	} );
+} );

From 80a1c2186374cd0b072801349834680a20712884 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maksymilian=20Barnas=CC=81?= <m.barnas@cksource.com>
Date: Tue, 8 Feb 2022 16:07:20 +0100
Subject: [PATCH 4/7] Add missing tests.

---
 .../tests/view/domconverter/domconverter.js   | 29 ++++++++++++++++++-
 .../ckeditor5-engine/tests/view/renderer.js   | 24 ++++++++++++++-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/packages/ckeditor5-engine/tests/view/domconverter/domconverter.js b/packages/ckeditor5-engine/tests/view/domconverter/domconverter.js
index a6f2bfd1a7b..ecaa0c170e6 100644
--- a/packages/ckeditor5-engine/tests/view/domconverter/domconverter.js
+++ b/packages/ckeditor5-engine/tests/view/domconverter/domconverter.js
@@ -940,7 +940,11 @@ describe( 'DomConverter', () => {
 				.callsFake( () => {} );
 
 			console.warn
-				.withArgs( sinon.match( /^domconverter-unsafe-element-detected/ ) )
+				.withArgs( sinon.match( /^domconverter-unsafe-script-element-detected/ ) )
+				.callsFake( () => {} );
+
+			console.warn
+				.withArgs( sinon.match( /^domconverter-unsafe-style-element-detected/ ) )
 				.callsFake( () => {} );
 
 			console.warn.callThrough();
@@ -988,5 +992,28 @@ describe( 'DomConverter', () => {
 				'<p>foo<span data-ck-unsafe-element="script" style="foo-style" data-foo="bar">bar</span></p>'
 			);
 		} );
+
+		it( 'should skip removing the (replacement) attribute representing the unsafe <style> tag', () => {
+			const domElement = document.createElement( 'p' );
+			const html = 'foo<style class="foo-class" style="foo-style" data-foo="bar">bar</style>';
+
+			converter.setContentOf( domElement, html );
+
+			expect( domElement.outerHTML ).to.equal(
+				'<p>foo<span data-ck-unsafe-element="style" class="foo-class" style="foo-style" data-foo="bar">bar</span></p>'
+			);
+
+			converter.removeDomElementAttribute( domElement.lastChild, 'data-ck-unsafe-element' );
+
+			expect( domElement.outerHTML ).to.equal(
+				'<p>foo<span data-ck-unsafe-element="style" class="foo-class" style="foo-style" data-foo="bar">bar</span></p>'
+			);
+
+			converter.removeDomElementAttribute( domElement.lastChild, 'class' );
+
+			expect( domElement.outerHTML ).to.equal(
+				'<p>foo<span data-ck-unsafe-element="style" style="foo-style" data-foo="bar">bar</span></p>'
+			);
+		} );
 	} );
 } );
diff --git a/packages/ckeditor5-engine/tests/view/renderer.js b/packages/ckeditor5-engine/tests/view/renderer.js
index 3bef2589a8c..0809b129882 100644
--- a/packages/ckeditor5-engine/tests/view/renderer.js
+++ b/packages/ckeditor5-engine/tests/view/renderer.js
@@ -3981,7 +3981,11 @@ describe( 'Renderer', () => {
 					.callsFake( () => {} );
 
 				console.warn
-					.withArgs( sinon.match( /^domconverter-unsafe-element-detected/ ) )
+					.withArgs( sinon.match( /^domconverter-unsafe-script-element-detected/ ) )
+					.callsFake( () => {} );
+
+				console.warn
+					.withArgs( sinon.match( /^domconverter-unsafe-style-element-detected/ ) )
 					.callsFake( () => {} );
 
 				console.warn.callThrough();
@@ -4027,6 +4031,24 @@ describe( 'Renderer', () => {
 				delete window.spy;
 			} );
 
+			it( 'should replace style element with span and custom data attribute', () => {
+				window.spy = sinon.spy();
+
+				const viewA = new ViewElement( viewDoc, 'style' );
+
+				// Assign content of the `<style>` element, as the utility method `setVewData` will fail becasuse of brace characters.
+				viewA._appendChild( new ViewText( viewDoc, '.foo { color: red; }' ) );
+				viewRoot._appendChild( viewA );
+
+				view.forceRender();
+
+				expect( window.spy.calledOnce ).to.be.false;
+				expect( getViewData( view ) ).to.equal( '<style>.foo { color: red; }</style>' );
+				expect( normalizeHtml( domRoot.innerHTML ) ).to.equal( '<span data-ck-unsafe-element="style">.foo { color: red; }</span>' );
+
+				delete window.spy;
+			} );
+
 			it( 'should rename attributes that can affect editing pipeline', () => {
 				setViewData( view,
 					'<container:p onclick="test">' +

From 612382dc8f1a66b6cbfad7ff402bea012f04044b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Wed, 9 Feb 2022 12:06:56 +0100
Subject: [PATCH 5/7] Improved manual test names and added the missing source
 editing button.

---
 .../ckeditor5-html-support/tests/manual/generalhtmlsupport.md | 1 -
 .../tests/manual/{features.html => ghs-all-features.html}     | 0
 .../tests/manual/{features.js => ghs-all-features.js}         | 4 ++++
 .../tests/manual/{features.md => ghs-all-features.md}         | 0
 .../{generalhtmlsupport.html => ghs-custom-config.html}       | 0
 .../manual/{generalhtmlsupport.js => ghs-custom-config.js}    | 0
 .../ckeditor5-html-support/tests/manual/ghs-custom-config.md  | 3 +++
 .../tests/manual/{no-features.html => ghs-no-features.html}   | 0
 .../tests/manual/{no-features.js => ghs-no-features.js}       | 0
 .../tests/manual/{no-features.md => ghs-no-features.md}       | 0
 10 files changed, 7 insertions(+), 1 deletion(-)
 delete mode 100644 packages/ckeditor5-html-support/tests/manual/generalhtmlsupport.md
 rename packages/ckeditor5-html-support/tests/manual/{features.html => ghs-all-features.html} (100%)
 rename packages/ckeditor5-html-support/tests/manual/{features.js => ghs-all-features.js} (96%)
 rename packages/ckeditor5-html-support/tests/manual/{features.md => ghs-all-features.md} (100%)
 rename packages/ckeditor5-html-support/tests/manual/{generalhtmlsupport.html => ghs-custom-config.html} (100%)
 rename packages/ckeditor5-html-support/tests/manual/{generalhtmlsupport.js => ghs-custom-config.js} (100%)
 create mode 100644 packages/ckeditor5-html-support/tests/manual/ghs-custom-config.md
 rename packages/ckeditor5-html-support/tests/manual/{no-features.html => ghs-no-features.html} (100%)
 rename packages/ckeditor5-html-support/tests/manual/{no-features.js => ghs-no-features.js} (100%)
 rename packages/ckeditor5-html-support/tests/manual/{no-features.md => ghs-no-features.md} (100%)

diff --git a/packages/ckeditor5-html-support/tests/manual/generalhtmlsupport.md b/packages/ckeditor5-html-support/tests/manual/generalhtmlsupport.md
deleted file mode 100644
index c357cf7f28a..00000000000
--- a/packages/ckeditor5-html-support/tests/manual/generalhtmlsupport.md
+++ /dev/null
@@ -1 +0,0 @@
-# General HTML Support
diff --git a/packages/ckeditor5-html-support/tests/manual/features.html b/packages/ckeditor5-html-support/tests/manual/ghs-all-features.html
similarity index 100%
rename from packages/ckeditor5-html-support/tests/manual/features.html
rename to packages/ckeditor5-html-support/tests/manual/ghs-all-features.html
diff --git a/packages/ckeditor5-html-support/tests/manual/features.js b/packages/ckeditor5-html-support/tests/manual/ghs-all-features.js
similarity index 96%
rename from packages/ckeditor5-html-support/tests/manual/features.js
rename to packages/ckeditor5-html-support/tests/manual/ghs-all-features.js
index b0b65fb1a02..9e23800e727 100644
--- a/packages/ckeditor5-html-support/tests/manual/features.js
+++ b/packages/ckeditor5-html-support/tests/manual/ghs-all-features.js
@@ -26,6 +26,7 @@ import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
 import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
 import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
 import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
+import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';
 import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
 import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
 import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption';
@@ -46,9 +47,12 @@ ClassicEditor
 			Alignment, IndentBlock,
 			PageBreak, HorizontalLine,
 			ImageUpload, CloudServices,
+			SourceEditing,
 			GeneralHtmlSupport
 		],
 		toolbar: [
+			'sourceEditing',
+			'|',
 			'heading',
 			'|',
 			'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'link',
diff --git a/packages/ckeditor5-html-support/tests/manual/features.md b/packages/ckeditor5-html-support/tests/manual/ghs-all-features.md
similarity index 100%
rename from packages/ckeditor5-html-support/tests/manual/features.md
rename to packages/ckeditor5-html-support/tests/manual/ghs-all-features.md
diff --git a/packages/ckeditor5-html-support/tests/manual/generalhtmlsupport.html b/packages/ckeditor5-html-support/tests/manual/ghs-custom-config.html
similarity index 100%
rename from packages/ckeditor5-html-support/tests/manual/generalhtmlsupport.html
rename to packages/ckeditor5-html-support/tests/manual/ghs-custom-config.html
diff --git a/packages/ckeditor5-html-support/tests/manual/generalhtmlsupport.js b/packages/ckeditor5-html-support/tests/manual/ghs-custom-config.js
similarity index 100%
rename from packages/ckeditor5-html-support/tests/manual/generalhtmlsupport.js
rename to packages/ckeditor5-html-support/tests/manual/ghs-custom-config.js
diff --git a/packages/ckeditor5-html-support/tests/manual/ghs-custom-config.md b/packages/ckeditor5-html-support/tests/manual/ghs-custom-config.md
new file mode 100644
index 00000000000..2721ff734e6
--- /dev/null
+++ b/packages/ckeditor5-html-support/tests/manual/ghs-custom-config.md
@@ -0,0 +1,3 @@
+# General HTML Support
+
+Test exploring a custom, complex config.
diff --git a/packages/ckeditor5-html-support/tests/manual/no-features.html b/packages/ckeditor5-html-support/tests/manual/ghs-no-features.html
similarity index 100%
rename from packages/ckeditor5-html-support/tests/manual/no-features.html
rename to packages/ckeditor5-html-support/tests/manual/ghs-no-features.html
diff --git a/packages/ckeditor5-html-support/tests/manual/no-features.js b/packages/ckeditor5-html-support/tests/manual/ghs-no-features.js
similarity index 100%
rename from packages/ckeditor5-html-support/tests/manual/no-features.js
rename to packages/ckeditor5-html-support/tests/manual/ghs-no-features.js
diff --git a/packages/ckeditor5-html-support/tests/manual/no-features.md b/packages/ckeditor5-html-support/tests/manual/ghs-no-features.md
similarity index 100%
rename from packages/ckeditor5-html-support/tests/manual/no-features.md
rename to packages/ckeditor5-html-support/tests/manual/ghs-no-features.md

From 8e3fede7d01e620adfe61e2d1c14046c73449cfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maksymilian=20Barnas=CC=81?= <m.barnas@cksource.com>
Date: Wed, 9 Feb 2022 12:09:23 +0100
Subject: [PATCH 6/7] Review fixes.

---
 .../ckeditor5-engine/src/view/domconverter.js   |  8 +++-----
 .../tests/integrations/style.js                 | 17 ++++++++---------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/ckeditor5-engine/src/view/domconverter.js b/packages/ckeditor5-engine/src/view/domconverter.js
index ea692a41f24..4fd337a0892 100644
--- a/packages/ckeditor5-engine/src/view/domconverter.js
+++ b/packages/ckeditor5-engine/src/view/domconverter.js
@@ -1547,7 +1547,7 @@ export default class DomConverter {
 	 * @returns {Boolean}
 	 */
 	_shouldRenameElement( elementName ) {
-		const name = elementName.toLocaleLowerCase();
+		const name = elementName.toLowerCase();
 
 		return this.renderingMode === 'editing' && UNSAFE_ELEMENTS.includes( name );
 	}
@@ -1662,15 +1662,13 @@ function _logUnsafeElement( elementName ) {
  * the `<script>` element was renamed to `<span data-ck-unsafe-element="script"></span>`.
  *
  * @error domconverter-unsafe-script-element-detected
- * that was renamed.
  */
 
 /**
- * The {@link module:engine/view/domconverter~DomConverter} detected a `<style>` element that may affect the editing experience.
- * To avoid this, the `<style>` element was renamed to `<span data-ck-unsafe-element="style"></span>`.
+ * While rendering the editor content, the {@link module:engine/view/domconverter~DomConverter} detected a `<style>` element that may affect
+ * the editing experience. To avoid this, the `<style>` element was replaced with `<span data-ck-unsafe-element="style"></span>`.
  *
  * @error domconverter-unsafe-style-element-detected
- * that was renamed.
  */
 
 /**
diff --git a/packages/ckeditor5-html-support/tests/integrations/style.js b/packages/ckeditor5-html-support/tests/integrations/style.js
index 9da533a4665..711cb3e1d78 100644
--- a/packages/ckeditor5-html-support/tests/integrations/style.js
+++ b/packages/ckeditor5-html-support/tests/integrations/style.js
@@ -13,7 +13,6 @@ import { getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-util
 
 describe( 'StyleElementSupport', () => {
 	const STYLE = 'div { color: red; }';
-	const CODE_CPP = 'cout << "Hello World" << endl;';
 
 	let editor, model, editorElement, dataFilter, warnStub;
 
@@ -52,10 +51,10 @@ describe( 'StyleElementSupport', () => {
 	it( 'should allow attributes', () => {
 		dataFilter.allowAttributes( { name: 'style', attributes: [ 'type', 'nonce' ] } );
 
-		editor.setData( `<p>Foo</p><style type="c++" nonce="qwerty">${ CODE_CPP }</style>` );
+		editor.setData( `<p>Foo</p><style type="c++" nonce="qwerty">${ STYLE }</style>` );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ CODE_CPP }"></htmlStyle>`,
+			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ STYLE }"></htmlStyle>`,
 			attributes: {
 				1: {
 					attributes: {
@@ -63,32 +62,32 @@ describe( 'StyleElementSupport', () => {
 						type: 'c++'
 					}
 				},
-				2: CODE_CPP
+				2: STYLE
 			}
 		} );
 
-		expect( editor.getData() ).to.equal( `<p>Foo</p><style type="c++" nonce="qwerty">${ CODE_CPP }</style>` );
+		expect( editor.getData() ).to.equal( `<p>Foo</p><style type="c++" nonce="qwerty">${ STYLE }</style>` );
 	} );
 
 	it( 'should disallow attributes', () => {
 		dataFilter.allowAttributes( { name: 'style', attributes: true } );
 		dataFilter.disallowAttributes( { name: 'style', attributes: 'nonce' } );
 
-		editor.setData( `<p>Foo</p><style type="c++" nonce="qwerty">${ CODE_CPP }</style>` );
+		editor.setData( `<p>Foo</p><style type="c++" nonce="qwerty">${ STYLE }</style>` );
 
 		expect( getModelDataWithAttributes( model, { withoutSelection: true } ) ).to.deep.equal( {
-			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ CODE_CPP }"></htmlStyle>`,
+			data: `<paragraph>Foo</paragraph><htmlStyle htmlAttributes="(1)" htmlContent="${ STYLE }"></htmlStyle>`,
 			attributes: {
 				1: {
 					attributes: {
 						type: 'c++'
 					}
 				},
-				2: CODE_CPP
+				2: STYLE
 			}
 		} );
 
-		expect( editor.getData() ).to.equal( `<p>Foo</p><style type="c++">${ CODE_CPP }</style>` );
+		expect( editor.getData() ).to.equal( `<p>Foo</p><style type="c++">${ STYLE }</style>` );
 	} );
 
 	describe( 'element position', () => {

From d87ab7be8cc9a1da63d463b034270df606e95cc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Wed, 9 Feb 2022 12:24:21 +0100
Subject: [PATCH 7/7] Aligned the second error too.

---
 packages/ckeditor5-engine/src/view/domconverter.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/ckeditor5-engine/src/view/domconverter.js b/packages/ckeditor5-engine/src/view/domconverter.js
index 4fd337a0892..410f8ff9e5c 100644
--- a/packages/ckeditor5-engine/src/view/domconverter.js
+++ b/packages/ckeditor5-engine/src/view/domconverter.js
@@ -1657,9 +1657,8 @@ function _logUnsafeElement( elementName ) {
  */
 
 /**
- * The {@link module:engine/view/domconverter~DomConverter} detected a `<script>` element that may disrupt the
- * {@glink framework/guides/architecture/editing-engine#editing-pipeline editing pipeline} of the editor. To avoid this,
- * the `<script>` element was renamed to `<span data-ck-unsafe-element="script"></span>`.
+ * While rendering the editor content, the {@link module:engine/view/domconverter~DomConverter} detected a `<script>` element that may
+ * disrupt the editing experience. To avoid this, the `<script>` element was replaced with `<span data-ck-unsafe-element="script"></span>`.
  *
  * @error domconverter-unsafe-script-element-detected
  */