Quilljs Mention - React component

React-quilljs-mention

import React, { Component } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import 'quill-mention/dist/quill.mention.css';
import 'quill-mention';
const atValues = [
  { id: 1, value: 'Fredrik Sundqvist' },
  { id: 2, value: 'Patrik Sjölin' },
];
export default class Editor extends Component {
  constructor(props) {
    super(props);
  }

  tagModeules = {
    toolbar: false,
    mention: {
      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
      mentionDenotationChars: ['@', '#'],
      source: function (searchTerm, renderItem, mentionChar) {
        let values;
        if (mentionChar === '@' || mentionChar === '#') {
          values = atValues;
        }
        if (searchTerm.length === 0) {
          renderItem(values, searchTerm);
        } else {
          const matches = [];
          for (let i = 0; i < values.length; i++)
            if (
              ~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())
            )
              matches.push(values[i]);
          renderItem(matches, searchTerm);
        }
      },
    },
  };

  handleProcedureContentChange = (content, delta, source, editor) => {
    let has_attribues = delta.ops[1].attributes || "";
    console.log(has_attribues);
    const cursorPosition = e.quill.getSelection().index;
    this.quill.insertText(cursorPosition, "★");
    this.quill.setSelection(cursorPosition + 1);
  };
  render() {
    return (
      <div class="flex flex-row">
        <div>
          <label className="" for="tags">
            Post Tags
          </label>

          <ReactQuill
            id="tags"
            style={{ height: 150 }}
            placeholder="#tags here"
            modules={this.tagModeules}
          >
            <div className="my-editing-area" />
          </ReactQuill>
        </div>
      </div>
    );
  }
}