Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding tag on button click #524

Closed
Oigen43 opened this issue May 25, 2020 · 7 comments
Closed

Adding tag on button click #524

Oigen43 opened this issue May 25, 2020 · 7 comments

Comments

@Oigen43
Copy link
Contributor

Oigen43 commented May 25, 2020

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
Copy link
Owner

yairEO commented May 30, 2020

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
Copy link
Owner

yairEO commented May 30, 2020

See jsbin demo

@Oigen43
Copy link
Contributor Author

Oigen43 commented Jun 2, 2020

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

@namnguyen211
Copy link

@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
Copy link

pedroR commented Sep 23, 2020

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

image

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
Copy link
Owner

yairEO commented Sep 25, 2020

@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
})

@piwel
Copy link

piwel commented May 19, 2022

Hi @yairEO .

I needed to two fixes for it to work properly.

  1. Initialize the selection in case the button is clicked before the tag area
  2. Inject an empty node before the tagElement for the caret to be correctly set after the ending space when the field is empty when using a placeholder.
// Initialize selection if necessary
if (!tagify.state.selection) {
    $(tagify.DOM.input).focus();
    tagify.setStateSelection();
}

tagify.injectAtCaret(''); // insert empty text node to fix trouble of missing ending space when empty

const tagData = { value:"my tag" };
const newTag = tagify.createTagElem(tagData);
tagify.injectAtCaret(newTag);

const elm = tagify.insertAfterTag(newTag)  // adds space after the tag
tagify.placeCaretAfterNode(elm);           // places the caret after the space

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants