Auto Closing Tag not showing
So i'm trying to add the feature on my code editor that helps devs to write easier and faster
so i want to add the feature auto closing tag but it's not showing or sometimes it gets shown like in the photo
So i want when the dev write a nametag for ex: <h1 but after he type the ">" i want the the closing tag to get closed by itself
Here's the code : https://codepen.io/ssamimustafa/pen/XWoExmO
5 Replies
so, i've noticed that you use a keyup event, but for checking the last pressed key, you actually check the last user input, this is the cause of the duplication. The keyup event is also triggered by modifier keys (ctrl, shift,...). So when you lift those up, it will also execute run & since the last character is still '>', it will run the whole code block again.
This can be fixed by defining the event in the
keyUp="run(event)" and then checking if event.key === '>'
The other part was a bit more tricky, but with the use of a couple handy console.log()'s; it's easier to understand.
in the tagToClose, you're actually a digit off:
this:
console.log("substring: ", code.substring(cursorPosition - 2, cursorPosition));
logs"1>"
however, this:
console.log("substring: ", code.substring(cursorPosition - 3, cursorPosition-1));
logs"h1"
const tagToClose = code.substring(cursorPosition - 3, cursorPosition - 1);
the split,reverse & join were actually not necessary at this point in the code.
hope this helps!ayy man @SeppeB thank you so much i really appreciate it
no problemo, happy i could help
bro my head been blowing up, i've stayed whole night trying to figure it out (even lookin at ai trying to solve it) it did
but the point is it kept adding the another closing tag while i was moving the cursor with keyboard
thanks mate ❤️
it was my plesure, it also happened to me, that's why i noticed it so quickly