blocksuite

Blocksuite

Warnung

Dieses Repository wird wesentlich Änderungen erfahren, sodass wir die Annahme von PRs aussetzen werden.

Lesen Sie mehr: #9045

---

Überblick

Menschen, die sich mit dem Herausgeber wirklich ernst nehmen, sollten ihren eigenen Rahmen machen.

Blocksuite ist ein Toolkit zum Erstellen von Redakteuren und kollaborativen Anwendungen. Es implementiert eine Reihe von Inhaltsbearbeitungsinfrastrukturen, UI -Komponenten und Redakteuren unabhängig.

Sie können Blocksuite als UI -Komponentenbibliothek für das Erstellen verschiedener Redakteure betrachten, basierend auf einem minimierten Vanille -Framework als Laufzeit. Mit Blocksuite können Sie:

• Wiederverwenden Sie mehrere Blocksuite-Redakteure für Erstanbieter:
  • PageEditor : Ein umfassender blockbasierter Dokumenteditor, der umfangreiche Anpassungen und Flexibilität bietet.
  • EdgelessEditor : Ein Grafikeditor mit Opt-in-Leinwand-Rendering-Unterstützung, teilt aber auch die gleichen Funktionen der Rich-Text mit dem PageEditor .
• Anpassen, erweitern und verbessern Sie diese Redakteure mit einer Vielzahl von Blocksuite -Komponenten und -beispielen. Alle Blocksuite-Komponenten (einschließlich Editoren) sind native Webkomponenten, mit denen sie Framework-Agnostic und einfach mit beliebten Frameworks interopieren können.
• Oder bauen Sie neue Herausgeber von Grund auf neu auf, basierend auf dem zugrunde liegenden Vanille -Framework.

? Blocksuite befindet sich derzeit in der frühen Phase, wobei Komponenten und Verlängerungsfunktionen noch verfeinert werden. Ich hoffe, Sie können dran bleiben, es ausprobieren oder Ihr Feedback teilen!

Motivation

Blocksuite stammt aus der affine Wissensbasis mit Designzielen, einschließlich:

• Unterstützung für multimodale bearbeitbare Inhalte : Wenn Sie Wissen als eine einzelne Quelle der Wahrheit betrachten, werden die verschiedenen Ansichtsmodi (z. B. Text, Folien, Mind Maps, Tabellen) nach wie vor mehrere inkompatible Frameworks erstellt. Unabhängig davon, wie sich die Darstellung von Inhalten ändert, sollte es ein konsistentes Rahmen geben, das hilft.
• Organisieren und Visualisierung komplexes Wissen : Bestehende Redakteure konzentrieren sich im Allgemeinen auf die Bearbeitung einzelner Dokumente, lassen sich jedoch häufig mit komplexen Strukturen miteinander verbunden. Dies erfordert den Rahmen, um den Status in mehreren Dokumenten nativ zu verwalten.
• KOMALSCHAFT-FEHLER : Echtzeit Die Zusammenarbeit wird häufig als optionales Plugin angesehen, aber in Wirklichkeit könnten wir die zugrunde liegende CRDT-Technologie für den Editor State Management nativ einsetzen, um einen klareren und zuverlässigeren Datenfluss aufzubauen.

Während der Entwicklung von affiner wurde klar, dass Blocksuite sich weiterentwickelt hat, als nur ein interner Herausgeber zu sein und sich zu einem vielseitigen Rahmen zu entwickeln. Deshalb haben wir uns für Open Source entschieden und Blocksuite unabhängig voneinander unterhalten.

Merkmale

Mit Blocksuite -Editoren können Sie alle Bearbeitungsfunktionen in Affine selektiv wiederverwenden:

Und unter der Motorhaube unterstützt das Vanille -Blocksuite -Framework:

• Definieren von benutzerdefinierten Blöcken und Inline -Einbettungen.
• Inkrementelle Aktualisierungen, Zusammenarbeit in Echtzeit und sogar dezentrale Datensynchronisation basierend auf dem Dokument-Streaming-Mechanismus des Dokuments.
• Schreiben von Typ-Safe-Komplex-Bearbeitungslogik basierend auf dem Befehlsmechanismus, ähnlich wie bei React-Hooks für die Bearbeitung von Dokumenten.
• Persistenz von Dokumenten und Kompatibilität mit verschiedenen Drittformaten (wie Markdown und HTML) basierend auf Block-Snapshot und Transformator.
• Staatliche Planung in mehreren Dokumenten und Wiederverwendung eines Dokuments in mehreren Redakteuren.

