如何借助Tribute.js在Editor.js中实现@提及功能？

我正在开发一款应用，使用Editor.js实现文本编辑器，但在实现@提及功能时遇到了困难。

用到的工具：Tribute.js、Editor.js

自定义提及工具类代码 #

import Tribute from "tributejs";

class CustomMentionTool {
  static get isInline() {
    return true; // 这是一个行内工具
  }

  constructor({ data, api }) {
    this.api = api;
    this.data = {
      value: data.value || "",
    };
    this.wrapper = null;
    this.tribute = new Tribute({
      // 配置Tribute.js选项（比如数据源、选择模板等）
      values: [
        { key: "John Doe", value: "john_doe", name: "John Doe" },
        { key: "Jane Smith", value: "jane_smith", name: "Jane Smith" },
        // 根据需要添加更多用户或数据
      ],
      selectTemplate: function (item) {
        return `@${item.original.name}`;
      },
      requireLeadingSpace: false,
    });
  }

  render() {
    this.wrapper = document.createElement("span");
    this.wrapper.contentEditable = false;
    this.wrapper.textContent = this.data.value;
    this.wrapper.classList.add("mention");

    // 将Tribute.js绑定到容器元素
    this.tribute.attach(this.wrapper);

    return this.wrapper;
  }

  save() {
    return {
      value: this.wrapper.textContent,
    };
  }
}

export default CustomMentionTool;

Editor实例配置代码 #

const editor = new Editor({
...,
tools: {
   mention: { class: CustomMentionTool },
 }
})

内容的提问来源于stack exchange，提问作者Mukesh M