Shifted text in edit mode about react-md-editor

[ArthurKnoep]

Thanks @StephenGrider, @MatheusPires99 and @jaywcjlove for your answers.

Indeed it was a style conflict, the responsible in my case was bulma (damn it bulma).

If someone passes by here with the same problem, here's my fix:

.w-md-editor .title {
    line-height: unset !important;
    font-size: unset !important;
    font-weight: unset !important;
}

[MatheusPires99]

@ArthurKnoep @brutomfr I had the same problem as well, so I stated to look at the CSS properties that is applied and I found a line-height: 18px; on the element with class.w-md-editor-text. So a set the line-height of this element to unset, and that resolved my problem.

.w-md-editor-text {
  line-height: unset;
}

[ArthurKnoep]

Hey, sorry for the late reply.

Actually this was a big induced by a conflicting style caused by bulma. This is not something that is desirable because it breaks the lines alignment.

[brutomfr]

I have the same problem.
I did not find a solution

[jaywcjlove]

There is no instance, it can only be judged that it may be a style conflict

[StephenGrider]

The editor uses Prism to apply syntax highlighting, see here: https://github.com/uiwjs/react-md-editor/blob/master/src/components/TextArea/index.tsx#L56

Prism itself applies some classnames to elements to get the syntax highlighting effect. Unfortunately, those classnames are extremely common and generic - stuff like title, token, etc.

Here's the crux: if you have any CSS that affects those classNames it'll interfere with Prism's default styling! So @ArthurKnoep, you probably have a .title css rule somewhere that is increasing the font size of that # hello text.

There's no option in this lib to disable the highlighting stuff, but you can sabotage prism directly to keep it from doing any highlighting:

import Prism from 'prismjs';

Prism.languages.markdown = {};

[rafaelguedes]

@ArthurKnoep, how do you manage to add that syntax highlighting?

I mean: how do you manage to type "# hello" and apply the heading style in the "hello" word?