73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { Text, type Workspace } from '@blocksuite/affine/store';
|
|
|
|
import { createTestEditor } from '../utils/extensions.js';
|
|
import type { InitFn } from './utils.js';
|
|
|
|
export const multiEditor: InitFn = (collection: Workspace, id: string) => {
|
|
const doc = collection.createDoc({ id });
|
|
doc.load(() => {
|
|
// Add root block and surface block at root level
|
|
const rootId = doc.addBlock('affine:page', {
|
|
title: new Text(),
|
|
});
|
|
|
|
doc.addBlock('affine:surface', {}, rootId);
|
|
|
|
// Add note block inside root block
|
|
const noteId = doc.addBlock('affine:note', {}, rootId);
|
|
// Add paragraph block inside note block
|
|
doc.addBlock('affine:paragraph', {}, noteId);
|
|
});
|
|
|
|
doc.resetHistory();
|
|
|
|
const app = document.getElementById('app');
|
|
if (app) {
|
|
const editor = createTestEditor(doc, collection);
|
|
editor.style.borderRight = '1px solid var(--affine-border-color)';
|
|
|
|
app.append(editor);
|
|
app.style.display = 'flex';
|
|
}
|
|
};
|
|
|
|
multiEditor.id = 'multiple-editor';
|
|
multiEditor.displayName = 'Multiple Editor Example';
|
|
multiEditor.description = 'Multiple Editor basic example';
|
|
|
|
export const multiEditorVertical: InitFn = (
|
|
collection: Workspace,
|
|
docId: string
|
|
) => {
|
|
const doc = collection.createDoc({ id: docId });
|
|
doc.load(() => {
|
|
// Add root block and surface block at root level
|
|
const rootId = doc.addBlock('affine:page', {
|
|
title: new Text(),
|
|
});
|
|
|
|
doc.addBlock('affine:surface', {}, rootId);
|
|
|
|
// Add note block inside root block
|
|
const noteId = doc.addBlock('affine:note', {}, rootId);
|
|
// Add paragraph block inside note block
|
|
doc.addBlock('affine:paragraph', {}, noteId);
|
|
});
|
|
|
|
doc.resetHistory();
|
|
|
|
const app = document.getElementById('app');
|
|
if (app) {
|
|
const editor = createTestEditor(doc, collection);
|
|
editor.style.borderBottom = '1px solid var(--affine-border-color)';
|
|
|
|
app.append(editor);
|
|
app.style.display = 'flex';
|
|
app.style.flexDirection = 'column';
|
|
}
|
|
};
|
|
|
|
multiEditorVertical.id = 'multiple-editor-vertical';
|
|
multiEditorVertical.displayName = 'Vertical Multiple Editor Example';
|
|
multiEditorVertical.description = 'Multiple Editor vertical layout example';
|