Design comparison
Solution retrospective
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
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord