import MDEditor from "@uiw/react-md-editor";
import rehypeSanitize from "rehype-sanitize";
import React from "react";
import remarkGfm from "remark-gfm";
import rehypePrismPlus from "rehype-prism-plus";
import ReactDOM from "react-dom";

export default function MarkdownEditor() {
    const [value, setValue] = React.useState<any>(
        `**Hello world!!!** <IFRAME SRC=\"javascript:javascript:alert(window.origin);\"></IFRAME>`
    );

    React.useEffect(() => {
        console.log("value", value);
    }, [value]);

    return ReactDOM.createPortal(
        <MDEditor
            value={value}
            onChange={setValue}
            previewOptions={{
                rehypePlugins: [rehypeSanitize, rehypePrismPlus],
                remarkPlugins: [remarkGfm],
            }}
        />,
        document.getElementById("markdown-modal-root") as HTMLElement
    );
}