Cursor position is incorrect with markup based editing

[Udayendu]

When trying to write the page with markup, cursor position is not mapped correctly:

As you can see above, After a h4 type heading when I am trying to start writing the heading title, the cursor is still two positions back. But the actually it should look something like #### |. For normal text its not an issue but specially with heading type content, its causing the visualisation issue.

how this can be fixed ?

[jaywcjlove]

@Udayendu I cannot reproduce your error.

[Udayendu]

In my case every time its reproducible. I am not using any CSS for the textarea. Here is the code and the CSS its detecting:

<MDEditor
            height={600}
            value={content}
            onChange={handleContent}
            preview="edit"
          />

And font is 'Roboto, sans-serif'. So not sure whats impacting it.

[jaywcjlove]

@Udayendu Can you provide an example where the error can be reproduced?

like this: https://codesandbox.io/embed/markdown-editor-for-react-izdd6?fontsize=14&hidenavigation=1&theme=dark

[Udayendu]

@jaywcjlove Seems like its a white space issue:

Take a look into the above image. The actual text is visible after selecting but the one we can see in the MarkDown editor is without white-space. That's why its not able to handle the cursor properly and positioned two spaces back.

I tried editing the style property, but still no improvement:

<MDEditor
      height={600}
      value={content}
      onChange={handleContent}
      preview="live"
      style={{ whiteSpace: "pre-wrap" }}
    />

Seems like the style properly have no impact in the MDEditor.

[matt2112]

I have the same problem. In this screenshot the cursor is actually at the end of the line, but clearly doesn't look that way:

Tried upgrading to latest versions (@uiw/react-md-editor: 3.23.3, @uiw/react-markdown-preview: 4.1.13) but didn't help.

And here's how I'm using it (with Next 13.4.1):

import '@uiw/react-markdown-preview/markdown.css'
import '@uiw/react-md-editor/markdown-editor.css'

export const DisplayRow = styled.div`
  display: flex;
  align-items: flex-start;
  padding: ${({ theme }) => theme.spacing(2)} 0;
`

export const DisplayLabel = styled(EmphasisedLabel)`
  color: ${({ theme }) => theme.colors.textEmphasis};
`

export const DisplayInputContainer = styled.div`
  flex: 1;
`

const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false })

type MarkdownFieldProps = {
  label: string
  value: string | undefined
  setValue: (val: string) => void
}

const MarkdownField = ({ label, value, setValue }: MarkdownFieldProps) => (
  <DisplayRow>
    <DisplayLabel>{label}:</DisplayLabel>
    <DisplayInputContainer>
      <MDEditor
        aria-label={label}
        value={value}
        onChange={(val) => setValue(val || '')}
        height={120}
        data-color-mode="light"
        className={label}
      />
    </DisplayInputContainer>
  </DisplayRow>
)

Hope that's helpful. Great library though, appreciate the work that goes into it!

[jaywcjlove]

@Udayendu I can't help you, I guess there might be a style conflict.

I added an example that doesn't reproduce your problem. 1092180

[matt2112]

Hmm so yeah I converted the above code to a Codesandbox and you're right @jaywcjlove that there's no issue 🤔 https://codesandbox.io/p/sandbox/exciting-pine-72x535

@Udayendu I don't suppose you're also using Ant Design? I'm now wondering if there's some kind of style conflict with that somewhere. EDIT: Never mind, not that. See below.

[matt2112]

Ah so I think I see the issue. It appears it's because of this line:

react-md-editor/core/src/components/TextArea/index.less

Line 30 in d7ba73b

font-family: var(--md-editor-font-family) !important;

