search

uiwjs / react-md-editor

A simple markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-md-editor
MIT License
2.19k stars 160 forks source link

Change editor styling based on Regex #421

Open amolpatel opened 2 years ago

amolpatel commented 2 years ago

Hey all,

This is a great library, thanks for contributing! I have a quick question hoping someone could help me:

I would like to automatically update the styling for any text that matches a specific regex pattern in the editor. For example, if a user enters in any text in double curly braces, I want to change the color. Eg. {{text}} should highlight to green.

I know the library supports syntax highlighting but I was wondering if I can build any custom highlighting.

Thanks in advance!

jaywcjlove commented 2 years ago

https://github.com/uiwjs/react-md-editor/issues/420#issuecomment-1205939047

You can rerender the edit area. @amolpatel

https://github.com/uiwjs/react-md-editor/blob/8acedb0427ac8459b618ca5f0b371e44c1dc0007/core/src/Editor.tsx#L88-L90

amolpatel commented 2 years ago

How does that help me use regex to replace a specific line of text? I'm also using Next so I have to use version 3.6.0 so have to use the deprecated renderTextarea

jaywcjlove commented 2 years ago

https://codesandbox.io/s/recursing-edison-w1rryo?file=/pages/index.js

3.17.0+ also supports next.js

@amolpatel

jaywcjlove commented 2 years ago

amolpatel commented 2 years ago

Ah nice! Thanks for clarifying that. I still am not entirely sure how to accomplish syntax highlighting based on a specific regex pattern by re-rendering the text area. I guess I could do something similar to https://github.com/uiwjs/react-md-editor/pull/195#issue-930479978 but that seems quite hacky. Ideally, I could use Prism to highlight some syntax in the editor

amolpatel commented 2 years ago

@jaywcjlove Any chance you can help with the above?

jaywcjlove commented 2 years ago

@amolpatel Sorry I can't help you very well.