After setting it to ‘display: Flex', the cursor is mispositioned


Online demo: fervent-goldberg-vcjgcg - CodeSandbox

Follow this link(ProseMirror lint example) write a plugin

 let decos = [];
  doc.descendants((node, pos) => {
    if ( !== "heading") {
    const text = node.textContent;
    const from = pos + 1;
    const to = from + node.content.size;
    console.log(from, to);

      Decoration.inline(from, to, {
        id: "heading-" + decodeURIComponent(text)
  return DecorationSet.create(doc, decos);

when set it display:flex,an error has occurred,the cursor isn’t in the correct position. remove display:flex, it is normal.Excuse me, how to solve this situation?

Don’t set nodes with inline content to display: flex. It’ll cause a bunch of issues (breaking line wrapping, for example) and browsers won’t handle it well (as the mispositioned cursor here shows).


Okay. Thanks