Simple text-area that supports mentions and tags. Made with Svelte.
See ./public/main.js
for an example how svelte-mentions is initialized and configured...
// configs, it is a list so multiple configurations (eg. mentions and tags) are supported
configs: [
{
// delimiter that triggers dropdown with suggestion
delimiter: '@',
// list of options
options: [
{
name: 'Ante Novokmet',
email: '[email protected]'
},
{
name: 'Ante Vujevic',
email: '[email protected]'
},
{
name: 'Anto Djapic',
email: '[email protected]'
}
],
// when option is selected from dropdown this value is inserted
encode: (item) => `@<${item.name}>`,
// gets references to mentions from text
decode: (text, options) => {
const re = new RegExp('@<([\\w\\s]+)>', "g");
let m;
const mentions = [];
while (m = re.exec(text)) {
const name = m[1];
const item = options.find(item => item.name === name);
if(item){
mentions.push(item);
}
}
console.log('mentioned: ', mentions);
},
// creates dropdown template
template: (item, query) =>
`<div class="image" style="background:wheat"></div>`+
`<div class="label">`+
` <div class="title">${getMentionHtml(item.name, query)}</div>`+
` <div class="subtitle">${item.email}</div>`+
`</div>`,
// populates drop down after delimiter is entered
filter: (options, query) => {
return options.filter(o => o.name.toLowerCase().startsWith(query.toLowerCase()));
},
// class applied to dropdown li element
itemClass: 'item'
}
]
Install the dependencies...
cd svelte-mentions
npm install
...then start Rollup:
npm run dev
Navigate to localhost:5000. Edit a component file in src
, save it, and reload the page to see your changes.
- Usage with existing text inputs
- Support for contenteditable="true" inputs