Edit text outside of <body> #405

johanneswilm · 2022-08-09T09:44:12Z

Should browsers allow using execCommand outside the <body>? If yes, then that behavior should be specced. There is a proposal on what such behavior should look like [1]. Alternatively, we could specify that execCommand should not work outside of <body>. See discussion on pro- and contra starting here [2].

[1] web-platform-tests/interop-2022-editing#8 See "Tests inserting paragraph and delete in elements outside "

[2] web-platform-tests/interop-2022-editing#8 (comment)

The text was updated successfully, but these errors were encountered:

masayuki-nakano · 2022-08-10T00:12:32Z

FYI: Not only for execCommand, the tests run with the test driver, so they check the behavior of user input.

johanneswilm · 2022-08-10T06:38:25Z

@masayuki-nakano ~~I am not following. Can you give me an example of how I could try to edit something outside of the <body> using only user input?~~ I tried with this HTML:

Edit: I did find a way to do this (see next comment).

<!DOCTYPE html>
<html>
<head></head>
<p>cellow</p>
<body contenteditable="true">
<h1>hello</h1>
</body>
<h2>mellow</h2>
</html>

But that is being normalized into this in Chrome:

<!DOCTYPE html>
<html>
<head></head>
<body contenteditable="true">
<p>cellow</p>
<h1>hello</h1>
<h2>mellow</h2>
</body>
</html>

And this in Firefox:

<!DOCTYPE html>
<html>
<head></head>
<body>
<p>cellow</p>
<h1>hello</h1>
<h2>mellow</h2>
</body>
</html>

johanneswilm · 2022-08-10T07:48:47Z

I did find a way to do this:

<!DOCTYPE html>
<html>
<head></head>
<body>
  <h1>body</h1>
</body>
<script>
  const dom = document.createElement('h2')
  dom.innerHTML = "outside body"
  dom.contentEditable = true
  document.lastChild.appendChild(dom)
</script>
</html>

The question is whether this is something that is actually needed for anything.

johanneswilm · 2022-08-10T07:52:11Z

@Comandeer @spocke Are there situations where you could see that this would be useful for editor projects? To let the user edit the contents of an element that is outside of the document.body?

masayuki-nakano · 2022-08-10T07:56:29Z

@johanneswilm Web apps needs to create the odd situation, which cannot be created by users.

There are some possible scenarios:

Make the root editable and insert visible elements around `<body>`

Web apps make editable outside <body> with setting designMode to on or setting <html>.contentEditable to true
Insert a visible element before or after <body>.

Make the elements can be in `<head>` and can have text visible and editable

Web apps make <style>, <script>, <noscript> or <title> in <head> visible and editable

Append visible elements around `<body>`

Insert visible and editable element (e.g., <div contenteditable>) outside <body>

The last one is what the CKEditor did.

masayuki-nakano · 2022-08-10T08:02:25Z

The question is whether this is something that is actually needed for anything.

