Register View in Svelte

[TBenTiCon]

Hi there :)
im currently trying to make Blocksuite work in my small svelte Project.

I already managed to get the "default" editor to work, and im now trying to add a custom block. So far so good, the custom block is loading and can be added via a button.

My Problem is now, that it wont get rendered. Im always getting a "Cannot find view for my-block." error.
I registered the Schema together with the default affine Schema. Do i also have to register the view somewhere (its in the same file as the schema)?

The view/element works, if i try to use it it normal html.

Thanks for your help =)

[doodlewind]

Hi, thanks for your trying! We haven't exposed the custom block helper API (prototype recently implemented in #5518) in our docs yet, which should allow you to define embed-something block easily. Could you share more about the code snippet or API used for customizing? Thanks.

[Flrande]

Why not wrap them as a function and pass pageElement or model as an argument into them?

blocksuite/packages/blocks/src/_common/widgets/slash-menu/config.ts

Lines 62 to 614 in dd29665

	export const menuGroups: SlashMenuOptions['menus'] = [
	{
	name: 'Text',
	items: [
	...textConversionConfigs
	.filter(i => i.flavour !== 'affine:list')
	.map<Omit<SlashItem, 'groupName'>>(({ name, icon, flavour, type }) => ({
	name,
	icon,
	showWhen: model => {
	if (!model.page.schema.flavourSchemaMap.has(flavour)) {
	return false;
	}
	if (['Quote', 'Code Block', 'Divider'].includes(name)) {
	return !insideDatabase(model);
	}
	return true;
	},
	action: ({ pageElement }) => {
	pageElement.root.std.command
	.pipe()
	.withRoot()
	.tryAll(chain => [
	chain.getTextSelection(),
	chain.getBlockSelections(),
	])
	.getSelectedBlocks({
	types: ['text', 'block'],
	})
	.inline(ctx => {
	const { selectedBlocks } = ctx;
	assertExists(selectedBlocks);
	const newModels = updateBlockElementType(
	selectedBlocks,
	flavour,
	type
	);
	// Reset selection if the target is code block
	if (flavour === 'affine:code') {
	if (newModels.length !== 1) {
	throw new Error(
	"Failed to reset selection! New model length isn't 1"
	);
	}
	const codeModel = newModels[0];
	onModelTextUpdated(codeModel, richText => {
	const vEditor = richText.vEditor;
	assertExists(vEditor);
	vEditor.focusEnd();
	});
	}
	})
	.run();
	},
	})),
	],
	},
	{
	name: 'Style',
	items: textFormatConfigs
	.filter(i => !['Link', 'Code'].includes(i.name))
	.map(({ name, icon, id }) => ({
	name,
	icon,
	action: ({ model }) => {
	if (!model.text) {
	return;
	}
	const len = model.text.length;
	if (!len) {
	const vEditor = getVirgoByModel(model);
	assertExists(vEditor, "Can't set style mark! vEditor not found");
	vEditor.setMarks({
	[id]: true,
	});
	clearMarksOnDiscontinuousInput(vEditor);
	return;
	}
	model.text.format(0, len, {
	[id]: true,
	});
	},
	})),
	},
	{
	name: 'List',
	items: textConversionConfigs
	.filter(i => i.flavour === 'affine:list')
	.map(({ name, icon, flavour, type }) => ({
	name,
	icon,
	showWhen: model => {
	if (!model.page.schema.flavourSchemaMap.has(flavour)) {
	return false;
	}
	return true;
	},
	action: ({ pageElement }) => {
	pageElement.root.std.command
	.pipe()
	.withRoot()
	.tryAll(chain => [
	chain.getTextSelection(),
	chain.getBlockSelections(),
	])
	.getSelectedBlocks({
	types: ['text', 'block'],
	})
	.inline(ctx => {
	const { selectedBlocks } = ctx;
	assertExists(selectedBlocks);
	updateBlockElementType(selectedBlocks, flavour, type);
	})
	.run();
	},
	})),
	},
	{
	name: 'Pages',
	items: [
	{
	name: 'New Page',
	icon: NewPageIcon,
	action: async ({ pageElement, model }) => {
	const newPage = await createPage(pageElement.page.workspace);
	insertContent(model, REFERENCE_NODE, {
	reference: {
	type: 'LinkedPage',
	pageId: newPage.id,
	},
	});
	},
	},
	{
	name: 'Link Page',
	alias: ['dual link'],
	icon: DualLinkIcon,
	showWhen: model => {
	assertExists(model.page.root);
	const pageBlock = getBlockElementByModel(model.page.root);
	assertExists(pageBlock);
	const linkedPageWidgetEle =
	pageBlock.widgetElements['affine-linked-page-widget'];
	if (!linkedPageWidgetEle) return false;
	if (!('showLinkedPage' in linkedPageWidgetEle)) {
	console.warn(
	'You may not have correctly implemented the linkedPage widget! "showLinkedPage(model)" method not found on widget'
	);
	return false;
	}
	return true;
	},
	action: ({ model }) => {
	const triggerKey = '@';
	insertContent(model, triggerKey);
	assertExists(model.page.root);
	const pageBlock = getBlockElementByModel(model.page.root);
	const widgetEle =
	pageBlock?.widgetElements['affine-linked-page-widget'];
	assertExists(widgetEle);
	// We have checked the existence of showLinkedPage method in the showWhen
	const linkedPageWidget = widgetEle as AffineLinkedPageWidget;
	// Wait for range to be updated
	setTimeout(() => {
	linkedPageWidget.showLinkedPage(model, triggerKey);
	});
	},
	},
	],
	},
	{
	name: 'Content & Media',
	items: [
	{
	name: 'Image',
	icon: ImageIcon20,
	showWhen: model => {
	if (!model.page.schema.flavourSchemaMap.has('affine:image')) {
	return false;
	}
	if (insideDatabase(model)) {
	return false;
	}
	return true;
	},
	action: withRemoveEmptyLine(async ({ pageElement, model }) => {
	const parent = pageElement.page.getParent(model);
	if (!parent) {
	return;
	}
	const fileData = await uploadImageFromLocal(pageElement.page.blob);
	const props = fileData.map(
	({
	sourceId,
	}): Partial<ImageBlockProps> & {
	flavour: 'affine:image';
	} => ({
	flavour: 'affine:image',
	sourceId,
	})
	);
	pageElement.page.addSiblingBlocks(model, props);
	}),
	},
	{
	name: 'Bookmark',
	icon: BookmarkIcon,
	showWhen: model => {
	if (!model.page.schema.flavourSchemaMap.has('affine:bookmark')) {
	return false;
	}
	return !insideDatabase(model);
	},
	action: withRemoveEmptyLine(async ({ pageElement, model }) => {
	const parent = pageElement.page.getParent(model);
	if (!parent) {
	return;
	}
	const url = await toggleBookmarkCreateModal(pageElement.root);
	if (!url) return;
	const props = {
	flavour: 'affine:bookmark',
	url,
	} as const;
	pageElement.page.addSiblingBlocks(model, [props]);
	}),
	},
	{
	name: 'File',
	icon: AttachmentIcon,
	alias: ['attachment'],
	showWhen: model => {
	if (!model.page.schema.flavourSchemaMap.has('affine:attachment'))
	return false;
	return !insideDatabase(model);
	},
	action: withRemoveEmptyLine(async ({ pageElement, model }) => {
	const page = pageElement.page;
	const parent = page.getParent(model);
	if (!parent) return;
	const file = await openFileOrFiles();
	if (!file) return;
	const service = pageElement.root.spec.getService('affine:attachment');
	assertExists(service);
	assertInstanceOf(service, AttachmentService);
	const maxFileSize = service.maxFileSize;
	addSiblingAttachmentBlock(file, model, maxFileSize);
	}),
	},
	],
	},
	{
	name: 'Date & Time',
	items: [
	{
	name: 'Today',
	icon: TodayIcon,
	action: ({ model }) => {
	const date = new Date();
	insertContent(model, formatDate(date));
	},
	},
	{
	name: 'Tomorrow',
	icon: TomorrowIcon,
	action: ({ model }) => {
	// yyyy-mm-dd
	const date = new Date();
	date.setDate(date.getDate() + 1);
	insertContent(model, formatDate(date));
	},
	},
	{
	name: 'Yesterday',
	icon: YesterdayIcon,
	action: ({ model }) => {
	const date = new Date();
	date.setDate(date.getDate() - 1);
	insertContent(model, formatDate(date));
	},
	},
	{
	name: 'Now',
	icon: NowIcon,
	action: ({ model }) => {
	// For example 7:13 pm
	// https://stackoverflow.com/questions/8888491/how-do-you-display-javascript-datetime-in-12-hour-am-pm-format
	const date = new Date();
	let hours = date.getHours();
	const minutes = date.getMinutes().toString().padStart(2, '0');
	const amOrPm = hours >= 12 ? 'pm' : 'am';
	hours = hours % 12;
	hours = hours ? hours : 12; // the hour '0' should be '12'
	const strTime = hours + ':' + minutes + ' ' + amOrPm;
	insertContent(model, strTime);
	},
	},
	],
	},
	{
	name: 'Database',
	items: [
	{
	name: 'Table View',
	alias: ['database'],
	icon: DatabaseTableViewIcon20,
	showWhen: model => {
	if (!model.page.schema.flavourSchemaMap.has('affine:database')) {
	return false;
	}
	if (insideDatabase(model)) {
	// You can't add a database block inside another database block
	return false;
	}
	return true;
	},
	action: withRemoveEmptyLine(async ({ pageElement, model }) => {
	const parent = pageElement.page.getParent(model);
	assertExists(parent);
	const index = parent.children.indexOf(model);
	const id = pageElement.page.addBlock(
	'affine:database',
	{},
	pageElement.page.getParent(model),
	index + 1
	);
	const service = await getServiceOrRegister('affine:database');
	service.initDatabaseBlock(
	pageElement.page,
	model,
	id,
	'table',
	false
	);
	}),
	},
	{
	name: 'Kanban View',
	alias: ['database'],
	disabled: false,
	icon: DatabaseKanbanViewIcon20,
	showWhen: model => {
	if (!model.page.schema.flavourSchemaMap.has('affine:database')) {
	return false;
	}
	if (insideDatabase(model)) {
	// You can't add a database block inside another database block
	return false;
	}
	return true;
	},
	action: withRemoveEmptyLine(async ({ model, pageElement }) => {
	const parent = pageElement.page.getParent(model);
	assertExists(parent);
	const index = parent.children.indexOf(model);
	const id = pageElement.page.addBlock(
	'affine:database',
	{},
	pageElement.page.getParent(model),
	index + 1
	);
	const service = await getServiceOrRegister('affine:database');
	service.initDatabaseBlock(
	pageElement.page,
	model,
	id,
	'kanban',
	false
	);
	}),
	},
	],
	},
	{
	name: 'Frames',
	items: options => {
	const frameModels = options.pageElement.page.getBlockByFlavour(
	'affine:frame'
	) as FrameBlockModel[];
	return frameModels.map(frameModel => {
	return {
	name: 'Frame: ' + frameModel.title,
	icon: FrameIcon,
	action: async ({ pageElement, model }) => {
	const { page } = pageElement;
	const noteModel = page.getParent(model) as NoteBlockModel;
	const insertIdx = noteModel.children.indexOf(model);
	const surfaceRefProps = {
	flavour: 'affine:surface-ref',
	reference: frameModel.id,
	refFlavour: 'affine:frame',
	};
	page.addSiblingBlocks(
	model,
	[surfaceRefProps],
	insertIdx === 0 ? 'before' : 'after'
	);
	if (
	matchFlavours(model, ['affine:paragraph']) &&
	model.text.length === 0
	) {
	page.deleteBlock(model);
	}
	},
	};
	});
	},
	},
	{
	name: 'Group',
	items: options => {
	const surfaceModel = (
	options.pageElement.page.getBlockByFlavour(
	'affine:surface'
	) as SurfaceBlockModel[]
	)[0];
	if (!surfaceModel) return [];
	const groupElements = (<Array<Y.Map<string>>>(
	Array.from(surfaceModel.elements.getValue()?.values() ?? [])
	)).filter(element => element.get('type') === CanvasElementType.GROUP);
	return (
	groupElements.map(element => {
	return {
	name: 'Group: ' + element.get('title'),
	icon: GroupingIcon,
	action: async ({ pageElement, model }) => {
	const { page } = pageElement;
	const noteModel = page.getParent(model) as NoteBlockModel;
	const insertIdx = noteModel.children.indexOf(model);
	const surfaceRefProps = {
	flavour: 'affine:surface-ref',
	reference: element.get('id'),
	refFlavour: 'group',
	};
	page.addSiblingBlocks(
	model,
	[surfaceRefProps],
	insertIdx === 0 ? 'before' : 'after'
	);
	if (
	matchFlavours(model, ['affine:paragraph']) &&
	model.text.length === 0
	) {
	page.deleteBlock(model);
	}
	},
	};
	}) ?? []
	);
	},
	},
	{
	name: 'Actions',
	items: [
	{
	name: 'Move Up',
	icon: ArrowUpBigIcon,
	action: async ({ pageElement, model }) => {
	const page = pageElement.page;
	const previousSiblingModel = page.getPreviousSibling(model);
	if (!previousSiblingModel) return;
	const parentModel = page.getParent(previousSiblingModel);
	if (!parentModel) return;
	page.moveBlocks([model], parentModel, previousSiblingModel, true);
	},
	},
	{
	name: 'Move Down',
	icon: ArrowDownBigIcon,
	action: async ({ pageElement, model }) => {
	const page = pageElement.page;
	const nextSiblingModel = page.getNextSibling(model);
	if (!nextSiblingModel) return;
	const parentModel = page.getParent(nextSiblingModel);
	if (!parentModel) return;
	page.moveBlocks([model], parentModel, nextSiblingModel, false);
	},
	},
	{
	name: 'Copy',
	icon: CopyIcon,
	action: async ({ model }) => {
	const curRange = getCurrentNativeRange();
	await copyBlock(model);
	resetNativeSelection(curRange);
	toast('Copied to clipboard');
	},
	},
	// {
	// name: 'Paste',
	// icon: PasteIcon,
	// action: async ({ model }) => {
	// const copiedText = await navigator.clipboard.readText();
	// console.log('copiedText', copiedText);
	// insertContent(model, copiedText);
	// },
	// },
	{
	name: 'Duplicate',
	icon: DuplicateIcon,
	action: ({ pageElement, model }) => {
	if (!model.text || !(model.text instanceof Text)) {
	throw new Error("Can't duplicate a block without text");
	}
	const parent = pageElement.page.getParent(model);
	if (!parent) {
	throw new Error('Failed to duplicate block! Parent not found');
	}
	const index = parent.children.indexOf(model);
	// TODO add clone model util
	pageElement.page.addBlock(
	model.flavour,
	{
	type: (model as ParagraphBlockModel).type,
	text: pageElement.page.Text.fromDelta(model.text.toDelta()),
	// @ts-expect-error
	checked: model.checked,
	},
	pageElement.page.getParent(model),
	index
	);
	},
	},
	{
	name: 'Delete',
	alias: ['remove'],
	icon: DeleteIcon,
	action: ({ pageElement, model }) => {
	pageElement.page.deleteBlock(model);
	},
	},
	],
	},
	];

