import React, { useCallback, useState } from 'react';
import { render } from 'react-dom';
import { Editor, useProvider } from 'zenn-mde';
import markdownToHtml from "zenn-markdown-html";
import 'zenn-mde/css/editor.css';

const MDE = () => {
  const [markdown, setMarkdown] = useState('')
  const handleValueChange = useCallback((newValue: string) => {
    setMarkdown(newValue);
  }, []);

  return (
    <Provider>
      <Editor
        previewClassName="znc"
        value={markdown}
        onChange={handleValueChange}
        parser={markdownToHtml}
      />
    </Provider>
  )
}

render(<MDE />, document.getElementById("app"));