feat: add format bar config api

[Saul-Mirone]

Overview

// In root spec:
const defaultSetup = rootSpec.setup;
const mySpec = {
  ...rootSpec,
  setup: (slots, disposableGroup) => {
      defaultSetup(slots, disposableGroup);

      const onFormatBarConnected = slots.widgetConnected.on(view => {
          if (view.component instanceof AffineFormatBarWidget) {
            configureFormatBar(view.component);
          }
      });

      disposableGroup.add(onFormatBarConnected);
  }
}

function configureFormatBar(formatBar: AffineFormatBarWidget) {
  formatBar
    .clearConfig()
    .addParagraphDropdown()
    .addDivider()
    .addTextStyleToggle({
      key: 'bold',
      action: chain => chain.toggleBold().run(),
      icon: BoldIcon,
    })
    .addTextStyleToggle({
      key: 'italic',
      action: chain => chain.toggleItalic().run(),
      icon: ItalicIcon,
    })
    .addDivider()
    .addHighlighterDropdown()
    .addDivider()
    .addBlockTypeSwitch({
      flavour: 'affine:paragraph',
      type: 'h1',
      name: 'Heading 1',
      icon: Heading1Icon,
    })
    .addBlockTypeSwitch({
      flavour: 'affine:paragraph',
      type: 'h2',
      name: 'Heading 2',
      icon: Heading2Icon,
    })
    .addBlockTypeSwitch({
      flavour: 'affine:paragraph',
      type: 'h3',
      name: 'Heading 3',
      icon: Heading3Icon,
    })
}

API

addDivider

Add a divider in format bar, multiple dividers will be merged into one automatically.

addHighlighterDropdown

Add a dropdown button to add color and background color for text.

AddInlineAction

Add an action button in the format bar.

addTextStyleToggle

Add an action button in the format bar the change the style of selected texts, ex. bold, italic, inline code...
This is basically a wrapper of AddInlineAction.

addParagraphDropdown

Add a dropdown button to change the flavour and type of selected blocks.

addParagraphAction

Add a certain action in the paragraph dropdown list.

addRawConfigItems

You can also add a raw config item list if you have your own config builder.

clearConfig

Clear all the config.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 8, 2024 6:11am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
blocksuite-docs	⬜️ Ignored (Inspect)	Visit Preview		Mar 8, 2024 6:11am

[doodlewind]

Looks good! But having an if statement nested into the widgetConnected.on callback feels a bit verbose, is that some rooms for a more elegant API surface?

[Saul-Mirone]

Looks good! But having an if statement nested into the widgetConnected.on callback feels a bit verbose, is that some rooms for a more elegant API surface?

We should build some API to make the spec extending easier. Like mergeConfig in vite or some extension-like APIs.