Lighthouse/src/Pages/Notes/Note.jsx

import React from 'react'
import MarkdownIt from 'markdown-it'
import { DeleteButton, Card } from 'Components'
import { EditableText } from '@blueprintjs/core'
import brace from 'brace'
import AceEditor from 'react-ace'
import 'brace/mode/markdown'
import 'brace/theme/tomorrow'

const md = new MarkdownIt()

const Note = ({ note, update, remove }) =>
    <div className="Note">
        <DeleteButton className="trash-btn" onConfirm={() => remove(note)} title={`Delete ${note.title}`}>
            Do you really want to delete this note ? You won't be able to recover it.
        </DeleteButton>
        <h2><EditableText value={note.title} onChange={value => update({...note, title: value})} /></h2>
        <div className="editor">
            <Card noPadding className="source"><AceEditor editorProps={{$blockScrolling: true}} mode="markdown" theme="tomorrow"
                        value={note.content} height="500px" width="inherit" onChange={value => update({...note, content: value})} /></Card>
            <Card className="preview"><div dangerouslySetInnerHTML={{__html: md.render(note.content)}}></div></Card>
        </div>
    </div>

export default Note