Tagify: Adding tag on button click

[Oigen43]

I want to add tag in my cursorcaret position after clicking a button in mix mode, i don't understand how to get caret index, because we use html + text in form, and I didn't found any working solution in SO for this case, can you pls help?

[yairEO]

I need to add support for this, because if you click on anything, you will look the current caret position and won't be able to inject a tag there. You need save last caret place in tagify, on blur event. I will try working on this now.

[yairEO]

See jsbin demo

[Oigen43]

@yairEO thank you, but i have one more question, can i implement it using React?

[namnguyen211]

@yairEO thank you, but i have one more question, can i implement it using React?

yes. this is my implement using React

const settings = {
mode: "mix",
whitelist: [],
callbacks: {
blur: (e) => {
console.log(e);
},
},
};

const MixedModeTagify = () => {
const tagifyRef = useRef();
const onChange = useCallback((e) => {
e.persist();
console.log("CHANGED:", e.target.value);
}, []);
const [content, setContent] = useState(
This is a textarea which mixes text with [[{"value":"tags"}]] [[{"value":"123"}]] [[{"value":"456"}]]
);

return (
    <div>
        <Tags tagifyRef={tagifyRef} mode="textarea" settings={settings} className="myTags" onChange={onChange}>
            {content}
        </Tags>
        <div
            onClick={() => {
                console.log(tagifyRef.current);
                var tagElm = tagifyRef.current.createTagElem({ value: "my tag" });
                tagifyRef.current.injectAtCaret(tagElm);
            }}
        >
            Add Tag
        </div>
    </div>
);

};

export default MixedModeTagify;

[pedroR]

See jsbin demo

Hi @yairEO I think I found an issue in this demo: If you add multiple tags without iterate with the textarea you get tags inside tags

May be it's the caret postion that it is still inside the tag, idk.

I noticed this issue because I am facing a similar problem

[yairEO]

@pedroR - Thank you for pointing it out to me, I've fixed the demo

var input = document.querySelector('textarea')
var tagify = new Tagify(input, {
  mode: "mix"
})

document.querySelector("button").addEventListener('click', ()=> {
    var tagElm = tagify.createTagElem({ value:"my tag" })
    tagify.injectAtCaret(tagElm)
    var elm = tagify.insertAfterTag(tagElm)   //  <- adds space after the tag
    tagify.placeCaretAfterNode(elm)           //  <- places the caret after the space
})