VueRichTextEditorWithMentions.vue

<template lang="pug">
  quill-editor(v-model="dynamicValue",:options="editorSettings",@change="textChange")
</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  import Quill from 'quill'
  import { quillEditor } from 'vue-quill-editor'
  import Mention from 'quill-mention'

  export default {
    props: {
      value: { type: String, default: null }
    },

    watch: {
      value(newVal) {
        this.dynamicValue = newVal
      }
    },

    data() {
      return {
        dynamicValue: this.value,
        allMentionUsers: this.$store.state.users.map(u => ({ id: u.id, value: u.name })),

        editorSettings: {
          modules: {
            mention: {
              allowedChars: /^[A-Za-z\d\s@_]*$/,
              mentionDenotationChars: ["@"],
              source: (searchTerm, renderList) => {
                if (!(this.allMentionUsers && this.allMentionUsers.length > 0))
                  return

                if (searchTerm.length === 0)
                  return renderList(this.allMentionUsers, searchTerm)

                const matchingValues = this.allMentionUsers.filter(user => {
                  return (
                    user.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    user.value.toLowerCase().includes(searchTerm.toLowerCase())
                  )
                })
                renderList(matchingValues, searchTerm)
              },

              onSelect: (item, insertItem) => {
                this.$emit("mentionReplaced", item)
                insertItem(item)
              }
            }
          }
        }
      }
    },

    methods: {
      textChange() {
        this.$emit('input', this.dynamicValue)
      }
    },

    components: {
      quillEditor
    }
  }
</script>