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 doc editor and the edgeless editor, beyond mere static file format compatibility. This means you can dynamically attach the same page object to different instances of the doc editor and edgeless editor.
Usage
import { DocEditor } from '@blocksuite/presets';
const editor = new DocEditor();Assigning a page object to editor.page 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 page block spec serves as the root node of the document and implements all top-level document UI, with main widgets also mounted on the page block. 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 DocEditor is a native web component, all DOM-related properties are inherited.