ノート共有型SNSの投稿フォームにreact-quillを採用した話（前編）

eeNotes というサービスでテキストエディタライブラリ react-quillを使用してノート投稿フォームを作成しました。

今回は、技術選定の背景や使用感・工夫したことなどを書いていきたいと思います。

ノート共有型SNS『eeNotes』の投稿フォームにreact-quillを採用した理由や、カスタマイズのポイントを詳しく解説！

Quillって何が出来るの？

以下のようなリッチなテキストエディタを簡単に導入することが出来ます。

様々なテキストエディタに関するライブラリが公開されている中でどうしてreact-quillを選定したの？

GitHubでStar数が多かったライブラリを以下のような観点で比較し、判断していきました。

また、GitHubのCommit履歴などからメンテナンスが行われていることが確認でき、GitHubのStar数も3.7k(本家のQuillは27.4k)React製のテキストエディタライブラリで多かったことも理由の1つです。2020/08/23時点

比較したライブラリ郡

Quillの他に以下のライブラリも比較しました。

比較検討した詳細については、以下の記事を見てもらえると幸いです😄

次に導入する上で工夫した点の紹介をしていきたいと思います。

ToolBarのカスタマイズについて

QuillではToolBarを自由にカスタマイズすることが出来ます。eeNotesのToolBarは以下のように定義して組まれています。

import { Quill } from "react-quill";

export const previewModules = {
    toolbar: [
        [{ "background": "#F4FF81" }]
    ]
};

export const commentFormModules = {
    formula: true,
    // 空段落の挿入を無効化
    // https://stackoverflow.com/questions/43748108/how-to-keep-quill-from-inserting-blank-paragraphs-pbr-p-before-heading
    clipboard: {
        matchVisual: false
    },
    toolbar: [
        [{ "font": [] }],

        [{ "header": 1 }, { "header": 2 }], // custom button values
        [{ "header": [1, 2, 3, 4, 5, 6, false] }],

        ["bold", "italic", "underline", "strike"], // toggled buttons

        [{ "color": [] }, { "background": [] }],// dropdown with defaults from theme
        [{ "script": "sub"}, { "script": "super" }], // superscript/subscript
        [{ "indent": "-1"}, { "indent": "+1" }, "blockquote", "code-block"], // outdent/indent
        [{ "list": "ordered"}, { "list": "bullet" }],
        ["link", "formula", "image"],

        [{ "align": [] }],

        ["clean"] // remove formatting button
    ]
};

// https://quilljs.com/docs/formats/
export const formats = [
    "background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline",
    "blockquote", "header", "indent", "list", "align", "direction", "code-block",
    "image", "formula" // https://katex.org/ 数式
];

Quillのデータ構造 Deltaについて

QuillはDeltaというJSONのような独自形式で文字列の内容が管理されています。

Deltaフォーマット

{
  ops: [
    { insert: 'Gandalf', attributes: { bold: true } },
    { insert: ' the ' },
    { insert: 'Grey', attributes: { color: '#cccccc' } }
  ]
}

文字列の変更検知

text-changeイベントを登録することで、文字列に変更があるたびに以下のフォーマットで検知することが出来ます。

{
  ops: [
    { delete: 10 }  // Delete the next 10 characters
  ]
}

続きはその2で！

ノート共有型SNSの投稿フォーム実装についてご紹介　その2

おまけ

eeNotesのチームメンバーがそれぞれ記事を書いてくれているので、ぜひ見てみてください！

インフラ基盤構成については @_tetsuya28 が

サーバーサイドについては @kozamurai が

フロンドエンドについては @schktjm が

チーム開発の流れについては @assassinEng が

関連記事：