Clarify how `selection.modify()` when the granularity parameter is `paragraph` handles non-editable elements in an editing host

zp1996 commented 7 months ago

The specification doesn't define the behavior of seleciton.modify() when the granularity parameter is paragraph.

<style>
div {
  width: 1000px;
}
</style>
<div contenteditable>
  <p id="one">Demo 1</p>
  <p id="two">
    Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, <span contenteditable="false">11111</span> omnis voluptas assumenda est, omnis dolor repellendus.
  </p>
</div>

<p>Move the caret at the end of p#two, then click the button.</p>

<button>Modify</button>

<script>
document.querySelector('button').addEventListener('click', () => {
  const selection = window.getSelection();
  selection.modify('move', 'backward', 'paragraph');
});
</script>

The behavior of browsers:

Safari, Edge, and Chrome: Same as the granularity of line.
Firefox: Not support the granularity of paragraph.

If we make span to be editable, the behavior of browsers:

Safari, Edge, and Chrome: The caret position is Demo 1|.
Firefox: Not support the granularity of paragraph.

zp1996 commented 7 months ago

@rniwa Hi rniwa, can you help me see the correct behavior? In my opinion, the behavior of selection.modify should not be influenced by whether span is editable or not.

zp1996 commented 4 months ago

We believe the new behavior is correct, therefore we will implement it in Chromium and will add a tentative test.

zp1996 commented 3 months ago

Merge Request of Chromium and wpt:

w3c / selection-api

Clarify how `selection.modify()` when the granularity parameter is `paragraph` handles non-editable elements in an editing host #173