Quill -提及不在Quill JS编辑器内容中插入提示值(使用React Quill)

import React, { Component } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';

class QuillEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mentionValue: '',
    };
  }

  componentDidMount() {
    const { Quill } = this.props;
    const { mentionValue } = this.state;

    // 添加mention模块到Quill编辑器的配置中
    const mention = {
      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
      mentionDenotationChars: ["@"],
      source: (searchTerm, renderList) => {
        // 在这里获取提示值的数据，可以从后端API获取
        const values = [
          { id: 1, value: 'John Doe' },
          { id: 2, value: 'Jane Smith' },
          { id: 3, value: 'Mike Johnson' },
        ];

        if (searchTerm.length === 0) {
          renderList(values, searchTerm);
        } else {
          const matches = [];
          for (let i = 0; i < values.length; i++) {
            if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) {
              matches.push(values[i]);
            }
          }
          renderList(matches, searchTerm);
        }
      },
      renderItem: (item) => {
        return `<div>${item.value}</div>`;
      },
      onSelect: (item) => {
        // 在选择提示值时，插入相应的标记到编辑器中
        const editor = this.quillRef.getEditor();
        const range = editor.getSelection();
        editor.insertText(range.index, `@${item.value}`);
        editor.setSelection(range.index + item.value.length + 1);
      },
    };

    Quill.register('modules/mention', mention);
  }

  handleQuillChange = (value) => {
    this.setState({ mentionValue: value });
  }

  render() {
    const { mentionValue } = this.state;

    return (
      <ReactQuill
        ref={(el) => { this.quillRef = el; }}
        value={mentionValue}
        onChange={this.handleQuillChange}
        modules={{
          mention: true,
          toolbar: [
            [{ 'header': [1, 2, false] }],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ['link', 'image'],
            ['clean'],
          ],
        }}
      />
    );
  }
}

export default QuillEditor;