GHS should allow wrapping name-value groups in div elements (DT/DD)

[niegowski]

📝 Provide detailed reproduction steps (if any)

1. Open GHS all features manual test
2. Load following content:

<dl>
	<div>
		<dt>t</dt>
		<dd>d</dd>
	</div>
	<div>
		<dt>t</dt>
		<dd>d</dd>
	</div>
</dl>

✔️ Expected result

Expected model:

❌ Actual result

There is no DL, DD, DT.

❓ Possible solution

The data definition in GHS is missing wrapping DD/DT with DIV elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl#wrapping_name-value_groups_in_div_elements

📃 Other details

• Browser: …
• OS: …
• First affected CKEditor version: …
• Installed CKEditor plugins: …

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[niegowski]

As a workaround, it's possible to extend the DataSchema definitions by including the following plugin in the plugins list (but it has to be on the list before the GeneralHtmlSupport plugin:

class ExtendGHSDescriptionListElement {
	constructor( editor ) {
		this.editor = editor;
	}

	static get requires() {
		return [ 'DataSchema' ];
	}

	init() {
		const dataSchema = this.editor.plugins.get( 'DataSchema' );

		dataSchema.extendBlockElement( {
			model: 'htmlDl',
			modelSchema: {
				allowChildren: [ 'htmlDiv' ]
			}
		} );
		dataSchema.extendBlockElement( {
			model: 'htmlDt',
			modelSchema: {
				allowIn: 'htmlDiv'
			}
		} );

		dataSchema.extendBlockElement( {
			model: 'htmlDd',
			modelSchema: {
				allowIn: 'htmlDiv'
			}
		} );
	}
}