Quill Span Blot Форматирование

Question

const  Inline = Quill.import('blots/inline');

export class Track extends Inline {

  static blotName = 'track';
  static tagName = 'span';
  static formats(node) {
    return {
       color: node.getAttribute('color'),
      cid: node.getAttribute('cid'),
      uid: node.getAttribute('uid'),
      name:  node.getAttribute('name')
    };
  }

  static create({name, uid, cid, color}) {
    const node = super.create();
    node.setAttribute('name', name);
    node.setAttribute('uid', uid);
    node.setAttribute('cid', cid);
    node.style.backgroundColor = color;
    return node;
  }
Quill.register(Track);

Я создал пользовательский блот для отслеживания изменений для quill, но каждый раз, когда появляется новый пользователь, все атрибуты, например, cid, uid, name, остаются неизменными, кроме цвета фона, который наследуется от предыдущего блота span. Я не вижу предложений нового пользователя в другом цвете, несмотря на то, что у него другой блот. Как мне выполнить встроенное моделирование для разных пользователей в моем специальном бланке? Так я добавляю авторов в свой код

 author() {
     this.trackChanges = !this.trackChanges;
     const range = this.editor.quillEditor.getSelection();
     if (range) {
        if (this.trackChanges) {
          this.editor.quillEditor.format('track', {name: this.name, uid: this.id, cid: this.chance.guid(), color: this.color});
        }
    }
  }

Answer 1

Пожалуйста, проверьте, если следующий пример решает вашу проблему:

const Inline = Quill.import('blots/inline');
class Track extends Inline {
    static create(value) {
        if (!value) return super.crate(false);

        let node = super.create(value);
        node.setAttribute('data-name', value.name);
        node.setAttribute('data-uid', value.uid);
        node.setAttribute('data-cid', value.cid);

        if(value.group === 1) {
            node.classList.add('highlight-1');
        }
        else if (value.group === 2) {
            node.classList.add('highlight-2');
        }
        // else if...

        return node;
    }
    // Overriding this method, in this particular case,
    // is what causes the Delta returned as content by 
    // Quill to have the desired information.
    static formats(domNode) {
        if (domNode.getAttribute('data-cid') &&
            domNode.getAttribute('data-uid') &&
            domNode.getAttribute('data-name')) {
            return { 
                'name': domNode.getAttribute('data-name') , 
                'cid': domNode.getAttribute('data-cid') ,
                'uid': domNode.getAttribute('data-uid')
            };
        }
        else {
            return super.formats(domNode);
        }
    }

    formats() {
        // Returns the formats list this class (this format).
        let formats = super.formats();

        // Inline has the domNode reference, which in this 
        // case represents the SPAN, result defined in tagName.
        formats['track'] = Track.formats(this.domNode);

        // In the code above, it is as if we are adding this new format.
        return formats;
    }
}
Track.tagName = 'SPAN';
Track.blotName = 'track';
Quill.register('formats/track', Track);

var toolbarOptions = {
    container: [['bold' , 'italic' , 'underline' , 'strike'] , ['track' , 'clean']],
    handlers: {
      'track': () => {
        var range = quill.getSelection();
        var valueExample = {
          name: 'Foo',
          uid: 10,
          cid: 20,
          group: 1
        };
        
        quill.formatText(range , 'track' , valueExample);
      }
    }
};

var quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: toolbarOptions
    }
});

window.quill = quill;

.highlight-1 {
  background: green;
}

.highlight-2 {
  background: orange;
}

<!-- Quill Stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Quill lib -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<h3>Instructions:</h3>
<ol>
<li>Select a portion of text.</li>
<li>Click the invisible button.</li>
<li>Change the group value to 2.</li>
<li>Click the invisible button again.</li>
<li>Don't forget to check the generated HTML structure, as well as the editor's Delta.</li>
</ol>
<!-- Create the editor container -->
<div id="editor">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, tellus id commodo consectetur, urna tellus varius enim, nec hendrerit turpis diam eu erat. Ut eleifend enim et accumsan fringilla.</p>
</div>

Также не забудьте взглянуть на этот адрес . Вы найдете много полезной информации.