Replace pagedown with editor.md for enhanced Markdown editing

[anasfanani]

This pull request replaces the current Markdown editor, pagedown, with editor.md, which offers more features.

I've chosen to use a fork of the original editor.md repository (https://github.com/pandao/editor.md) that has the most stars. The forked repository used is https://github.com/hawtim/editor.md.

You can see a live example of editor.md here: https://pandao.github.io/editor.md/en.html

Here's a screenshot of HTMLy using editor.md:

I'm new to GitHub and Git, so I would appreciate any guidance on how to contribute to the HTMLy project. Thank you!

[danpros]

Thanks for the PR!

[bttrx]

Why switch to a component no longer maintained?

• Branches · hawtim/editor.md: last updated 5 years ago
• Branches · pandao/editor.md: last updated 4 years ago, 537 (!) open issues

[anasfanani]

I've been exploring various Markdown editors to implement. I started my search on this, to looking at repositories related to Markdown editors.

I first came across the 'stackedit' repository, which has over 21k stars and 600 issues. However, its last release was in 2019 and I'm not familiar with it, so I decided to skip it.

Next, I found 'simplemde-markdown-editor' with 9.6k stars and 263 issues. Its last release was in 2016 and it only had a few examples, so I skipped this one too.

Then, I discovered 'editor.md' which has 13.3k stars and 500 issues. Despite its last release being in 2015, it had more examples which made it easier to implement. However, I realized this project is obsolete, so I searched for a more recent forked version.

I compared the versions of 'editor.md' from the 'pandao' and 'hawtim' repositories, and decided to use the 'hawtim/editor.md' due to its more recent update in 2018.

Lastly, The 'pagedown', last published version was 11 years ago in 2013.

In conclusion, I've decided to update the Markdown editor in HTMLy with 'hawtim/editor.md', as I couldn't find a better alternative.

[bttrx]

@anasfanani Thanks for the details! 👍

Did you also look at these?

• markedjs/marked: A markdown parser and compiler. Built for speed.
• GitHub - terrylinooo/githuber-md: Markdown editor plugin for WordPress.
• GitHub - portive/wysimark: The Wysiwyg Editor for Markdown: 100% CommonMark + GFM with Uploads and Image Resizing
• GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
• GitHub - Milkdown/milkdown: 🍼 Plugin driven WYSIWYG markdown editor framework.

[anasfanani]

@bttrx

I checked out the demo for https://github.com/markedjs/marked at https://marked.js.org/demo/. It seems like there's no toolbar, which could be helpful for people who are not familiar with Markdown syntax.

For the site https://github.com/terrylinooo/githuber-md, it's using the official editor.md 1.5.0.14. You can find the implementation details here: https://github.com/terrylinooo/githuber-md/blob/5ae517a549600f719645d35baf30b29a8069ebcc/src/Controllers/Markdown.php#L30C7-L30C7.

As for https://github.com/portive/wysimark, unfortunately, image uploads are only possible through the API. More details can be found in the documentation: https://www.wysimark.com/docs/js. Currently, I'm not familiar with Vue, React, or Node.js, but I might be able to help in the future once I've gained proficiency in these technologies.

For this :

• https://github.com/nhn/tui.editor
• https://github.com/Milkdown/milkdown

I'd like to try it. However, I'm not sure how to implement it in HTML at the moment.

[anasfanani]

@bttrx

Why do you think using editor md is not a good option ?

I'il give some example active project using editor md.

https://github.com/star7th/showdoc 11k stars
https://github.com/star7th/showdoc/blob/master/web/static/editor.md/editormd.js#L9

https://github.com/itwanger/paicoding 1.3k stars
https://github.com/itwanger/paicoding/blob/main/paicoding-ui/src/main/resources/static/editormd/src/editormd.js

https://github.com/zmister2016/MrDoc 2.7k stars
https://github.com/zmister2016/MrDoc/blob/master/static/editor.md/editormd.js

https://github.com/mindoc-org/mindoc 6.8k stars
https://github.com/mindoc-org/mindoc/blob/master/static/editor.md/editormd.js

[ZachBacon]

How complete is this nearing? I'm very much interested in this if it can extend the markdown capabilities.

[bttrx]

@anasfanani

Why do you think using editor md is not a good option ?

1. As I already said: I have major (not only security) concerns to embed a component last updated 5 years ago.
2. editor.md depends on numerous other components:
   • CodeMirror
   • marked
   • jQuery
   • FontAwesome
   • github-markdown.css
   • KaTeX
   • prettify.js
   • Rephael.js
   • flowchart.js
   • sequence-diagram.js
   • Prefixes.scss
3. Minor: Lots of communication is in Chinese, so I need Google Translate to understand.

Would switching to editor.md solve the HTMLy problem, that edit preview for a post differs from a post's final display?

[bttrx]

@anasfanani

I compared the versions of 'editor.md' from the 'pandao' and 'hawtim' repositories, and decided to use the 'hawtim/editor.md' due to its more recent update in 2018.

Last commit to pandao was on May 9, 2019, while last commit to hawtim was on Aug 29, 2018.
So, in fact, pandao is more recent than hawtim.