Quill Span Blot Formatting

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);

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});
        }
    }
  }

score 3 · Accepted Answer · answered Jan 22 '20 at 18:56

Please, check if the following example solves your problem:

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>

Also don't forget to take a look at this address. You will find lots of useful information.

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 '20 at 06:13

score 0 · Answer 2 · answered Mar 21 '23 at 15:42

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.

Quill Span Blot Formatting

2 Answers2