How to customize slash menu functionality? #8035
-
I would like to ask how to remove the functions of the slash menu that are not needed (e.g. Todo-list, YouTube embed, etc.). Also, I would like to ask how to disable the functions that are not needed (e.g. Todo-list, etc.). |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
Thanks for reaching out. Here is an example of how to customize the import { PageEditorBlockSpecs } from "@blocksuite/blocks";
import { PageEditor } from "@blocksuite/presets";
import {
AffineFormatBarWidget,
PageEditorBlockSpecs,
} from "@blocksuite/blocks";
const editor = new PageEditor();
editor.pageSpecs = [...PageEditorBlockSpecs].map((spec) => {
if (spec.schema.model.flavour === "affine:page") {
spec = patchPageRootSpec(spec as BlockSpec<"affine:page", PageRootService>);
}
return spec;
});
function patchPageRootSpec(spec: BlockSpec<"affine:page", PageRootService>) {
const setup = spec.setup;
const newSpec: typeof spec = {
...spec,
setup: (slots, disposable) => {
setup?.(slots, disposable);
slots.mounted.once(({ service }) => {
const pageRootService = service as PageRootService;
const onWidgetConnected = slots.widgetConnected.on((view) => {
if (view.component instanceof AffineSlashMenuWidget) {
setupSlashMenuEntry(view.component);
}
});
disposable.add(onWidgetConnected);
});
},
};
return newSpec;
}
function setupSlashMenuEntry(slashMenu: AffineSlashMenuWidget) {
const menu = slashMenu.config.items.slice();
menu.unshift({
name: "Custom menu",
icon: Icon,
action: ({ rootComponent }) => {
// Do something
},
});
slashMenu.config = {
...AffineSlashMenuWidget.DEFAULT_CONFIG,
items: menu,
};
} |
Beta Was this translation helpful? Give feedback.
-
How do you do it, and I would be very grateful if you could answer me? |
Beta Was this translation helpful? Give feedback.
Thanks for reaching out. Here is an example of how to customize the
SlashWidget
. You can find more usage in defaultSlashMenuConfig.