如何根据纯字符串值（序列化）设置 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

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

How to set slate value based on the plain string value(serialized)

rich-text-editor

reactjs

slatejs