「calm editor」アップデート。MarkDownプレビュー、ショートカットキー実装など
ほぼ自分用のエディタ「calm editor」をアップデートした。
主なアップデート内容はこちら。
1つずつもろもろ書いてく。
MarkDownプレビュー機能
ブログ書いたり、HTMLをサッと確認したい時ある。そん時いちいちプレビューできるエディタにコピペするのが面倒なのでつけた。ちなみにパーサーは「marked」を使用。
参考記事：簡単なMarkdownエディタを作る - Qiita
プレビューのデザインは始め編集中と全く同じにしてみたんだけど、テストしてて今自分が編集中なのかプレビューしてるのか分からなくなることがあったので、自分が今どのモードなのか分かるように差をつけた。
と言っても具体的には、1.文字を小さくして、2.ヘッダーに錠を表示させた、だけ。
背景を変えたりとかも試してみたんだけど、大きく変えると分かりやすくなる代わりに目がビックリしちゃうので、あくまで自然な変化を心がけた、つもり。
ショートカットキー
プレビュー機能をつけたことにより、キーボードから手を離さずにヘッダーのボタンを押したい欲がわいてきたため実装。難しいと思ってたんだけど、ボタンにaccesskey属性をつければいいだけだったので簡単だった。
▼ 実装したショートカット
スクリプト使えばもっといろいろできそうだけど、とりあえずこんだけ。（あ、もちろん「Ctrl+c」などブラウザ標準のは使える。）
他のボタンにはあえてショートカットキーつけなかった。煩雑になるし、そもそも書いてる途中に押したいボタンはプレビューくらいだったので。
ボタンのアイコン化
プレビューボタンが増えてヘッダーがうざったくなりそうだったので、ボタンを文字ではなくアイコンにした。
▼ スマホからだとこんな感じ
環境によって表示を変えたくないので「Font Awesome」を利用。あんまり遅くなるようなら絵文字にするつもり。
＊ヘッダー関連で言うとTextWellのボタンいらないんじゃないかと思い始めてるけど踏ん切りがつかない。悩み中。。
URLをhttpsに
一応ね。
以上。またなんかしたら書きます。
蛇足
前にも書いたけど、文章を書くためだけのエディタとして作ったはずなのに、どんどん機能追加してて本末転倒感ある。
でも今は「紙一枚」「書いてる時他の要素見えにくくする」「常に文字数みられるようにする」なんかの自分なりの原則（？）を守ってればいいかなって気持ち :-P
