React Markdown Editor (Function Component version)

> Features: Hooks, FC, no extra css file, support custom button commands, support i10n or l18n

$3

!Screenshot

$3

Codesandbox demo

$3

``shell
npm i fc-mde
`

$3

`tsx
import { useRef, useState } from 'react'
import Showdown from 'showdown'
import { Mde, MdeTabProps } from 'fc-mde'

export const App = () => {
const [value, setValue] = useState('### Hello World')
const refTextarea = useRef(null)
const [tab, setTab] = useState('write')
const converter = new Showdown.Converter({
tables: true,
simplifiedAutoLink: true,
strikethrough: true,
tasklists: true,
})
const handleValueChange = (value: string) => {
setValue(value)
}
const handleTabChange = (tab: MdeTabProps) => {
setTab(tab)
}
return (
text={value}
setText={handleValueChange}
onTabChange={handleTabChange}
refTextarea={refTextarea}
generateMarkdownPreview={async (markdown) => {
return converter.makeHtml(markdown)
}}
selectedTab={tab}
/>
)
}
``

TODO

- [ ] Add paste image to basee64 format.
- [ ] Add upload image to base64 format.
- [ ] Add suggestion.
- [ ] Add light / dark theme.