如何在slate js中为特定关键字着色

import { createEditor } from 'slate';
import { Slate, Editable, withReact } from 'slate-react';

const editor = withReact(createEditor());

const App = () => {
  const [value, setValue] = useState([
    {
      type: 'paragraph',
      children: [{ text: 'This is a sample text.' }],
    },
  ]);

  return (
    <Slate editor={editor} value={value} onChange={setValue}>
      <Editable />
    </Slate>
  );
};

const renderLeaf = useCallback(({ attributes, children, leaf }) => {
  if (leaf.bold) {
    return <strong {...attributes}>{children}</strong>;
  }
  return <span {...attributes}>{children}</span>;
}, []);

const App = () => {
  // ...

  return (
    <Slate editor={editor} value={value} onChange={setValue}>
      <Editable renderLeaf={renderLeaf} />
    </Slate>
  );
};

const App = () => {
  // ...

  const handleTextChange = (newValue) => {
    const updatedValue = newValue.map((node) => {
      if (node.type === 'paragraph') {
        node.children = node.children.map((child) => {
          if (child.text.includes('特定关键字')) {
            return { ...child, bold: true };
          }
          return child;
        });
      }
      return node;
    });

    setValue(updatedValue);
  };

  return (
    <Slate editor={editor} value={value} onChange={handleTextChange}>
      <Editable renderLeaf={renderLeaf} />
    </Slate>
  );
};