OSSのMarkdownエディタを色々と触ってみる
y_megane求めているもの
- ブラウザで動くOSSのMarkdownエディタ
- Reactベースであること
- 2カラムレイアウトでプレビューがついてると嬉しい
- 改造しやすそうであること（3カラムにして追加機能作りたい）
- 上記以外で余計な機能が少ないこと（改造するときにつらいので）
- 開発が活発かどうかとか本格運用適正とかはあまり気にしない
y_meganebenweet/stackedit
デモサイト：https://stackedit.io/app#
2カラムでプレビュー付きエディタ。
入力画面の方もh1, h2 の文字が大きくなる、WYSIWYGライクな見た目。Inkdropみたいな感じ。
フォルダでファイル管理できる簡単な管理機能あり。
GitHub拡張、mermaid.jsなども対応している。
フロントエンドはVue.js, サーバーサイドはexpress.
Googleでのログイン機能やらSync機能などサーバー側に色々ある。
Vueであること、サーバー側が余計であることが今回の用途としてはNG
y_meganesparksuite/simplemde-markdown-editor
デモサイト：https://simplemde.com/
1カラムでMarkdown部分のフォントが変わるWYSIWYGライクなエディタ。シンプル。
codemirrorのラッパーみたいな感じ？
"dependencies": {
"codemirror": "*",
"codemirror-spell-checker": "*",
"marked": "*"
},
検索の仕方が悪かった。Reactに絞って見ていく
y_meganeandrerpena/react-mde
シンプル。1カラムでタブ切り替えでプレビュー出る形。
コレ自体は本当に最低限のMarkdown編集コマンドセットという感じ。
UIはChakra-UIで最低限。
プレビューは別のライブラリに投げる形。
いくつかのパターンのデモ実装が公開されており、本体自体は最低限。
改造する下地にはいいのかもしれない。
y_meganeHarryChen0506/react-markdown-editor-lite
デモ：https://harrychen0506.github.io/react-markdown-editor-lite/
2カラムでエディタとプレビュー、あとツールバー。
エディタの方はWYSIWYGでもないしコードハイライトもない。
今回のわたしの用途としては問題にならないのでヨシ。
少ないファイルにベタッと書いてある感じで、まあわかりやすくはある。
機能的にはちょうどいいけど、クラスコンポーネントだしHooks以前の実装なのでちょっとしんどいなぁ。
y_meganeツールバーとかいらないし、自力で全部作ったほうが早いのでは、という気持ちになりつつある
y_meganetextarea作ってMarkdownのコードハイライト入れて、プレビューは適当なライブラリに投げる。
でいける？
全然考えが足りてなさそう。