如何在quill.js编辑器中添加行内注释？

// 创建编辑器实例
var quill = new Quill('#editor', {
  theme: 'snow'
});

// 监听编辑器内容改变事件
quill.on('text-change', function(delta, oldDelta, source) {
  if (source === 'user') {
    // 用户输入时执行以下操作
    var selection = quill.getSelection();
    if (selection) {
      // 获取光标位置
      var index = selection.index;
      var length = selection.length;

      // 插入标记
      quill.insertText(index, '[注释]', 'annotation');

      // 设置标记样式
      quill.formatText(index, '[注释]'.length, 'annotation', true);

      // 获取标记位置和尺寸信息
      var bounds = quill.getBounds(index, '[注释]'.length);

      // 创建注释框元素
      var annotationBox = document.createElement('div');
      annotationBox.className = 'annotation-box';
      annotationBox.style.top = bounds.top + 'px';
      annotationBox.style.left = bounds.left + 'px';
      annotationBox.style.width = bounds.width + 'px';
      annotationBox.style.height = bounds.height + 'px';

      // 将注释框元素添加到编辑器的父容器中
      document.getElementById('editor-container').appendChild(annotationBox);

      // 监听注释框元素的事件
      annotationBox.addEventListener('click', function() {
        // 用户点击注释框时执行以下操作
        // 编辑或删除注释内容
      });
    }
  }
});