Markdown editor, React, Typescript, React-markdown, Recoil

React Recoil

To manage the state I've used

markdownAtom.ts;

type MarkdownDataType = {
  createdAt: string;
  name: string;
  content: string;
  id: string;
};

  data: MarkdownDataType[];
  isLightMode: boolean;
  isSidebarOpen: boolean;
  isDeleteModalOpen: boolean;
  activatedMarkdownPart: ActivatedPartType;
  activeMarkdownId: string;
  inputMarkdownValue: string;
  isReloaded: boolean;

isReloaded is created to prevent the infinite loop

React-markdown

The first time I used it. Was surprisingly easy to implement markdown to the project. More work was done with formatting elements to match the design.

Radix-UI

To improve accessibility:

• radix-ui/react-switch - light and dark mode switcher
• radix-ui/react-dialog - delete markdown modal
• radix-ui/react-navigation-menu - navbar and sidebar with keyboard navigation