CM5: No cursor before bookmark


Im adding a bookmark with widget just after the text (for an inline autocomplete), but as soon as the widget appears, i don’t see the cursor anymore. I can still type, and I can see the blinking cursor element in DevTools, but it is not displayed:
insertLeft_false (2)

I can move the cursor around, but as soon as it should go after the last letter of the text (and beginning of bookmark), it disappears - though i’m still able to get it, if I click that position with a mouse.

I also tried creating the bookmark with insertLeft option, but then the cursor appears after the bookmark (and adds text as expected before the bookmark):
insertLeft_true (1)

My simple test code is:

myCodeMirror.on("change", (cm, change) => {
    let cur = cm.getCursor()
    let token = cm.getTokenAt(cur)
    //clear existing bookmark
    if(token.string.trim().length > 0 && change.origin != 'complete' && !token.type) {
        //execute automatic autocomplete
        if(cm.state.completionActive) {
            let ac = document.createElement("span")
            let acFirstHint =[0].text.slice(token.string.length)
            acFirstHint = /[a-z]/.test(token.string.slice(-1)) ? acFirstHint.toLowerCase() : acFirstHint.toUpperCase()
            ac.textContent = acFirstHint
            //add bookmark with widget containing first autocomplete item
            cm.setBookmark(cur, {widget: ac, insertLeft: false})


Is there a way to get the cursor between the text and bookmark while typing or moving it with arrows?

Thank You

I guess the widget span is styled to be positioned absolutely below the line it is on? I suppose the editor is using the bookmark’s position to compute the cursor position next to it, and getting confused. Have you considered implementing this as a tooltip that overlays the editor instead (via cursorCoords)?

Thank You very much for an answer.

Actually widget span has no styling (other than opacity, and some bg color) - it’s a standard inline element. I suppose if i use overlayed tooltip, it will not (without extra tweaking) be able to “push” subsequent content, that’t why i was looking for bookmark/textmark solution (which - except of missing cursor - works fine):

screen-capture (2)

best regards

Ah, the tooltip visible in the screencast isn’t the widget you’re talking about? That just adds inline text after the cursor?

Doing something like your example code doesn’t have the effect of hiding the cursor for me.

Yes, it’s only the inline text which adds the first item from the standard autocomplete item after the cursor (smth like what DevTools provides in console). Did you try with the exact snippet i provided above? Did you use CM5 or 6 for the test? (for my usecase i also disabled completeSingle feature)

Thx again for your time!

Seeing how the snippet relies on external CSS classes, I obviously couldn’t set it up exactly the way you have it. Maybe create a stand-alone sandbox or even just an HTML file?

(And yes, I am trying with CM5, since none of the interfaces used exist in CM6.)

Sure, i tried with the sandbox but had some issue with authorization, so i put all (except cm libs) in one html file (attached).
index.html (3.2 KB)

Ah, right inputStyle: "contenteditable" is what was missing in my test. That is unfortunately going to open you up to all kinds of browser bugs, one of which is hiding the cursor when next to an uneditable element. This is unlikely to improve in version 5. If you’re looking for a more robust contenteditable-based editor, consider trying CodeMirror 6.

Indeed! with textarea it works like a charm :slight_smile:
contenteditable seemed like more intuitive approach, but as long as textarea works it’s also fine - are there any drawbacks to consider?

Thx a lot again, truly appreciate

Textarea-based input support touch selection on mobile platforms rather poorly. On desktop, it should be superior.