Skip to content

Releases: toeverything/blocksuite

v0.17.5

09 Sep 08:29
95e3069
Compare
Choose a tag to compare
chore: version packages (#8245)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

v0.17.4

06 Sep 18:20
1a37c88
Compare
Choose a tag to compare
chore: version packages (#8223)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

v0.17.3

06 Sep 13:48
e7f5232
Compare
Choose a tag to compare
ci: fix release workflow (#8225)

v0.17.0

05 Sep 13:55
2b7fd2a
Compare
Choose a tag to compare

New features:

  • Add lock/unlock feature for frame.
  • Add inline latex and latex block.
  • Block level reference support.
  • DI and Universal extension API.
  • Mindmap import.

Improvements:

  • Focus & Blur status for multiple editors.
  • Mindmap polish.
  • Database issue fix.
  • Performance improvement.
  • Notion import improvement.
  • A bunch of bug fixes.
  • Better project structure.

v0.15.0

03 Jul 02:52
59241f2
Compare
Choose a tag to compare

BlockSuite v0.15.0 is now released with 380 PRs and 3 new contributors.
It's currently used in Affine 0.15. This release includes a lot of new features, improvements, and bug fixes.

Synced Doc

Now, we can easily embed another document in the current document.
The embedded document will be real-time synced with the original document.
You can also create a new document from the embedded document.

AFFiNE_embed_view.mp4

Contribution Details

MindMap

In version 0.14, we have already enabled AFFiNE AI to create MindMaps on the whiteboard.
Now we are opening up this capability, and you can freely create MindMaps on the edgeless (whiteboard) !

AFFiNE_mindMap.mp4

Contribution Details

New Edgeless Toolbar

We have redesigned the Edgeless toolbar.
It's now more responsive and user-friendly.
And with a lot of fancy animations!

AFFiNE_toolbar.mp4

Contribution Details

  • chore(edgeless): simplify data flow of edgeless toolbar hideToolbar @CatsJuice (#7122)
  • chore(edgeless): toggle presentation toolbar with css instead @CatsJuice (#7125)
  • feat(blocks): new smooth-corner component @CatsJuice (#7181)
  • feat(edgeless): separate presentation toolbar from edgeless-toolbar @CatsJuice (#7141)
  • feat(edgeless): responsive for edgeless toolbar @CatsJuice (#7182)
  • feat(edgeless): add link via edgless-toolbar @CatsJuice (#7264)
  • feat(edgeless): responsive for edgeless presentation toolbar @CatsJuice (#7281)
  • feat(edgeless): bind mindmap shortcut in edgeless toolbar @CatsJuice (#7318)
  • feat(edgeless): add shape shortcut in toolbar @CatsJuice (#7330)
  • feat(edgeless): consider dragging a short distance as click for toolbar draggable @CatsJuice (#7393)
  • feat(playground): add presentation button in edgeless mode @CatsJuice (#7280)
  • fix(edgeless): don't hide presentation toolbar if frame/setting menu opened @CatsJuice (#7128)
  • fix(edgeless): adjust edgeless toolbar ui, add tooltips, replace icons @CatsJuice (#7317)
  • fix(edgeless): bind shortcuts in toolbar should dispose when tool disconnected @CatsJuice (#7329)
  • fix(edgeless): resolve the conflict of drag-and-drop to create shapes, modify toolbar shadow @CatsJuice (#7364)
  • fix(edgeless): correct initial location of shape preview when toggled by shortcut 's' @CatsJuice (#7365)
  • fix(edgeless): optimize edgeless toolbar active states @CatsJuice (#7380)
  • fix(edgeless): edgeless toolbar disappear when hide toolbar in presentation setting @CatsJuice (#7413)
  • style(page): adjust heading font-weight and letter-spacing @CatsJuice (#7277)

New Edgeless Text

We've added a new edgeless block type - Edgeless Text.
It's more powerful and user-friendly than the legacy canvas text.
It supports more child blocks and has a better user experience.

Contribution Details

  • chore(blocks): export edgeless text spec @Flrande (#7234)
  • chore(playground): enable new edgeless text by default in playground @Flrande (#7247)
  • feat(edgeless): add edgeless text @Flrande (#7144)
  • feat(edgeless): add default color and editing border for edgeless text @Flrande (#7278)
  • feat(edgeless): support copy and paste for edgeless text @Flrande (#7324)
  • feat(edgeless): add min width for link card in edgeless text @Flrande (#7350)
  • feat(edgeless): auto focus when press enter in edgeless text @Flrande (#7360)
  • feat(edgeless): auto add paragraph when no editable area in edgeless text @Flrande (#7374)
  • feat(edgeless): support edgeless text for new toolbar @Flrande (#7384)
  • fix: edgeless selection may disappear when typing on edgeless text @Flrande (#7443)
  • fix(blocks): support overlapping of inline styles @Flrande (#6998)
  • fix(edgeless): edgeless text should overflow automatically @Flrande (#7235)
  • fix(edgeless): align panel not work @Flrande (#7293)
  • fix(edgeless): edgeless text rect should automatically update when changing font @Flrande (#7292)
  • fix(edgeless): the style of internal text should be reset when modifying the style of edgeless text @Flrande (#7311)
  • fix(edgeless): edgeless text not support divider @Flrande (#7325)
  • fix(edgeless): need to delete first block in note when it has children @Flrande (#7379)
  • fix(edgeless): auto delete empty edgeless text @Flrande (#7385)
  • fix(edgeless): can not undo block moving @Flrande (#7400)
  • fix(edgeless): disable sync doc in edgeless text @Flrande (#7431)
  • fix(edgeless): need to clear selection when focus out in edgeless text @Flrande (#7446)
  • fix(edgeless): should not trigger linked doc widget in canvas text @Flrande (#7459)
  • fix(edgeless): drag text from toolbar should not change edgeless tool @Flrande (#7465)
  • fix(inline): adjust the error range @Flrande (#7225)
  • fix(playground): can not change mode @Flrande (#7361)
  • fix(playground): flags from params need to be converted @Flrande (#7362)
  • fix(presets): export ai action typ...
Read more

v0.14.0

10 May 05:49
2314f10
Compare
Choose a tag to compare

BlockSuite v0.14.0 is now released with 348 PRs landed and 5 new contributors.
It's currently used in Affine 0.14. This release includes a lot of new features, improvements, and bug fixes.
And it's a version centered around the AI features.

AI Features

Important

The AI features are only available in the Affine AI due to the dependency on the backend service.

AI

We have added a lot of AI features in this release to support the Affine AI project.
Thanks to our team members and contributors (@Flrande, @pengx17, @fundon, @donteatfriedrice, @zzj3720, @doouding, @regischen) for their hard work on this release.

  • AI Action Infra: The AI features are supported by a new AI action infrastructure.
  • Ask AI Format Bar: The format bar now has a new button to ask AI for help.
  • AI Chat Panel: A new AI panel is added to the right sidebar. It can generate text, images, and slides.
  • Edgeless AI: The edgeless elements and blocks now can be interacted with AI actions.

Contribution Details

Infra Improvements

  • Rewrite the view store to support the new block collection and selector. (#6521, #6672, #6534, #6737, #6780)
    In previous versions, the view store is responsible for managing the views of the blocks.
    It was designed to control different views of the same block, such as the editor view and the preview view.
    However, we found that it's a anti-pattern to render different views of the same block in the same block tree.
    Which makes it hard to track the view by the block model.
    In this release, we introduce the block collection and selector to make it easier to render different views of the same block.

  • Introduced the draft model for the transformer. (#6630)
    The draft model is a new model that can be used to transform the block model to a new model.
    It's useful when you want to transform the block model to a new model without changing the original block model.

  • Bson for clipboard. (#6526, #6562)
    We use bson for the clipboard mime to optimize the clipboard data serialization and deserialization.

  • Add spec builder. (#6976)
    The spec builder is a new tool to manage the block specs.

  • Switch to es2022 targets. (#6527)
    We have switched to the es2022 targets to support the latest JavaScript features.

  • refactor(store): support streaming editor.doc from empty state @doodlewind (#6522)

  • refactor(examples): sync collection lifecycle with provider @doodlewind (#6683)

Embed Doc Polishing

In this release, we have polished the embed doc feature to make it more user-friendly.

  • Move embed reload button. (#6502)
  • Polish the styles. (#6523, #6536)
  • Make embed card toolbar a widget. (#6635)
  • Fix the issue that creating linked doc from block selection will loss data. (#6510)
  • Fix the issue that users can't jump into doc inside embed synced doc. (#6531)

Database Enhancements

In this release, the Database has seen a series of enhancements aimed at increasing the fluidity of the editing experience, with improvements to keyboard shortcuts and cursor behavior:

  1. Supports using the Tab key to move the cursor to the next field (#6565)
  2. Supports selecting additional rows using arrow keys (#6941)
  3. Clicking on “New Record” now focuses on the title cell of the new row (#6561)
  4. Supports filling a column with the same content via drag-and-drop (#6895)

Additionally, enhancements to the title column now allow it to link to another page (#6572).
When you drag Kanban cards to the edge, the Kanban will now automatically scroll (#6614).
The Database will display as many views as possible instead of just three (#6642), and the same goes for filters (#6739).

There are also some experimental features that can be enabled through feature flags:

  1. Table now includes a statistics feature (#6560)
  2. The Database now supports using Todo blocks from all pages as a data source (#6785)

Documentation Improvements

We've added some new examples thanks to @doodlewind, @L-Sun.

  • Add vanilla-indexeddb example. (#6525)
  • Add react-indexeddb example. (#6689)
  • Add react-websocket example. (#6624)

Community Features

Detailed Bug Fixes and Improvements

Read more

v0.13.0 - API Overhaul and Rich Examples

19 Mar 04:32
b48b0e2
Compare
Choose a tag to compare

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, and isTextStyleActive. 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 docs, aligning API concepts with this terminology change (e.g., page.addBlock -> doc.addBlock). This clarifies the document-centric nature of the API.
  • Renaming Workspace to DocCollection (#6436): Replaced the Workspace concept, which was more specific to AFFiNE product features, with DocCollection. This moves towards a more generalized framework structure (e.g., workspace.createDoc to collection.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): The getService 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

Read more

v0.12.0 - Embeds, Sync Engine, and Cross-Browser Support!

26 Feb 08:15
0868ac6
Compare
Choose a tag to compare

The BlockSuite v0.12.0 release comes with 220 landed PRs, which is the version used in AFFiNE 0.12, with many major framework improvements and product features in the editor.

Note that from this version, BlockSuite is released using the version installed in AFFiNE Stable.

Notable Framework Enhancements

  • Support for Safari and Firefox by moving to single contenteditable (#5850)
  • New @blocksuite/sync package that provides an docSources option for syncing the overall workspace, which replaces previous providers. The BlockSuite playground apps have migrated to the new sync engine (#6204)
  • Reorganized edgeless API exposed on service (#5972 #6108 #6165 #6180)
  • Refactored editor initializing flow that allows for simpler code setup for creating editor with existing content (#6167)
  • New setup function in block spec for passing in custom configs (#6122)
  • Move to per-block version that allow co-existing of multiple block versions in same doc (#6065)
  • Improved API for pulling out context of a command (#6265)

Also, the BlockSuite documentation site now adds the new components and blog entries. We'll keep them updated in the following!

Notable Product Features

  • The card view and embed view of documents that allow experience like Synced Block in Notion (#6193 #5955)
  • The embed view of Figma, GitHub, Loom and attachment (#5927 #5988 #5955 #6224 #6069)
  • New note slicer that splits note blocks in an easier way (#6029)
  • New bi-directional link panel for inbound and outbound bi-directional links (#6010)
  • Better note visibility between doc and edgeless editors (#5994)

Detailed Bugfixes

Read more

v0.11.0 - The Editor Framework!

11 Jan 07:33
Compare
Choose a tag to compare
blocksuite-cover

The BlockSuite v0.11.0 release is now available! With 317 PRs landed and 6 new contributors, this version marks a milestone in our journey: evolving from a proprietary editor to a general-purpose editing framework.

BlockSuite originated as an editor designed to meet the needs of the AFFiNE knowledge base, which is why, for a long time, it provided a default EditorContainer that included both document editing and whiteboard functionalities. Early updates also focused heavily on specific features for AFFiNE products.

However, during the development of BlockSuite, we've built a range of front-end infrastructures from the ground up, spanning from rich text editing to whiteboard rendering. This version introduces extensive engineering refactoring and modular layering, resulting in the birth of a new, universal editing framework.

Traditionally, developing a stable rich text editor could take years of challenging work. But the evolution of BlockSuite has far outpaced this. We believe our work stems from embracing a new architectural pattern called document-centric, which simplifies the complex architecture of traditional editors by natively building the data layer in the editor with CRDT, thereby providing a more efficient development experience.

Key changes in BlockSuite 0.11.0 for developers include:

  • The new @blocksuite/presets package, which splits the independently usable DocEditor and EdgelessEditor, among others.
  • Distinct structuring of the BlockSuite framework layer, including atomic concepts like Editor, Block, Fragment, Widget, and definitive guides on how they combine. The current DocEditor and EdgelessEditor are based on this headless framework layer.
  • Based on BlockSuite headless, the accompanying front-end framework has been switched from lit to atomico for the experimental editor abed. This proves the feasibility of using the BlockSuite framework independently of specific front-end frameworks. We're also embracing React, Vue, and more diverse front-end frameworks, and there's more to come in terms of framework adaptation!
  • Completely rewritten BlockSuite framework tutorial and architectural exploration documentation, also available in Chinese for convenience.

We've also switched to the new home page blocksuite.io, welcome to give it a spin!

The establishment of the framework layer is just the first step in BlockSuite's longer-term vision. The current stable framework layer modules and APIs are still akin to the more low-level, headless part of tools like ProseMirror. Plans are already in place for more out-of-the-box preset support. Stay tuned!

Notable Product Features in 0.11

  • Support for Linked Page Previews (#5813): Added the basic functionality to support linked page previews in the Table of Contents (TOC), enhancing user navigation experience.
  • Enhanced Bookmark Functionality (#5636): Improved the bookmark block to appear directly at the top level of the edgeless canvas, simplifying the process of pasting elements into the whiteboard.
  • Consistent Dragging Behavior (#5613): Improved the consistency of dragging behavior, support dragging paragraphs and images outside of the note block.
  • Frame Sidebar Support (#5584): Added support for frame sidebars fragment, which brings more intuitive control in edgeless editor.
  • Frame Navigator Optimization (#5498): Optimized the frame navigator, enhancing user navigation efficiency and experience.
  • New Table of Contents (TOC) (#5539): Introduced a new TOC fragment, enhancing document organization and navigation capabilities.
  • Embed View for Certain Attachment Types (#5475): Added embed view support for certain attachment types, enhancing the presentation and interactivity of multimedia content.

Notable Framework Enhancements in 0.11

  • Canvas Content Interleaving Based on LayerManager (#5347): Enabled canvas content interleaving with DOM based on LayerManager, enhancing the editor's visual representation and flexibility.
  • Support for Multiple Editor Instances (#5878): Implemented support for multiple editor instances, increasing the flexibility and scalability of the editing environment.
  • Vitest Browser Test Runner (#5536): Added the DOM-based Vitest browser test runner, making easier for writing integration tests.
  • Support for Custom Inline Nodes (#5909): Introduced the custom InlineSpec feature, enhancing flexibility in text editing, especially for advanced content editing like inline LaTeX.
  • Surface Elements API (#5874): Introduced a new surface elements API, avoid raw Y.Map manipulations.
  • Replaced Export Manager (#5934): Fully removed the last part of legacy ContentParser and introduced a new export manager based on snapshot and adapter mechanisms, greatly enhancing support for third-party formats and scalability.
  • Persisting Editing Session State (#5804): Implemented the temporary storage of user toolbar options and other temporary states through SessionStorage, enhancing usability in frequent switching scenarios.
  • Multi-Instance Selection Enhancement (#5852): Refactored the surface selection mechanism to support multiple instances, making the SurfaceSelection in EdgelessEditor more aligned with DocEditor.
  • Optimized Zoom In/Out Performance (#5791): Performance optimization for zoom in and out functionalities, improving response speed and smoothness.
  • Inline Editor Renaming (#5671): Renamed VirgoEditor to InlineEditor to more accurately reflect its functionality.
  • Stash and Pop for Reactive Proxy (#5627): Introduced stash and pop functionalities for reactive proxies, making state management of local non-collaborative fields easier.
  • Splitting Editor Container into Sub-Editors (#5612): Divided the EditorContainer into multiple sub-editors, improving manageability and modularization.
  • Editor and Presets Package Reorg (#5570): Renamed @blocksuite/editor to @blocksuite/presets to more accurately reflect its function and purpose.
  • Embed Block Helper (#5518): Added an createEmbedBlock helper API in @blocksuite/blocks, simplifying the creation and management of embedded content.

Detailed Bugfixes

Read more

v0.10.0 - Almost Beta!

27 Nov 10:28
4208b26
Compare
Choose a tag to compare

The v0.10.0 release of BlockSuite includes a total of 246 PRs and welcomes 10 new contributors. Besides the continuous enhancement of the framework and more product features for the prebuilt AFFiNE editors, with an increased number of bug fixes and broader usage in production environments, we believe BlockSuite has been very close to its beta stage. This signifies:

  • For first-party editors based on BlockSuite, their stability is now sufficient for production environment usage, and common functionalities are covered by E2E tests. Notably, about 20% of the BlockSuite codebase are test cases, ensuring a robust and reliable experience. Except for a few edge cases, interactions like selection and shortcuts should mostly align with intuition during typical operations.
  • The architecture of the block-editing framework is now established, with best practices for operation data flow and event stream determined. Some legacy logic will be gradually refactored and removed, such as the _legacy directory in the @blocksuite/blocks package. Documentation about the relevant API surface is being continuously improved. However, understanding the usage for customizing blocks and extending selections may still require code consultation at this point.
  • Subsequent releases may still feature API breaking changes, but data will continue to be forward compatible.

We plan to enter the beta phase of BlockSuite in the next upcoming release. Exciting updates are on the way!

Below is a brief overview of the framework improvements and editor features in 0.10.0:

Framework Refinements

  • Enhanced Documentation (#5263): Added comprehensive API documentation for key packages and updated getting started guides to align with new API designs. The BlockSuite documentation site has also been vastly updated.
  • Page Load Callback Functionality (#5325): The new page.load API distinguishes between creating and loading documents, offering more precise control. Details are provided in the BlockSuite Data Persistence Tutorial.
  • Partial Update Support in Store (#5396): Refactored the store event stream to support incremental updates to nested object structures, removing events that could lead to leakage of underlying Yjs abstractions.
  • Optimized Batch Drag Update Size (#5272): Optimized the batch drag update size to reduce redundant ydoc writes, minimizing the update patch sizes in collaborative edits.
  • Recursive Deletion in deleteBlock (#5224): Modified deleteBlock to allow recursive deletion of child nodes by default, with configurable behavior.
  • Garbage Collection in Blob Manager (#5196): The BlobManager now actively removes unlinked resources, enhancing efficiency in resource management.
  • Configurable Block-Level Config (#5158): Support for dynamic configuration (e.g., maximum file size for attachment block) via service config.

Editor Features

  • Surface Reference Block (#5013): The new affine:surface-ref block enables embedding whiteboard frames or groups into the document mode.
  • Grouping Capability in Edgeless (#5069): Enhanced ability to group edgeless elements, with support for nested groupings.
  • New Style Collapsible Note in Edgeless (#5337): Edgeless now supports note blocks with various shadow, corner, and border styles, including preset effects for visually rich notes.
  • Per-Element Selected Box in Edgeless (#5322): Multi-selection now shows individual selection boxes for each selected element, enhancing clarity in grouped selections.
  • Auto-Connect Indicator and Index Label (#5136): Automatically connects and indexes content visible in document mode, enhancing navigational clarity.
  • New Connector Addition Method (#5161): Introduces a new way to add connectors by dragging with an auto-complete button, along with widgets for easy connector shape selection.
  • Optimized Double Click for Canvas Text Edit in Hollow Shapes (#5043): Enhanced click detection for text-filled shapes, preserving transparency effects for easier selection of elements beneath hollow shapes.
  • Extended Font Support in Canvas Text (#5339): Introduced new preset fonts like Satoshi, Lora, and Bebas Nene, alongside an updated toolbar UI for easier font adjustments.
  • Revamped Text Highlighting (#5434): Enhanced text highlighting now allows setting the text color itself, not just the background color.
  • Expanded Connector Arrow Styles (#5064): Added new connector endpoint styles including Triangle, Circle, and Diamond.
  • Linked Page Creation from Selected Text (#5171): Quickly create and link new pages from selected text using a simple keystroke.
  • Refined Indent Behavior (#5072): Improved indent behavior for maintaining child node hierarchy more intuitively.

Detailed Bugfixes

Read more