reactjs - 如何根据纯字符串值设置 slate 值（序列化）

Question

我正在 React 上使用 slate js 构建富文本编辑器，我需要从内容中解析 URL（例如：www.website.me 应该转换为 www.website.me）。

我已经实现了从纯文本解析 URL 的功能，然后将内容包装在正确的标签内。

但是，问题是我需要在用户在编辑器上键入时（在 onChange 事件上）立即显示解析的值。这是我所拥有的：

onChange = ({ value }) => {
    const { isFocused } = value.selection
    if (isFocused !== this.state.isFocused) {
      this.setState({ isFocused })
    }

    const string = this.state.html.serialize(value)
    const linkifiedString = linkifyHtml(string) || ''
    if (value.document !== this.state.value.document) {
      const { onChange } = this.props
      onChange && onChange(linkifiedString)
    }

    // this won't work and will call the onChange method infinitely
    this.setState({ value: this.state.html.deserialize(linkifiedString) })
}

谢谢你的帮助。

Answer 1

最后，我找到了解决方案，您必须创建自己的 slate 插件或使用此插件：https ://github.com/enzoferey/slate-instant-replace