Draft.js 核心概念解析：SelectionState 选择状态管理-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00535/article/details/148361835

Draft.js 核心概念解析：SelectionState 选择状态管理

draft-js A React framework for building text editors. 项目地址: https://gitcode.com/gh_mirrors/dr/draft-js

什么是 SelectionState

在 Draft.js 富文本编辑框架中，SelectionState 是一个不可变(Immutable)的数据结构，用于精确表示编辑器中的文本选择范围。它继承自 Immutable.js 的 Record 类型，确保了选择状态数据的不可变性，这是 Draft.js 状态管理的核心原则之一。

选择范围的基本概念

锚点(Anchor)与焦点(Focus)

每个选择范围由两个关键点定义：

锚点(Anchor)：用户开始选择的位置
焦点(Focus)：用户结束选择的位置

这与原生 DOM 的 Selection API 概念一致，但 Draft.js 使用自己的模型来表示这些点。

键值(Key)与偏移量(Offset)

在 Draft.js 中，选择点不是用 DOM 节点表示，而是使用：

键值(Key)：对应 ContentBlock 的唯一标识符
偏移量(Offset)：在对应块中的字符偏移位置

这种抽象使得 Draft.js 可以在不依赖 DOM 的情况下精确管理选择状态。

选择方向的两种视角

编辑视角：开始(Start)与结束(End)

当执行内容操作时（如文本截取），我们通常关心的是：

开始位置：选择范围的起始点
结束位置：选择范围的终止点

方向性在此不重要，重要的是确定操作的范围边界。

渲染视角：锚点(Anchor)与焦点(Focus)

当处理选择渲染时，方向变得重要：

正向选择：锚点在焦点之前
反向选择：锚点在焦点之后

SelectionState 同时提供这两种视角的访问方法，开发者可根据场景选择使用。

核心 API 详解

静态方法

`createEmpty(blockKey: string)`

创建一个空的选择状态对象，位于指定块的零偏移位置，且 hasFocus 为 false。

关键实例方法

范围边界获取
- getStartKey() / getEndKey()：获取起止块的键值
- getStartOffset() / getEndOffset()：获取起止偏移量
选择端点获取
- getAnchorKey() / getFocusKey()：获取锚点和焦点的块键值
- getAnchorOffset() / getFocusOffset()：获取锚点和焦点的偏移量
选择状态检测
- getIsBackward()：判断是否为反向选择
- isCollapsed()：判断是否为光标状态（无选择范围）
- hasEdgeWithin()：检测选择边界是否与给定范围重叠
序列化与调试
- serialize()：将选择状态序列化为字符串

重要属性

所有属性都应通过 Immutable.js 的 API 进行修改：

anchorKey / anchorOffset：锚点的块键值和偏移量
focusKey / focusOffset：焦点的块键值和偏移量
isBackward：选择方向标志
hasFocus：编辑器焦点状态

实际应用示例

// 获取当前选择状态
const selection = editorState.getSelection();

// 检查是否为光标状态
if (selection.isCollapsed()) {
  console.log('当前是光标状态，无文本被选中');
}

// 获取选中文本
const content = editorState.getCurrentContent();
const startBlock = content.getBlockForKey(selection.getStartKey());
const selectedText = startBlock.getText().slice(
  selection.getStartOffset(),
  selection.getEndOffset()
);