DualContentModelElementSupport doesn't support inline element upcasting into block element

[lauriii]

📝 Provide detailed reproduction steps (if any)

The html-support/integrations/dualcontent~DualContentModelElementSupport is not handling cases where a child node that is an inline element in view changes into a block element in model. Example case where this is happening (in Drupal) is when <a> is wrapping a <drupal-media> element.

Following data:

<a href="example.com">
  <drupal-media></drupal-media>
</a>

Upcasts into (because the links plugin doesn't support linking block elements):

<drupalMedia linkHref="example.com"></drupalMedia>

So imagine the following use case:

<div>
  <a href="example.com">
      <drupal-media></drupal-media>
  </a>
</div>

✔️ Expected result

<htmlDiv>
  <drupalMedia linkHref="example.com"></drupalMedia>
</htmlDiv>

❌ Actual result

What actually happens is:

<htmlDivParagraph>
  <drupalMedia linkHref="example.com"></drupalMedia>
</htmlDivParagraph>

Which is later on reduced to since <drupalMedia> is a block element:

<drupalMedia linkHref="example.com"></drupalMedia>

---

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

[wimleers]

Sibling Drupal issue: https://www.drupal.org/project/drupal/issues/3271418

[Reinmar]

Currently, to detect whether a <div> is a block-like element or a contrainer, we're scanning only the immediate children of that <div> element.

Thus, in this situation:

<div>
	<a><drupal-media/></a>
</div>

We're seeing only the <a> element and make the decision that the <div> should be a block-like element. Then, <drupal-media> is being converted, it's not allowed in <htmlDivParagraph> so <htmlDivParagraph> is stripped.

This means that we put more emphasize on the inner most elements than on the containers when deciding which elements to retain in case of schema conflicts.

Thus, the heuristic should also take into consideration the inner most elements when making the decision.

Why this makes sense will be visible in this scenario where invalid HTML is loaded:

<div>
	<span><p>xxx</p></span>
</div>

Currently, the editor will retain: <p><span>xxx</span></p>.

If we change the heuristic to scan the entire subtree (all nodes in it), the original structure will be better retained. We can expect something like:

<div>
	<p><span>xxx</span></p>
</div>

Note: we need to scan really all nodes in this tree. If we focused on the leaf nodes only, then the below markup would still not be handled correctly:

<div>
	<p><span>xxx</span></p>
</div>

[Reinmar]

The heuristic:

ckeditor5/packages/ckeditor5-html-support/src/integrations/dualcontent.js

Lines 113 to 118 in 30286f7

	_hasBlockContent( viewElement ) {
	const blockElements = this.editor.editing.view.domConverter.blockElements;
	return Array.from( viewElement.getChildren() )
	.some( node => blockElements.includes( node.name ) );
	}