Cursor Misalignment in React Markdown Editor When Typing Lists

[amal-babu-git]

<MDEditor
	value={value}
	onChange={onChange}
	height={height}
	preview="edit"
	hideToolbar={false}
	data-testid="mdx-visual-editor"
	data-color-mode="light"
		/>

In the React Markdown Editor, when I type list items like 1., 2., 3., or *, the visible text appears below the actual line, and the | cursor shows on a different (incorrect) line. The correct text is rendered, but it's not visible in the right place while typing.

[shadowmouse]

This issue appears to be connected to the code highlighting rendering implementation. I encountered this issue when using the editor in a Vite project using DaisyUI/TailwindCSS. The workaround was disabling code highlighting.

[amal-babu-git]

Vite project using DaisyUI/TailwindCSS. The workaround was disabling code highlighting.

same config: next.js project with daisyUI/TailwindCSS