DEV Community

Cover image for Meditee: A free Medium like Markdown editor app with DraftJS
Anthony Lagrede
Anthony Lagrede

Posted on

Meditee: A free Medium like Markdown editor app with DraftJS

Working on my favorite project Znote a Note-taking app and Javascript Lab, I am currently evaluating existing libraries offering a dedicated writing experience to improve my knowledge.

During this study, I rediscovered DraftJS an impressive WYSIWYG library backed by Facebook, for editing formatted text with high level features like undo/redo in addition to an extensible block mechanism.

In this rich and mature community, I also found other awesome projects and specifically Medium-draft, which is a beautiful Medium like rich text editor (built upon draft-js), eliminating mouse usage by adding relevant keyboard shortcuts.

These Markdown keyboard shortcuts are really pleasant to use and the integrated side buttons and toolbars are really well built.

Unfortunately, Draft.js doesn't natively Markdown and even if there are good initiatives, I didn't find a correct Draft/Markdown converter. So I decided to write my own Markdown converter. Moreover, it could be cool 😎 to use DraftJS to edit your Markdown files, right?

This is why I come up with a small fully-packaged Desktop application: Meditee


Meditee logo

Meditee

Meditee is built on top of the Medium draft library and Electron with a custom Markdown two-way converter. This app is also Free and Open-source like all its underlying components.

This application is built with a relatively limited amount of code to let you understand how to interact with Draft and Markdown. It could be a source of inspiration for your future project.

You are free to use the prebuilt app or build it from source

Meditee demo


Features 💡

  • Read/Write Markdown files
  • Support mapping of inline styles: Bold/Italic/Strike/Code
  • Support of block styles: Titles, Quotes, Break, List(OL/UL and TODOS)
  • Links and Images
  • Code block highlight with auto-detection language
  • Emoji support
  • Dirty flag when file is edited with a confirmation before to quit
  • A Dark theme

Roadmap 📚

DraftJS has various interesting plugins. I will be happy to know which plugins you are interested in.
I have already planned to integrate some features like:

  • Frontmatter
  • Mermaid

If you are interested in helping me, I will be happy to read your suggestions and Pull Requests: Discussions

For those who would like to see this kind of editor in Znote you can also reach me the Znote github to discuss.

Credits

Hope you will enjoy this small app: Meditee Github

Discussion (0)