[TBenTiCon]

Didnt even think about that :0
This works flawlessly, thank you so much =D

Im still getting this two errors though, no idea why. Everything works as aspected:

+page.svelte:21 Error: Invalid schema for affine:paragraph: Hub/Content must have parent.
    at Schema.validate (schema.ts:81:13)
    at Page.addBlock (page.ts:333:17)
    at +page.svelte:34:18
    at slot.ts:106:9
    at Array.forEach (<anonymous>)
    at _Slot.emit (slot.ts:104:21)
    at Page._handleYBlockAdd (page.ts:737:29)
    at page.ts:762:16
    at Map.forEach (<anonymous>)
    at Page._handleYEvent (page.ts:760:18)

+page.svelte:22 Error: Length exceeded!
    at create3 (error.js:12:28)
    at lengthExceeded (AbstractType.js:686:36)
    at typeListInsertGenerics (AbstractType.js:699:11)
    at YArray.js:145:9
    at transact (Transaction.js:425:14)
    at _YArray.insert (YArray.js:144:7)
    at page.ts:362:19
    at transact (Transaction.js:425:14)
    at _Doc.transact (Doc.js:167:12)
    at Page.transact (space.ts:115:21)

"+page.svelte:21-22" would be:

20: const pageBlockId = page.addBlock('affine:page', {text: new Text("my page")});
21: noteId = page.addBlock('affine:note', {}, pageBlockId);
22: page.addBlock('affine:surface', {}, pageBlockId);
23: page.addBlock('affine:paragraph', {text: new Text("my Paragraph")}, noteId);
24: page.addBlock('my-block',{}, noteId)

