杭州做档口批发的网站人员优化是什么意思
位置是指在使用Slate编辑器中进行插入、删除或执行其它操作时引用文档中特定位置的方式。有几种不同类型的位置接口,每种接口都用于不同的用例。
Path路径
路径是引用位置的最低级别的方法。每个路径都是一个简单的数字数组,它通过文档树下每个祖先节点中的索引来引用文档树中的一个节点。
type Path = number[]
例如,在文档中:
const editor = {children: [{type: 'paragraph',children: [{text: 'A line of text!',},],},],
}
叶子文本节点的路径为: [0, 0]
。因为本文中只一个根节点,它又是根节点中的第一个节点,第一个节点中的第一个子节点。索引号都是从0
开始的。
编辑器本身的路径为 []
。 例如,若要选择编辑器的全部内容,请调用Transforms.select(editor, [])
Point插入点
这些路径的表述表具体,它包含了与特定文本节点的偏移量
。它的接口标准为:
interface Point {path: Pathoffset: number
}
针对于同一个文档,如果我们想引用第一个起点位置,我们就可以把光标放在它下面:
const start = {path: [0, 0],offset: 0,
}
或如果我们引用句子的末尾:
const end = {path: [0, 0],offset: 15,
}
这就表示光标在文本节点的第15个字符位置处。
Range范围
范围就是选中的内容的范围,在表述上有起点和终点,起点可能在终点前面也可以在终点后面,因为我们可能会正向选择,或反向选择。其接口标准为:
interface Range {anchor: Pointfocus: Point
}
由一个锚点和一个焦点组成。都是Point
类型。锚点是用户开始选择的位置,焦点是用户结束选择的位置。
注意,一个选择区域的锚点和焦点始终引用文档中的叶级文本节点,而从不引用元素。
Selection选择
当我们需要引用两点之间的内容范围时,Slate的API中的许多地方都使用了范围,不过,最常见的一种是用户当前的 “选择”。
选择是一个特殊的范围,是顶级编辑器的一个属性。例如,假设某人当前选择了整个句子:
const editor = {selection: {anchor: { path: [0, 0], offset: 0 },focus: { path: [0, 0], offset: 15 },},children: [{type: 'paragraph',children: [{text: 'A line of text!',},],},],
}
又假如,要查找包含所有当前选择的最低块,请执行以下操作:
function getCommonBlock(editor) {const range = Editor.unhangRange(editor, editor.selection, { voids: true })let [common, path] = SlateNode.common(editor,range.anchor.path,range.focus.path)if (Editor.isBlock(editor, common) || Editor.isEditor(common)) {return [common, path]} else {return Editor.above(editor, {at: path,match: n => Editor.isBlock(editor, n) || Editor.isEditor(n),})}
}