Using rich markdown editor (WYSIWYG) editor with react and nextjs

Make sure to use yarn instead of npm for this package to work.

// pages/admin/posts/new
import { useState, useEffect, useContext } from "react";
import AdminLayout from "../../../components/layout/AdminLayout";
import { Row, Col, Button } from "antd";
import Editor from "rich-markdown-editor";
import { ThemeContext } from "../../../context/theme";

const NewPost = () => {
  // state
  const [loading, setLoading] = useState(false);
  const [theme, setTheme] = useContext(ThemeContext);

  const onChange = (e) => console.log(e);
  console.log(theme);

  return (
    <AdminLayout>
      <Row>
        <Col span={16}>
          <p>Create</p>

          <Editor
            style={{ marginLeft: "20px" }}
            dark={theme === "light" ? false : true}
            defaultValue="Hello world!"
            uploadImage={async (file) => {
              // const result = await s3.upload(file);
              // return result.url;
              console.log("UPLOAD FILE => ", file);
            }}
            onChange={(v) => {
              console.log(v());
            }}
          />
        </Col>
        <Col span={8}>
          <Button
            type="primary"
            htmlType="submit"
            style={{ margin: "10px 0px 10px 0" }}
            block
          >
            Publish
          </Button>
          <p>Sidebar options</p>
        </Col>
      </Row>
    </AdminLayout>
  );
};

export default NewPost;