diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md
index 26573e02..fcceacb0 100644
--- a/2-ui/99-ui-misc/02-selection-range/article.md
+++ b/2-ui/99-ui-misc/02-selection-range/article.md
@@ -445,8 +445,8 @@ Methods:
The last argument, `selectionMode`, determines how the selection will be set after the text has been replaced. The possible values are:
- `"select"` -- the newly inserted text will be selected.
- - `"start"` -- the selection range collapses just before the inserted text.
- - `"end"` -- the selection range collapses just after the inserted text.
+ - `"start"` -- the selection range collapses just before the inserted text (the cursor will be immediately before it).
+ - `"end"` -- the selection range collapses just after the inserted text (the cursor will be right after it).
- `"preserve"` -- attempts to preserve the selection. This is the default.
Now let's see these methods in action.
@@ -504,7 +504,7 @@ Focus on me, the cursor will be at position 10.
### Example: modifying selection
-To modify the content of the selection, we can use `input.setRangeText`. Of course, we can read `selectionStart/End` and can just change `value`, but `setRangeText` is more powerful.
+To modify the content of the selection, we can use `input.setRangeText`. Of course, we can read `selectionStart/End` and, with the knowledge of the selection, change the corresponding substring of `value`, but `setRangeText` is more powerful and often more convenient.
That's a somewhat complex method. In its simplest one-argument form it replaces the user selected range and removes the selection.
@@ -551,7 +551,7 @@ If nothing is selected, or we use equal `start` and `end` in `setRangeText`, the
We can also insert something "at the cursor" using `setRangeText`.
-Here's an button that inserts `"HELLO"` at the cursor position and puts the cursor immediately after it. If the selection is not empty, then it gets replaced (we can do detect in by comparing `selectionStart=selectionEnd` and do something else instead):
+Here's an button that inserts `"HELLO"` at the cursor position and puts the cursor immediately after it. If the selection is not empty, then it gets replaced (we can do detect in by comparing `selectionStart!=selectionEnd` and do something else instead):
```html run autorun
@@ -598,9 +598,7 @@ To make something unselectable, there are three ways:
This prevents starting the selection on `elem`, but the visitor may start it at another element, then extend to `elem`.
- That's convenient when there's another event handler on the same action that triggers the select. So we disable the selection to avoid conflict.
-
- And `elem` contents still be copied.
+ That's convenient when there's another event handler on the same action that triggers the select (e.g. `mousedown`). So we disable the selection to avoid conflict, still allowing `elem` contents to be copied.
3. We can also clear the selection post-factum after it happens with `document.getSelection().empty()`. That's rarely used, as this causes unwanted blinking as the selection appears-disappears.
@@ -626,8 +624,10 @@ The most used recipes are probably:
```js run
let selection = document.getSelection();
+ let cloned = /* element to clone the selected nodes to */;
+
// then apply Range methods to selection.getRangeAt(0)
- // or to all ranges if supporting multi-select
+ // or, like here, to all ranges to support multi-select
for (let i = 0; i < selection; i++) {
cloned.append(selection.getRangeAt(i).cloneContents());
}
@@ -639,11 +639,9 @@ The most used recipes are probably:
// directly:
selection.setBaseAndExtent(...from...to...);
- // or create range and:
+ // or we can create a range and:
selection.removeAllRanges();
selection.addRange(range);
```
-Another important thing to know about selection: the cursor position in editable elements, like `