Doc Editor

This editor component is designed for conventional flow content editing, offering functionalities aligned with rich text editors based on the frameworks like ProseMirror or Slate.

Features

Text, lists, and code blocks, along with customizable inline elements.
Images, attachments, and customizable embed blocks.
Database block that provides tables with kanban view support.
Bidirectional links between documents and transclusion similar to Notion synced blocks.
Two types of selections, including native text selection and block-level selection.
Cross-block dragging and multiple widget toolbars.

Moreover, this editor inherits capabilities built into the BlockSuite framework, including:

Per-user undo/redo stack
Real-time collaboration
Document streaming

Notably, the BlockSuite framework allows runtime compatibility between the page editor and the edgeless editor, beyond mere static file format compatibility. This means you can dynamically attach the same doc object to different instances of the page editor and edgeless editor.

Usage

import { PageEditor } from '@blocksuite/presets';

const editor = new PageEditor();

Assigning a doc object to editor.doc will attach a block tree to the editor, and editor.host contains the API surface for editing. The quick start guide also serves as an online playground.

Integration

Like all BlockSuite editors, the editor UI is entirely composed of the combination of block specs. A specialized root block spec serves as the root node of the document and implements all top-level document UI, with main widgets also mounted on the Accordingly, commonly used editing APIs are provided in the page service.

To integrate and customize this editor, you can:

Customize new block specs
🚧 Configure widgets and customize new widgets
🚧 Use UI components from any framework

🚧 We are planning support for more frameworks.

Reference

Since PageEditor is a native web component, all DOM-related properties are inherited.