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

1

a

Online demo: fervent-goldberg-vcjgcg - CodeSandbox

Follow this link(ProseMirror lint example) write a plugin

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

    decos.push(
      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？

2

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).

2 Likes
3

Okay. Thanks