Recommendations of feature rich markdown editor with preview using react-markdown

[ZehuaZhang]

I really like the demo page, it's very responsive

I've searched for feature enhanced version of react-markdown, done google and npm, which sadly doesn't allow me to search popular packages which have dependency on react-markdown, so I want to ask it here, since the community is experienced.

Do you guys have some recommendations of github or npm packages for feature rich markdown editor with preview using react-mardown, which would have at least

• a toolbar, and
• a scroll in sync with preview and editor,
  • or tabs to switch between preview and editor

[Murderlon]

If I were to create a WYSIWYG markdown editor in a React app I would go for Lexical. As far as I know it's one of the best and most extensible editors.

[ZehuaZhang]

Thank you for the recommendation for a feature rich editor, but It doesn't seem to use general markdown syntax, and doesn't preview tab switch, and sync scroll.

[wooorm]

The editor is also responsive exactly because it doesn't use an editor.
It's a text area, with color: transparent, behind it is a highlighted div: https://github.com/remarkjs/react-markdown/blob/website/src/index.js

Note that if you want a few commands, like a "bold" button or so, they aren't super hard to implement with just the DOM (or just react). You figure out where the current selection is. Whether it's a range or just one spot. And then wrap the range or inject something!

[ZehuaZhang]

Makes sense, do you have some recommendation on sync scroll?

[ChristianMurphy]

Another option worth mentioning https://milkdown.dev/
Which is a what you see is what you get (WYSIWYG) editor built on remark and prosemirror.
It is different from the side by side editing you describe, but can be more friendly for a non-technical audience.