Yes, it is. (Correct answer is "no", see #405 (comment))

johanneswilm · 2022-08-10T08:02:36Z

@masayuki-nakano Can you give example of how those other cases work? I can see that it is possible to put an element before or after <body> using JavaScript and make that element contenteditable and then have the user change the contents (see last comment). But how does the user get to change the contents of the <head>?

johanneswilm · 2022-08-10T08:03:34Z

The question is whether this is something that is actually needed for anything.

Yes, it is.

What is it useful for? I've tagged people from two of the main editor projects. Hopefully one of them can shed light on what, if anything, they need to use it for.

masayuki-nakano · 2022-08-10T08:06:37Z

@johanneswilm

The question is whether this is something that is actually needed for anything.

Yes, it is.

What is it useful for? I've tagged people from two of the main editor projects. Hopefully one of them can shed light on what, if anything, they need to use it for.

Oops, sorry, I misread your comment. My answer is "no". These things may happen if web apps use tricky approach which shouldn't be used.

But how does the user get to change the contents of the head?

head {
 display: block;
}
style {
  display: block;
  white-space: pre;
}

For example to make <style> in <head> visible.

johanneswilm · 2022-08-10T08:40:30Z

Indeed, this is possible:

<!DOCTYPE html>
<html contentEditable="true">
<head>
  <title>The title</title>
  <style>
  head, style, title {
    display: block;
  }
  style, title {
    white-space: pre;
  }
  </style>
</head>
<body>
  <h1>body</h1>
</body>
</html>

Comandeer · 2022-08-10T10:48:42Z

The only case I found for editables outside the body is the pastebin in CKE4 (ckeditor/ckeditor4#5307). However, it seems like something we need to check and fix on our side. Yet, it does not use execCommand() outside of the body, it uses only the cE element and selection. Additionally, it's a mechanism used mainly in older browsers to correctly handle the pasted content, used mostly in old Internet Explorers.

I understand the need for supporting old versions of CKEditor 4 but I think that the current level of support for editing outside the body is enough and the support for execCommand() could be omitted.

annevk · 2022-09-15T21:57:25Z

One question here is what body means. You can have multiple body elements after all.

masayuki-nakano · 2022-09-21T05:18:59Z

I've not tested enough for multiple <body> elements cases. I'm just thinking that outside the <body> element which is the value of document.body. (Perhaps, <body>s shouldn't be joined to keep the original structure of the document which is probably created intentionally by the web author.)

johanneswilm added the Agenda+ Agenda item to be inserted in the Editing TF meeting queue label Aug 9, 2022

hsinyi mentioned this issue Aug 9, 2022

Agenda 2022-08-18 web-platform-tests/interop-2022-editing#9

Closed

johanneswilm changed the title ~~using execCommand outside of <body>~~ Edit text outside of <body> Aug 10, 2022

Comandeer mentioned this issue Aug 10, 2022

Check if pastebin can't be added always to body ckeditor/ckeditor4#5307

Open

johanneswilm removed the Agenda+ Agenda item to be inserted in the Editing TF meeting queue label Oct 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Edit text outside of <body> #405

Edit text outside of <body> #405

johanneswilm commented Aug 9, 2022

masayuki-nakano commented Aug 10, 2022

johanneswilm commented Aug 10, 2022 •

edited

Loading

johanneswilm commented Aug 10, 2022

johanneswilm commented Aug 10, 2022 •

edited

Loading

masayuki-nakano commented Aug 10, 2022 •

edited

Loading

masayuki-nakano commented Aug 10, 2022 •

edited

Loading

johanneswilm commented Aug 10, 2022 •

edited

Loading

johanneswilm commented Aug 10, 2022

masayuki-nakano commented Aug 10, 2022

johanneswilm commented Aug 10, 2022

Comandeer commented Aug 10, 2022

annevk commented Sep 15, 2022

masayuki-nakano commented Sep 21, 2022

Edit text outside of <body> #405

Edit text outside of <body> #405

Comments

johanneswilm commented Aug 9, 2022

masayuki-nakano commented Aug 10, 2022

johanneswilm commented Aug 10, 2022 • edited Loading

johanneswilm commented Aug 10, 2022

johanneswilm commented Aug 10, 2022 • edited Loading

masayuki-nakano commented Aug 10, 2022 • edited Loading

Make the root editable and insert visible elements around <body>

Make the elements can be in <head> and can have text visible and editable

Append visible elements around <body>

masayuki-nakano commented Aug 10, 2022 • edited Loading

johanneswilm commented Aug 10, 2022 • edited Loading

johanneswilm commented Aug 10, 2022

masayuki-nakano commented Aug 10, 2022

johanneswilm commented Aug 10, 2022

Comandeer commented Aug 10, 2022

annevk commented Sep 15, 2022

masayuki-nakano commented Sep 21, 2022

johanneswilm commented Aug 10, 2022 •

edited

Loading

johanneswilm commented Aug 10, 2022 •

edited

Loading

masayuki-nakano commented Aug 10, 2022 •

edited

Loading

Make the root editable and insert visible elements around `<body>`

Make the elements can be in `<head>` and can have text visible and editable

Append visible elements around `<body>`

masayuki-nakano commented Aug 10, 2022 •

edited

Loading

johanneswilm commented Aug 10, 2022 •

edited

Loading