@for (menu of menus; track menu) {
  <sky-toolbar-item
    class="sky-text-editor-menu"
    [ngClass]="'sky-text-editor-menu-' + menu"
  >
    @switch (menu) {
      @case ('edit') {
        <sky-dropdown
          label="Edit menu"
          [disabled]="disabled"
          [messageStream]="editDropdownStream"
        >
          <sky-dropdown-button>
            {{
              'skyux_text_editor_menubar_dropdown_button_edit_label'
                | skyLibResources
            }}
          </sky-dropdown-button>
          <sky-dropdown-menu>
            @for (editItem of editItems; track editItem) {
              <sky-dropdown-item>
                @if (!editItem.isDivider) {
                  <button type="button" (click)="editItem?.function()">
                    {{ editItem.label }}
                    @if (editItem.keyShortcut) {
                      <div
                        class="sky-text-editor-menu-key-shortcut"
                        [skyThemeClass]="{
                          'sky-font-deemphasized': 'modern',
                          'sky-deemphasized': 'default'
                        }"
                      >
                        {{ editItem.keyShortcut }}
                      </div>
                    }
                  </button>
                } @else {
                  <div
                    class="sky-text-editor-dropdown-item-divider"
                    role="divider"
                  ></div>
                }
              </sky-dropdown-item>
            }
          </sky-dropdown-menu>
        </sky-dropdown>
      }
      @case ('format') {
        <sky-dropdown
          label="Format menu"
          [disabled]="disabled"
          [messageStream]="formatDropdownStream"
        >
          <sky-dropdown-button>
            {{
              'skyux_text_editor_menubar_dropdown_button_format_label'
                | skyLibResources
            }}
          </sky-dropdown-button>
          <sky-dropdown-menu>
            @for (formatItem of formatItems; track formatItem) {
              <sky-dropdown-item>
                @if (!formatItem.isDivider) {
                  <button type="button" (click)="formatItem?.function()">
                    {{ formatItem.label }}
                    @if (formatItem.keyShortcut) {
                      <div
                        class="sky-text-editor-menu-key-shortcut"
                        [skyThemeClass]="{
                          'sky-font-deemphasized': 'modern',
                          'sky-deemphasized': 'default'
                        }"
                      >
                        {{ formatItem.keyShortcut }}
                      </div>
                    }
                  </button>
                } @else {
                  <div
                    class="sky-text-editor-dropdown-item-divider"
                    role="divider"
                  ></div>
                }
              </sky-dropdown-item>
            }
          </sky-dropdown-menu>
        </sky-dropdown>
      }
      @case ('merge-field') {
        @if (mergeFields && mergeFields.length > 0) {
          <sky-dropdown
            label="Insert merge field"
            [disabled]="disabled"
            [messageStream]="mergeFieldDropdownStream"
          >
            <sky-dropdown-button>
              {{
                'skyux_text_editor_menubar_dropdown_button_insert_label'
                  | skyLibResources
              }}
            </sky-dropdown-button>
            <sky-dropdown-menu>
              @for (mergeField of mergeFields; track mergeField) {
                <sky-dropdown-item>
                  <button type="button" (click)="insertMergeField(mergeField)">
                    {{ mergeField.name }}
                  </button>
                </sky-dropdown-item>
              }
            </sky-dropdown-menu>
          </sky-dropdown>
        }
      }
    }
  </sky-toolbar-item>
}