akryum / vue-mention Goto Github PK

If you type some specific characters such as {@asd} and play around with next @ a bit then you'll notice that tooltip is not being hidden even if the @ sign is already removed:

Expected behavior:
Tooltip must be hidden in such cases.

How can I trigger suggestions with Ctrl + Space instead of '@' and '#'?

Make @close="onCloseMentionMenu" like @OPEN="onOpenMentionMenu"

As I have been reading in getting started, there is the possibility of obtaining data from an api and add it directly? axios ?. Or only can add data to the 'users' list from another method?
this.users = response.data

Thank you for this nice package.
My problem is that I am creating a create post feature like the one of face book and want to bold the mentioned fiends and bold the selected hashtags but I am stacked in there. any Idea ?

In the docs, it states that you can use positioning-disabled to control if it's mobile. However no class get's added to the VMenu item.

Currently using "v-tooltip": "^4.0.0-alpha.1" which is resolving to 4.0.0-beta.17

When I am using vue-mention with content-editable div element, I just want to know how to format the mention.
So I want to apply styling to the mentioning.

The only way I have tried to do that was to add span tag with class attached but the problem is that it was a little hard to manage edit existing mentionings.

Please let me know if you have a plan to support them.

<Mentionable><textarea v-model="text" /></Mentionable>

use element el-input can't work, because el-input in div box

<Mentionable><el-input type="textarea" v-model="text"></el-input></Mentionable>

Hi, What it possible to use bootstrap-vue tool-tip instead?
https://bootstrap-vue.org/docs/directives/tooltip/#tooltips

Edit:
Even installing v-tooltip while using bootstrap-vue, seems to be problematic, this is big problem where as the project depends on bootstrap-vue.
Thanks.

./node_modules/floating-vue/dist/floating-vue.mjs 487:201
Module parse failed: Unexpected token (487:201)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| init() {
| var e;

  this.$_isDisposed && (this.$_isDisposed = !1, this.isMounted = !1, this.$_events = [], this.$_preventShow = !1, this.$_referenceNode = ((e = this.referenceNode) == null ? void 0 : e.call(this)) ?? this.$el, this.$_targetNodes = this.targetNodes().filter((t) => t.nodeType === t.ELEMENT_NODE), this.$_popperNode = this.popperNode(), this.$_innerNode = this.$_popperNode.querySelector(".v-popper__inner"), this.$_arrowNode = this.$_popperNode.querySelector(".v-popper__arrow-container"), this.$_swapTargetAttrs("title", "data-original-title"), this.$_detachPopperNode(), this.triggers.length && this.$_addEventListeners(), this.shown && this.show());

| },
| dispose() {

Hi, I tried to add this on our project using Nuxt3.

"vue-mention": "^2.0.0-alpha.3" and "floating-vue": "^2.0.0-beta.24",

When I select a suggestion from the popover, it becomes @undefined.

here's my code

<script setup>
import { Mentionable } from 'vue-mention'
import 'floating-vue/dist/style.css'

const props = defineProps({
  taskId: {
    type: Number,
    required: true,
  },
  taskMembers: {
    type: Array,
    required: true,
  },
  user: {
    type: Object,
    required: true,
  },
})

const message = ref('')
const members = ref(props.taskMembers)
</script>

<Mentionable :keys="['@']" :items="members" placement="bottom" insert-space>
  <ElementsAppTextarea
    id="comment"
    v-model="message"
    name="comment"
    placeholder="Type @ to mention and notify member."
  />

  <template #no-result>
    <div class="p-1 text-sm">No result</div>
  </template>

  <template #item="{ item }">
    <span class="text-sm"> @{{ item.name }} </span>
  </template>
</Mentionable>

I saw that the text

Enter text and then type @ or # to trigger the mention

The # not trigger the mention because at example is used

 <Mentionable
    :keys="['@']"
    :items="items"
    offset="6"
  >

and not :keys="['@','#']"

Hello, could You please update vue-mention so as to make it available in Typescript? That would help a lot:)

test.vue
<Mentionable :keys="['@']" :items="items" offset="6"> <SimpleEditor ref="editor"/> </Mentionable>

simpleEditor.vue
<div><textarea/></div>

I check the source code, it only get the textarea in default, so it can't work.

I don't know if this is the expected behavior, but when I type @ to search for users for example and start typing everything works as expected, but if I remove everything until @ it let one character in the search string so we can't go back to the initial state where all users are available.

The problem happens in the demo in the official website demo

package.json

{
  "v-tooltip": "^3.0.0-beta.1",
  "vue-mention": "^1.0.0",
}

On yarn serve

 WAIT  Compiling...                                                  6:28:24 PM

