search

facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
19.57k stars 1.66k forks source link

Bug: Invalid HTML element nesting for image node #4958

Open zignis opened 1 year ago

zignis commented 1 year ago

Lexical version: 0.12.0

Steps To Reproduce

  1. Insert an image node in the playground

The current behavior

Inserting an image node results in the following DOM structure:

<p class="PlaygroundEditorTheme__paragraph">
    <span class="editor-image" data-lexical-decorator="true" contenteditable="false">
        <div draggable="false"><img src="/assets/yellow-flower.a2a7c7a2.jpg" alt="Yellow flower in tilt shift lens" style="height: inherit; max-width: 500px; width: inherit;" draggable="false"></div>
    </span>
</p>

This markup is invalid as <p> and <span> are inline elements and they cannot contain block elements such as <div>

The expected behavior

Invalid DOM nesting. The draggable div can be converted to a span element to fix this.

acywatson commented 1 year ago

Hm, good point. This seems like an easy fix