Text overlap on selection

[borsemayur2]

I'm getting following error on text selection. What can be the issue?

[jaywcjlove]

@borsemayur2 Style conflicts.

[sametweb]

highlightEnable={false} solves it. https://github.com/uiwjs/react-md-editor/issues/279#issuecomment-945658072

[jaywcjlove]

@sametweb There is no problem in the Windows Chrome test.

[sametweb]

@sametweb There is no problem in the Windows Chrome test.

I'm testing in Chrome as well. I am also using TailwindCSS, maybe something from there messes it up. I didn't dive deep to understand what clashes. highlightEnable={false} solved it and I left it there.

[jaywcjlove]

@sametweb You can reproduce the problem through codesandbox.io, let me debug and see.

[juspky]

I'm testing in Chrome as well. I am also using TailwindCSS, maybe something from there messes it up. I didn't dive deep to understand what clashes. highlightEnable={false} solved it and I left it there.

Had the same issue in combination with TailwindCSS too. So I can confirm there is a conflict with TailwindCSS and the highlighting, probably it is Tailwinds css reset. highlightEnable={false} helps as a workaround.

[JuliaMerz]

For anyone running into this years later and stubbornly insisting onhighlight, in my case the issue was highlighting on select for textarea—so they were actually lined up until the moment you clicked the text box.

border: 0px !important; resolved it for me.

pre.w-md-editor-text-pre > code,
.w-md-editor-text-input, .w-md-editor-text-input > textarea {
  font-size: 1.8rem !important;
  line-height: 1.618 !important;
  border: 0px !important;
}

[div3791]

adding highlightEnable={false} causes font family ignored and limits lines to 2 only. minHeight maxHeight are ignored in this case. kindly provide any fix

[jaywcjlove]

import React from "react";
import MDEditor from '@uiw/react-md-editor/nohighlight';

const code = `**Hello world!!!**
\`\`\`js
function demo() {}
\`\`\`
`

export default function App() {
  const [value, setValue] = React.useState(code);
  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
      />
      <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
    </div>
  );
}

@div3791 You can directly remove the code highlighting.