Merge pull request #14410 from ckeditor/ck/13803

Fix (html-support): GHS should allow linking of custom elements. Closes #13803 .

packages/ckeditor5-html-support/src/schemadefinitions.ts

@@ -957,6 +957,7 @@ export default {
 			view: '$customElement',
 			modelSchema: {
 				allowWhere: [ '$text', '$block' ],
+				allowAttributesOf: '$inlineObject',
 				isInline: true
 			}
 		}

packages/ckeditor5-html-support/tests/integrations/customelement.js

@@ -6,6 +6,7 @@
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
+import { Link } from '@ckeditor/ckeditor5-link';
 import { getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 import { INLINE_FILLER } from '@ckeditor/ckeditor5-engine/src/view/filler';
@@ -29,7 +30,7 @@ describe( 'CustomElementSupport', () => {
 
 		return ClassicTestEditor
 			.create( editorElement, {
-				plugins: [ CodeBlock, Paragraph, GeneralHtmlSupport ]
+				plugins: [ CodeBlock, Paragraph, Link, GeneralHtmlSupport ]
 			} )
 			.then( newEditor => {
 				editor = newEditor;
@@ -373,6 +374,23 @@ describe( 'CustomElementSupport', () => {
 			expect( editor.getData() ).to.equal( '<custom-foo-element style="background:red;">bar</custom-foo-element>' );
 		} );
 
+		it( 'should allow linking custom element', () => {
+			dataFilter.allowElement( /.*/ );
+
+			editor.setData( '<a href="bar"><custom-foo-element>bar</custom-foo-element></a>' );
+
+			expect( getModelDataWithAttributes( model, { withoutSelection: true, excludeAttributes } ) ).to.deep.equal( {
+				data: '<htmlCustomElement' +
+					' htmlContent="<custom-foo-element>bar</custom-foo-element>"' +
+					' htmlElementName="custom-foo-element"' +
+					' linkHref="bar"' +
+					'></htmlCustomElement>',
+				attributes: {}
+			} );
+
+			expect( editor.getData() ).to.equal( '<a href="bar"><custom-foo-element>bar</custom-foo-element></a>' );
+		} );
+
 		it( 'should disallow attributes', () => {
 			dataFilter.allowElement( /.*/ );
 			dataFilter.allowAttributes( { attributes: { 'data-foo': /.*/ } } );

packages/ckeditor5-html-support/tests/tickets/13803.js

@@ -0,0 +1,53 @@
+/**
+ * @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
+ */
+
+/* global document */
+
+import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import LinkEditing from '@ckeditor/ckeditor5-link/src/linkediting';
+import GeneralHtmlSupport from '../../src/generalhtmlsupport';
+
+describe( 'bug #13803', () => {
+	let editor, editorElement;
+
+	beforeEach( async () => {
+		editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		editor = await ClassicTestEditor.create( editorElement, {
+			plugins: [ Paragraph, LinkEditing, GeneralHtmlSupport ],
+			htmlSupport: {
+				allow: [ {
+					name: /./,
+					attributes: true,
+					classes: true,
+					styles: true
+				} ]
+			}
+		} );
+	} );
+
+	afterEach( async () => {
+		editorElement.remove();
+
+		await editor.destroy();
+	} );
+
+	it( 'should preserve linked picture element', () => {
+		const data =
+			'<div class="adblock">' +
+				'<a href="/link">' +
+					'<picture>' +
+						'<source media="">' +
+					'</picture>' +
+				'</a>' +
+			'</div>';
+
+		editor.setData( data );
+
+		expect( editor.getData() ).to.equalMarkup( data );
+	} );
+} );