Markdown – reachat

Markdown Plugins

reachat uses remark (opens in a new tab) to parse and render markdown. You can use the remarkPlugins prop to add custom plugins to the markdown parser. Any plugin that is supported by remark should work here as well.

Pre-packaged plugins

Out of the box, we provide a sample plugin but we plan to expand this later on.

CVE Plugin (opens in a new tab)

You can view the Storybook Stories (opens in a new tab) for more examples.

Writing your own plugin

We will build a plugin that will identify and render CVE links. Below is a sample response:

Please review the following CVEs:
 
- CVE-2021-34527
- CVE-2021-44228
- CVE-2021-45046

We can leverage the remarkPlugins prop to add custom plugins to the markdown parser. Below is an example of the plugin code:

import { findAndReplace } from 'mdast-util-find-and-replace';
 
const CVE_REGEX = /(CVE-(19|20)\d{2}-\d{4,7})/gi;
 
export function remarkCve() {
  return (tree, _file) => {
    findAndReplace(tree, [[
      CVE_REGEX,
      replaceCve as unknown as any
    ]]);
  };
 
  function replaceCve(value, id) {
    return [
      {
        type: 'link',
        url: `https://cve.mitre.org/cgi-bin/cvename.cgi?name=${id}`,
        children: [
          { children: [{ type: 'text', value: value.trim() }] }
        ]
      }
    ];
  }
}

After you integrate this into your app, the above markdown will render as follows:

Please review the following CVEs:
 
- [CVE-2021-34527](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-34527)
- [CVE-2021-44228](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-44228)
- [CVE-2021-45046](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-45046)

To leverage our new plugin, we need to include it in the remarkPlugins prop.

import { Chat } from 'reachat';
import { remarkCve } from 'PATH_YOU_SAVED_THE_PLUGIN';
 
export function App() {
  return (
    <Chat remarkPlugins={[remarkCve]}>
      ...rest of your code...
    </Chat>
  );
}

Custom Components Models