I am using Tagify with a custom AngularJS directive that I built, Tagify mixed input returns the JSON objects of selected tags and text in one single string, for example:
var tagify = new Tagify(myElement, {
mode: 'mix',
pattern: /@/,
whitelist: [{ value: "User Name", code: '$name' }, { value: "Phone Number", code: '$phone' }],
enforceWhitelist: true,
dropdown: {
maxItems: 20,
classname: "tags-look",
enabled: 0,
closeOnSelect: true
}
});
tagify.on('change', () => console.log(tagify.DOM.input.value))
The user input would be:
Hello
User Name ×, the SMS has been sent to your phonePhone Number ×.
This simple example returns:
Hello
[[{ value: "User Name", code: '$name' }]], the SMS has been sent to your phone[[{ value: "Phone Number", code: '$phone' }]]. (and the JSON returned is escaped)
What I am doing later is replacing the tags that the user selected (by typing the @ character and selecting them from the dropdown) with my own dynamic variables.
I was able to get a nice result with tagify.DOM.input.textContent as it rendered the following result:
Hello User Name, the SMS has been sent to your phone Phone Number.
However, since the whitelist is translatable and can be in other languages that I can't find and replace easily later, what I need is the code attribute from the JSON whitelist and not the value. The expected result that I couldn't find a way to reach yet is:
Hello $name, the SMS has been sent to your phone $phone.
Thanks.
You can create your custom transform function, to transform it the way you like, you can do something like this.
function transformer(value) {
return value.replace(/\[\[(.*?)\]\]/g, (arr => {
let json = JSON.parse(arr);
return json[0].map(e => e.code).join(', ');
}))
}
And then you can call it on change (or rather on/or before submit), like this:
tagify.on('change', (e) => transformer(e.detail.value));