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:
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):
My simple test code is:
myCodeMirror.on("change", (cm, change) => {
let cur = cm.getCursor()
let token = cm.getTokenAt(cur)
//clear existing bookmark
cm.getAllMarks()?.[0]?.clear()
if(token.string.trim().length > 0 && change.origin != 'complete' && !token.type) {
//execute automatic autocomplete
cm.execCommand("autocomplete")
if(cm.state.completionActive) {
let ac = document.createElement("span")
let acFirstHint = cm.state.completionActive.data.list[0].text.slice(token.string.length)
acFirstHint = /[a-z]/.test(token.string.slice(-1)) ? acFirstHint.toLowerCase() : acFirstHint.toUpperCase()
ac.textContent = acFirstHint
ac.classList.add("ms-hint")
//add bookmark with widget containing first autocomplete item
cm.setBookmark(cur, {widget: ac, insertLeft: false})
cm.setCursor(cur)
}
}
})
Is there a way to get the cursor between the text and bookmark while typing or moving it with arrows?
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)?
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):
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)
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.)
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
contenteditable seemed like more intuitive approach, but as long as textarea works it’s also fine - are there any drawbacks to consider?
