1519578 - [contenteditable] Elements made block via CSS use <br> for newlines rather than <divs>

Status: NEW

(Core :: DOM: Editor, defect, P3)

Description

[Thomas Wisniewski [:twisniewski]]

Attachment: test.html

Elements that are intrisically block elements will use <div> for contenteditable newlines, whereas elements which are assigned to be block elements with CSS will use <br> instead. Chrome instead wraps both cases with <div>.

This is causing an interop issue with YouTube comments. YouTube is expecting Chrome's behavior, and so once users submit their comments, they are treated as a single line, ignoring the line breaks the user saw while typing in the comment. (This was raised at https://webcompat.com/issues/24113).

Comment 1

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

This is really difficult to fix by outside because Chrome creates DOM tree like this:

--<span contenteditable>
  +-<div>
  |  +- first line
  +-<div>
     +- second line

If web apps do:

let tmp = editor.innerHTML;
tmp.replace(...);
editor.innerHTML = tmp;

Then, DOM tree would be broken like:

+-<span contenteditable><span>
+-<div>
|  +- first line
+-<div>
   +- second line

because <span> element is forcibly closed before the first <div> because of impossible to contain.

If we need to change this behavior, we should ask Google about how do they think (i.e., whether should be fixed by them).

Comment 2

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

(YouTube should change the editing host from <span> to <div>, anyway.)

Comment 3

[Mike Taylor [:miketaylr]]

I'm going to reach out to YouTube here and see if they can switch to <div>.

Comment 4

[Mike Taylor [:miketaylr]]

Sent an email to our partner list.

Comment 5

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to project flags.

Comment 6

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 7

[Mike Taylor [:miketaylr]]

Attachment: Screen Shot 2020-07-02 at 2.38.34 PM.png

It seems like YouTube worked around this somehow (but I still see spans instead of divs). See screenshot.