How to add color to the variable while typing @ using quill mention

[so-amuk]

Select Topic Area

Question

Body

I am trying to add color attribute to the inserted item while typing @

Current configuration is:

quillEditorModules = {
    toolbar: {
      container: [
        ['undo', 'redo', 'bold', 'italic', 'underline', 'strike', { color: [] }, 'link'],
      ],
      handlers: {
        link(value: string) {
        ......
        ...
      },
    },
    history: { delay: 400, maxStack: 2000 },
    keyboard: {
      bindings: {
        tab: {
          key: 9,
          handler: function (_range, _context) {
            return true;
          },
        },
      },
    },
    mention: {
      dataAttributes: ['id', 'value', 'denotationChar', 'link', 'target', 'disabled', 'label', 'color'], // Add 'color' to the list of data attributes
      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
      mentionListClass: 'ql-mention-list mat-elevation-z8',
      mentionDenotationChars: ['@'],
      showDenotationChar: false,
      spaceAfterInsert: false,
      onSelect: (item, insertItem) => {
        console.log("Selected item:", item);
    // Apply blue color to the selected variable
    const variableDelta = { insert: item.value, attributes: { color: 'blue' } };
    console.log("Variable delta:", variableDelta);
    // Insert the variable with blue color
    insertItem(variableDelta);
    },
      source: (searchTerm, renderList, mentionChar) => {
        let values;
        if (mentionChar === '@') {
          values = this.atValues;
        }
        if (searchTerm.length === 0) {
          renderList(values, searchTerm);
        } else {
          const matches = [];
          for (const value of values) {
            if (~value.value.toLowerCase().indexOf(searchTerm.toLowerCase())) {
              matches.push(value);
            }
          }
          renderList(matches, searchTerm);
        }
      },
    },
  };

I am trying to achieve it using following code:

onSelect: (item, insertItem) => {
        console.log("Selected item:", item);
    // Apply blue color to the selected variable
    const variableDelta = { insert: item.value, attributes: { color: 'blue' } };
    console.log("Variable delta:", variableDelta);
    // Insert the variable with blue color
    insertItem(variableDelta);
    },
    

Can you please guide how to add color while typing "@" on quill editor. Thanks