Cursor not visible

[RM.Dhananjeyan]

Hi Marijn, I have been working on prosemirror for quite over a year now.
I'm trying to implement checklists in prosemirror, the node definiton of check lists is below:

const checkList = {
    parseDOM: [
        {
            tag: "ul",
            getAttrs: function(el) {
                return el.getAttribute('rte-check-list') === "" ? true: false
            }
        }
    ],
    content: "checkListItem+",
    group: "block",
    toDOM: function() {
        return ["ul", { "rte-check-list": "" }, 0]
    }
}

const checkListItem = {
    parseDOM: [
        {
            tag: "li",
            getAttrs: function(el) {
                if(el.getAttribute('rte-check-list-item') === "") {
                    if(el.getAttribute('rte-check-list-item-checked') === "") {
                        return { isChecked: true }
                    } else {
                        return { isChecked: false }
                    }
                }
                return false
            }
        }
    ],
    content: "paragraph block*",
    defining: true,
    attrs: {
        isChecked: { default: false }
    },
    toDOM: function(node) {
        if(node.attrs.isChecked) {
            return ["li", { "rte-check-list-item": "", "rte-check-list-item-checked" : ""},
                ["span", { class: "rte-check-box" },
                    ['http://www.w3.org/2000/svg svg', { class: "ui-rte-icon rte-check-box-svg" },
                        ["http://www.w3.org/2000/svg use", {"http://www.w3.org/1999/xlink xlink:href" : "#rte-icon-checked-box", class: "rte-check-box-use" }]
                    ]
                ],
                [ "div", { class: 'rte-check-list-item-content' }, 0 ]
            ]
        } else {
            return ["li", { "rte-check-list-item": "", "rte-check-list-item-unchecked": "" },
                ["span", { class: "rte-check-box" },
                    ['http://www.w3.org/2000/svg svg', { class: "ui-rte-icon rte-check-box-svg" },
                        ["http://www.w3.org/2000/svg use", {"http://www.w3.org/1999/xlink xlink:href" : "#rte-icon-unchecked-box", class: "rte-check-box-use" }]
                    ]
                ],
                [ "div", { class: 'rte-check-list-item-content' }, 0 ]
            ]
        }
        
    }
}

If I try to insert a checkList node containing an empty checkListItem node, the cursor is placed at the starting of checkListItem node by prosemirror itself but the problem is, the cursor isn't visible at all, similarly whenever an empty checkListItem node is inserted, the cursor is not visible, but the cursor becomes visible once we start to type characters into it.

This bug occurs only in chrome and safari.
In firefox it works as explected, there's no bug there.
I'm using the latest prosemirror-view package - version number 1.32.4
I'm working on macOS.

I have attached it's DOM representation in the below image:

I have attached the video reference below.

Screen.Recording.2023-12-03.at.6.38.54.PM.mov

[Marijn Haverbeke]

As you noticed, that's a Webkit/Chromium bug. The cursor drawing isn't done by CodeMirror. You can sometimes work around such bugs by adding dummy whitespace text after your uneditable content (you probably want to set the <span> in your list item structure to contenteditable=false so users cannot put their cursor in there).