Interface: TextBlockUpdate

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

Позволяет изменять содержимое и стили отображения текстового блока.

Remarks

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

• content — текстовое или HTML содержимое
• contentType — тип контента ('text' или 'html')
• title — название блока (опционально)
• styles — CSS стили оформления

Нельзя изменять:

• id — идентификатор (уникален)
• type — тип элемента (всегда 'textblock')

Важная информация о стилях: Свойство styles полностью заменяется, а не объединяется с существующим. Это означает:

• Если обновить только fontSize, все остальные стили будут удалены
• Передавайте все нужные стили одновременно
• Используйте предыдущие стили как основу для новых

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

• Обновление результатов анализа
• Вывод логов операций
• Отображение статуса
• Динамическое содержимое и форматирование

Example

Обновление содержимого

editorApi.ui.updateUiNodes([
    {
        id: 'plugin:status:text',
        content: 'Статус: готово'
    }
]);

Обновление стилей (полная замена)

editorApi.ui.updateUiNodes([
    {
        id: 'plugin:info:block',
        content: 'Внимание!',
        contentType: 'text',
        styles: {
            padding: 15,
            backgroundColor: '#fff3cd',  // светло-жёлтый
            border: '1px solid #ffc107',
            borderRadius: 4,
            color: '#856404',  // тёмно-коричневый текст
            fontWeight: 'bold'
        }
    }
]);

Обновление с сохранением предыдущих стилей

// Сначала получить текущее состояние
const currentBlock = {
    content: 'Старое содержимое',
    styles: {
        padding: 10,
        backgroundColor: '#f0f0f0',
        fontSize: 14
    }
};

// Обновить, сохраняя старые стили
editorApi.ui.updateUiNodes([
    {
        id: 'plugin:info:block',
        content: 'Новое содержимое',
        styles: {
            ...currentBlock.styles,  // Сохранить все старые стили
            backgroundColor: '#e8f5e9'  // Изменить только фон
        }
    }
]);

Отображение результатов с HTML

editorApi.ui.updateUiNodes([
    {
        id: 'plugin:results:block',
        content: `
            <h3>Результаты анализа</h3>
            <ul>
                <li>Слов: 1250</li>
                <li>Символов: 8450</li>
                <li>Абзацев: 42</li>
            </ul>
        `,
        contentType: 'html',
        styles: {
            padding: 15,
            fontSize: 12,
            fontFamily: 'monospace',
            backgroundColor: '#f5f5f5',
            border: '1px solid #ddd',
            borderRadius: 4,
            overflow: 'auto',
            maxHeight: 300
        }
    }
]);

See

• TextBlock — структура текстового блока
• 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']);

---

styles?

readonly optional styles: any

Объект с CSS свойствами для применения к элементу.

Remarks

Формат свойств (camelCase):

{
   backgroundColor: '#f0f0f0',  // Правильно (camelCase)
   // background-color: '#f0f0f0'  // Неправильно (kebab-case)

   fontSize: 14,               // Число → 14px
   lineHeight: '1.5',          // Строка → 1.5

   padding: 10,                // Число → 10px
   margin: '5px 10px',         // Строка → 5px 10px

   color: 'red',               // Цвет
   borderRadius: 4             // Число → 4px
}

Example

Изменение фона и текста

{
    id: 'textblock:info',
    content: 'Информационное сообщение',
    styles: {
        backgroundColor: '#fff3cd',   // Светлый жёлтый
        color: '#856404',             // Тёмный коричневый текст
        padding: 15,                  // 15px со всех сторон
        borderRadius: 4,              // Скруглённые углы
        border: '1px solid #ffc107'   // Жёлтая граница
    }
}

Изменение стилей динамически

// Применить стили для ошибки
editorApi.ui.updateUiNodes([{
    id: 'textblock:error',
    content: 'Произошла ошибка!',
    styles: {
        backgroundColor: '#f8d7da',
        color: '#721c24',
        border: '1px solid #f5c6cb'
    }
}]);

// Вернуть нормальные стили
setTimeout(() => {
    editorApi.ui.updateUiNodes([{
        id: 'textblock:error',
        styles: {
            backgroundColor: 'transparent',
            color: 'inherit'
        }
    }]);
}, 3000);

See

React.CSSProperties — полный список поддерживаемых CSS свойств

---

title?

readonly optional title: string

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

Remarks

Требования:

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

Примеры:

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

Советы:

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

Example

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

---

type?

optional type: "textblock"

Маркер типа элемента управления.

Используется для идентификации элемента как текстового блока.

Remarks

• Всегда равен 'textblock' для этого интерфейса
• Используется контейнерами для определения типа элемента
• Позволяет TypeScript правильно типизировать элемент

Default

'textblock'

Example

const block: TextBlock = {
    id: 'plugin:text',
    type: 'textblock',  // Маркер типа
    content: 'Содержимое'
};