markText() is giving a class to multiple elements when it shouldn't

Here is the problem in isolation (with a delay between each .markText() so it’s easier to see it happening): https://jsfiddle.net/rLqL1dej/5/
(Edit: simplified version linked below: https://jsfiddle.net/z5rs3gky/)

Somehow .markText() is putting a class on all previously similarly marked elements, even though I specifically removed the class from each element

I’m using .markText() to give elements a class. It’s a temporary class that I use to do something, then I remove the class and mark the next relevant range. For some reason, if there’s not a ‘\n’ between the elements, .markText() gives the class to all the previously marked elements on the same line. Is that expected behavior?

“Why,” you ask, “are you shuffling elements around for no reason? Why not just replacedWith with the same text content?” Thanks for asking. I do actually have a reason - I’m working with Firepad’s rich text editor and I’m trying to preserve the styles that have been applied to the text. Using replacedWith gets rid of those styles.

If there were some way to get the element of the marked text maybe I could just append that to a new list item and use replacedWith to put everything down where it should go. I’ve been searching for that for a while, though, and haven’t been finding it.

I’m not sure what any of this does to my undo history and I have to figure out how to neutralize the styling of the anchor element, but I can only put on one sock at a time.

If there’s a better way to do this, let me know. I’ve tried a couple different ways, and this has been the most promising so far. Even if there is another way, though, this behavior may be worth looking into.

Can you reduce that example further? I’m kind of getting lost in incidental complexity that doesn’t seem to have anything to do with actual CodeMirror-related method calls when I read through it.

Thanks for taking a look. I had some trouble with jsfiddle, but here’s simplified the result:
https://jsfiddle.net/z5rs3gky/

I took searchcursor.js out of the equation and simplified the rest. If that’s not enough, let me know what else I can do.

This version removes all the shuffling to position the link element, but now you’ll have to look at the console to see the effects. It’s also a bit more compact and has fewer comments:
https://jsfiddle.net/z5rs3gky/2/

After a bit of experimenting, it looks to me like a line repeatedly refreshes itself any time it changes. It keeps bringing back what it remembers and therefore getting rid of anything I added myself, which makes sense. The last changes I make on the line are kept because the line doesn’t update itself again.

Is there anything I can do to get around that behavior? Is there any way I can turn text into a link and keep the text’s previous marks/styles? Alternatively, is there a way to choose the tag or, even better, the surrounding element to use for a mark instead of replacing everything?

Experiment 1 with visible changes: https://jsfiddle.net/z5rs3gky/4/
Experiment 2 with visible changes: https://jsfiddle.net/z5rs3gky/5/
Also try typing in any line with a link. The link will disappear.

Edit: I’ve noticed one mark can contain another, so there is a way to move a mark from where it is and into another node. Could that help with this issue?

Reading the “Text-marking methods” section of the manual (
https://codemirror.net/doc/manual.html), it seems like what you want is to
avoid manipulating CodeMirror’s DOM directly, and, instead, use the
replacedWith and clearOnEnter properties of markText.

Read above to see more detail about why replacedWith won’t work, but the long and short of it is that I want to retain the styles of the text that I’m marking. I’m not sure what exactly clearOnEnter would do for me here.

I’m also trying to insert an anchor tag instead of a span, so there’s that issue as well.

I’m currently trying to find a way to not manipulate the DOM directly, but I’m having trouble finding an internal way that will work.

Yeah, don’t touch the editor’s DOM. That’s absolutely not supported.

Yeah, that makes sense. How do I do this with CodeMirror?

You can’t. At least, putting anchor tags in the text isn’t possible. I didn’t quite get what else you were trying to do. Adding classes should be straightforward with markText.