Quilljs mention snippet

We have already covered post regarding Quilljs RichText Editor, configuration and advanced use as well. Now time to get some more feature. This time add some 🥤 to it, the 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>
	);
	}
	}

view raw React-quilljs-mention hosted with ❤ by GitHub

Here is a live example and try yourself.

• Quill without toolbar
• Quilljs mention snippet
• Create Quill RichText editor using react-quill
• React-quill double instance fix