"+page.svelte:34" would be:

29: if(e.type == "add" && e.flavour !== "affine:paragraph"){
30:      const addedBlock = page.getBlockById(e.id);
31:       const parent = page.getParent(addedBlock); 
32:      const index = parent.children.indexOf(addedBlock);
33:
34:      page.addBlock('affine:paragraph',{}, noteId, index + 1);
}

according to the Documentation, this should be correct.
"page.addBlock('affine:paragraph',{}, noteId, index + 1);" => doesnt it have a parent, being the note block?

[TBenTiCon]

Theres also a Problem with "renderModelChildren", that is implemented in the BlockElement. Even though my BlockView extens Blockelement, i cant access this.renderModelChildren. Any idea, what im doing wrong?

export class MyBlockView extends BlockElement<MyBlockModel> {
	private _yen = '0¥';

	private _onClick = () => {
		this.page.updateBlock(this.model, {
			count: this.model.count + 1
		});
	};
	override connectedCallback() {
		super.connectedCallback();

		this.model.propsUpdated.on(() => {
			this._yen = `${this.model.count * 100}¥`;
		});
	}
	override render() {
		return html`
			<div class="">
				<div>
					<h3>My Block</h3>
					<p>Price: ${this._yen}</p>
					<button @click=${this._onClick}>Add</button>
				</div>
				<div>${this.renderModelChildren(this.model)}</div>
			</div>
		`;
	}
}