98% after emitting CopyPlugin

 WARNING  Compiled with 1 warning                                    6:28:24 PM

 warning  in ./node_modules/vue-mention/dist/vue-mention.esm.js

"export 'VPopover' was not found in 'v-tooltip'


  App running at:
  - Local:   http://localhost:8080 
  - Network: http://192.168.1.65:8080

Browser console

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <VPopover> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Mentionable>
       <CommentField>
         <VCard>
           <Publication> at src/views/publication/Publication.vue
             <VCard>
               <VMain>
                 <VApp>
                   <App> at src/App.vue
                     <Root>

Mentionable component will cause error when user type special character like @\ or (@Akyryum) on mentioning.

I think below line may cause error

const reg = new RegExp(this.searchText, 'i')

https://github.com/Akryum/vue-mention/blob/master/packages/vue-mention/src/Mentionable.vue#L73

The this.searchText is user input text, so it can be wrong regexp.
You can check this error on sample application too (Turn on devtools before trying).

https://vue-mention.netlify.app/

Is this rare?

I think it's not rare bug.
The most common case is (@user), like

Hiroki (@hirokiky) reported this bug.

Recommendation

My recommendation is to avoid RegExp.
User inputs won't be regexp basically. So we can simply use .includes and .toLowerCase.

function includesIncase(part, target) {
    return target.toLowerCase().includes(part.toLowerCase())
}

There is not need to show "No results" to the user. If there are no results the popup does not need to display. Is there a way to close the menu when there are no results?

I tried this and it doesn't seem to work

<template>
    <Mentionable
    :keys="['#']"
    :items="tags"
    offset="6"
    >
    <v-textarea
      auto-grow
      rows="1"
      row-height="15"
      v-model="text" 
      placeholder="What's the next task?"
    ></v-textarea>
    </Mentionable>
</template>

It only works with textarea but not v-textarea
So am i doing something wrong or there's no support for vuetify?

Hi, i need help.

How can i see selected mention or tag items or in other words how can i select item and see of value ?

When I search by one word like @Someone package working fine and its great! But when it comes to search @Someone else, there is issues that not allow me to do that. Can someone tell me is there ability to do that? I investigate repo but did not fond anything useful. Or If I can participate on that solution - will be great.

Is there a way to open it manually? I would like to create a menu before, and from that to start the mention

how use vue-mention without npm package

Hi
In Electron the mentions list is placed at the left top corner while in Edge and in Firefox it's placed where it should be, above the caret.

The source code is the same for both web and electron builds.

Electron:

Edge:

Firefox:

Hi, i need help.

1. after selection when input @ tooltip doesn't show. need space + @
2. I personally feel that textarea should always keep the focus

When i type '@', i see only 8 item, even i realy world scenario i have 36 item, but only see 8. how to fix this? Can we enable scroll?

<template>
  <div id="app">
    <Mentionable :keys="['@']" :items="items" insert-space>
      <textarea rows="6" class="input" v-model="text" />
    </Mentionable>

    {{ text }}
  </div>
</template>

<script>
import { Mentionable } from "vue-mention";

export default {
  name: "App",
  components: {
    Mentionable,
  },
  data() {
    return {
      text: "",
      items: [
        {
          value: "1st item",
          label: "1st item",
        },
        {
          value: "2nd item",
          label: "2nd item",
        },
        {
          value: "3rd item",
          label: "3rd item",
        },
        {
          value: "4th item",
          label: "4th item",
        },
        {
          value: "5th item",
          label: "5th item",
        },
        {
          value: "6th item",
          label: "6th item",
        },
        {
          value: "7th item",
          label: "7th item",
        },
        {
          value: "8th item",
          label: "8th item",
        },
        {
          value: "9th item",
          label: "9th item",
        },
        {
          value: "10th item",
          label: "10th item",
        },
        {
          value: "11ith item",
          label: "11th item",
        },
      ],
    };
  },
};
</script>

<style>
body {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 32px;
}

.input {
  width: 100%;
}

.mention-item {
  padding: 4px 10px;
  border-radius: 4px;
}

.mention-selected {
  background: rgb(192, 250, 153);
}
</style>

Hello I have been google a lot to integrate this with Vuetify. But very much bad luck that I am still failed to manage.

Hello, I wanted to use this with tiny-mce package for vue but it does not detecs pressed keys. Is there any other package like tinemce that is intregrated?

Is there a way to change the color of mentioned users inside textarea starting from @

Just a quick suggestion that might help others, as it took some time to figure out..

<template #item-@="{ item }"> causes eslint error in a vue 3 + ts project

<template #[item-@]="{ item }"> works

Nice library! 🔥

One QoL feature I'd love to see in there is adding the mention when pushing the TAB key. 😋

