Hi David, when replacing the selection, I see you are extracting content using range.extractContents() then you wrap it in a span then finally you insert the node range.insertNode(span), I'm curious how you handle this when the selection is going through multiple paragraphs
for example if we have two <p> elements
<p>hello world</p>
<p>coding is awesome</p>
then we select [world coding] part, after extracting contents and insert the span node, it will gives us
as you see, it will take the selected part from each paragraph as a separated p and wrap the fragment in the span, so how you prevent this? or at least you know that "world" belongs to previous paragraph while "coding" belongs to the last one when putting them back
It's a bug or something I have on purpose left aside now 😉.
A couple of weeks / months after I implemented this solution and published the blog post, I also activated back again the usage of document.execCommand in my Web Component. With a property I can toggle between it and this custom implementation.
So for the time being I use execCommand and if sudently it becomes removed from the browsers, I'll toggle to my custom made solution (while loosing undo / redo) and then I'll then check if I improve the solution (fix such bugs as the one you found) or migrate to a new API.
Thank you David for your answer, I thought maybe you've found a workaround for it, so, I think the only thing left for me now is to try to figure it out, with a hackish (maybe?) way, will see ;)
Hi David, when replacing the selection, I see you are extracting content using range.extractContents() then you wrap it in a span then finally you insert the node range.insertNode(span), I'm curious how you handle this when the selection is going through multiple paragraphs
for example if we have two
<p>elementsthen we select [world coding] part, after extracting contents and insert the span node, it will gives us
as you see, it will take the selected part from each paragraph as a separated p and wrap the fragment in the span, so how you prevent this? or at least you know that "world" belongs to previous paragraph while "coding" belongs to the last one when putting them back
Good point 👍
To summarized the answer: you found an issue!
It's a bug or something I have on purpose left aside now 😉.
A couple of weeks / months after I implemented this solution and published the blog post, I also activated back again the usage of
document.execCommandin my Web Component. With a property I can toggle between it and this custom implementation.There is a discussion on Stack Overflow about the deprecation and a user pointed out the replacement might be Input Events Level 2.
So for the time being I use
execCommandand if sudently it becomes removed from the browsers, I'll toggle to my custom made solution (while loosing undo / redo) and then I'll then check if I improve the solution (fix such bugs as the one you found) or migrate to a new API.Thank you David for your answer, I thought maybe you've found a workaround for it, so, I think the only thing left for me now is to try to figure it out, with a hackish (maybe?) way, will see ;)
Keep me posted, sounds super interesting what you are doing!