How to customize the FormatbarWidget and SlashWidget

[rafaelvalentine]

Hello Team,
Please i am looking to customize the SlashWidget and FormatbarWidget i need to add extra functionality, please any help would be appreciated.

[raintoway]

provide specific requirements

[rafaelvalentine]

i want to adds buttons that open custom dropdowns
and i would at my own custom icons and styles for both the SlashWidget and FormatBarWidget, Thank you

[lawvs]

Thanks for reaching out. Here is an example of how to customize the SlashWidget and FormatbarWidge. You can find more usage in toolbarDefaultConfig and defaultSlashMenuConfig

import { PageEditorBlockSpecs } from "@blocksuite/blocks";
import { PageEditor } from "@blocksuite/presets";
import {
  AffineFormatBarWidget,
  PageEditorBlockSpecs,
  toolbarDefaultConfig,
} 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 onFormatBarConnected = slots.widgetConnected.on((view) => {
          if (view.component instanceof AffineFormatBarWidget) {
            configureFormatBar(view.component);
          }
          if (view.component instanceof AffineSlashMenuWidget) {
            setupSlashMenuEntry(view.component);
          }
        });
        disposable.add(onFormatBarConnected);
      });
    },
  };

  return newSpec;
}

function configureFormatBar(formatBar: AffineFormatBarWidget) {
  toolbarDefaultConfig(formatBar);

  formatBar
  .addTextStyleToggle({
    key: 'bold',
    action: chain => chain.toggleBold().run(),
    icon: Icon
  })
  .addDivider()

  formatBar.addRawConfigItems(
    [
      {
        type: 'custom' as const,
        render(formatBar: AffineFormatBarWidget): TemplateResult | null {
          return html`<button>Custom Button</button>`;
        },
      },
      { type: 'divider' },
    ],
    0
  );
}

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,
  };
}