I'm getting the error above upon implementing everything as per the documentation (I'm following the async instructions). Just in case I missed a step, I actually implemented the exact code (below the demo) in a completely new .vue file, and I'm still getting the same error. Any help would be appreciated!

Hello, could You please update vue-mention so as to make it available in Vue3? That would help a lot:)

Hi,

I'm using vue-mention to implement a textarea for inputting a mathematical expression. When the user inputs an existing variable name, the tooltip should pop up with autocomplete-suggestions just as it happens in every IDE for coding.
Currently, I only got it working with typing the @ sign when wanting to select a variable.

But obviously it would be more convenient if the mentionable tooltip would trigger while typing simple characters (i.e. trigger on the first input character, then filter on the following ones), instead of having to use the @ sign. I tried with using the whole alphabet as keys for the Mentionable:

alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');

and

<Mentionable
      :keys="alphabet"
      :items="listItems"
      offset="5"
      omitKey
      insertSpace
    >
    ...

But that breaks the filtering, and the autocompletion doesn't work properly either.

Any suggestions on how to implement this? It would be nice to have some functionality that supports this use case.

Simply nothing happens when I type @. This is inside a vue component with Vuetify and other libraries present.

<Mentionable
    :keys="['@']"
    :items="items"
>
    <textarea
        v-model="currentlyEditingCol.formula"
    />
</Mentionable>
...
items: [
    {
        value: 'example',
        label: 'Example'
    },
    {
        value: 'stuff',
        label: 'Stuff'
    },
    {
        value: 'list',
        label: 'List'
    }
],

hello @Akryum, Thank you for the useful plugin.

I have an issue with the wrapper size of popper-list. I dont fight the way to change it's size.
I want to set it equal than the textarea. And the possition is below the textarea

Can you help me ?

When I select an user for exemple, this displays in input-textarea the value but it is not very clean because it contains a uuid. Is it possible to display something other than the value or at least in the uuid?

The 3 steps :

When I select an user (OK) :

When an user is selected (NOK) :

When I submit (OK) :

Thanks in advance :)

Great plugin! I am having issues making it work on nuxt. I have tried implementing it as a plugin too but it doesn't work. I have also installed v-tooltip. Nothing shows up when I type in the @ symbol.

plugins/vue-mention.js

 import Vue from 'vue'
 import { Mentionable } from 'vue-mention'
 
 Vue.component('Mentionable', Mentionable)

nuxt.config.js

plugins: [
    { src: '~plugins/vue-mention', ssr: false }
  ]

component.vue

<template>
  <div>
    <Mentionable :keys="['@']" :items="items" offset="6">
      <textarea v-model="text" />
    </Mentionable>
  </div>
</template>
<script>
import { Mentionable } from 'vue-mention'
export default {
  components: {
    Mentionable
  },
  data() {
    return {
      text: '',
      items: [
        {
          value: 'cat',
          label: 'Mr Cat'
        },
        {
          value: 'dog',
          label: 'Mr Dog'
        }
      ]
    }
  }
}
</script>

In all of my implementations of vue-mention, the popup is positioned partially off screen on mobile. It appears like popper is calculating the left position outside of the boundaries of the viewport.

Quick example browser / codesandbox

However, when I look at the demo on vue-mention.netlify.app, the position appears to be calculated correctly.

I doesn't appear to be just margin on the input. If I remove the margin from the netlify demo, the popup still renders well within the view.

Thoughts on this?

I've taken a look to the code and it doesn't seem to be a way to get notified when a mention is being removed.

We're already being notified when a mention is getting applied, so why don't do the same for this? I think it would be super useful if anyone needs to manage mentions.

I guess I'll be able to manage them on my own in the meantime, but it would be a nice to have if the Mentionable component already provides support for that.

First of all, thank you. Was searching for a good library for a long time.

I've created a basic sandbox and I'm unable to get the popper-list within the viewport.
The Popper is always out of viewport and I'm unable to find relevant document on positioning of the popper.
I tried all possible placement properties of Vpopper.

It would be great if a real working codepen or codesandbox will be made available along with relevant documentation.

Please have a look at the sandbox and let me know how to correct it.

https://codesandbox.io/s/vue-mention-sandbox-z5g17?file=/src/App.vue

Also, it'd be great if you could give an example with Vuetify v-textarea.

If suggestion not displayed on modal window then just add z-index to popover class

 .popover{
        z-index: 999999999!important;

    }

This is an amazing library. Thank You, authors.
It would be great if you can also create a Code Sandbox Demo.

Is it possible to get the mentioned items that are part of the textarea or do you need to manually parse the value and find the items in there.

I didn't find it in the documentation. I could PR if you are busy and are willing to merge it after.