Incorrect cursor position

[Shekhar-Dangi]

I am using react-md-editor in my nextjs application but while typing, my cursor position is not correct.

https://github.com/uiwjs/react-md-editor/assets/76780858/6331c96c-1c01-4dc9-a949-608714b229cc

Here is my code :

"use client";
import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import dynamic from "next/dynamic";
import { useState } from "react";

const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
function Editor() {
  const [value, setValue] = useState("**Hello world!!!**");
  return (
    <div data-color-mode="dark">
      <MDEditor
        autoFocus="on"
        key={1}
        tabSize={4}
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

export default Editor;

[jaywcjlove]

@Shekhar-Dangi Example： https://github.com/uiwjs/react-md-editor/tree/master/example/nextjs

Most likely it’s a style conflict, unable to reproduce your error

[jvanderberg]

We had the same problem and found we had a global stylesheet that had:

* {
  font-family: ...
}

Moving this to a body style appears to have fixed things and allows the MDEditor component to use its own internal fonts.

So I'd look for someplace where you overriding fonts or font attributes at a global level.

[psycho-baller]

@jvanderberg's answer sparked an idea which was basically to do this when overriding the font:

body .w-md-editor-text-pre > code,
body .w-md-editor-text-input {
    ...
}

I prefixed the classnames with the body tag. After hours of confusion, that solves my issue

[hjyang369]

use this code. highlightEnable={false} and They had the same issues as you. https://github.com/uiwjs/react-md-editor/issues/276