v0.13.0 - API Overhaul and Rich Examples
BlockSuite v0.13.0 is now released with 153 PRs landed and 4 new contributors. It's currently used in AFFiNE 0.13. This is a transitional version centered on bug fixes and the clearing of technical debt.
BlockSuite Examples
From 0.13, BlockSuite maintains multiple framework-specific examples demonstrating editor integration for major frameworks (currently including React, Vue, Angular, Preact, Svelte, Solid). There are also examples about using BlockSuite with Next.js and SQLite. You can checkout these examples in the quick start guide.
These examples are maintained in a standalone workspace. There'll be more examples incoming and feel free to make your own!
Framework Features and API Overhaul
- Text Style Commands Enhancement (#6406, #6416): Added commands to facilitate operations on selected text content, including
toggleBold
,toggleItalic
,toggleUnderline
,toggleStrike
,toggleCode
,toggleLink
,getTextStyle
, andisTextStyleActive
. These commands support chainable combination calls, simplifying common rich text style operations. - Format Bar Config API (#6433): Introduced a new format bar widget configuration API, allowing for the customization of format bar menu items. This supports the configuration of existing menu items and the registration of custom menu items, including paragraph dropdowns, style toggles (e.g., bold, italic), highlighter dropdowns, and block type switches with custom icons.
// In root spec:
const defaultSetup = rootSpec.setup;
const mySpec = {
...rootSpec,
setup: (slots, disposableGroup) => {
defaultSetup(slots, disposableGroup);
const onFormatBarConnected = slots.widgetConnected.on(view => {
if (view.component instanceof AffineFormatBarWidget) {
configureFormatBar(view.component);
}
});
disposableGroup.add(onFormatBarConnected);
},
};
function configureFormatBar(formatBar: AffineFormatBarWidget) {
formatBar
.clearConfig()
.addParagraphDropdown()
.addDivider()
.addTextStyleToggle({
key: 'bold',
action: chain => chain.toggleBold().run(),
icon: BoldIcon,
})
.addTextStyleToggle({
key: 'italic',
action: chain => chain.toggleItalic().run(),
icon: ItalicIcon,
})
.addDivider()
.addHighlighterDropdown()
.addDivider()
.addBlockTypeSwitch({
flavour: 'affine:paragraph',
type: 'h1',
name: 'Heading 1',
icon: Heading1Icon,
})
.addBlockTypeSwitch({
flavour: 'affine:paragraph',
type: 'h2',
name: 'Heading 2',
icon: Heading2Icon,
})
}
- Standard Error Types and Handler (#6340): Introduced
BlockSuiteError
to facilitate application-level exception categorization. - Renaming page to doc (#6290): We now refer to BlockSuite documents as
doc
s, aligning API concepts with this terminology change (e.g.,page.addBlock
->doc.addBlock
). This clarifies the document-centric nature of the API. - Renaming
Workspace
toDocCollection
(#6436): Replaced theWorkspace
concept, which was more specific to AFFiNE product features, withDocCollection
. This moves towards a more generalized framework structure (e.g.,workspace.createDoc
tocollection.createDoc
). - Command API Simplification (#6428, #6421, #6277): Streamlined command usage by eliminating the need for
.withHost
and.getChainCtx
. The API for initiating command chains has been intuitively changed from.pipe
to.chain
, simplifying command execution syntax.
// before
std.command
.pipe()
.withHost()
.getSelectedBlocks()
.run();
// after
std.command
.chain()
.getSelectedBlocks()
.run();
- Schema Entry Renaming (#6312, #6319): Removed deprecated
__unstableSchemas
and enhanced consistency when importing default block schemas. This unifies the exposed schema, reinforcing a consistent framework for developers.
// Before
import { AffineSchemas, __unstableSchemas } from '@blocksuite/blocks/models';
// After
import { AffineSchemas } from '@blocksuite/blocks/schemas';
- Typed
getService
(#6284): ThegetService
API is now strongly typed with different service specific to block flavours.
Product Features
- Batch Import (#6360): Enabled batch importing of multiple markdown or HTML files through the file picker.
- Pressure Sensitivity for Brush Mode (#6348): Added pressure sensitivity support for the brush tool, offering more natural drawing experience on tablets.
- Comment Feature POC (#6302): Introduced a preliminary support for a commenting feature, setting the stage for enhanced collaboration capabilities that will be further refined in future updates.
Detailed Bugfixes
- fix: view in edgeless mode @doouding (#6269)
- fix: handle drag and drop outside nested editor gracefully @AyushAgrawal-A2 (#6282)
- fix: console error when pressing delete key in the paragraph before a database @ununian (#6285)
- fix: change bidirectional link divider color @regischen (#6331)
- fix: should enter edit status when focus in embed doc block @donteatfriedrice (#6349)
- fix: bi-directional panel container size @pengx17 (#6358)
- fix: remove static slot and controling state @doouding (#6359)
- fix: use editorModeSwitch slot to change mode @donteatfriedrice (#6380)
- fix: binary expression logic errors @Brooooooklyn (#6381)
- fix: add no-useless-spread and fixes related codes @Brooooooklyn (#6383)
- fix: add ask ai in format-bar @regischen (#6447)
- fix: bi-directional panel check id @regischen (#6460)
- fix: remote cursor shouldn't display on other docs @Saul-Mirone (#6462)
- fix: select all in page mode @Saul-Mirone (#6465)
- fix: update edgeless embed synced doc block style @donteatfriedrice (#6474)
- fix: remove wrong disposables @regischen (#6475)
- fix: add missing slot in edgeless service @doouding (#6478)
- fix: format bar should not display on linked page @Saul-Mirone (#6480)
- fix: check disposable if exists @regischen (#6485)
- fix: only display hostname in bookmark @donteatfriedrice (#6495)
- fix(blocks): heading style should not influence children @Flrande (#6407)
- fix(blocks): use requestAnimationFrame to update selection @fundon (#6422)
- fix(blocks): type character after link should not extend the link attributes @Flrande (#6443)
- fix(blocks): inconsistent space between nested blocks @Flrande (#6466)
- fix(blocks): drag area not handle viewport position correctly @Flrande (#6482)
- fix(database): drop row in place and it'll disappear @zzj3720 (#6276)
- fix(edgeless): fix wrong algorithm @regischen (#6278)
- fix(edgeless): switching to hand tool while right clicking affine#5664 @golok727 (#6279)
- fix(edgeless): shift panel-wrapper to keep it in view @fundon (#6288)
- fix(edgeless): no need to adjust position of component-toolbar when more-actions-container is opened @fundon (#6292)
- fix(edgeless): cannot add text in hollow shape @donteatfriedrice (#6297)
- fix(edgeless): add default text color of shape-element @fundon (#6300)
- fix(edgeless): github icon size on note-menu @fundon (#6309)
- fix(edgeless): redo for reordering @doouding (#6315)
- fix(edgeless): auto-complete displays incorrect shape @lawvs (#6334)
- fix(edgeless): width or height should not be negative @fundon (#6338)
- fix(edgeless): menu-container scrolling in safari @fundon (#6351)
- fix(edgeless): fix laggy selection & legacy template rendering @doouding (#6341)
- fix(edgeless): fonts load and render in firefox @fundon (#6353)
- fix(edgeless): position should be calculated after the update is complete @fundon (#6367)
- fix(edgeless): last selection was recovered unexpected after panning from default tool @congzhou09 (#6343)
- fix(edgeless): update path after mode change @regischen (#6374)
- fix(edgeless): snapshot with connector elements importing @doouding (#6377)
- fix(edgeless): use custom scrollbar for template panel @doouding (#6446)
- fix(edgeless): add ask ai in edgeless format-bar @regischen (#6456)
- fix(edgeless): add paragraph block when clicking at empty note block @donteatfriedrice (#6457)
- fix(edgeless): paste group with same relative index @regischen (#6415)
- fix(edgeless): drag note to merge after a list item @doouding (#6461)
- fix(edgeless): dropout embed synced doc block should fit height @donteatfriedrice (#6463)
- fix(edgeless): size panel width @fundon (#6473)
- fix(edgeless): group element to image @doouding (#6472)
- fix(edgeless): bebas-neue light url @fundon (#6395)
- fix(edgeless): optimize edgeless note focus logic @donteatfriedrice (#6476)
- fix(edgeless): make sure some components invisible when readonly @donteatfriedrice (#6483)
- fix(inline): failed to delete embed node using backspace @Flrande (#6347)
- fix(inline): v-line is not fully adapted for horizontal scrolling @Flrande (#6467)
- fix(page): popup menu should not close, when on top of hoverable block @AyushAgrawal-A2 (#6281)
- fix(page): allow block cards to expand horizontally on note resize @AyushAgrawal-A2 (#6273)
- fix(page): change toolbar position for all block cards to top-left @AyushAgrawal-A2 (#6271)
- fix(page): the style of editor-host does not take effect @wumo1016 (#6305)
- fix(page): link card image should not be scaled @donteatfriedrice (#6362)
- fix(page): update code theme by page theme @JunIce (#6365)
- fix(page): handle delete or backspace align with embed block @donteatfriedrice (#6364)
- fix(page): skip adding reference node when importing notion zip @fourdim (#6376)
- fix(page): image not found after import notion file @zkwolf (#6419)
- fix(page): flat blockSelections to return consistent flat mode SelectedBlocks @fourdim (#6445)
- fix(page): wrap disable media print in a finally wrapper @fourdim (#6479)
- fix(playground): content of theme toggle button @fundon (#6308)
- fix(presets): editor should can be selected in readonly mode @Flrande (#6397)
- fix(presets): editor should await host update complete @Flrande (#6470)
- fix(std): improve the timing of event dispatcher deactivate @Flrande (#6345)
- fix(std): pointer event state conflict with activate state @Saul-Mirone (#6488)
- fix(store): use lib0 sha256 when api not available @EYHN (#6454)
Full Changelog: v0.12.0...v0.13.0