Merge pull request #14136 from ckeditor/ck/14131-remove-style-tag-whe…

…n-pasting-table-from-google-sheets

Fix (paste-from-office): Remove the `<style>` tag that comes with the table pasted from Google Sheets. Closes #14131.

packages/ckeditor5-paste-from-office/src/filters/removestyleblock.ts

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module paste-from-office/filters/removestyleblock
+ */
+
+import type { UpcastWriter, ViewDocumentFragment } from 'ckeditor5/src/engine';
+
+/**
+ * Removes `<style>` block added by Google Sheets to a copied content.
+ *
+ * @param documentFragment element `data.content` obtained from clipboard
+ */
+export default function removeStyleBlock( documentFragment: ViewDocumentFragment, writer: UpcastWriter ): void {
+	for ( const child of Array.from( documentFragment.getChildren() ) ) {
+		if ( child.is( 'element', 'style' ) ) {
+			writer.remove( child );
+		}
+	}
+}

packages/ckeditor5-paste-from-office/src/normalizers/googlesheetsnormalizer.ts

@@ -12,6 +12,7 @@ import { UpcastWriter, type ViewDocument } from 'ckeditor5/src/engine';
 import removeXmlns from '../filters/removexmlns';
 import removeGoogleSheetsTag from '../filters/removegooglesheetstag';
 import removeInvalidTableWidth from '../filters/removeinvalidtablewidth';
+import removeStyleBlock from '../filters/removestyleblock';
 import type { Normalizer, NormalizerData } from '../normalizer';
 
 const googleSheetsMatch = /<google-sheets-html-origin/i;
@@ -48,6 +49,7 @@ export default class GoogleSheetsNormalizer implements Normalizer {
 		removeGoogleSheetsTag( documentFragment, writer );
 		removeXmlns( documentFragment, writer );
 		removeInvalidTableWidth( documentFragment, writer );
+		removeStyleBlock( documentFragment, writer );
 
 		data.content = documentFragment;
 	}

packages/ckeditor5-paste-from-office/tests/filters/removestyleblock.js

@@ -0,0 +1,80 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
+import removeStyleBlock from '../../src/filters/removestyleblock';
+import UpcastWriter from '@ckeditor/ckeditor5-engine/src/view/upcastwriter';
+import Document from '@ckeditor/ckeditor5-engine/src/view/document';
+import { StylesProcessor } from '@ckeditor/ckeditor5-engine/src/view/stylesmap';
+
+describe( 'PasteFromOffice - filters', () => {
+	const htmlDataProcessor = new HtmlDataProcessor( new Document( new StylesProcessor() ) );
+
+	describe( 'removeStyleBlock', () => {
+		let writer, viewDocument;
+
+		before( () => {
+			viewDocument = new Document();
+			writer = new UpcastWriter( viewDocument );
+		} );
+
+		it( 'should remove <style> element', () => {
+			const inputData =
+				'<style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style>' +
+				'<table>' +
+					'<tbody>' +
+						'<tr>' +
+							'<td>123</td>' +
+						'</tr>' +
+					'</tbody>' +
+				'</table>';
+
+			const documentFragment = htmlDataProcessor.toView( inputData );
+
+			removeStyleBlock( documentFragment, writer );
+
+			expect( htmlDataProcessor.toData( documentFragment ) ).to.equal( '<table><tbody><tr><td>123</td></tr></tbody></table>' );
+		} );
+
+		it( 'works with multiple consecutive <style> tags', () => {
+			const inputData =
+				'<style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style>' +
+				'<style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style>' +
+				'<style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style>' +
+				'<table>' +
+					'<tbody>' +
+						'<tr>' +
+							'<td>123</td>' +
+						'</tr>' +
+					'</tbody>' +
+				'</table>';
+
+			const documentFragment = htmlDataProcessor.toView( inputData );
+
+			removeStyleBlock( documentFragment, writer );
+
+			expect( htmlDataProcessor.toData( documentFragment ) ).to.equal( '<table><tbody><tr><td>123</td></tr></tbody></table>' );
+		} );
+
+		it( 'works with multiple non-consecutive <style> tags', () => {
+			const inputData =
+				'<style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style>' +
+				'<table>' +
+					'<tbody>' +
+						'<tr>' +
+							'<td>123</td>' +
+						'</tr>' +
+					'</tbody>' +
+				'</table>' +
+				'<style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style>';
+
+			const documentFragment = htmlDataProcessor.toView( inputData );
+
+			removeStyleBlock( documentFragment, writer );
+
+			expect( htmlDataProcessor.toData( documentFragment ) ).to.equal( '<table><tbody><tr><td>123</td></tr></tbody></table>' );
+		} );
+	} );
+} );