[TBenTiCon]

Manged to find the error: this.renderModelChildren seems to be the new way, and is not yet pushed to release? My NPM pacakge still uses ${this.content}

[MentalGear]

I'm also interested in getting this to work with svelte. Could you maybe give an outline of your setup, or is there now an official guide for this?

[TBenTiCon]

Im planning on rewriting the view/Ui in svelte and using blocksuite headless, as soon as the documentation is a bit more streamlined.

What I'm doing currently is using the slot/event system to communicate between my svelte setup and the "default" Lit interface.

So for the entire Editor part, I'm using lit, and lit components (as laid out in the docs). Whenever something happens, that needs to work with my svelte app (like assigning a user, to a todo), I fire an event that then triggers a svelte function (ex. show user select popUp).

[MentalGear]

Thx for the info! Yeah slot/events/attr was also my idea for connecting with svelte.
Did you encounter any problems with this setup, or is it just not flexible enough that you consider rolling your own editor components?

If you get to implementing a headless version with svelte, let me know if you're going to make it a package. :)

On a somewhat related note, (as I'm also new to Yjs), do you know of good resources on how to handle auth in Yjs?

[TBenTiCon]

We did not really encounter any Problem. We just want to switch to Svelte, so everything is unified, and we can use our component libraries for the Editor. At the same time, writing it from 0, gives us more control overall.

Y.js authentication could be done via websocket. We personally dont handle it ourselfs and use liveblocks "https://liveblocks.io/" for the Collaboration. They have there own auth handlers, in which you can dock you custom authentication logic.

If we write something on our own, i will send you a msg =)

[MentalGear]

Sure, you can also write it here for others to get the info :)