React富文本编辑器开发（七）接口与辅助函数

接口

我们知道Slate使用纯 JSON 数据对象，只要这些数据符合接口标准就行。也就是说每一个节点都有一个接口标准与之对应。比如文本节点：

interface Text {
  text: string
}

在实例这些接口数据的同时我们也可以增加额外的属性，这根据我们的实际设计需求而定。增加的属性不会妨碍Slate的解析。比如，Element节点的接口标准是下面这样的：

interface Element {
  children: Node[]
}

针对这样一个宽松的接口，我们施展的空间就很大了。比如 ：

const paragraph = {
  type: 'paragraph',
  children: [...],
}

const link = {
  type: 'link',
  url: 'https://example.com',
  children: [...]
}

上面的代码中，我们增加了 type属性，在 link中还增加了url属性，根据link的数据定义，我们就能够很容易的渲染成下面的元素：

<a href={element.url}>{element.children}</a>

辅助工具

Slate 中提供了很多的辅助函数，这大大方便了我们的使用。比如下面，在使用节点的过程中我们可能需要用到：

import { Node } from 'slate'

// 获取元素节点内的字符内容
const string = Node.string(element)

// 在一个根节点中获取指定位置的节点
const descendant = Node.get(value, path)

在使用范围时可能会用到下面的工具：

import { Range } from 'slate'

// 按顺序获取选择范围的起点和终点
const [start, end] = Range.edges(range)

// 检查一个选择范围是否被折叠。即一个光杆插入点，没有选择内容，起点和终点在一起。
if (Range.isCollapsed(range)) {
  // ...
}

所以，在正式开发之前先了解一下相关的辅助工具是很有必要的。

自定义辅助工具

除了使用Slate提供的这辅助工具外，我们当然也可以自定义一些工具，比如下面这个判断一个元素是否是图像元素的工具：

const isImageElement = element => {
  return element.type === 'image' && typeof element.url === 'string'
}

然后把它们绑定的系统命名空间中去，以后使用就相当的方便了

import { Element } from 'slate'

export const MyElement = {
  ...Element,
  isImageElement,
  isParagraphElement,
  isQuoteElement,
}