Custom markdown tags

[asimaranov]

Hello there. Are there ways to add custom markdown tags? For example I want to make text between $ signs to be rendered with my style. So $text$ in markdown should become <mytag>text</mytag> in the result html

[jaywcjlove]

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

Lines 75 to 78 in f04dde8

	/**
	* This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.
	*/
	previewOptions?: Omit<MarkdownPreviewProps, 'source'>;

@asimaranov This is possible. You need previewOptions to write a rehype plugin or use rehype-rewrite

<MDEditor 
  previewOptions={{
    remarkPlugins: [],
    rehypePlugins: []
  }}
/>

• <> signs formatting  #318 (comment)
• Not getting the checked list from preview mode ? #214 (comment)
• Im not being able to avoid convert html tags from the markdown editor to html tags in preview mode #366 (comment)
• Keyboard Enter doesn't take to new line in preview mode #375 (comment)
• Additional Spans #376 (comment)
• The anchor link #371 (comment)

[asimaranov]

Thanks, but I have problems with tags inside my new tag. I wrote the following retype plugin

const merge = (str: string) => {
  return str.replace(/\$([^$]*)\$/g, function(string, first){
    return "█".repeat(first.length);
  })
};

const rewrite = (node: any, index: any, parent: any) => {
  console.log(node)
  if (node.type === "text") {
    node.value = merge(node.value);
  }
};

It works as expected for simple text

But if there'are inner tags, it fails

How can I fix it?

[jaywcjlove]

@asimaranov like this? https://codesandbox.io/embed/markdown-editor-for-react-uiwjs-react-md-editor-issues-454-5wb792?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";
import rehypeRewrite, { getCodeString } from "rehype-rewrite";
// No import is required in the WebPack.
// import "@uiw/react-md-editor/dist/markdown-editor.css";

const mkdStr = `
Markdown Editor

Editor $good$ 

Editor $good \`google\` $
`;

const REG = /\$(.*?)\$/gi;

function App() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor
        height={200}
        previewOptions={{
          rehypePlugins: [
            [
              rehypeRewrite,
              {
                rewrite: (node, index, parent) => {
                  if (node.type === "element" && node.tagName === "p") {
                    let text = getCodeString(node.children);
                    if (REG.test(text)) {
                      text = text.replace(REG, (txt) => {
                        return "█".repeat(txt.length);
                      });
                      node.children = [
                        {
                          type: "text",
                          value: text
                        }
                      ];
                    }
                  }
                }
              }
            ]
          ]
        }}
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

[asimaranov]

Wow, thanks, you're my hero

[jstiburek]

@jaywcjlove

Hello,
I have kinda similar use case.

Is there way to catch a char in actual writing with rehypeRewrite ?
I want to detect when user write @ and show him options to select users to tag. Then replace text behing @ with selected option.

Thank you