blocksuite

ブロックスイート

警告

このリポジトリは大きな変更を受けるため、PRSの受け入れを一時停止します。

続きを読む：＃9045

---

概要

編集者に真剣に取り組んでいる人は、独自のフレームワークを作成する必要があります。

BlockSuiteは、編集者と共同アプリケーションを構築するためのツールキットです。インフラストラクチャ、UIコンポーネント、編集者を独立して編集する一連のコンテンツを実装します。

BlockSuiteは、最小化されたバニラフレームワークに合わせてランタイムとして基づいて、さまざまな編集者を構築するためのUIコンポーネントライブラリと見なすことができます。 BlockSuiteを使用すると、次のことができます。

• 複数のファーストパーティブロックスイートエディターを再利用します。
  • PageEditor ：包括的なブロックベースのドキュメントエディター。広範なカスタマイズと柔軟性を提供します。
  • EdgelessEditor ：オプトインキャンバスレンダリングサポートを備えたグラフィックスエディターですが、 PageEditorと同じリッチテキスト機能も共有しています。
• これらの編集者をカスタマイズ、拡張、強化し、ブロックスイートコンポーネントと例を豊富に使用します。すべてのBlockSuiteコンポーネント（編集者を含む）はネイティブWebコンポーネントであり、フレームワークに依存して人気のあるフレームワークと簡単に相互作用できます。
• または、基礎となるバニラフレームワークに基づいて、新しい編集者をゼロから構築します。

？ BlockSuiteは現在、初期段階にあり、コンポーネントと拡張機能はまだ改良性があります。お楽しみに、試してみる、またはフィードバックを共有できることを願っています！

モチベーション

BlockSuiteは、アフィンナレッジベースに由来し、次のようなデザインの目標があります。

• マルチモーダル編集可能なコンテンツのサポート：知識を単一の真実のソースと見なす場合、さまざまなビューモード（テキスト、スライド、マインドマップ、テーブルなど）を構築するには、複数の互換性のないフレームワークが必要です。理想的には、コンテンツのプレゼンテーションがどのように変更されても、一貫したフレームワークが役立つはずです。
• 複雑な知識の整理と視覚化：既存の編集者は一般に単一のドキュメントの編集に焦点を当てていますが、絡み合った参照を含む複雑な構造に対処するのに不足していることがよくあります。これには、複数のドキュメントにわたって状態をネイティブに管理するためのフレームワークが必要です。
• コラボレーション対応：リアルタイムコラボレーションはオプションのプラグインと見なされることがよくありますが、実際には、編集者の状態管理に基礎となるCRDTテクノロジーをネイティブに使用することができます。

アフィンの開発中に、ブロックスイートが単に社内編集者であることを超えて進歩し、多目的なフレームワークに進化していることが明らかになりました。そのため、ブロックスイートを独立してオープンソースと維持することを選択しました。

特徴

BlockSuiteエディターを使用すると、すべての編集機能をAffineで選択的に再利用できます。

そして、ボンネットの下で、バニラブロックスイートフレームワークがサポートしています。

• カスタムブロックとインライン埋め込みの定義。
• ドキュメントのドキュメントストリーミングメカニズムに基づいて、インクリメンタル更新、リアルタイムコラボレーション、さらには分散データ同期。
• ドキュメント編集用に設計されたReactフックと同様に、コマンドメカニズムに基づいたタイプセーフコンプレックスの編集ロジックを作成します。
• ブロックスナップショットとトランスに基づいた、さまざまなサードパーティ形式（MarkdownやHTMLなど）とのドキュメントの永続性と互換性。
• 複数のドキュメントにわたってスケジューリングし、複数のエディターで1つのドキュメントを再利用します。

BlockSuiteを試すには、クイックスタートの例を参照して、 @blocksuite/presetsのプリセットエディターから始めます。

建築

BlockSuiteとAffineの関係は、Monaco EditorとVSCodeの関係に似ていますが、1つの大きな違いがあります。BlockSuiteはアフィンコードベースに基づいて自動的に生成されませんが、異なる技術スタックで独立して維持されます。

この違いにより、BlockSuiteはコンポーネント中心の哲学に基づいて明確な境界を設定するようになり、次のことを保証しました。

• Affineと他のプロジェクトの両方は、特権なしに、コンポーネントを介してブロックスイートを等しく再利用し、拡張する必要があります。
• BlockSuiteコンポーネントは、Reactまたは他のフレームワークを使用しているかどうかに関係なく、簡単に再利用できます。

そのため、ブロックスイートプロジェクトは、ヘッドレスフレームワークと事前に構築された編集コンポーネントの2つのグループに分類される主要パッケージの周りに構成されています。

フレームワーク
@blocksuite/store	共同ドキュメント状態をモデル化するためのデータレイヤー。これは、CRDTライブラリYJSの上にネイティブに構築されており、リアルタイムのコラボレーションとタイムトラベル機能が組み込まれたすべてのブロックスイートドキュメントに電力を供給しています。
@blocksuite/inline	インライン編集用の最小リッチテキストコンポーネント。 BlockSuiteを使用すると、さまざまなブロックノードのリッチテキストコンテンツをさまざまなインラインエディターに分割できるようになり、複雑なコンテンツが便利に構成可能になります。これにより、従来の豊富なテキスト編集機能を実装するために必要な複雑さが大幅に削減されます。
@blocksuite/block-std	編集可能なブロックをモデル化するためのフレームワークと存在するライブラリ。その機能は、ブロックフィールド、イベント、選択、クリップボードサポートなどの構造をカバーしています。

コンポーネント
@blocksuite/blocks	各ブロックに属するウィジェットを含む、プリセットエディターを構成するためのデフォルトのブロック実装。
@blocksuite/presets	編集者（ PageEditor / EdgelessEditor ）およびFragmentsという名前の補助UIコンポーネント（ CopilotPanel 、 DocTitle ...）を含むプラグアンドプレイの編集可能なコンポーネント。

リソース

• ？リソース
  • カナリアの遊び場
  • 例
  • stackblitzのブロックスイート
  • リアルタイムコラボレーションのテスト
  • ブロックスイートエコシステムCI
  • VueベースのBlockSvite Editor
• ドキュメント
• ？良い最初の問題
• ？§githubディスカッション
• 不一致チャンネル
• リリース

建物

ソースからブロックスイートを構築およびテストする方法については、building.mdを参照してください。

貢献

BlockSuiteは、GitHubでプルリクエストを受け入れます。貢献を開始する前に、貢献者ライセンス契約を読んで受け入れたことを確認してください。契約を示すには、このファイルを編集してプルリクエストを送信するだけです。

ライセンス

MPL 2.0