How to render --- as emdash in react-markdown? and ellipsis ...? and opened / closed quotes?

Question

I would like to know how I can render ... (three dots) as … (ellipsis) in react-markdown. The same for --- (three dashes) as — (emdash) and opened / closed quotes "text" as “text”.

Thanks in advance.

Answer 1

AKX was right. The best option to fix that is with textr. Here is my code with emdash, ellipsis and quotes:

import Markdown from "react-markdown";
import remarkTextr from "remark-textr";
import {smartypants} from "../constants";

const Comp = () => {

return(<Markdown remarkPlugins={[[remarkTextr, {plugins: [smartypants]}]]}>"This is emdash ---"</Markdown>);

}

export default Comp;

And in other TS file (constants file, see import above):

export function smartypants(input: string) {
    const ellipsisReplaced: string = input.replace(/\.\.\./g, "…");
    const emDashReplaced: string = ellipsisReplaced.replace(/---/g, "—");
    const curlyQuotesReplaced: string = emDashReplaced.replace(/"([^"]*)"/g, "“$1”");
    return curlyQuotesReplaced;
}

It works like a charm!! Thanks a lot, AKX.