react-md-editor: Cursor position is incorrect with markup based editing
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 ?
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 1
- Comments: 24 (9 by maintainers)
Commits related to this issue
- chore: add nextjs example. #541 — committed to uiwjs/react-md-editor by jaywcjlove a year ago
- v3.23.3 chore: add nextjs example. #541 1092180f03e5f20badf4d0d0275b9b9dce714702 — committed to uiwjs/react-md-editor by github-actions[bot] a year ago
Ah so I think I see the issue. It appears it’s because of this line:
https://github.com/uiwjs/react-md-editor/blob/d7ba73b15de9faf8811fa9a3ea0f7c69b80531cb/core/src/components/TextArea/index.less#L30
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?