Skip to content

Change Selection to be associated with a composed live range #345

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.

Sign up for GitHub

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

Open
wants to merge 4 commits into
base: gh-pages
Choose a base branch
from
Open

Change Selection to be associated with a composed live range #345

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f3f0db7
Change Selection to be associated with a composed live range
dizhang168 Jan 24, 2025
23db74f
Rename and address review comments
dizhang168 Mar 5, 2025
d011134
Fix format
dizhang168 Mar 5, 2025
c58cfb1
Use new naming: composed/uncomposed range
dizhang168 Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 89 additions & 62 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,8 @@ <h2>
[=editing hosts=] in the <a>document</a>.
</p>
<p>
Each <a>selection</a> can be associated with a single <a>range</a>.
Each <a>selection</a> can be associated with a single
<a href="TODO">composed selection range</a> <dfn>range</dfn>.
When there is no <a>range</a> associated with the <a>selection</a>, the
selection is <dfn>empty</dfn>. The selection must be initially
<a>empty</a>.
Expand All @@ -127,6 +128,34 @@ <h2>
dev do not. We follow Gecko/WebKit, because it lessens the chance of
getRangeAt(0) throwing.
</p>
<p>To <dfn>set the composed selection range</dfn> of [=this=], given the
<a>boundary point</a> <var>start</var> and <a>boundary point</a>
<var>end</var>, run these steps:
</p>
<ol>
<li>Let <var>liveRange</var> be a new {{Range/}} object.</li>
<li>[=Range/Set the start=] of <var>liveRange</var> to <var>start</var>.
</li>
<li>[=Range/Set the end=] of <var>liveRange</var> to <var>end</var>.
</li>
<li>Let <var>composedRange</var> be a new
<a href="">composed selection range</a>
whose [=Range/start=] is <var>start</var>, [=Range/end=] is
<var>end</var> and <var>legacy selection range</var> is
<var>liveRange</var>.
</li>
<li>Set [=this=]'s <a href="">composed selection range</a> to
<var>composedRange</var>.
</li>
</ol>
<p class="note">
While the steps 2-3 and 4 might look identical, <var>liveRange</var> and
<var>composedRange</var> could end up in very different states. The
<var>liveRange</var> follows [=Range/set the start=] and
[=Range/set the end=] algorithms, which will collapse in cross-root
cases. On the other hand, <var>composedRange</var> is set directly
without any collapsing logic.
</p>
<p>
Once a <a>selection</a> is associated with a given <a>range</a>, it
must continue to be associated with that same <a>range</a> until this
Expand Down Expand Up @@ -167,13 +196,14 @@ <h2>
<a>selection</a> must be preserved.
</p>
<p>
Each <a>selection</a>s also have an <dfn>anchor</dfn> and a
Each <a>selection</a> also has an <dfn>anchor</dfn> and a
<dfn>focus</dfn>. If the <a>selection</a>'s <a>range</a> is null, its
<a>anchor</a> and <a>focus</a> are both null. If the <a>selection</a>'s
<a>range</a> is not null and its <a>direction</a> is <a>forwards</a>,
its <a>anchor</a> is the <a>range</a>'s [=range/start=], and its
<a>focus</a> is the [=range/end=]. Otherwise, its <a>focus</a> is the
[=range/start=] and its <a>anchor</a> is the [=range/end=].
its <a>anchor</a> is the <a>range</a>'s legacy selection range's
[=range/start=], and its <a>focus</a> is the [=range/end=]. Otherwise,
its <a>focus</a> is the [=range/start=] and its <a>anchor</a> is the
[=range/end=].
</p>
<p class="note">
<a>anchor</a> and <a>focus</a> of <a>selection</a> need not to be in
Expand Down Expand Up @@ -320,7 +350,7 @@ <h2>
<var>index</var> is not <code>0</code>, or if [=this=] is
<a>empty</a> or either <a>focus</a> or <a>anchor</a> is not in the
[=document tree=]. Otherwise, it must return a reference to (not a
copy of) [=this=]'s <a>range</a>.
copy of) [=this=]'s <a>range</a>'s legacy selection range.
</p>
<p class="note">
Thus subsequent calls of this method returns the same <a>range</a>
Expand All @@ -345,8 +375,8 @@ <h2>
<li>If <code>rangeCount</code> is not <code>0</code>, abort these
steps.
</li>
<li>Set [=this=]'s range to <var>range</var> by a strong reference
(not by making a copy).
<li>Set [=this=]'s range's legacy selection range to
<var>range</var> by a strong reference (not by making a copy).
</li>
</ol>
<p class="note">
Expand Down Expand Up @@ -379,8 +409,8 @@ <h2>
<dd>
<p>
The method must make [=this=] <a>empty</a> by disassociating its
<a>range</a> if [=this=]'s <a>range</a> is <var>range</var>.
Otherwise, it must throw a {{NotFoundError}}.
<a>range</a> if [=this=]'s <a>range</a>'s legacy selection range is
<var>range</var>. Otherwise, it must throw a {{NotFoundError}}.
</p>
</dd>
<dt>
Expand Down Expand Up @@ -476,13 +506,9 @@ <h2>
[=shadow-including inclusive ancestor=] of <var>node</var>, abort
these steps.
</li>
<li>Otherwise, let <var>newRange</var> be a new <a>range</a>.
</li>
<li>[=Range/Set the start=] the [=range/start=] and the
[=range/end=] of <var>newRange</var> to (<var>node</var>,
<var>offset</var>).
</li>
<li>Set [=this=]'s <a>range</a> to <var>newRange</var>.
<li>Otherwise, <a>set the composed selection range</a> with
(<var>node</var>, <var>offset</var>) and
(<var>node</var>, <var>offset</var>).
</li>
</ol>
</dd>
Expand All @@ -500,13 +526,19 @@ <h2>
</dt>
<dd>
<p>
The method must throw {{InvalidStateError}} exception if the
[=this=] is <a>empty</a>. Otherwise, it must create a new
<a>range</a>, [=Range/set the start=] both its [=range/start=] and
[=range/end=] to the [=range/start=] of [=this=]'s <a>range</a>,
and then set [=this=]'s <a>range</a> to the newly-created
<a>range</a>.
The method must follow these steps:
</p>
<ol>
<li>If [=this=] is <a>empty</a>, throw an {{InvalidStateError}}
exception and abort these steps.
</li>
<li>Let <var>bp</var> be the [=Range/start=] of [=this=]'s
<a>range</a>.
</li>
<li><a>Set the composed selection range</a> with <var>bp</var> and
<var>bp</var>.
</li>
</ol>
<p class="note">
For collapseToStart/End, IE9 mutates the existing range, while
Firefox 9.0a2 and Chrome 15 dev replace it with a new one. The spec
Expand All @@ -518,13 +550,19 @@ <h2>
<dfn>collapseToEnd()</dfn> method
</dt>
<dd>
<p>
The method must throw {{InvalidStateError}} exception if the
[=this=] is <a>empty</a>. Otherwise, it must create a new
<a>range</a>, [=Range/set the start=] both its [=range/start=] and
[=range/end=] to the [=range/end=] of [=this=]'s <a>range</a>, and
then set [=this=]'s <a>range</a> to the newly-created <a>range</a>.
</p>
<p>
The method must follow these steps:
</p>
<ol>
<li>If [=this=] is <a>empty</a>, throw an {{InvalidStateError}}
exception and abort these steps.
</li>
<li>Let <var>bp</var> be the [=Range/end=] of [=this=]'s <a>range</a>.
</li>
<li><a>Set the composed selection range</a> with <var>bp</var> and
<var>bp</var>.
</li>
</ol>
</dd>
<dt>
<dfn>extend()</dfn> method
Expand All @@ -546,24 +584,20 @@ <h2>
<var>newFocus</var> be the <a>boundary point</a> (<var>node</var>,
<var>offset</var>).
</li>
<li>Let <var>newRange</var> be a new <a>range</a>.
</li>
<li>If <var>node</var>'s [=tree/root=] is not the same as the
[=this=]'s <a>range</a>'s [=tree/root=], [=Range/set the start=]
<var>newRange</var>'s [=range/start=] and [=range/end=] to
<var>newFocus</var>.
<li>If <var>node</var>'s [=tree/root=] is not the same as
[=this=]'s <a>range</a>'s [=tree/root=],
<a>set the composed selection range</a> with
<var>newFocus</var> and <var>newFocus</var>.
</li>
<li>Otherwise, if <var>oldAnchor</var> is [=boundary point/before=]
or equal to <var>newFocus</var>, [=Range/set the start=]
<var>newRange</var>'s [=range/start=] to <var>oldAnchor</var>, then
set its [=range/end=] to <var>newFocus</var>.
</li>
<li>Otherwise, [=Range/set the start=] <var>newRange</var>'s
[=range/start=] to <var>newFocus</var>, then set its [=range/end=]
to <var>oldAnchor</var>.
or equal to <var>newFocus</var>,
<a>set the composed selection range</a>
with <var>oldAnchor</var> and <var>newFocus</var>.
</li>
<li>Set [=this=]'s <a>range</a> to <var>newRange</var>.
<li>Otherwise, <a>set the composed selection range</a> with
<var>newFocus</var> and <var>oldAnchor</var>.
</li>

