Markdown Editor Implementation
Implementation of a markdown diary feature for a todo list application using the markdown_js open-source library.
Project Repository
Previous tutorial on the todoList application
markdown-js repository
Issues Encountered:
- Data Loss During Component Switching
When transitioning between editor and list views, previously entered content was being lost.
Solution: Upon component route switching, the component gets destroyed and remounted, causing loss of data in the textarea. The fix involves checking the application's state.diary property during the component's beforemount phase. If saved content exists, it's copied to the component's md property. Additionally, a save mechanism should store data back to the state or emit events to parent components.
- Importing markdown_js Library
Initial import approach failed:
import markdown from 'markdown';
htmlStr = markdown(input);
Error occurred because the markdown library exports an object rather than a direct function.
Correct implementation:
import { markdown } from 'markdown';
htmlStr = markdown(input);
Adding curly braces properly extracts the markdown function from the module export.
Unexpected Outcome
After encountering this issue, I reviewed the markdown library's README which only documented CMD import syntax without ES6 support. I decided to contribute by forking the repository and adding the ES6 import example to the documentation.
I submitted a pull request which was merged within minutes! This marked my first contribution to an open-source project, filling me with pride. It demonstrated that contributing to open-source projects is more accessible than expected.
Contributions don't require advanced programming skills. Alternative ways to help include:
- Translating documentation for international projects
- Improving README files
- Reporting bugs through issues
The principle remains: "I help others, others help me."