MarkDownEditor.tsx

import markdownit from 'markdown-it';
import React, { useState } from 'react';
import { default as MdEditor } from 'react-markdown-editor-lite';
import 'react-markdown-editor-lite/lib/index.css';

type Props = {
    initialText: string,
    onChange?: (html: string, text: string) => void,
    viewOnly: boolean,
};

const MarkDownEditor: React.FC<Props> = ({ initialText, onChange, viewOnly }) => {
    const [isFullScreen, setIsFullScreen] = useState(false);

    const toggleFullScreen = () => {
        setIsFullScreen(!isFullScreen);
        // this.$refs.mdEditor.fullscreen(isFullScreen);
    };

    const mdParser = new markdownit(
        /* Markdown-it options */
        { html: false }
    );

    function handleEditorChange({ html, text }: { html: string, text: string }) {
        if (onChange) {
            onChange(html, text);
        }
    }

    const renderedOutput = mdParser.render(initialText);

    return (
        (!viewOnly)
            ? (
                <MdEditor
                    style={{ width: '100%', height: '100%', textAlign: "left", zIndex: 2000 }}
                    renderHTML={text => mdParser.render(text)}
                    onChange={handleEditorChange}
                    value={initialText}
                />
            ) : (
                <MdEditor
                    style={{ width: '100%', height: '100%', textAlign: "left", zIndex: 2000 }}
                    renderHTML={text => mdParser.render(text)}
                    view={{ menu: false, md: false, html: true }}
                    readOnly={true}
                    onChange={handleEditorChange}
                    value={initialText}
                />
            )
    );
};

export default MarkDownEditor;