blocksuite

Blocksuite

Aviso

Esse repositório passará por grandes mudanças, por isso suspenderemos a aceitação de PRs.

Leia mais: #9045

---

Visão geral

As pessoas que levam a sério o editor devem fazer sua própria estrutura.

Blocksuite é um kit de ferramentas para editores de construção e aplicações colaborativas. Ele implementa uma série de infraestruturas de edição de conteúdo, componentes da interface do usuário e editores de forma independente.

Você pode considerar o BlockSuite como uma biblioteca de componentes da interface do usuário para criar vários editores, com base em uma estrutura de baunilha minimizada como tempo de execução. Com Blocksuite, você pode:

• Reutilize vários editores de Blocksuite de primeira parte:
  • PageEditor : um editor abrangente de documentos baseado em blocos, oferecendo uma extensa personalização e flexibilidade.
  • EdgelessEditor : um editor de gráficos com suporte de renderização de lona opt-in, mas também compartilha os mesmos recursos de texto rico com o PageEditor .
• Personalize, estenda e aprimore esses editores com um rico conjunto de componentes e exemplos de bloco de bloco. Todos os componentes do BlockSuite (incluindo editores) são componentes da Web nativos, tornando-os-agrícolas e fáceis de interopitar com estruturas populares.
• Ou construir novos editores do zero, com base na estrutura de baunilha subjacente.

? A Blocksuite está atualmente em seu estágio inicial, com componentes e recursos de extensão ainda sob refinamento. Espero que você possa ficar atento, experimente ou compartilhar seus comentários!

Motivação

Blocksuite se originou da Base de Conhecimento Affine, com metas de design, incluindo:

• Suporte para conteúdo editável multimodal : Ao considerar o conhecimento como uma única fonte de verdade, a criação de seus vários modos de visão (por exemplo, texto, slides, mapas mentais, tabelas) ainda requer várias estruturas incompatíveis. Idealmente, não importa como a apresentação das mudanças de conteúdo, deve haver uma estrutura consistente que ajude.
• Organizando e visualizando o conhecimento complexo : os editores existentes geralmente se concentram na edição de documentos únicos, mas geralmente ficam aquém de lidar com estruturas complexas envolvendo referências entrelaçadas. Isso requer a estrutura para gerenciar nativamente o estado em vários documentos.
• Pronto para a colaboração : a colaboração em tempo real é frequentemente vista como um plug-in opcional, mas, na realidade, poderíamos usar de forma nativa a tecnologia CRDT subjacente para gerenciamento de estado do editor, o que ajuda a criar um fluxo de dados mais claro e confiável.

Durante o desenvolvimento do afine, ficou claro que Blocksuite estava avançando além de apenas ser um editor interno e evoluindo para uma estrutura versátil. É por isso que optamos por abrir o código -fonte e manter o Blocksuite de forma independente.

Características

Com os editores do BlockSuite, você pode reutilizar seletivamente todos os recursos de edição do Affine:

E sob o capô, a estrutura de baunilha Blocksuite suporta:

• Definindo blocos personalizados e incorporação embutida.
• Atualizações incrementais, colaboração em tempo real e até sincronização descentralizada de dados com base no mecanismo de streaming de documentos do documento.
• Escrevendo a lógica de edição complexa de tipo segura com base no mecanismo de comando, semelhante aos ganchos do React projetados para edição de documentos.
• Persistência de documentos e compatibilidade com vários formatos de terceiros (como Markdown e HTML) com base no instantâneo e transformador de bloco.
• A programação do estado em vários documentos e reutilizando um documento em vários editores.

Para experimentar o BlockSuite, consulte o exemplo de início rápido e comece com os editores predefinidos no @blocksuite/presets .

Arquitetura

A relação entre Blocksuite e Affine é semelhante à entre o editor de Mônaco e o VSCode, mas com uma grande diferença: Blocksuite não é gerado automaticamente com base na base de código Affine, mas é mantido independentemente com uma pilha de tecnologia diferente - o Affine usa o React, enquanto o conjunto de blocos usa componentes da Web.

Essa diferença levou o BlockSuite a definir limites claros com base em uma filosofia centrada no componente, garantindo:

• Os projetos afine e outros devem reutilizar e estender igualmente o BlockSuite por meio de componentes, sem privilégios.
• Os componentes do BlockSuite podem ser facilmente reutilizados, independentemente de você estar usando o React ou outras estruturas.

Para esse fim, o projeto Blocksuite é estruturado em torno dos principais pacotes que são categorizados em dois grupos: uma estrutura sem cabeça e componentes de edição pré -construída.

Estrutura
@blocksuite/store	Camada de dados para modelar estados de documentos colaborativos. Ele é construído nativamente nos YJs da Biblioteca do CRDT, alimentando todos os documentos do Blocksuite com colaboração em tempo real e recursos de viagem no tempo.
@blocksuite/inline	Componentes de texto ricos mínimos para edição em linha. O BlockSuite permite dividir o conteúdo rico de texto em diferentes nós de bloco em diferentes editores embutidos, tornando o conteúdo complexo convenientemente composível. Isso reduz significativamente a complexidade necessária para implementar recursos tradicionais de edição de texto ricos.
@blocksuite/block-std	Biblioteca-Framework-Agnóstica para Modelando Blocos Editáveis. Seus recursos cobrem a estrutura dos campos de bloco, eventos, seleção, suporte à área de transferência etc.

Componentes
@blocksuite/blocks	Implementações de bloco padrão para compor editores predefinidos, incluindo widgets pertencentes a cada bloco.
@blocksuite/presets	Componentes editáveis plug-and-play, incluindo editores ( PageEditor / EdgelessEditor ) e componentes da interface do usuário auxiliares chamados fragmentos ( CopilotPanel , DocTitle ...).

Recursos

• ? Recursos
  • Playground Canário
  • Exemplos
  • Blocksuite em Stackblitz
  • Testando a colaboração em tempo real
  • Blocksuite Ecossistema CI
  • Editor de Blocksvite baseado em Vue
• Documentação
• ? Boas primeiras questões
• ? Aste Discussões do Github
• Discord Channel
• Lançamentos

Prédio

Consulte o Building.md para obter instruções sobre como criar e testar blocksuite a partir da fonte.

Contribuindo

Blocksuite aceita solicitações de puxar no Github. Antes de começar a contribuir, verifique se você leu e aceitou nosso contrato de licença de colaborador. Para indicar seu contrato, basta editar este arquivo e enviar uma solicitação de tração.

Licença

MPL 2.0