<li>If <var>newFocus</var> is [=boundary point/before=]
<var>oldAnchor</var>, set [=this=]'s <a>direction</a> to
<a>backwards</a>. Otherwise, set it to <a>forwards</a>.
Expand Down Expand Up @@ -604,15 +638,13 @@ <h2>
<var>focus</var> be the <a>boundary point</a>
(<var>focusNode</var>, <var>focusOffset</var>).
</li>
<li>Let <var>newRange</var> be a new <a>range</a>.
</li>
<li>If <var>anchor</var> is [=boundary point/before=]
<var>focus</var>, [=Range/set the start=] the <var>newRange</var>'s
[=range/start=] to <var>anchor</var> and its [=range/end=] to <var>
focus</var>. Otherwise, [=Range/set the start=] them to
<var>focus</var> and <var>anchor</var> respectively.
</li>
<li>Set [=this=]'s <a>range</a> to <var>newRange</var>.
<li>If <var>anchorNode</var>'s [=tree/root=] is the same as
<var>focusNode</var>'s [=tree/root=] and <var>anchor</var> is
[=boundary point/before=] <var>focus</var>,
<a>set the composed selection range</a> with
<var>anchor</var> and <var>focus</var>. Otherwise,
<a>set the composed selection range</a> with
<var>focus</var> and <var>anchor</var>.
</li>
<li>If <var>focus</var> is [=boundary point/before=]
<var>anchor</var>, set [=this=]'s <a>direction</a> to
Expand All @@ -634,17 +666,12 @@ <h2>
<li>If <var>node</var>'s [=tree/root=] is not the <a>document</a>
associated with [=this=], abort these steps.
</li>
<li>Let <var>newRange</var> be a new <a>range</a> and
<var>childCount</var> be the number of [=tree/children=] of
<li>Let <var>childCount</var> be the number of [=tree/children=] of
<var>node</var>.
</li>
<li>Set <var>newRange</var>'s [=range/start=] to (<var>node</var>,
<code>0</code>).
</li>
<li>Set <var>newRange</var>'s [=range/end=] to (<var>node</var>,
<var>childCount</var>).
</li>
<li>Set [=this=]'s <a>range</a> to <var>newRange</var>.
<li><a>Set the composed selection range</a> with
(<var>node</var>, <code>0</code>)
and (<var>node</var>, <var>childCount</var>).
</li>
<li>Set [=this=]'s <a>direction</a> to <var>forwards</var>.
</li>
Expand Down