Um Blocksuite auszuprobieren, finden Sie im Quick Start -Beispiel und beginnen Sie mit den voreingestellten Editoren in @blocksuite/presets .

Architektur

Die Beziehung zwischen Blocksuite und Affine ähnelt der zwischen dem Monaco -Editor und dem VSCODE, aber mit einem Hauptunterschied: Blocksuite wird nicht automatisch auf der Grundlage der Affine -Codebasis generiert, sondern wird unabhängig mit einem anderen Tech -Stack verwaltet. Affine verwendet React, während Blocksuite Webkomponenten verwendet.

Dieser Unterschied hat Blocksuite dazu veranlasst, klare Grenzen auf der Grundlage einer Komponent-zentrierten Philosophie festzulegen, um sicherzustellen:

• Sowohl affine als auch andere Projekte sollten Blocksuite gleichermaßen ohne Privilegien durch Komponenten wiederverwenden und erweitern.
• Blocksuite -Komponenten können leicht wiederverwendet werden, unabhängig davon, ob Sie React oder andere Frameworks verwenden.

Zu diesem Zweck ist das Blocksuite -Projekt um wichtige Pakete strukturiert, die in zwei Gruppen eingeteilt werden: ein kopfloses Framework und vorgebaute Bearbeitungskomponenten.

Rahmen
@blocksuite/store	Datenschicht für die Modellierung kollaborativer Dokumentzustände. Es basiert nativ auf der CRDT-Bibliothek YJS, wodurch alle Blocksuite-Dokumente mit integrierter Echtzeit-Zusammenarbeit und zeitreisenden Funktionen betrieben werden.
@blocksuite/inline	Minimal reichhaltige Textkomponenten für die Inline -Bearbeitung. Blocksuite ermöglicht das Spliting reichhaltiger Textinhalt in verschiedenen Blockknoten in verschiedene Inline -Editoren, wodurch komplexe Inhalte bequem komponierbar sind. Dies reduziert die Komplexität, die für die Implementierung herkömmlicher reicher Textbearbeitungsmerkmale erforderlich ist, erheblich.
@blocksuite/block-std	Framework-Agnostic Library zur Modellierung bearbeitbarer Blöcke. Seine Funktionen decken die Struktur von Blockfeldern, Ereignissen, Auswahl, Unterstützung für Zwischenablage usw. ab.

Komponenten
@blocksuite/blocks	Standard -Blockimplementierungen zum Komponieren voreingestellter Editoren, einschließlich Widgets, die zu jedem Block gehören.
@blocksuite/presets	Plug-and-Play-editable Komponenten, einschließlich Editoren ( PageEditor / EdgelessEditor ) und Hilfskomponenten mit dem Namen Fragmente ( CopilotPanel , DocTitle ...).

Ressourcen

• ? Ressourcen
  • Kanarischer Spielplatz
  • Beispiele
  • Blocksuite in Stackblitz
  • Testen der Echtzeit-Zusammenarbeit
  • Blocksuite -Ökosystem CI
  • Vue-basiertes Blocksvite-Editor
• Dokumentation
• ? Gute erste Ausgaben
• ? ️ GitHub -Diskussionen
• Discord -Kanal
• Veröffentlichungen

Gebäude

In Building.MD finden Sie Anweisungen zum Erstellen und Testen von Blöcken aus der Quelle.

Beitragen

Blocksuite akzeptiert Pull -Anfragen auf GitHub. Bevor Sie mit Beiträgen beginnen, stellen Sie bitte sicher, dass Sie unsere Mitwirkungslizenzvereinbarung gelesen und akzeptiert haben. Um Ihre Vereinbarung anzugeben, bearbeiten Sie einfach diese Datei und senden Sie eine Pull -Anfrage.

Lizenz

MPL 2.0