划词高亮实现 （更新中）

划词高亮

数据结构

HighlightRange

class HighlightRange {
   
    start: DomNode; // Range 开始的信息
    end: DomNode; // Range 结束的信息
    text: string; // 文本内容
    id: string;  // 唯一标识
}

DomNode

export interface DomNode {
   
    $node: Node;  // 节点
    offset: number;  // 节点中的偏移量
}

选区高亮

获取Range对象

• 获取当前选取的DOM Range对象

export const getDomRange = (): Range => {
   
    const selection = window.getSelection();
    // 选区的起始点和终点是否在同一个位置
    if (selection.isCollapsed) {
   
        console.debug('no text selected');
        return null;
    }
    // 选取的range集合。但是规范要求选择的内容始终（仅）具有一个范围。
    return selection.getRangeAt(0);
};

生成HighlightRange 对象

• Range对象 + id -> HighlightRange 对象

    static fromSelection(idHook: Hook) {
   
        const range = getDomRange(); //当前选取的DOM Range对象
        if (!range) {
   
            return null;
        }

        const start: DomNode = {
   
            $node: range.startContainer,
            offset: range.startOffset
        };
        const end: DomNode = {
   
            $node: range