간단하면서도 강력하고 확장 가능한 React Markdown Editor. React-mde에는 타사 종속성이 없습니다.

https://github.com/andrerpena/react-mde 

목표는 react-mde를 만들어 Github의 Markdown 편집기처럼 보이고 동작하는 것입니다. 

이들은 주요 나머지 기능 / 변경 사항입니다. 나는 그들을 광석으로 다룰 계획이지만 당신이 도와주고 싶다면 그것은 놀라운 일입니다.

import * as React from "react";
import ReactMde from "react-mde";
import ReactDOM from "react-dom";
import * as Showdown from "showdown";
import "react-mde/lib/styles/css/react-mde-all.css";

const converter = new Showdown.Converter({
  tables: true,
  simplifiedAutoLink: true,
  strikethrough: true,
  tasklists: true
});

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  const [selectedTab, setSelectedTab] = React.useState<"write" | "preview">("write");
  return (
    <div className="container">
      <ReactMde
        value={value}
        onChange={setValue}
        selectedTab={selectedTab}
        onTabChange={setSelectedTab}
        generateMarkdownPreview={markdown =>
          Promise.resolve(converter.makeHtml(markdown))
        }
      />
    </div>
  );
}