Selection & Range

::: tip 关于

关于这篇笔记是我在学习 Slate 的事件对一些概念的理解及其从其他参考资料、博客中学习到的，主要用来记录当时心得, 如果你也正好感兴趣，那就和我一起学习吧。Here we go

:::

Example Code

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Path Interface

export interface Point {
  path: Path
  offset: number
  [key: string]: unknown
}

范围 (Range)

Range 表示一个包含节点与文本节点的一部分的 文档片段。俗称拖蓝。

export interface Range {
  anchor: Point
  focus: Point
  [key: string]: unknown
}

range-p-2-b-3-range

属性

Range.collapsed 只读

返回一个表示 Range 的起始位置和终止位置是否相同的布尔值。
Range.commonAncestorContainer 只读

返回完整包含 startContainer 和 endContainer 的、最深一级的节点。
Range.endContainer 只读

返回包含 Range 终点的节点。
Range.endOffset 只读

返回一个表示 Range 终点在 endContainer 中的位置的数字。
Range.startContainer 只读

返回包含 Range 开始的节点。
Range.startOffset 只读

返回一个表示 Range 起点在 startContainer 中的位置的数字。

原生方法详见, Slate 方法详见

锚点 (Anchor)

anchor 指向用户开始选择的地方。

选区的锚点是该选区的起点，当您用鼠标框选一个选区的时候，锚点是你的鼠标按下瞬间所记录的那个点。随着用户拖动鼠标，锚点的位置不会随着改变。

焦点 (focus)

focus 指向用户结束选择的地方。

选区的焦点是该选区的终点，当您用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。

选区 (Selection)

Selection 表示当前用户选中的内容或插入符号的当前位置。

Slate@0.50+ 中 Selection 的能力是通过 Range Interface 注入的。

export interface Editor {
  // ...
  selection: Range | null
}

range-example-p-0-1

属性

anchorNode 只读

返回该选区起点所在的节点（Node）。

anchorOffset 只读

返回一个数字，其表示的是选区起点在 anchorNode 中的位置偏移量。

如果 anchorNode 是文本节点，那么返回的就是从该文字节点的第一个字开始，直到被选中的第一个字之间的字数（如果第一个字就被选中，那么偏移量为零）。
如果 anchorNode 是一个元素，那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点)

focusNode 只读

返回该选区终点所在的节点。

focusOffset 只读

返回一个数字，其表示的是选区终点在 focusNode 中的位置偏移量。

如果 focusNode 是文本节点，那么选区末尾未被选中的第一个字，在该文字节点中是第几个字（从0开始计），就返回它。
如果 focusNode 是一个元素，那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。

isCollapsed 只读

返回一个布尔值，用于判断选区的起始点和终点是否在同一个位置。

rangeCount 只读

返回该选区所包含的连续范围的数量。

选择方向

向前选择(forward)

二者重叠时，即选区被折叠，用户视觉上看到的就是一个闪烁的光标。

selection-direction-forward

向后选择(backward)

selection-direction-backward

collapse

Selection.collapse() 方法可以收起当前选区到一个点。文档不会发生改变。如果选区的内容是可编辑的并且焦点落在上面，则光标会在该处闪烁。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <script>
    function run (){
      document.body.contentEditable = true
      var body = document.getElementsByTagName("body")[0];
      /* 将光标收起到文档body的开头 */
      window.getSelection().collapse(body, 0);
    }
  </script>
  </head>
  <body>
    <h1>这是一个段落</h1>
    <p id="demo">这是一个段落</p>
    <button type="button" onclick="run()">聚焦到body的第一个位置</button>
  </body>
</html>

参考资料

HTML 规范: 用于文本控件选择的 API