How to customize function buttons when using the editor

[nickGaooooooooooo]

Hello, I have integrated the Blocksuite editor into another project. Is it possible to add custom toolbar buttons and functionalities by invoking APIs without modifying the source code of the Blocksuite editor? Furthermore, can I obtain an instance of the structure within the editor from an external system and modify its DOM structure?

[Flrande]

We provide APIs for some components to customize the UI, they are usually some widgets and pass in custom logic through services.

[nickGaooooooooooo]

However, I see that the documentation only describes support for custom components, with examples based on the Lit framework. It is not explicitly documented how to customize toolbar buttons and sidebars, for instance, within a Vue project.

[Flrande]

We plan to make adapters for different frameworks, but for now we still need to write Lit.

[higuaifan]

We plan to make adapters for different frameworks, but for now we still need to write Lit.

So refer to blocksuite.io/guide/block-spec

But it's still possible to use other UI frameworks. We'll introduce later about how to write custom block renderers.

and blocksuite.io/guide/block-widgets mentioned:

But it's still possible to use other UI frameworks. We'll introduce later about implementing custom block renderers.

The “later” here refers to the fact that plans are underway to write such an adapter, which would still need to be implemented using lit for current users, rather than being introduced in subsequent documentation (which I've searched for a long time and can't find), is that correct🤔?

[Flrande]

The documentation is indeed somewhat outdated now. Ultimately, the components will be rendered in the form of Lit, but we will provide some kind of adapter so that developers do not need to write Lit directly, similar to @lit/react.