xnv/src/components/EditableNoteArea/EditableNoteArea.js

import React, { useState } from "react";
import ReactMarkdown from "react-markdown";
import { noop } from "../../utils";

import "./EditableNoteArea.css";

export default function EditableNoteArea({
    content = "",
    onSave = noop,
    preview = false
}) {
    // const [newContent, setNewContent] = useState(content);
    const updateContent = ({ target: { value } }) => {
        // setNewContent(value);
        onSave(value);
    };

    return (
        <section className="EditableNoteArea">
            {!preview ? (
                <textarea
                    resizeable={false}
                    value={content}
                    placeholder="This note feels cold and empty inside"
                    onChange={updateContent}
                />
            ) : (
                <div className="markdownPreview">
                    <ReactMarkdown source={content} />
                </div>
            )}
        </section>
    );
}