Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
masayuki-nakano opened this issue Sep 27, 2024 · 8 comments
Labels
needs concrete proposal Moving the issue forward requires someone to figure out a detailed plan needs tests Moving the issue forward requires someone to write tests topic: editing

Comments

@masayuki-nakano
Copy link

What is the issue with the HTML Standard?

See w3c/editing#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----
Copy link

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
Copy link
Member

annevk commented Sep 28, 2024

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?

@annevk annevk added needs tests Moving the issue forward requires someone to write tests needs concrete proposal Moving the issue forward requires someone to figure out a detailed plan topic: editing labels Sep 28, 2024
@johanneswilm
Copy link

@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
Copy link
Author

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
Copy link
Author

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

@johanneswilm
Copy link

johanneswilm commented Sep 28, 2024

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
Copy link
Author

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

@masayuki-nakano
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs concrete proposal Moving the issue forward requires someone to figure out a detailed plan needs tests Moving the issue forward requires someone to write tests topic: editing
Development

No branches or pull requests

4 participants