Mention items not reactive

[yayvery]

The problem I am facing
The Mention extension seems to only use the items array that the plugin was initialized with. I need the items to be reactive because my use case is a list of online users, which is constantly changing. My list of online users is passed as a prop to the component, and the items function is not reacting to changes to that prop.

The solution I would like
The Mention extension's items should be reactive

Alternatives I have considered
Currently the only solution to this I am aware of is remounting the editor every time the list of online users changes, which is obviously not ideal.

I also tried using a function that returns the online users array, but that did not change anything.

[philippkuehn]

Hey, the usage of the mention extension is a bit abstract to provide the same API for plainJS/Vue/React. But there are 3 ways to pass your items:

// 1. get items synchronously

Mention.configure({
  suggestion: {
    items: query => {
      return [
        // ...
      ]
    },
    // ...
  },
})

// 2. get items asynchronously

Mention.configure({
  suggestion: {
    items: async query => {
      await new Promise(() => {
        // API request or something
      })
    },
    // ...
  },
})

// 3. handle items within your Vue/React component and don't use `suggestion.items` at all

Mention.configure({
  suggestion: {
    render: () => {
      let component

      return {
        onStart: props => {
          component = new VueRenderer(MentionList, {
            parent: this,
            // `props` contains `query` which you can use to filter your items within your component
            // you can use provide/inject/Vuex/Redux/whatever to get yor reactive items within this component
            propsData: props,
          })
        }
      }
    },
  },
})