Interface: SidebarApi
API для управления правой боковой панелью редактора.
Позволяет добавлять пользовательские вкладки с содержимым, управлять их видимостью, размером и расположением. Правая панель используется для отображения параметров, информации, результатов операций и других элементов управления, которые не требуют постоянного места на ленте.
Возможности:
- Создание вкладок с произвольным содержимым (текст, кнопки, поля ввода, элементы управления)
- Управление видимостью вкладок (открытие, закрытие)
- Изменение размера вкладок пользователем
- Получение списка всех вкладок
- Удаление добавленных вкладок
Структура панели:
┌─────────────────────┬──────┐
│ │ В.1 │
│ Содержимое │ ─────┤
│ Выбранной │ В.2 │
│ Вкладки │ ─────┤
│ │Ваша │
│ ↔ (возможно │ В. │
│ изменение │ ─────┤
│ ширины) │ │
│ │ │
└─────────────────────┴──────┘
Methods
addTab()
addTab(
tab):void
Регистрирует новую пользовательскую вкладку в правой панели.
Вкладка может содержать текст, элементы управления (кнопки, поля ввода), текстовые блоки и другие компоненты. Содержимое описывается полностью в объекте параметров.
Полная информация о вкладке передаётся в одном объекте: все параметры (идентификатор, название, содержимое, параметры отображения) находятся в одном месте.
Parameters
tab
Полное описание вкладки (тип CustomSidebarTabInfo)
Returns
void
Remarks
Особенности:
- Новые вкладки добавляются в конец списка (порядок не может быть переопределён)
- Позиция закрепления (top/bottom) пока не поддерживается
Типичное использование:
- Параметры надстройки (Settings, Options)
- Информационные панели (Info, Statistics)
- Результаты операций (Output, Results)
- Формы для ввода данных
- Навигация и управление
Example
Простая вкладка с текстом
editorApi.ui.sidebar.addTab({
id: 'plugin:sidebar:info',
title: 'Информация',
icon: 'Info',
content: [
{
type: 'controls',
orientation: 'vertical',
items: [
{
id: 'plugin:text:info',
type: 'textblock',
content: 'Версия надстройки. Все функции активированы.'
}
]
}
]
});
Вкладка с параметрами (кнопки и поля ввода)
editorApi.ui.sidebar.addTab({
id: 'plugin:sidebar:settings',
title: 'Параметры',
icon: 'Settings',
resizable: true,
content: [
{
type: 'controls',
orientation: 'vertical',
items: [
{
id: 'plugin:input:name',
type: 'input',
title: 'Имя',
placeholder: 'Введите имя',
onInput: editorApi.createCallback((value: string) => {
console.log('Имя:', value);
})
},
{
id: 'plugin:button:save',
type: 'button',
title: 'Сохранить',
variant: 'primary',
onClick: editorApi.createCallback(async () => {
editorApi.ui.toasts.showToast({ id, content: 'Параметры сохранены' });
})
}
]
}
],
onOpen: editorApi.createCallback(() => {
console.log('Вкладка параметров открыта');
})
});
Вкладка с разделителями и HTML контентом
editorApi.ui.sidebar.addTab({
id: 'plugin:sidebar:report',
title: 'Отчёт',
icon: 'FileText',
resizable: true,
content: [
{
type: 'controls',
orientation: 'vertical',
items: [
{
id: 'plugin:report:title',
type: 'textblock',
title: 'Результаты анализа',
content: '<h3>Статистика документа</h3>',
contentType: 'html'
}
]
},
'separator',
{
type: 'controls',
orientation: 'vertical',
items: [
{
id: 'plugin:report:stats',
type: 'textblock',
content: `
<ul>
<li>Слов: 1250</li>
<li>Символов: 8450</li>
</ul>
`,
contentType: 'html'
}
]
}
]
});
See
- CustomSidebarTabInfo — структура параметров вкладки
- CustomSidebarContent — типы содержимого
- CustomSidebarControls — элементы управления
- Button — кнопка
- Input — текстовое поле
- TextBlock — текстовый блок
getTabs()
getTabs():
Promise<SidebarTabInfo[]>
Получает список пользовательских вкладок, зарегистрированных в правой панели.
Включает только пользовательские вкладки, добавленные через addTab.
Returns
Promise<SidebarTabInfo[]>
Массив информации о всех не нативных вкладках
Remarks
Информация о каждой вкладке включает:
- id — уникальный идентификатор вкладки
- title — название вкладки (отображается на вкладке)
- order — порядок расположения вкладки
Использование:
- Проверка наличия вкладки перед добавлением
- Анализ текущего состояния панели
- Отладка при разработке надстройки
Example
Получение и анализ вкладок
const tabs = await editorApi.ui.sidebar.getTabs();
console.log('Всего вкладок:', tabs.length);
tabs.forEach(tab => {
console.log(`${tab.title} (id: ${tab.id})`);
});
Проверка наличия вкладки перед добавлением
const tabs = await editorApi.ui.sidebar.getTabs();
const myTabExists = tabs.some(tab => tab.id === 'plugin:sidebar:panel');
if (!myTabExists) {
editorApi.ui.sidebar.addTab({
id: 'plugin:sidebar:panel',
title: 'Моя надстройка',
content: [...]
});
}
See
SidebarTabInfo — структура информации о вкладке
openTab()
openTab(
tabId):void
Открывает (разворачивает) или закрывает (сворачивает) указанную вкладку.
Если вкладка уже открыта - она закроется. Если закрыта - откроется. Остальные вкладки остаются в своём состоянии.
Parameters
tabId
string
Уникальный идентификатор вкладки для открытия/закрытия
Returns
void
Remarks
Поведение:
- Если вкладка закрыта → откроется и станет активной
- Если вкладка открыта → закроется
- Другие вкладки не затрагиваются
- При открытии срабатывает обработчик onOpen (если указан)
Использование:
- Активация панели при определённых действиях
- Показ результатов операции
- Управление видимостью параметров
- Программное переключение между вкладками
Example
Открытие вкладки при клике на кнопку
editorApi.ui.ribbon.addTab({
id: 'plugin:ribbon:tab',
title: 'Моя надстройка',
groups: [
{
id: 'plugin:group:main',
type: 'controls',
controls: [
{
id: 'plugin:button:settings',
title: 'Параметры',
type: 'button',
onClick: editorApi.createCallback(() => {
editorApi.ui.sidebar.openTab('plugin:sidebar:settings');
})
}
]
}
]
});
Показ результатов в панели
const analyzeButton = {
id: 'plugin:button:analyze',
title: 'Анализировать',
type: 'button',
onClick: editorApi.createCallback(async () => {
const result = await analyzeDocument();
// Обновить содержимое результатов
editorApi.ui.updateUiNodes([
{
id: 'plugin:result:text',
updates: {
content: `Анализ завершён: ${result.summary}`
}
}
]);
// Открыть панель с результатами
editorApi.ui.sidebar.openTab('plugin:sidebar:results');
})
};
See
- addTab — для создания вкладки
- removeTabs — для удаления вкладки
removeTabs()
removeTabs(
tabs):void
Удаляет пользовательские вкладки из правой панели.
Вкладка удаляется полностью со всем содержимым.
Parameters
tabs
string[]
Массив идентификаторов вкладок для удаления
Returns
void
Remarks
Ограничения:
- Можно удалять только вкладки, созданные через addTab
- Встроенные вкладки редактора удалить нельзя
Использование:
- Очистка при деактивации надстройки (в onDestroy)
- Удаление временных панелей
- Переинициализация UI надстройки
Example
Удаление одной вкладки
editorApi.ui.sidebar.removeTabs(['plugin:sidebar:settings']);
Удаление нескольких вкладок
editorApi.ui.sidebar.removeTabs([
'plugin:sidebar:settings',
'plugin:sidebar:results'
]);
Удаление при деактивации надстройки
export default {
onInit: (editorApi) => {
editorApi.ui.sidebar.addTab({
id: 'plugin:sidebar:panel',
title: 'Панель',
content: [...]
});
},
onDestroy: (editorApi) => {
editorApi.ui.sidebar.removeTabs(['plugin:sidebar:panel']);
}
}