使用 @5.1.0版本的react-codemirror2 并结合自定义模式怎么实现特定字符串高亮显示

在 `react-codemirror2` v5.1.0 版本中，要实现特定字符串的高亮显示，你可以利用 CodeMirror 提供的 `addLineWidget` 或者 `registerHighlighter` 功能。这里我们将使用 `addLineWidget` 来插入一个自定义的 HTML 元素，其中包含 CSS 样式来实现高亮显示。

首先，你需要创建一个自定义高亮函数，例如 `highlightString`，它会接受字符串和一个 CSS 类名作为参数，并生成带样式的目标字符串：

function highlightString(text, className) {
  const span = document.createElement('span');
  span.classList.add(className);
  return text.replace(/yourSearchTerm/g, `<span>${span.outerHTML}</span>`);
}

这里假设你想匹配的是 "yourSearchTerm"，并将找到的部分替换为带样式的文本。

接下来，在 `useEditor` 的回调中，你可以动态地更新代码镜像的内容并添加高亮：

import React, { useState, useEffect } from 'react';
import { useEditor } from 'react-codemirror2';

const myCustomMode = /* 自定义模式对象 */;

function MyEditor({ initialValue }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [editorValue, setEditorValue] = useState(initialValue);

  const onSearchTermChange = (event) => {
    setSearchTerm(event.target.value);
  };

  useEffect(() => {
    // 更新 CodeMirror 编辑区域的内容，高亮显示搜索词
    const highlightedValue = highlightString(editorValue, 'custom-highlight');
    setEditorValue(highlightedValue);
  }, [editorValue, searchTerm]);

  return (
    <>
      <input type="text" placeholder="搜索词" value={searchTerm} onChange={onSearchTermChange} />
      <textarea ref={useEditor({
        value: editorValue,
        options: {
          mode: myCustomMode,
          // 其他配置...
        },
      })}>
      </textarea>
    </>
  );
}

export default MyEditor;

在这个组件中，当用户输入搜索词时，会触发 `useEffect` 重新渲染，将搜索词高亮到 CodeMirror 编辑区域。

注意，为了实现更复杂的高亮规则（比如正则表达式或语法高亮），你可能需要使用 CodeMirror 的 `matchAt` 或 `tokenize` 等方法配合 `lineWidget`。