Nested `contenteditable=true` and `contenteditable=plaintext-only` should win only the ourtermost one

[masayuki-nakano]

What is the issue with the HTML Standard?

See https://github.com/w3c/editing/issues/470 for the detail of the situations.

If partial editing mode change is allowed with:

<div contenteditable=true>
  rich text
  <div contenteditable=plaintext-only>plain text</div>
  rich text
</div>

It's difficult to define the behavior of all edge cases when selection range crosses the inner contenteditable element boundary. Therefore, the editing mode should be considered with the outermost element whose parent element is not editable.

E.g., I think that in the following case, the innermost one should win:

<div contenteditable=true>
  rich text
  <div contenteditable=false>
    non-editable text
    <div contenteditable=plaintext-only>plain text</div>
    non-editable text
  </div>
  rich text
</div>

(So, it seems that when contenteditable is nested with contenteditable=false, the outermost contenteditable in the innermost contenteditable=false should always have focus when selection is in it.)

@smaug---- , @johanneswilm, @rniwa

[smaug----]

From the editing WG meeting minutes: "follow model of outermost wins." but that was for the first example. I agree that in the second one innermost should win.

[annevk]

So what is the algorithm? If you're an editable area, you look if your parent is also editable and if so, you adopt their editing type (which to compute it would have to run this algorithm as well), and if not, you use your own?

[johanneswilm]

@smaug---- @masayuki-nakano Yes, so the "follow model of outermost wins" also includes the provision "You can reset with contenteditable=false" (Dan's message a few lines higher up).

@annevk That algorithm sounds correct (from the view of a JS developer at least).

[masayuki-nakano]

So, I think the outermost contenteditable editable attribute value win in innermost contenteditable=false element if there is. It may be reasonable that the algorithm refers active element as the origin to consider innermost/outermost. If so, HTML spec may need to define that outermost edting host in innermost contenteditable=false should have focus whrn Selection range(s) is in it.

[masayuki-nakano]

Err, closest non-ediale ancestor from selection or active element (focused element) may be useful to define the algorithm.

[johanneswilm]

So, I think the outermost contenteditable editable attribute value win in innermost contenteditable=false element if there is.

I am not sure I fully understand.

As I understand it, given the algorithm as described by Anne above as well as described as the "outermost wins" model (with contenteditable=false resetting), in the two examples above, in the first case contenteditable=true wins as the inner contenteditable=plaintext-only is ignored. In the second "plaintext-only" wins innermost as the contenteditable=false resets.

The algorithm should be able to handle even more layers, for example:

<div contenteditable=true>
  This text is contenteditable=true.
  <div contenteditable=plaintext-only>
    This text is contenteditable=true as the "plaintext-only" is ignored because it is inside a contenteditable=true.
    <div contenteditable=false>
      This text cannot be edited as it is inside a "contenteditable=false"
      <div contenteditable=plaintext-only>This text is plaintext-only editable.</div>
    </div>
  </div>
</div>

[masayuki-nakano]

@johanneswilm Yes, your example is exactly same as I expect.

[masayuki-nakano]

I'll add some tests from https://bugzilla.mozilla.org/show_bug.cgi?id=1921171