Repository: toeverything/AFFiNE
File: blocksuite/affine/blocks/root/src/configs/toolbar.ts (TypeScript)

Code before:
          textAlign ===
          getMostCommonValue(
            selectedModels.map(
              ({ props }) => props as { textAlign?: TextAlign }
            ),
            'textAlign'
          )
      ) ?? textAlignConfigs[0];
    const update = (textAlign: TextAlign) => {
      chain
        .pipe((ctx, next) => {
          selectedModels.forEach(model => {
            ctx.std.host.doc.updateBlock(model, { textAlign });
          });
          return next();
        })
        .run();
    };

    return {
      content: html`
        <editor-menu-button
          .contentPadding="${'8px'}"
          .button=${html`
            <editor-icon-button aria-label="Align" .tooltip="${'Align'}">
              ${alignment.icon} ${ArrowDownSmallIcon()}
            </editor-icon-button>
          `}
        >
          <div data-size="large" data-orientation="vertical">
            ${repeat(
              textAlignConfigs,
              item => item.name,
              ({ textAlign, name, icon }) => html`
                <editor-menu-action
                  aria-label=${name}
                  ?data-selected=${alignment.textAlign === textAlign}
                  @click=${() => update(textAlign)}
                >
                  ${icon}<span class="label">${name}</span>
                </editor-menu-action>
              `
            )}
          </div>
        </editor-menu-button>
      `,
    };
  },
} as const satisfies ToolbarActionGenerator;

const inlineTextActionGroup = {

Review comment (suggestion):
use `EditorChevronDown` instead of `ArrowDownSmallIcon`

https://github.com/toeverything/AFFiNE/pull/11803/files

Code after:
  when: ({ chain }) => isFormatSupported(chain).run()[0],
  generate({ chain }) {
    const [ok, { selectedModels = [] }] = chain
      .tryAll(chain => [
        chain.pipe(getTextSelectionCommand),
        chain.pipe(getBlockSelectionsCommand),
      ])
      .pipe(getSelectedModelsCommand, { types: ['text', 'block'] })
      .run();
    if (!ok) return null;

    const alignment =
      textAlignConfigs.find(
        ({ textAlign }) =>
          textAlign ===
          getMostCommonValue(
            selectedModels.map(
              ({ props }) => props as { textAlign?: TextAlign }
            ),
            'textAlign'
          )
      ) ?? textAlignConfigs[0];
    const update = (textAlign: TextAlign) => {
      chain.pipe(updateBlockAlign, { textAlign }).run();
    };

    return {
      content: html`
        <editor-menu-button
          .contentPadding="${'8px'}"
          .button=${html`
            <editor-icon-button aria-label="Align" .tooltip="${'Align'}">
              ${alignment.icon} ${EditorChevronDown}
            </editor-icon-button>
          `}
        >
          <div data-size="large" data-orientation="vertical">
            ${repeat(
              textAlignConfigs,
              item => item.name,
              ({ textAlign, name, icon }) => html`
                <editor-menu-action
                  aria-label=${name}
                  @click=${() => update(textAlign)}
                >
                  ${icon}<span class="label">${name}</span>
                </editor-menu-action>
              `
            )}
          </div>
        </editor-menu-button>