React-компоненты BlockBuilder и их API
BlockBuilderComponentОсновной компонент для работы с BlockBuilder в React. Готовый UI: список блоков, формы создания и редактирования, смена порядка кнопками, удаление.
configObject, опциональныйКонфигурация BlockBuilder с типами блоков и настройками. По умолчанию { availableBlockTypes: [] }
IBlockType:
blockManagementUseCaseBlockManagementUseCase, обязательныйЭкземпляр use case для управления блоками. Создаётся через createBlockManagementUseCase()
apiSelectUseCaseApiSelectUseCase, опциональныйЭкземпляр use case для работы с полями api-select
customFieldRendererRegistryICustomFieldRendererRegistry, опциональныйРеестр кастомных рендереров полей (type: "custom")
initialBlocksArray, опциональныйМассив начальных блоков для загрузки при инициализации
onSaveFunction, опциональныйФункция обратного вызова для сохранения блоков (например, отправка на сервер)
isEditBoolean, опциональный, по умолчанию: trueРежим редактирования. Если false, все контролы редактирования скрываются, остаётся только пользовательская верстка блоков в обёртке BlockBuilder.
controlsContainerClassString, опциональныйКастомный CSS класс для контейнера контролов (кнопки и статистика)
controlsFixedPosition'top' | 'bottom', опциональныйФиксирует панель управления (кнопки + статистика) сверху или снизу экрана
controlsOffsetNumber, опциональныйОтступ от края в пикселях (по умолчанию 0)
controlsOffsetVarString, опциональныйCSS переменная для учета высоты шапки/футера (например: --header-height)
locale'ru' | 'en', по умолчанию ruВстроенная локализация UI BlockBuilder (кнопки, подписи контролов, confirm-тексты). Подписи полей блоков задаёт приложение.
uiStringsPartial<IUiStrings>, опциональныйТочечные переопределения строк поверх пресета locale.
themeTUiTheme, опциональныйПресет темы UI: default (по умолчанию, если prop не передан) или dark. Переопределение токенов — через themeVars на .bb-app.
themeVarsRecord<--bb-*>, опциональныйПереопределение design tokens (--bb-color-primary, --bb-color-surface, radius, spacing…).
warnOnPageLeaveBoolean, опциональныйНативное предупреждение браузера при уходе со страницы с несохранёнными блоками (beforeunload). Срабатывает только при нативном покидании страницы (закрытие вкладки, перезагрузка, переход по внешней ссылке) — не связано с клиентским роутингом Vue Router / React Router. Для переходов внутри SPA отслеживайте несохранённые изменения самостоятельно (navigation guard, useBlocker, onbeforeunload + router hook — в зависимости от вашего стека).
fields[].rules проверяются автоматически в модалке BlockBuilder — отдельно подключать валидатор не нужно. Если пользователь нажал «Сохранить» с ошибками, сообщения появляются у полей и обновляются при каждом изменении.block-anchor сохраняет якорь (#block-id или URL). Скролл и переход по клику реализуйте в своих компонентах блоков. Для поля file с multiple: true редактор показывает отдельный UI загрузки.onBlockAdded(block: IBlock) => voidСоздан или продублирован блок — в колбек приходит полный объект блока
onBlockUpdated(block: IBlock) => voidОбновлён блок — актуальный объект после изменения props, settings и т.д.
onBlockDeleted(blockId: TBlockId) => voidУдалён блок — только id (строка), не объект
Экспортируются из @mushket-co/block-builder/react:
prepareBlocksForDisplay — восстанавливает render из конфигурации типовenrichBlockForDisplay — обогащение одного блокаseedRepositoryFromBlocks — синхронизация репозитория после гидрацииenableViewportBreakpointDetection — spacing после гидрацииcanRenderVueBlock — можно ли отрендерить блок как Vue-компонентcanRenderReactBlock — можно ли отрендерить блок как React-компонентresolveVueComponentForBlock — резолв Vue-компонента из блока и реестраresolveReactComponentForBlock — резолв React-компонента из блока и реестраgetDefaultBreakpoint — имя брейкпоинта по умолчанию для spacingisClient — true в браузереisServer — true при SSRisViewportBreakpointDetectionEnabled — активно ли определение брейкпоинта по viewportresetViewportBreakpointDetection — сброс состояния определения брейкпоинтаПодробное руководство по SSR — Next.js (SSR).
Каждый тип блока использует ваш React-компонент для рендеринга. Компонент получает prop block с полной информацией о блоке.
При использовании поля type: "image" в компоненте нужно обрабатывать как строку (base64), так и объект (серверная загрузка):
Важно: при использовании uploadUrl (загрузка через сервер API клиента) ответ сервера ОБЯЗАТЕЛЬНО должен быть объектом с полем src, содержащим URL изображения. Если формат ответа отличается, используйте responseMapper для преобразования ответа к виду объекта с вашими полями и обязательным полем src. Подробнее — поля image и file →
block--spacing-padding-top, --spacing-padding-bottom и т.д.)block.propsgetComponentRegistry() до рендера редактораПолный список props типов блоков — в Поля форм. Отступы (margin/padding) — spacing.