Change editor styling based on Regex

[amolpatel]

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]

#420 (comment)

You can rerender the edit area. @amolpatel

react-md-editor/core/src/Editor.tsx

Lines 88 to 90 in 8acedb0

	components?: {
	/** Use div to replace TextArea or re-render TextArea */
	textarea?: ITextAreaProps['renderTextarea'];

[amolpatel]

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]

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

3.17.0+ also supports next.js

@amolpatel

[jaywcjlove]

[amolpatel]

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 #195 (comment) but that seems quite hacky. Ideally, I could use Prism to highlight some syntax in the editor

[amolpatel]

@jaywcjlove Any chance you can help with the above?

[jaywcjlove]

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