Attaching Editor ​

In the Getting Started section, we used a SimpleAffineEditor, which is a simple wrapper around the EditorContainer component. In this part, we will take a closer look at its source code:

import { AffineSchemas } from '@blocksuite/blocks/models';
import type { Page } from '@blocksuite/store';
import { Workspace, Schema } from '@blocksuite/store';
import { LitElement } from 'lit';
import { EditorContainer } from './editor-container.js';

export class SimpleAffineEditor extends LitElement {
  readonly workspace: Workspace;
  readonly page: Page;

  constructor() {
    super();

    const schema = new Schema();
    schema.register(AffineSchemas);

    this.workspace = new Workspace({ id: 'foo', schema });
    this.page = this.workspace.createPage({ init: true });
  }

  override connectedCallback() {
    const editor = new EditorContainer();
    editor.page = this.page;
    this.appendChild(editor);
  }

  override disconnectedCallback() {
    this.removeChild(this.children[0]);
  }
}

This is a web component (LitElement) that statically creates a Workspace and a Page and adds a EditorContainer to itself. The EditorContainer is the main component of the editor, which is responsible for rendering the page and handling user interactions.

By using this approach, you can easily extend the BlockSuite-based editor and control all block content by manipulating the page instance. Remember, the data layer API of the editor data is always based simply on blocks—you don't need to learn complex concepts like operations, actions, commands, transforms! And now, you can undo and redo your changes as you wish, achieving the effect of time travel:

• page.undo() undoes a change.
• page.redo() redoes a change.
• page.captureSync() immediately adds a history record.

Happy hacking!

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Kalam&display=swap"
  rel="stylesheet"
/>