如何实现Slate编辑器内存在指定关键词时关键词列表对应词变色

1. 提取Slate编辑器纯文本内容 #

Slate返回的内容为嵌套节点数组，无法直接用于关键词匹配，可通过Slate内置工具方法提取全部文本为纯字符串：

import { Node } from 'slate'

// 入参为Slate的value节点数组
const getEditorPlainText = (nodes) => {
  return nodes.map(node => Node.string(node)).join('')
}

注：如果需要保留换行符做匹配，可将拼接符改为\n

2. 同步更新关键词匹配状态 #

在编辑器内容变更的回调中，实时匹配预定义关键词是否出现在编辑器内容中，存储为Set结构方便后续快速查询：

import { useState, useCallback } from 'react'

// 你的预定义关键词数组
const PREDEFINED_KEYWORDS = ['产品', '运营', '技术', '设计']

const App = () => {
  const [editorValue, setEditorValue] = useState([])
  const [usedKeywords, setUsedKeywords] = useState(new Set())

  const handleEditorChange = useCallback((newVal) => {
    setEditorValue(newVal)
    const plainText = getEditorPlainText(newVal)
    const matchedSet = new Set()
    // 遍历所有预定义关键词匹配是否已出现
    PREDEFINED_KEYWORDS.forEach(keyword => {
      // 如需全词匹配、大小写不敏感匹配，可修改此处判断逻辑
      if (plainText.includes(keyword)) {
        matchedSet.add(keyword)
      }
    })
    setUsedKeywords(matchedSet)
  }, [])

  // 其余逻辑省略
}

3. 动态绑定关键词样式 #

渲染待使用关键词列表时，根据匹配状态动态设置字体颜色即可：

<div className="keyword-area">
  {PREDEFINED_KEYWORDS.map(keyword => (
    <div 
      key={keyword}
      style={{
        color: usedKeywords.has(keyword) ? '#1677ff' : '#333'
      }}
    >
      {keyword}
    </div>
  ))}
</div>

内容的提问来源于stack exchange，提问作者Avinash Toppo