blocksuite

Blocksuite

Advertencia

Este repositorio sufrirá cambios importantes, por lo que suspenderemos la aceptación de PRS.

Leer más: #9045

---

Descripción general

Las personas que se toman realmente en serio el editor deberían hacer su propio marco.

BlockSuite es un conjunto de herramientas para edificios de edificios y aplicaciones colaborativas. Implementa una serie de infraestructuras de edición de contenido, componentes de la interfaz de usuario y editores de forma independiente.

Puede considerar BlockSuite como una biblioteca de componentes de la interfaz de usuario para construir varios editores, basado en un marco de vainilla minimizado como su tiempo de ejecución. Con blocksuite, puedes:

• Reutilizar múltiples editores de bloques de primera parte:
  • PageEditor : un editor de documentos integral basado en bloque, que ofrece una amplia personalización y flexibilidad.
  • EdgelessEditor : un editor de gráficos con soporte de representación de lona optada, pero también comparte las mismas capacidades de texto rico con PageEditor .
• Personalizar, extender y mejorar estos editores con un conjunto rico de componentes y ejemplos de bloques. Todos los componentes de BlockSuite (incluidos los editores) son componentes web nativos, lo que los convierte en un marco-agnóstico y fácil de introducir con marcos populares.
• O bien, cree nuevos editores desde cero en función del marco de vainilla subyacente.

? Blocksuite se encuentra actualmente en su etapa inicial, con componentes y capacidades de extensión aún bajo refinamiento. ¡Espero que pueda estar atento, probarlo o compartir sus comentarios!

Motivación

Blocksuite se originó en la base de conocimiento afín, con objetivos de diseño que incluyen:

• Soporte para contenido editable multimodal : cuando se considera el conocimiento como una sola fuente de verdad, construir sus diversos modos de vista (por ejemplo, texto, diapositivas, mapas mental, tablas) todavía requiere múltiples marcos incompatibles. Idealmente, no importa cómo cambie la presentación del contenido, debe haber un marco consistente que ayude.
• Organización y visualización del conocimiento complejo : los editores existentes generalmente se centran en editar documentos individuales, pero a menudo se quedan cortos en el tratamiento de estructuras complejas que involucran referencias entrelazadas. Esto requiere el marco para administrar de forma nativa el estado en múltiples documentos.
• Lista de colaboración : la colaboración en tiempo real a menudo se considera un complemento opcional, pero en realidad, podríamos usar de forma nativa la tecnología CRDT subyacente para el editor State Management, lo que ayuda a construir un flujo de datos más claro y confiable.

Durante el desarrollo de Affine, quedó claro que Blocksuite avanzaba más allá de ser un editor interno y evolucionando hacia un marco versátil. Es por eso que elegimos el código abierto y mantener BlockSuite de forma independiente.

Características

Con los editores de BlockSuite, puede reutilizar selectivamente todas las funciones de edición en Affine:

Y debajo del capó, el marco de Vanilla BlockSuite es compatible con:

• Definición de bloques personalizados e incrustaciones en línea.
• Actualizaciones incrementales, colaboración en tiempo real e incluso sincronización de datos descentralizada basada en el mecanismo de transmisión de documentos del documento.
• Escribir lógica de edición compleja de tipo seguro basada en el mecanismo de comando, similar a los ganchos React diseñados para la edición de documentos.
• Persistencia de documentos y compatibilidad con varios formatos de terceros (como Markdown y HTML) basada en la instantánea de bloque y el transformador.
• Programación estatal en múltiples documentos y reutilizando un documento en múltiples editores.

Para probar BlockSuite, consulte el ejemplo de inicio rápido y comience con los editores preestablecidos en @blocksuite/presets .

Arquitectura

La relación entre BlockSuite y Affine es similar a la entre el editor de Monaco y VScode, pero con una diferencia importante: BlockSuite no se genera automáticamente en función de la base de código afín, pero se mantiene independientemente con una pila tecnológica diferente, Affine usa React mientras BlockSuite usa componentes web.

Esta diferencia ha llevado a BlockSuite a establecer límites claros basados en una filosofía centrada en el componente, asegurando:

• Tanto los proyectos Affine como otros deben reutilizar y extender el BLOCKSUITE a través de componentes, sin ningún privilegio.
• Los componentes de BlockSuite se pueden reutilizar fácilmente independientemente de si está utilizando React u otros marcos.

Con ese fin, el proyecto BlockSuite está estructurado en torno a paquetes clave que se clasifican en dos grupos: un marco sin cabeza y componentes de edición preconstruidos.

Estructura
@blocksuite/store	Capa de datos para modelar estados de documentos colaborativos. Se basa de forma nativa en la biblioteca CRDT YJS, impulsando todos los documentos de BlockSuite con colaboración en tiempo real incorporada y capacidades de viaje en el tiempo.
@blocksuite/inline	Componentes de texto ricos mínimos para la edición en línea. BlockSuite permite dividir el contenido de texto rico en diferentes nodos de bloque en diferentes editores en línea, lo que hace que el contenido complejo sea convenientemente compuesto. Esto reduce significativamente la complejidad requerida para implementar características tradicionales de edición de texto ricos.
@blocksuite/block-std	Biblioteca de marco-agnóstico para modelar bloques editables. Sus capacidades cubren la estructura de los campos de bloques, eventos, selección, soporte de portapapeles, etc.

Componentes
@blocksuite/blocks	Implementaciones de bloque predeterminadas para componer editores preestablecidos, incluidos los widgets que pertenecen a cada bloque.
@blocksuite/presets	Componentes editables de plug-and-play, incluidos editores ( PageEditor / EdgelessEditor ) y componentes de UI auxiliares llamados fragmentos ( CopilotPanel , DocTitle ...).

Recursos

• ? Recursos
  • Patio canario
  • Ejemplos
  • Blocksuite en Stackblitz
  • Prueba de colaboración en tiempo real
  • Ecosistema blocksuite CI
  • Editor de Blocksvite basado en Vue
• Documentación
• ? Buenos primeros problemas
• ? ️ Discusiones de Github
• Canal de discordia
• Lanzamientos

Edificio

Consulte Building.MD para obtener instrucciones sobre cómo construir y probar BlockSuite desde la fuente.

Que contribuye

BlockSuite acepta solicitudes de extracción en GitHub. Antes de comenzar a contribuir, asegúrese de haber leído y aceptado nuestro acuerdo de licencia de contribuyente. Para indicar su acuerdo, simplemente edite este archivo y envíe una solicitud de extracción.

Licencia

MPL 2.0