Markdown Editor
Fully-functional in-browser markdown editor application with a light/dark mode toggle
Project Overview
Hey there! So, I've been working on this really cool project that involves building an in-browser markdown editor with a preview. It's been a lot of fun so far, and I think it's shaping up to be something really useful.
Tools and Technologies Used
- HTML, CSS, and JavaScript
- Visual Studio Code as the code editor
- Sass for CSS pre-processing
- Gulp for automating tasks, such as compiling Sass and optimizing images
- Git and GitHub for version control and project management
Challenges
There were a few issues that I fixed as well, like handling an edge case when deleting an unsaved active note, and removing input group children as props. I also made some performance improvements, which is always a good thing.
Approach
In terms of progress, I've added a basic skeleton of the intended design, which includes a sidebar that shifts the editor and preview to the side. I've also implemented a navbar and reducer actions to manage the state of notes. To make things more accessible, I've included some user action messages, toasts, and hover tooltips.
Results
In terms of functionality, I've added a markdown component editor and a preview component, which is really exciting. Plus, I've added a copy markdown button, and made some styling tweaks like hardcoding the height of the editor preview and hiding the save button text in base viewports.
Future
Looking ahead, there are a few more things that I think would be really great to add. For example, it would be awesome to include a search function to make it easier to find specific notes. I also think it would be useful to add some keyboard shortcuts to make things even more efficient. All in all, I'm really excited about where this project is headed and can't wait to see what we can accomplish together!
