Настройка боковой панели

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

Для этого можно воспользоваться соответствующим методом API редактора, настроив нужные параметры.

Возможности боковой панели

• Создание вкладок: Боковая панель поддерживает создание собственных вкладок, позволяющих организовывать контент и функционал.
• Динамическое обновление: Панель может обновляться динамически в зависимости от состояния документа или действий пользователя.
• Интеграция компонентов: Возможность интеграции интерактивных компонентов (полей ввода, кнопок, текстовых блоков) для взаимодействия с редактором.

Создание вкладки

Следующий фрагмент демонстрирует, как создать новую боковую вкладку:

function registerSidebarPanel() {
    editorApi.ui.sidebar.addTab({
        id: 'plugin1:ribbon:settings',          // Уникальный идентификатор вкладки
        title: 'Настройки',                      // Заголовок вкладки
        resizable: true,                         // Возможность изменять ширину вручную
        icon: 'Settings',                        // Имя иконки для представления вкладки
    });
}

Создание контента вкладки

Для наполнения содержимого боковой вкладки используются разнообразные компоненты UI, предоставляемые API редактора.

Эти компоненты позволяют структурировать контент и обеспечивать взаимодействие с пользователем.

Основные типы компонентов, доступные для использования

• Обычные текстовые блоки: Простое статичное текстовое содержимое.
• HTML-размеченный текст: Блоки текста с поддержкой HTML-разметки для форматирования.
• Поля ввода: Компоненты для взаимодействия с пользователем, позволяющие вводить текст или выбирать опции.
• Кнопки: Элементы для инициирования определенных действий.

Ориентация блоков внутри вкладки

При проектировании структуры вкладки вы можете определить ориентацию элементов, выбирая горизонтальное или вертикальное расположение. Это особенно актуально для оптимизации пространства и повышения удобочитаемости интерфейса.

Пример настройки расположения текстовых блоков вертикально:

function getSettingsPanelContent() {
    return [
        {
            type: 'controls',              // Контейнер для элементов
            orientation: 'vertical',       // Расположение элементов сверху вниз
            items: [
                {
                    id: 'demo-plugin:sidebar:textblock1',
                    type: 'textblock',     // Обычный текстовый блок
                    content: 'Простой текстовый блок',
                },
                {
                    id: 'demo-plugin:sidebar:textblock2',
                    type: 'textblock',     // HTML-текстовый блок
                    content: '<h2>Форматированный HTML-текст</h2><p>Можно применять стили.</p>',
                    contentType: 'html',   // Уточняет, что контент форматирован HTML
                    styles: {              // CSS-стили для оформления
                        padding: 10,
                        height: 300,
                        border: '2px solid lightgrey',
                        borderRadius: 4,
                        backgroundColor: 'lightcyan',
                        overflow: 'auto',
                    },
                },
            ],
        },
    ];
}

function registerSidebarPanel() {
    editorApi.ui.sidebar.addTab({
        id: 'plugin1:ribbon:settings',      // Уникальный идентификатор вкладки
        title: 'Настройки',                 // Заголовок вкладки
        icon: 'Settings',                   // Имя иконки
        content: getSettingsPanelContent(), // Заполнение вкладки элементами
    });
}

Использование поля ввода

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

Рассмотрим подробнее реализацию поля ввода с обработчиками событий на примере использования редактора API. Пример создания поля ввода:

function getSettingsPanelContent() {
    // Функция обратного вызова для отслеживания изменений
    const onInput = editorApi.createCallback(
        (value) => console.log(`Пользователь ввёл: ${value}`)
    );
    
    // Обработчик события нажатия клавиши Enter
    const onEnter = editorApi.createCallback(
        () => console.log('Нажали клавишу Enter')
    );

    return [
        {
            type: 'controls',           // Контейнер для элементов
            items: [
                {
                    id: 'demo-plugin:sidebar:input', // Уникальный идентификатор поля
                    type: 'input',                   // Тип компонента — поле ввода
                    title: 'Введите команду',        // Надпись над полем
                    placeholder: 'Введите команду и нажмите Enter', // Вспомогательная подсказка
                    onInput,                         // Функция обработки изменения текста
                    onEnter: doSend,                 // Функция обработки нажатия Enter
                },
            ],
        },
    ];
}

Изменение внешнего вида кнопки

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

Интерфейсы API предоставляют широкий спектр возможностей для кастомизации кнопок, включая удаление подписей, управление состоянием активности и преобразование в гиперссылки.

Пример использования кнопки без надписи и с проверкой состояния активности (disabled):

function getSettingsPanelContent() {
    let currentInputValue = ''; // Текущее состояние ввода пользователя

    const doSend = () => {
        console.log('Данные отправлены!');
    };

    return [
        {
            type: 'controls', // Контейнер для элементов
            items: [
                {
                    id: 'demo-plugin:sidebar:button:send', // Уникальный идентификатор кнопки
                    type: 'button',                        // Тип элемента — кнопка
                    variant: 'primary',                    // Внешний вид кнопки («первичный» вариант)
                    title: 'Отправить',                    // Скрытая подпись для всплывающего окна
                    icon: 'Sent',                          // Иконка рядом с кнопкой
                    disabled: !currentInputValue,          // Доступность кнопки зависит от текущего ввода
                    onlyIcon: true,                        // Отображать только иконку без текста
                    onClick: doSend,                       // Функционал кнопки при нажатии
                },
            ],
        },
    ];
}