Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams 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);

I have created a custom span blot for track changes for quill, but everytime there is a new user all the attributes i.e cid, uid, name remain consistent except the background color which gets inherited from the previous span blot. I cannot see suggestions of the new user in a different color, inspite of being a different span blot . How do I perform inline styling for different users in my custom made span blot ?. This is how I add authors in my code

 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});
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>
<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>
<!-- 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>
                Amazing work at your repository , however I realised adding class styling works but inline styling creates a conflict which should not happen , adding classes for styling spans is the best method
– Alec Aldrine Lakra
                Jan 23, 2020 at 6:13
static formats(domNode)
This function must also return 'class': domNode.getAttribute('class'). This is needed if you want to store the Delta in a storage like a database like I do. Because the formats function is creating those attributes in a span. You will miss 'class' if you don't do that. With creation it will be there but not with storing to database or so.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.