Unify HTML structure and attributes for internal and external images

Feature requests
1

Use case or problem

Currently in the HTML side, the attributes for external and internal images are inconsistent in both reading and live preview modes.

Live preview

Internal image:

<div
  class="internal-embed media-embed image-embed is-loaded"
  tabindex="-1"
  src="image.webp"
  alt="center"
  width="200"
  contenteditable="false"
>
  <div class="edit-block-button"></div>
  <div class="image-wrapper">
    <img
      src="app://d220eb9a12f312071c05fbe3e7b1f9f1be3e/.../image.webp?1736800122000"
      alt="center"
      width="200"
    />
    <div class="image-resize-corner"></div>
  </div>
</div>

External image:

<div
  class="image-embed"
  tabindex="-1"
  contenteditable="false"
>
  <div class="image-wrapper">
    <img
      src="https://picsum.photos/200/300"
      width="200"
      alt="center"
    />
    <div class="image-resize-corner"></div>
  </div>
  <div class="edit-block-button"></div>
</div>

You can notice how external image don’t repeats the attributes of img again in image-embed container.

Reading View

Internal image:

<div class="el-p">
  <p dir="auto">
    <span
      width="200"
      alt="center"
      src="image.webp"
      class="internal-embed media-embed image-embed is-loaded"
    ><img
        alt="center"
        width="200"
        src="app://d220eb9a12f312071c05fbe3e7b1f9f1be3e/.../image.webp?1736800122000"
    /></span>
  </p>
</div>

External image:

<div class="el-p">
  <p dir="auto">
    <img
      width="200"
      alt="square"
      src="https://picsum.photos/200/300"
      referrerpolicy="no-referrer"
    />
  </p>
</div>

You can notice that even it lost the image-embed container!

Problem

All this inconsistency complicate style images with CSS because you need a workaround for each variation, and even worst, the need to use :has to handle both cases.

Proposed solution

Make both internal and external images follow the same structure, that means:

  • Add the attributes of img in the image-embed container.
  • Add to live preview external images a image-embed container.