inowayさんの章を拝借していますリポジトリhttps://github.com/utautattaro/novelデプロイしてみたhttps://novel.utautattaro.com/novelhttps://github.com/steven-tey/novelnovelはvercelの方たちが中心となって開発したオープンソースのnotionライクなmarkdownエディタです。ライブデモで動作を確認できます。https://novel.sh/notionライクな書き味とlocalStorageを利用したリアルタイムセーブなんかが良いです。現在ライブデモとVSCode拡張で提供されていますが、ライブデモはmarkdownエクスポートができなかったり、VSCodeは見た目が小さかったり画像のアップができなかったりと、色々残念なポイントがあります。今回はnovelのブランチをフォークして自前の環境を作り、markdownエクスポートを実現したので共有します。export\novel\packages\core\src\ui\editor\index.tsxに機能的な処理が記載されていますonUpdate()がアップデートされたときに呼ばれるコールバックとなっていて、そちらにエクスポート機能を追加します。/saveと入力した際にされるようにします。クリックイベントを発生させる}これで/saveコマンドを打つとmarkdownがダウンロードされるようになります。base64化解除ただ上記の状態だと、埋め込まれた画像が全てbase64化され本文に記述されているため、容量が非常に多くなっています。画像ファイルはbase64からpngデータに変更して単一のファイルとして保存されるように以下の処理を追加します。"-"+id+".png")}これでエクスポート時に画像ファイルがダウンロードされるようになり、markdownには画像ファイル名が記述されるようになりました。本当はJSZipなんかでzip化したほうがいいんだと思います。めんどくさくてやってませんlocalstorageに残っているデータは現状デベロッパーツールで消すかすべて選択して消すかしかないので/deleteなんかを定義してもいいのかもしれません。novelのせいなのか私の書いたコードのせいなのかたまにオートセーブが効かなくなります。エラーを見る限りローカルストレージに保存する際のパースエラーっぽいんですが、続けて書いていれば消えて問題なく保存再開されるので現状無視してますupdate()の返り値のeから最終的にmarkdownが平文で取得できるので、頑張ればchrome拡張なんかでも提供できそうですそもそも書こうと思っていた記事があったのに環境構築から始めたせいで結局執筆は一ミリも進んでおらずこんな時間です続報スラッシュメニュー化&json形式でのセーブ・ロードを実装しました。@utautattaro3D系Webデベロッパー。エンジニアリングよりもデベロップメントやアートに興味があります。技術の根幹やコアも重要ですが、それで何を実現/表現するか?を考えていることの方が多いです。view記事をシェアするmarkdownエディタ「Tale」をリリースしました。