ADR: ドキュメントエディタ機能

ビデオメッセージ/ステップガイド共通のドキュメンテーション機能。

意思決定者: Murasaki

ステータス

プロダクトの優先順位変動によりペンディング

背景

WIP

要件

基本的には Notion のエディタを参考にする。

• マークダウンによるショートカットやブロックベースの表示形式を中心に、Quden 特有の Callout やステップといったカスタムブロックが存在する。
• 同期編集はユースケースや実装工数の観点から初期段階では検討しない。

技術検討

リッチエディタ検討を参照。 最終的にlexicalかTiptapが候補に上がり、ドキュメントの充実度や GitHub で参考にできるリポジトリが複数あったTiptapでプロトタイプ作成を進める。

備考

Tiptap の実装 Tips

スラッシュメニュー

公式がサポートしていない機能 ①。 参考リポジトリや公式ドキュメントを見る必要がある。

ドラッグ&ドロップ

公式がサポートしていない機能 ②。 tiptap-extension-global-drag-handle のようなライブラリを使うか、参考リポジトリや公式ドキュメントを見る必要がある。

ビデオメッセージの要約を初期ドキュメントとする

・これは〇〇です。\n・〇〇について説明しています。のような文字列が API から返ってくるのでこれをエディタのブロックが対応するように変換する必要がある。候補としては二つあり、API からマークダウンやドキュメントの JSON が返ってくるのは知識が散らばってしまうため 2 が有力。markdown-itのようなライブラリとreplaceAll("・","- ")のようなロジックを組み合わせるのがよさそう。

1. API を変更する
2. クライアントで文字列の変換を行う。

ビデオメッセージのタイムスタンプ

特定の文字列をリンクにする機能。公式のLink Extensionを参考に実装するとよい。

custom node の再レンダリング

例えばステップガイドの custom node はドラッグ&ドロップや削除・追加などで index が変わる必要がある。 これは以下の discussions のサンプルが参考になる。

• https://github.com/ueberdosis/tiptap/discussions/2244
• https://github.com/ueberdosis/tiptap/discussions/5149
• https://github.com/ueberdosis/tiptap/discussions/3963

参考リポジトリ

Tiptap はドキュメントは豊富だが、custom node や custom extension を作ろうと思うと公式 extension か github 上にある tiptap 採用プロジェクトのコードを参考にすることになる。

• tiptap-templetes
  • 公式ドキュメントから飛べるTemplatesの実装。なぜか今は公開されていないようなので、fork 先の repo
• novel
  • tiptap のラッパーライブラリ。大体の機能が実装されているので参考になる。が壊れていることが多い。
• plane
  • OSS Jira like で普通にサービスとしてすごい
• easyreadme
  • callout や ToC といった custom node が実装されている
• Dante
  • 音声入力や動画埋め込みといった custom node が実装されている
• halo
• think
• bangal-editor
• app.charmverse.io
• alphone
• noeditor
• remirror
  • ProseMirror の React ライブラリ。 ProseMirror を触る際の参考になりそう

Reference

• Figma
• Tiptap