久しぶりに検索してみた。
以前調べていた時もMilkdownは候補に挙がっていて、Reactとか面倒だと思って不採用にしていた。
Read more<が消えるのはエスケープ処理を入れることで回避できた。
https://github.com/umemak/mdmml_js/commit/7227e554490538dca2a2dce428fb0382297100f4
ここまでできたら、アプリ化したい。 Flutterは言語が違うけど、WebView的なものでラップすればいけるかな。
JSONをマークダウンに変換するのは比較的簡単にできた。
mdmmlに組み込んでサンプル鳴らしてみたらなんかおかしい。
よく見ると<と>に囲まれたところが消えている。タグ扱いされてしまっているようだ。
JSONに保存するタイミングで<などが<などに変換されているなぁ。
codex-team/editor.jsの出力をIonicaBizau/json2md: A JSON to Markdown converter.に入れてみた。
思ってはいたけど、ダメだった。
面倒でも自作しないといけないか。。
以前調べたマークダウンエディタ、codex-team/editor.jsは保存形式がJSONだったのであきらめたけど、JSONとマークダウンを相互変換できればやりたいことが実現できるのではないか？
先日買ったJavaScriptモダンプログラミング完全ガイド、まだ途中だけど結構理解が進む気がする。
節ごとに難易度表示のアイコンがあるのも親切で良い。
マークダウン部分の入力に使うライブラリを探す。
markdown WYSIWYGをキーワードにnpmを検索した結果、
ということで、editor.jsを試してみようと思う。
Read moremagenta-jsがうまく動いてくれなくて、他に似たもの探して jazz-soft/JZZ-gui-Player: MIDI Player for browsersを使ってみた。
readmeのサンプルの通りだと音が出なかったけど、デモページのソースを参考にJZZ.synth.Tiny.register('Web Audio');を追加したらできた。
あとはエディタ部分をマークダウン対応のWYSIWYGなものを組み込めば、いい感じになりそう。
ブラウザからの動作確認はいったん置いておいて、コマンドライン実行で動くものを目指す。
どうせなら自動テストも動かしながらやっていきたい。
JavaScriptのテストフレームワークは、Jest · 🃏 Delightful JavaScript Testingが主流らしいので、それに乗っかる。
Typescriptでの単体テストの書き方(Jest) | スターフィールド株式会社を見ながらインストール。
$ npm install --save-dev jest typescript ts-jest @types/jest
$ npx ts-jest config:init
$ code jest.config.js
$ code package.json
$ npm run test
ts-jest[versions] (WARN) Version 28.0.3 of jest installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=27.0.0 <28.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.
ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
jestとts-jestのバージョンが不一致らしい。
Read more