markdownエディタにnovelを採用し、ローカルに構築してみました
※テキストは Good Morning #01 inowayさんの章を拝借しています
リポジトリ
# full-stack md editor. Contribute to utautattaro/tale development by creating an account on GitHub....
github.com
Notion-style WYSIWYG editor with AI-powered autocompletion. - steven-tey/novel...
github.com
Novel is a Notion-style WYSIWYG editor with AI-powered autocompletions. Built with Tiptap, OpenAI, a...
novel.sh
\novel\packages\core\src\ui\editor\index.tsx
に機能的な処理が記載されていますonUpdate()
がアップデートされたときに呼ばれるコールバックとなっていて、そちらにエクスポート機能を追加します。
エクスポートのトリガは /save
と入力した際にされるようにします。
const lastFive = getPrevText(e.editor, {
chars: 5
})
if (lastFive === "/save" && !isLoading ){
const id = Math.random().toString(32).substring(2);
e.editor.commands.deleteRange({
from: selection.from - 5,
to: selection.from,
});
let editorContent = e.editor.storage.markdown.getMarkdown();
const blob = new Blob([editorContent], {type: 'text/plain'}); // Blob オブジェクトの作成
const link = document.createElement('a');
link.download = 'novel-'+id+'.md'; // ダウンロードファイル名称
link.href = URL.createObjectURL(blob); // オブジェクト URL を生成
link.click(); // クリックイベントを発生させる
}
これで/save
コマンドを打つとmarkdownがダウンロードされるようになります。
ただ上記の状態だと、埋め込まれた画像が全てbase64化され本文に記述されているため、容量が非常に多くなっています。
画像ファイルはbase64からpngデータに変更して単一のファイルとして保存されるように以下の処理を追加します。
let req = /\(data:image.*?\)/g //base64化された画像のみ()ごと抜き出す
let imgs = editorContent.match(req);
for(let i in imgs){
var a = document.createElement("a"); //Create <a>
let base64 = imgs[i].slice(1);
base64 = base64.slice(0,-1)
a.href = base64 //Image Base64 Goes here
a.download = i + "-" + id +".png"; //File name Here
a.click(); //Downloaded file
editorContent = editorContent.replace(base64,i+ "-"+id+".png")
}
これでエクスポート時に画像ファイルがダウンロードされるようになり、markdownには画像ファイル名が記述されるようになりました。
本当はJSZipなんかでzip化したほうがいいんだと思います。めんどくさくてやってません
localstorageに残っているデータは現状デベロッパーツールで消すかすべて選択して消すかしかないので/delete
なんかを定義してもいいのかもしれません。事故が怖いですが。
novelのせいなのか私の書いたコードのせいなのかたまにオートセーブが効かなくなります。エラーを見る限りローカルストレージに保存する際のパースエラーっぽいんですが、続けて書いていれば消えて問題なく保存再開されるので現状無視してます
update()の返り値のeから最終的にmarkdownが平文で取得できるので、頑張ればchrome拡張なんかでも提供できそうです
そもそも書こうと思っていた記事があったのに環境構築から始めたせいで結局執筆は一ミリも進んでおらずこんな時間です
スラッシュメニュー化&json形式でのセーブ・ロードを実装しました。
公式ではフルスタックアプリ化を避けるためこういった機能はマージしないそうなのでissueにて展開済み
Hey hey. I was playing around with Novel and @steven-tey, this is an amazing piece of work! Thank yo...
github.com
Hey hey. I was playing around with Novel and @steven-tey, this is an amazing piece of work! Thank yo...
github.com
新型シエンタ(10系)にChrome Castを接続する
2023年3月7日(火) 7時32分11秒 | 1825 viewphpを使ってimagekit.ioにREST API経由でbase64形式の画像をアップロードする
2021年1月15日(金) 7時46分53秒 | 157 view【Web表現チェンジャー】PlayCanvasに追加された3Diframeサンプルが控えめに言ってヤバい
2021年1月13日(水) 15時21分41秒 | 91 viewGithub Codespaces試してみた
2020年10月24日(土) 16時7分6秒 | 54 view目次を作りたい→作った
2020年10月29日(木) 11時1分28秒 | 31 view