blocksuite

Blocksuite

Peringatan

Repositori ini akan mengalami perubahan besar, jadi kami akan menangguhkan PRS.

Baca lebih lanjut: #9045

---

Ringkasan

Orang yang benar -benar serius tentang editor harus membuat kerangka kerja mereka sendiri.

BlockSuite adalah toolkit untuk membangun editor dan aplikasi kolaboratif. Ini mengimplementasikan serangkaian infrastruktur pengeditan konten, komponen UI dan editor secara mandiri.

Anda dapat mempertimbangkan Blocksuite sebagai pustaka komponen UI untuk membangun berbagai editor, berdasarkan kerangka vanilla yang diminimalkan sebagai runtime mereka. Dengan Blocksuite, Anda dapat:

• Menggunakan kembali beberapa editor bloksuite pihak pertama:
  • PageEditor : Editor dokumen berbasis blok yang komprehensif, menawarkan kustomisasi dan fleksibilitas yang luas.
  • EdgelessEditor : Editor Grafis dengan Dukungan Render Canvas Opt-In, tetapi juga berbagi kemampuan teks kaya yang sama dengan PageEditor .
• Kustomisasi, Perluas, dan tingkatkan editor ini dengan serangkaian komponen dan contoh yang kaya. Semua komponen bloksuite (termasuk editor) adalah komponen web asli, menjadikannya kerangka kerja-agnostik dan mudah diintera dengan kerangka kerja populer.
• Atau, bangun editor baru dari awal berdasarkan kerangka vanilla yang mendasarinya.

? Blocksuite saat ini sedang dalam tahap awal, dengan komponen dan kemampuan ekstensi masih di bawah penyempurnaan. Semoga Anda tetap disini, mencobanya, atau berbagi umpan balik Anda!

Motivasi

Blocksuite berasal dari basis pengetahuan affine, dengan tujuan desain termasuk:

• Dukungan untuk konten yang dapat diedit multimodal : Ketika mempertimbangkan pengetahuan sebagai satu sumber kebenaran, membangun berbagai mode tampilan (misalnya, teks, slide, peta pikiran, tabel) masih membutuhkan banyak kerangka kerja yang tidak kompatibel. Idealnya, tidak peduli bagaimana presentasi perubahan konten, harus ada kerangka kerja yang konsisten yang membantu.
• Mengorganisir dan memvisualisasikan pengetahuan yang kompleks : Editor yang ada umumnya fokus pada pengeditan dokumen tunggal, tetapi sering gagal dalam menangani struktur kompleks yang melibatkan referensi yang saling terkait. Ini membutuhkan kerangka kerja untuk secara alami mengelola negara di berbagai dokumen.
• Kolaborasi-siap : Kolaborasi real-time sering dipandang sebagai plugin opsional, tetapi pada kenyataannya, kami secara asli dapat menggunakan teknologi CRDT yang mendasari untuk manajemen negara editor, yang membantu membangun aliran data yang lebih jelas dan lebih andal.

Selama pengembangan affine, menjadi jelas bahwa Blocksuite maju melampaui hanya menjadi editor in-house dan berkembang menjadi kerangka kerja yang serbaguna. Itu sebabnya kami memilih untuk open source dan mempertahankan blocksuite secara mandiri.

Fitur

Dengan editor BlockSuite, Anda dapat secara selektif menggunakan kembali semua fitur pengeditan di Affine:

Dan di bawah tenda, kerangka kerja vanilla blocksuite mendukung:

• Mendefinisikan blok khusus dan embed inline.
• Pembaruan tambahan, kolaborasi waktu-nyata, dan bahkan sinkronisasi data terdesentralisasi berdasarkan mekanisme streaming dokumen dokumen.
• Menulis logika pengeditan kompleks tipe-aman berdasarkan mekanisme perintah, mirip dengan react hooks yang dirancang untuk pengeditan dokumen.
• Kegigihan dokumen dan kompatibilitas dengan berbagai format pihak ketiga (seperti Markdown dan HTML) berdasarkan snapshot dan transformator blok.
• Penjadwalan negara bagian di beberapa dokumen dan menggunakan kembali satu dokumen di beberapa editor.

Untuk mencoba Blocksuite, lihat contoh Mulai Cepat dan mulailah dengan editor preset di @blocksuite/presets .

Arsitektur

Hubungan antara blocksuite dan affine mirip dengan antara editor Monako dan vscode, tetapi dengan satu perbedaan utama: blocksuite tidak secara otomatis dihasilkan berdasarkan basis kode affine, tetapi dipertahankan secara independen dengan tumpukan teknologi yang berbeda - penggunaan affine bereaksi sementara blocksuite menggunakan komponen web.

Perbedaan ini telah memimpin blocksuite untuk menetapkan batasan yang jelas berdasarkan filosofi komponen-sentris, memastikan:

• Baik Affine dan proyek -proyek lain harus menggunakan kembali dan memperluas blocksuite melalui komponen, tanpa hak istimewa.
• Komponen Bloksuite dapat dengan mudah digunakan kembali terlepas dari apakah Anda menggunakan React atau kerangka kerja lainnya.

Untuk itu, proyek Blocksuite disusun di sekitar paket -paket kunci yang dikategorikan ke dalam dua kelompok: kerangka kerja tanpa kepala dan komponen pengeditan prebuilt.

Kerangka
@blocksuite/store	Lapisan data untuk pemodelan status dokumen kolaboratif. Ini dibangun secara asli di Perpustakaan CRDT YJS, menyalakan semua dokumen Blocksuite dengan kolaborasi waktu nyata bawaan dan kemampuan perjalanan waktu.
@blocksuite/inline	Komponen teks kaya minimal untuk pengeditan inline. BlockSuite memungkinkan pemecahan konten teks yang kaya dalam node blok yang berbeda menjadi editor inline yang berbeda, membuat konten kompleks dapat disusun dengan mudah. Ini secara signifikan mengurangi kompleksitas yang diperlukan untuk mengimplementasikan fitur pengeditan teks kaya tradisional.
@blocksuite/block-std	Perpustakaan kerangka kerja-agnostik untuk pemodelan blok yang dapat diedit. Kemampuannya mencakup struktur bidang blok, acara, seleksi, dukungan clipboard, dll.

Komponen
@blocksuite/blocks	Implementasi blok default untuk menyusun editor preset, termasuk widget milik setiap blok.
@blocksuite/presets	Komponen plug-and-play yang dapat diedit termasuk editor ( PageEditor / EdgelessEditor ) dan komponen UI tambahan bernama fragmen ( CopilotPanel , DocTitle ...).

Sumber daya

• ? Sumber daya
  • Canary Playground
  • Contoh
  • Bloksuite di StackBlitz
  • Menguji kolaborasi waktu nyata
  • Ekosistem Bloksuite CI
  • Editor Blocksvite Berbasis VUE
• Dokumentasi
• ? Masalah pertama yang bagus
• ? ️ Diskusi GitHub
• Saluran Perselisihan
• Pelepasan

Bangunan

Lihat Building.md untuk instruksi tentang cara membangun dan menguji blocksuite dari sumber.

Berkontribusi

BlockSuite menerima permintaan tarik di GitHub. Sebelum Anda mulai berkontribusi, pastikan Anda telah membaca dan menerima perjanjian lisensi kontributor kami. Untuk menunjukkan perjanjian Anda, cukup edit file ini dan kirimkan permintaan tarik.

Lisensi

MPL 2.0