Extending react-markdown for example to have underline and text-highlighting

[ortonomy]

We'd like to use react-markdown in a project, but we'd like to extend it to support markdown-it plugins and a couple more decorators.

We're targeting supporting centering text, highlighting, and underline.

Do you have a guide on adding buttons and decorators or a couple pointers where to start?

I noticed https://opuscapita.github.io/react-markdown//branches/master/index.html?currentComponentName=MarkdownInput

which allows me to define extensions as buttons, and even a renderer. Is this all I need to do?

[kvolkovich-sc]

Hi, @ortonomy.

We currently don't have guide on adding buttons and decorators.

You can achieve what you want by diving into slatejs documentation

react-markdown/package.json

Line 100 in b060286

"slate": "0.24.0",

and react-markdown source code.

I'm not sure if this is a very simple task.

Also I'm not sure that you need text centering and underline into markdown editor.

Of course you can do it by using html tags into markdown. But you must understand that this editor is raw markdown text editor (at the current time).

[ortonomy]

@kvolkovich-sc -- thanks for answering so fast.

Perhaps I can let you know about our requirements:

1. We will have editors who will be creating content such that they require to be able to mark pieces of text as formatted (an exhaustive list): bold, italic, underline, highlighted, centered
2. We don't want to store HTML output in our DB, we want to store it in markdown (it's more like meta data that way, not the resulting presentation)
3. We then want to show a preview to the user after, or during
4. We will want to extend the metadata with our domain markdown later (for more complicated formats: e.g mathjax, custom formats).

react-markdown uses markdown-it to parse the markdown -- which supports plugins for mathjax, but also custom markdown decorators, react-markdown seems like an ideal candidate for creating our own custom decorators and making them parse

But you must understand that this editor is raw markdown text editor (at the current time)

I get this, but ...

React-markdown seems to format the markdown to show the resulting format e.g., bold, italic, strikethrough e.g.:

So basically, we'd like to be able to add decorators, (e.g. $$ 1^2 $$ for mathjax) and add them as a button too, and then see the result of the markdown, either in separate preview, or partially formatted inside the editor.

Does that make sense?

[kvolkovich-sc]

Yes, it make sense.

You can add additional buttons which can insert custom text right now. Its not complex.

But I'm not sure about visual decorators by adding CSS class or something like that.

Sure, it should be possible by making a little code changes for regex mathing.

Right now we have no resources ⏳ to support react-markdown out of business cases bounds.

If you want, you can dive into codebase and make a Pull Request.