Interface: CustomModelUpdate

Интерфейс для обновления свойств модального окна (ModalsApi).

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

Remarks

Можно обновлять:

• content — текстовое или HTML содержимое
• contentType — тип контента ('text' или 'html')
• title — название окна
• onButton.title — текст кнопки ОК

Сценарии обновления:

• Реализация окна с прогрессом выполнения операции
• Реализация многошагового мастера (Wizard)

Example

Реализация окна с прогрессом выполнения операции

// Окно с прогрессом выполнения операции
editorApi.ui.modals.showModal({
    id: 'custom-progress-window',
    title: 'Прогресс операции',
    contentType: 'html',
    content: getProgressWindowContent(message),
    okButton: {
        title: 'Прервать',
        onClick: editorApi.createCallback(onTerminate),
    },
});

Обновление окна с актуальным статусом

editorApi.ui.updateUiNodes([
    { id: 'custom-progress-window', content: getProgressWindowContent(message, percentage) },
]);

После завершения операции текст кнопки ОК заменен на "Закрыть"

editorApi.ui.updateUiNodes([{ id: 'custom-progress-window', okButton: { title: `Закрыть` } }]);

Пример реализации строки с прогрессом в виде HTML

const getProgressWindowContent = (msg: string, percentage?: number) => {
    const progressValue = percentage === undefined ? '' : `value="${percentage}"`;

    return `
        <div style="width: 100%">
            <style>
                 progress {
                     border: 1px solid var(--cds-primary-dark);
                     border-radius: 4px;
                     height: 12px;
                     width: 100%;
                 }
                 progress::-webkit-progress-bar {
                     background-color: #eee;
                     border-radius: 4px;
                 }
                 progress::-webkit-progress-value {
                     background-color: var(--cds-primary-dark);
                     border-radius: 4px;
                 }
            </style>
            <p>${msg}</p>
            <progress ${progressValue} max="100"></progress>
        </div>
    `;
}

See

• CustomModal — параметры модального окна
• EditorUiApi.updateUiNodes — метод для применения обновлений

Properties

content?

readonly optional content: string

Содержимое элемента, предназначенное для отображения пользователю.

Remarks

Формат:

• Если contentType = 'plain/text' — обычная строка текста
• Если contentType = 'html' — строка с HTML разметкой

Ограничения:

• Не должна быть пустой (может вызвать проблемы отображения)
• Максимальный размер зависит от браузера (обычно несколько MB)
• HTML содержимое фильтруется в целях безопасности

Example

// Обычный текст
{
    content: 'Это простой текст',
    contentType: 'plain/text'
}

// HTML
{
    content: '<h2>Заголовок</h2><p>Абзац текста</p>',
    contentType: 'html'
}

---

contentType?

readonly optional contentType: UiContentType

Тип содержимого, определяющий как интерпретировать поле content.

Remarks

Значения:

• 'plain/text' — содержимое это обычный текст

  • Все символы отображаются как есть

• 'html' — содержимое это HTML разметка

  • HTML теги интерпретируются и отображаются
  • Небезопасные теги и атрибуты удаляются

Default

'plain/text'

Example

// HTML — теги интерпретируются
{
    content: 'Текст с <strong>жирным</strong> словом',
    contentType: 'html'
}
// Отобразится: "Текст с жирным словом" (жирное)

// Без указания — используется plain/text
{
    content: 'Простое содержимое'
    // Эквивалент: contentType: 'plain/text'
}

See

UiContentType — возможные значения

---

id

readonly id: string

Уникальный идентификатор элемента пользовательского интерфейса.

Remarks

Требования:

• Должен быть уникален среди всех элементов UI редактора
• Не может быть пустой строкой
• Не может содержать спецсимволы (кроме :, -, _)
• Чувствителен к регистру (case-sensitive)

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

• Идентификация элемента при обновлении
• Идентификация элемента при событиях
• Ссылка на элемент в других местах кода

Соглашения:

'plugin:button:save'          // Кнопка надстройки
'plugin:input:username'       // Поле ввода
'plugin:panel:settings'       // Панель параметров
'plugin:group:formatting'     // Группа элементов

Example

// Создание элемента с уникальным id
{
    id: 'plugin:button:submit',
    title: 'Отправить',
    type: 'button'
}

// Использование id для обновления
editorApi.ui.updateUiNodes([
    {
        id: 'plugin:button:submit',
        disabled: false,
    }
]);

// Использование id для удаления
editorApi.ui.ribbon.removeTabs(['plugin:ribbon:tab']);

---

okButton?

readonly optional okButton: ModalButton

Параметры кнопки подтверждения ("ОК").

Позволяет кастомизировать название кнопки и назначить обработчик события.

Remarks

По умолчанию:

• Кнопка обозначена как "ОК"
• Нажатие закрывает окно без дополнительных действий

Кастомизация:

• Передайте объект ModalButton для изменения названия и логики
• Если не указан, используются значения по умолчанию

Example

Стандартная кнопка (используется по умолчанию)

editorApi.ui.modals.showModal({
    id: 'plugin:modal:info',
    title: 'Информация',
    content: 'Готово!'
});
// okButton не указан - окно покажет кнопку "ОК"

Кастомная кнопка с переопределенным названием

editorApi.ui.modals.showModal({
    id: 'plugin:modal:info',
    title: 'Информация',
    content: 'Готово!',
    okButton: {
        title: 'Закрыть'  // Вместо "ОК"
    }
});

Кнопка с обработчиком нажатия

editorApi.ui.modals.showModal({
    id: 'plugin:modal:info',
    title: 'Информация',
    content: 'Готово!',
    okButton: {
        title: 'Понял',
        onClick: editorApi.createCallback(() => {
            console.log('Пользователь нажал кнопку');
        })
    }
});

See

ModalButton — структура параметров кнопки

---

title?

readonly optional title: string

Название/заголовок элемента пользовательского интерфейса.

Remarks

Требования:

• Должен быть локализирован (переведён на язык пользователя)
• Должен быть понятным и кратким
• Не должен быть пустой строкой
• Может содержать спецсимволы (кроме < и >)

Примеры:

• "Сохранить документ"
• "Экспортировать в PDF"
• "Параметры надстройки"
• "Об приложении"

Советы:

• Используйте глаголы для действий (Сохранить, Удалить)
• Используйте существительные для панелей (Параметры, Информация)
• Сохраняйте названия короткими
• Будьте конкретными (не просто "Опции", а "Параметры надстройки")

Example

{
    id: 'button:save',
    title: 'Сохранить',
    type: 'button'
}

---

type

type: "custom-modal"

Определяет тип обновления