Cursor changing heights over widget created spans

1

Hi folks, greetings from bristol!

I’ve been going around in circles trying to solve the problem of my caret growing when it moves over spans (both inline-block for adding width) created by widgets – the spacer span and the span that my bullet or number is inside of.

Here’s the html output for a bulleted list item:

<div class="cm-line">
  <span class="list-indent-spacer" contenteditable="false" style="display: inline-block; width: 0em;"></span>
  <img class="cm-widgetBuffer" aria-hidden="true">
  <img class="cm-widgetBuffer" aria-hidden="true">
  <span class="custom-bullet" contenteditable="false">•</span>
  <img class="cm-widgetBuffer" aria-hidden="true">
  whasdfasdf
</div>

Is it theoretically possible to have a consistent caret height and selection background height with a structure like this, or do I need a different approach? Manually changing the cursor height seems convoluted given there will be headings to account for as well.

Many thanks in advance!

2

The cursor height is taken from the client rectangles of the text or widget next to it. Browsers do not expose something like line height to scripts, and it often wouldn’t be appropriate to use the same cursor height for a whole line anyway, so that’s the best we do. As you found, inline blocks don’t tend to actually match the surrounding text in height. You can, in some cases, put a custom coordsAt method on your widgets to work around this, but in your case, where the widget doesn’t contain text that will align with the surrounding text, that may not help a lot.

3

Thanks for the info Marjin. I seem to have found a nice little work around, setting display to inline and using padding to make up the width, and I swapped out the indent space for a tab space. It’s working very nicely.

In read in a thread that intended to make a donation. Is there page on the site for this?

4

This is not a requirement, for one-off questions like this. If you’re using CodeMirror as a component of a system that’s making you money, it is appreciated if you donate a bit to make continued maintenance and support possible. See this page.

5

Okay, that makes sense! With any luck my app will have some success, in which case I’d be glad to make a recurring donation. Many thanks.

6

Hi Marjin, I’m in the throws of building a wysiwyg markdown editor. I have html headers, lists and text styles are in the bag too, but tables are causing me some issues. I’m generating spans and applying a css grid layout at the moment but struggling to get the navigation working properly with arrow keys, particularly when going backwards through content from cell to cell.

I was wondering if you think its worth continuing with this approach approach, or if it would be better to try and generate table elements? Do you know if anyone has had success with these approaches?

Many thanks,
Saul

7

I don’t know. I’ve never tried building a table editor inside CodeMirror. Generating table elements would require you to use separate mini-editors inside the cells, since CodeMirror doesn’t support wrapping text inside the editor like that.

8

That’s interesting!

The editor will be part of a markdown note taking app, which will need to take in streamed AI tokens. Do you think using CodeMirror should suit this kind of application?

Also I appreciate building tables in CodeMirror would take some work and is somewhat experimental. But do you think it’s a plausible way ahead, that may even have some advantages if I were able to get it working? Rather than say, switching to using ProseMirror?

Many thanks,
Saul