how to markup different special chars differently (and also double spaces)

1

Hello everybody,

first off, I am totally new to CodeMirror, and sadly not too well versed in Javascript either (I’m working my way through Eloquent JavaScript though :upside_down_face:). I’m using CodeMirror as part of the Admin plugin for my favourite CMS, Grav. I think the editor is fabulous and it mostly does what I need it to do flawlessly – since most of my websites are in German, the language of hilariously long wordtogethermashings (honestly that would work in German!), I especially appreciate the handy red dot display when pasting a soft hyphen.

Now I would like to have something like this for no-break spaces and double spaces too – I feel that the use of both increases text quality, but this is made difficult by the fact that I cannot tell them apart from regular single spaces or line breaks in the editor. I have tried putting the no-break space in the list of special characters, however it then displays as a red dot and therefore looks like a soft hyphen, which doesn’t help all that much. I am looking for a way to have three different markups for these characters, but there doesn’t seem to be a simple setting for that? Or am I just missing something?

I have also just thought of targeting the no-break spaces with CSS via the attribute selector, like span[aria-label='\ua0'] or the like, and I shall experiment with that. That wouldn’t help me with the double spaces, though. Any way to get these wrapped in markup too?

Thank you for your time and help!
Anna~

2

Hi. I think the best way to do this is to also define a specialCharPlaceholder option. That should hold a function that produces a DOM node (usually a <span>) that represents the character it is given as argument. That way, you can add your own logic to show different markers for different characters.

3

Thank you for you reply! I have since put some more thought into this, and if I understand the specialChars option correctly, it’s only meant for single characters and so will not help me with double spaces. I also have some difficulties defining a function for the specialCharPlaceholder option in my Grav template, so I did a little more research and came across both the .markText and the .addOverlay methods. I must say that I do not fully understand how they work, but it sounds to me like this is about marking up certain bits of text, which is what I want. Am I thinking in the right direction here?

4

You should be able to use those for this. If you just want to add a CSS class, addOverlay could work. If you want to actually replace the characters with a different node, you’ll need to use markText and update your markers (probably only inside the viewport) whenever the document changes.