fc-mde

React Markdown Editor (Function Component version)

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

SCREENSHOT

DEMO

Codesandbox demo

INSTALL

npm i fc-mde

USAGE

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<HTMLTextAreaElement>(null);
  const [tab, setTab] = useState<MdeTabProps>('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 (
    <Mde
      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.