Перейти к основному содержимому
Версия: Next

Type Alias: ContextMenuItemWithDropdown

ContextMenuItemWithDropdown = BaseContextMenuItem & object

Элемент контекстного меню с вложенным выпадающим списком (каскадное меню).

Представляет собой пункт меню, при наведении или клике на который открывается подменю с дополнительными опциями. Используется для организации связанных действий.

Наследует все свойства от BaseContextMenuItem и добавляет массив вложенных элементов ContextMenuItemWithDropdown.items.

Type declaration​

items​

items: ContextMenuItem[]

Массив вложенных элементов второго уровня (подменю).

Содержит элементы, которые будут отображены в выпадающем подменю при наведении или клике на родительский пункт.

Remarks​

Допустимые типы вложенных элементов:

Порядок элементов:

  • Элементы отображаются в том же порядке, что и в массиве
  • Порядок можно изменять, переупорядочивая элементы в items
  • Пункты с одинаковым groupingId автоматически группируются

Наследование условий видимости:

  • Если родительский пункт скрыт (shownInScopes не совпадает), то и подменю скрыто
  • Если родительский пункт отключен (disabledInScopes совпадает), то и подменю недоступно
  • Вложенные элементы могут иметь свои shownInScopes и disabledInScopes

Example​

Простой массив подменю

const dropdown: ContextMenuItemWithDropdown = {
    id: 'plugin:export',
    title: 'Экспортировать',
    items: [
        {
            id: 'plugin:export-pdf',
            title: 'PDF',
            onClick: editorApi.createCallback(() => {})
        },
        {
            id: 'plugin:export-html',
            title: 'HTML',
            onClick: editorApi.createCallback(() => {})
        }
    ]
};

See​

Remarks​

Иерархия типов:

ContextMenuItemWithDropdown (текущий тип)
  └── extends BaseContextMenuItem
  │   ├── extends BaseControl
  │   │   ├── id: string (обязательно)
  │   │   ├── title: string (обязательно)
  │   │   └── ...
  │   └── extends MayHaveIcon
  │       └── icon?: string (опционально)
  └── items: ContextMenuItem[] (обязательно)

Ключевые отличия от других типов:

  • SimpleContextMenuItem — простой пункт без подменю
  • ContextMenuItemWithDropdown — пункт с выпадающим подменю (текущий)

Структура вложенного подменю:

  • Может содержать SimpleContextMenuItem (обычные пункты)
  • Может содержать ContextMenuItemWithDropdown (вложенные подменю)
  • Максимум вложенности: 1 уровень

Когда использовать ContextMenuItemWithDropdown:

  • Для группировки связанных действий (Экспорт, Трансформация, Анализ)
  • Когда действий много и нужна хорошая организация
  • Когда нужна структура "Действие → Способ/Тип"

Поведение при отображении:

  • Пункт отображается с указателем (стрелка) обозначающим наличие подменю
  • При наведении мышки или клике открывается подменю
  • Подменю закрывается при клике вне меню
  • На мобильных устройствах: требуется клик для открытия подменю

Рекомендации дизайна:

  • Максимум 5-7 пунктов в подменю
  • Используйте понятные названия категорий
  • Используйте группировку логически связанных пунктов подменю
  • Добавляйте иконки для быстрого распознавания

Example​

Выпадающее меню "Экспортировать" с тремя пунктами

const exportMenu: ContextMenuItemWithDropdown = {
    id: 'plugin:export',
    title: 'Экспортировать',
    icon: 'Download',
    items: [
        {
            id: 'plugin:export-pdf',
            title: 'Экспортировать в PDF',
            onClick: editorApi.createCallback(async () => {
                editorApi.ui.toasts.showToast({ id, content: 'Экспорт в PDF...' });
                // экспорт в PDF
            })
        },
        {
            id: 'plugin:export-html',
            title: 'Экспортировать в HTML',
            onClick: editorApi.createCallback(async () => {
                editorApi.ui.toasts.showToast({ id, content: 'Экспорт в HTML...' });
                // экспорт в HTML
            })
        },
        {
            id: 'plugin:export-markdown',
            title: 'Экспортировать в Markdown',
            onClick: editorApi.createCallback(async () => {
                editorApi.ui.toasts.showToast({ id, content: 'Экспорт в Markdown...' });
                // экспорт в Markdown
            })
        }
    ]
};

editorApi.ui.contextMenu.addItems([exportMenu]);

Выпадающее меню с условной видимостью

const conditionalMenu: ContextMenuItemWithDropdown = {
    id: 'plugin:text-transform',
    title: 'Трансформировать текст',
    icon: 'TextTransform',
    shownInScopes: [
        { scope: 'text' },
        { scope: 'selection' }
    ],
    items: [ /* пункты подменю */ ]
};

Выпадающее меню, недоступное внутри таблиц

const conditionalMenu: ContextMenuItemWithDropdown = {
    id: 'plugin:text-transform',
    title: 'Трансформировать текст',
    icon: 'TextTransform',
    disabledInScopes: [
        { scope: 'table' },
        { parentScope: 'table' }
    ],
    items: [ /* пункты подменю */ ]
};

See​