i.e. the span has the font family that we use elsewhere in the app (in our case that's Gilroy, Arial, Helvetica, sans-serif), but the textarea has "Helvetica Neue", Helvetica, Arial, sans-serif. Therefore, the cursor gets slightly out of sync. If I override the font-family on the textarea then it all lines up nicely.

@Udayendu give that a try and let me know if it solves it for you too.

@jaywcjlove is there a good reason that line needs to have the !important?

[jaywcjlove]

@matt2112 Avoid non-overlapping problems caused by font styles.

[matt2112]

@jaywcjlove Sorry unsure if that's a suggestion or an explanation. I mean why does the library override the application's global font family with the !important flag? Surely in most cases developers will want to use the same font as they have everywhere else no? But could well be something I'm missing.

[jaywcjlove]

Yes, it will not easily cause style conflicts when users use it.

react-md-editor/core/src/components/TextArea/index.less

Line 54 in d7ba73b

font-family: var(--md-editor-font-family) !important;

.w-md-editor-text-input,
.w-md-editor-text-pre > code,
.w-md-editor-text-pre 
{
  font-family: Arial,sans-serif !important;
}

or

.w-md-editor {
  --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

[Udayendu]

Ah so I think I see the issue. It appears it's because of this line:

react-md-editor/core/src/components/TextArea/index.less

Line 30 in d7ba73b

font-family: var(--md-editor-font-family) !important;

i.e. the span has the font family that we use elsewhere in the app (in our case that's Gilroy, Arial, Helvetica, sans-serif), but the textarea has "Helvetica Neue", Helvetica, Arial, sans-serif. Therefore, the cursor gets slightly out of sync. If I override the font-family on the textarea then it all lines up nicely.

@Udayendu give that a try and let me know if it solves it for you too.

@jaywcjlove is there a good reason that line needs to have the !important?

@matt2112 I tried applying this fix but for some reason its not able to resolve my issue. Are you able to fix your issue ?

[jaywcjlove]

https://codesandbox.io/embed/markdown-editor-for-react-https-github-com-uiwjs-react-md-editor-issues-541-46nflr?fontsize=14&hidenavigation=1&theme=dark

I'm not sure what the problem is.

[Udayendu]

@jaywcjlove I tried to apply it using the CSS file and I can still see the issue. As you can see in the below image the font family is getting detected but its not applying the changes.

I tried to check the outcome on multiple browser like firefox, chrome and edge. But still the behaviour is save. And even on both Ubuntu and MacOS too. Not sure why its not getting applied correctly.

I create a test project and use the editor and its working there. But not in the main project.

[Udayendu]

And this time I applied directly in the JS file using style component the way you did, but still not working:

I know its not the editor thats breaking but something is there might be in my code which is not working as expected.

[jaywcjlove]

@Udayendu
I can't help you if you can't provide a reproducible example.

Is there a possibility that this font is not available locally?

[Udayendu]

@Udayendu I can't help you if you can't provide a reproducible example.

As mentioned earlier, I tried to reproduce it with some dummy code but its not reproducible.

Is there a possibility that this font is not available locally?

I have "Helvetica, Arial" fonts available in the development server which is Ubuntu 22.04 LTS server vm installed with GUI. And on the client systems, all the 4 fonts are installed.

[Udayendu]

@jaywcjlove btw FYI, this issue is happening when I am using any kind of markup parameters. For the normal texts, there is no issue atall.

[Udayendu]

I just did some more testing and seems like apart from "Helvetica Neue" font, all other fonts have the issue and its not installed in the server thats hosting this application. You can see some dummy code https://codesandbox.io/s/white-dew-z786fl

But usually these fonts required at the client side, is not it ?

[jaywcjlove]

@Udayendu https://codesandbox.io/embed/serene-platform-j4ywzp?fontsize=14&hidenavigation=1&theme=dark

- .w-md-editor-text-input {
+ .w-md-editor {
  /* --md-editor-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; */
  --md-editor-font-family: Arial;
}

[Udayendu]

Thanks @jaywcjlove
After making this change, I can see that majority of the font issues are gone now.

But when I am trying to make the title in any place of the page or insert the image, I can see this issue.
Here is what I can see in the console as well.

Do you think something is trying to override some properly related to font ??

[jaywcjlove]

@Udayendu I can't help you if you give me an example where the error can be reproduced.

[Udayendu]

@jaywcjlove Its difficult to reproduce out side of my project. The issue is that somewhere my code is causing a conflict with the required font for this editor. And may be thats causing the issue. Is there any way to override the default font and use only what we have specified for this editor. I know we have already tried with !important but some how thats not helping much. And if I am starting a line with markup, its breaking the design.

So I am really not sure how can I give you a reproducer.

[Udayendu]

Closing this issue as I am unable to reproduce it outside of my project.