blocksuite

Blocs de blocs

Avertissement

Ce référentiel subira des changements majeurs, nous allons donc suspendre l'acceptation des PR.

Lire la suite: # 9045

---

Aperçu

Les gens qui sont vraiment sérieux au sujet de l'éditeur devraient faire leur propre cadre.

BlockSuite est une boîte à outils pour construire des éditeurs et des applications collaboratives. Il met en œuvre une série d'infrastructures d'édition de contenu, de composants d'interface utilisateur et d'éditeurs indépendamment.

Vous pouvez considérer BlockSuite en tant que bibliothèque de composants d'interface utilisateur pour la construction de divers éditeurs, sur la base d'un cadre de vanille minimisé comme exécution. Avec Blocksuite, vous pouvez:

• Réutiliser plusieurs éditeurs de blocs de blocs de premier parti:
  • PageEditor : un éditeur de documents complet basé sur un bloc, offrant une personnalisation et une flexibilité approfondies.
  • EdgelessEditor : un éditeur graphique avec le support de rendu de canevas Opt-In, mais partage également les mêmes capacités de texte riche avec le PageEditor .
• Personnaliser, étendre et améliorer ces éditeurs avec un riche ensemble de composants et d'exemples de blocs de blocs. Tous les composants BlockSuite (y compris les éditeurs) sont des composants Web natifs, ce qui en fait un framework-agnostique et facile à interopérer avec les cadres populaires.
• Ou, construisez de nouveaux éditeurs à partir de zéro en fonction du cadre de vanille sous-jacent.

? BlockSuite est actuellement à son stade précoce, avec des composants et des capacités d'extension toujours en cours de raffinement. J'espère que vous pouvez rester à l'écoute, essayer ou partager vos commentaires!

Motivation

Blocksuite est originaire de la base de connaissances affine, avec des objectifs de conception, notamment:

• Prise en charge du contenu modifiable multimodal : Lorsque l'on considère les connaissances comme une seule source de vérité, la création de ses différents modes de vue (par exemple, texte, diapositives, cartes mentales, tableaux) nécessite toujours plusieurs cadres incompatibles. Idéalement, peu importe comment la présentation du contenu change, il devrait y avoir un cadre cohérent qui aide.
• Organiser et visualiser les connaissances complexes : les éditeurs existants se concentrent généralement sur l'édition de documents uniques, mais ne sont souvent pas en train de gérer des structures complexes impliquant des références entrelacées. Cela nécessite le cadre de gérer nativement l'état sur plusieurs documents.
• Prépare à la collaboration : la collaboration en temps réel est souvent considérée comme un plugin en option, mais en réalité, nous pourrions utiliser nativement la technologie CRDT sous-jacente pour la gestion de l'État des éditeurs, ce qui aide à créer un flux de données plus clair et plus fiable.

Au cours du développement d'Affine, il est devenu clair que Blocksuite progressait au-delà du simple fait d'être un éditeur interne et de évoluer vers un cadre polyvalent. C'est pourquoi nous avons choisi d'ouvrir l'ouverture et de maintenir de la blocsure indépendante.

Caractéristiques

Avec les éditeurs BlockSuite, vous pouvez réutiliser sélectivement toutes les fonctionnalités d'édition dans Affine:

Et sous le capot, le framework Blocksuite Vanilla soutient:

• Définition des blocs personnalisés et des intégres en ligne.
• Mises à jour incrémentielles, collaboration en temps réel et même synchronisation des données décentralisées basées sur le mécanisme de streaming du document du document.
• Écriture de la logique d'édition complexe de type type basé sur le mécanisme de commande, similaire aux crochets React conçus pour l'édition de documents.
• Persistance des documents et compatibilité avec divers formats tiers (tels que Markdown et HTML) basés sur un instantané et un transformateur de blocs.
• Planification d'état sur plusieurs documents et réutiliser un document dans plusieurs éditeurs.

Pour essayer BlockSuite, reportez-vous à l'exemple de démarrage rapide et commencez par les éditeurs prédéfinis dans @blocksuite/presets .

Architecture

La relation entre Blocksuite et Affine est similaire à celle entre l'éditeur Monaco et VScode, mais avec une différence majeure: BlockSuite n'est pas automatiquement générée en fonction de la base de code Affine, mais est maintenue indépendamment avec une pile technologique différente - Affine utilise React tandis que Blocksuite utilise des composants Web.

Cette différence a LED Blocksuite pour fixer des limites claires en fonction d'une philosophie centrée sur les composants, garantissant:

• Les projets affines et autres devraient également réutiliser et étendre la blocsuite via des composants, sans aucun privilège.
• Les composants de Blocksuite peuvent être facilement réutilisés, que vous utilisiez React ou d'autres frameworks.

À cette fin, le projet Blocksuite est structuré autour de packages clés qui sont classés en deux groupes: un cadre sans tête et des composants d'édition préfurés.

Cadre
@blocksuite/store	Couche de données pour la modélisation des états de documents collaboratifs. Il est construit en nativement sur la bibliothèque CRDT YJS, alimentant tous les documents BlockSuite avec des capacités de collaboration et de voyage dans le temps intégrées.
@blocksuite/inline	Minimaux composants de texte riche pour l'édition en ligne. BlockSuite permet de séparer le contenu de texte riche en différents nœuds de bloc en différents éditeurs en ligne, ce qui rend le contenu complexe commodément composable. Cela réduit considérablement la complexité requise pour mettre en œuvre des fonctionnalités traditionnelles d'édition de texte riche.
@blocksuite/block-std	Bibliothèque agnostique framework pour la modélisation des blocs modifiables. Ses capacités couvrent la structure des champs de bloc, des événements, de la sélection, de la prise en charge du presse-papiers, etc.

Composants
@blocksuite/blocks	Implémentations de bloc par défaut pour composer les éditeurs prédéfinis, y compris les widgets appartenant à chaque bloc.
@blocksuite/presets	Composants modifiables de plug-and-play, y compris les éditeurs ( PageEditor / EdgelessEditor ) et les composants d'interface utilisateur auxiliaires nommés fragments ( CopilotPanel , DocTitle ...).

Ressources

• ? Ressources
  • Terrain de jeu canari
  • Exemples
  • Blocksuite à Stackblitz
  • Tester la collaboration en temps réel
  • Écosystème de blocage CI
  • Éditeur de blocs basé sur Vue
• Documentation
• ? Bons premiers problèmes
• ? ️ Discussions GitHub
• Canal de discorde
• Sorties

Bâtiment

Voir Building.md pour des instructions sur la façon de construire et de tester la combinaison de la source de la source.

Contributif

BlockSuite accepte les demandes de traction sur GitHub. Avant de commencer à contribuer, assurez-vous d'avoir lu et accepté notre accord de licence de contributeur. Pour indiquer votre accord, modifiez simplement ce fichier et soumettez une demande de traction.

Licence

MPL 2.0