0
Help us understand the problem. What are the problem?

posted at

updated at

Reactでマークダウンエディタを作った話

作り始めたきっかけ

アウトプットのために、Zennに記事を書こうとした、Zennのマークダウンエディタには、プレビューが同時に見れない、いちいちタブを選択しないといけない。Qiitaでも、いちいち記号(ex:水平線とかQuoteなど)も手入力しないといけない。

そんなときに、夏休みだし自分で使うものぐらい自分で作るかと思って、作ったのがきっかけです


使用した技術

開発環境

npm -v
8.11.0
node -v
v16.16.0
yarn -v
1.22.19

少し紹介

image

このライブラリは、JSのライブラリをforkして作られたライブラリなので、optionでfork元のoptionが使えるのがとても魅力的です!

fork元のモジュール


モジュールで簡単にできること

  • D&Dが簡単に実装できる
    • 今回は、Firebaseのstorageを用いて、実装しました!
  • ツールバーの編集が簡単
    • 自分好みカスタマイズしやすかった
  • 文章のオートセーブも簡単に実装できる!
    • 裏側はLocalStorageを使っているみたいでした(今回は実装してません)

詰まったところ

  • 要件を決めずに開発
    • 実装のしていく中で、戻りが発生
      • 使用している技術に対応していない(Viteに対応していない)
        • 作りたい用件に合わない(D&Dが実装するのが複雑)
        • UIが気に入らない

こんな感じで、行き当たりばったりで開発していたので、少し時間かかってしまいました。


実際に作った機能

  • D&Dで画像を表示する機能
    • 自分はかなり使うので、実装できて良かったです
    • デフォルトで関数が用意されているので、そちらを用いて、Firebase(storage)にアップロードして、アップロードした画像のURLを取得して、マークダウンにURLを埋め込んでるような実装にしてます!
  • UIの変更
    • 実はデフォルトのフォントではなく、少し変更したりしてます。色合いとかも自分の見やすいように設定してます。
  • ツールバーのショートカットキーも自分の使いやすいように設定してます。これのおかげで、かなりマークダウンを書くことが楽になってます。

今後やっていきたいこと

  • D&Dしたときの画像サイズが大きすぎるのを修正したり、ダークモードを対応したり、マークダウンのUIが少し変なところあるところの修正

最後に

夏休みにアウトプットができるものが良かったです。これからもいろんなものを作っていきたいと思ってます!!ご清聴ありがとうございました!!

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?