Структуры данных блоков

Модуль 0.133.0 · редакция документации 1.3 · сверка 28.09.2026.

Здесь описаны поля блоков, допустимые значения и примеры их заполнения. Выберите TypeScript или JavaScript + JSDoc: обе вкладки описывают одинаковые данные. Доступ к исходникам редактора и установка Zod не нужны.

Имена с окончанием Input введены в этом справочнике для удобства. Объявления можно скопировать в свой проект; импортировать их из бандла редактора не нужно. ? в TypeScript и квадратные скобки в JSDoc обозначают необязательное поле. Значения по умолчанию и ограничения указаны в комментариях. Сами объявления типов не проверяют данные во время выполнения.

Примеры показывают параметры блока, а не целый сохранённый документ и не готовый запрос Agent API. У изображения параметры обёрнуты в imageData, у видео — в videoData, у кнопки — в buttonData и linkData. Для операций через Agent API используйте формат запросов и ответов и доступные возможности из capabilities. Формат узлов расширений разобран отдельно в конце страницы.

Общие настройки изображения и видео

Эти два объявления используются в следующих разделах. Например, { enabled: true, ratio: 1 } задаёт квадрат, а { enabled: true, ratio: 16 / 9 } — широкоформатную рамку. Настройка { enabled: true, gallery: "offices" } объединяет увеличиваемые изображения в одну галерею.

TypeScriptJavaScript + JSDoc

TypeScript

/** Фиксация пропорций изображения или видео. */
interface AspectRatioInput {
    /** Включить фиксированные пропорции. По умолчанию false. */
    enabled?: boolean;

    /** Отношение ширины к высоте: от 0.01 до 100. Для изображения по умолчанию 1, для видео — 16 / 9. */
    ratio?: number;
}

/** Увеличение изображения по нажатию. */
interface LightboxInput {
    /** Включить просмотр увеличенного изображения. По умолчанию false. */
    enabled?: boolean;

    /** Имя общей галереи. По умолчанию пустая строка. */
    gallery?: string;
}

JavaScript

/**
 * Фиксация пропорций изображения или видео.
 * @typedef {Object} AspectRatioInput
 * @property {boolean} [enabled] Включить фиксированные пропорции. По умолчанию false.
 * @property {number} [ratio] Отношение ширины к высоте: от 0.01 до 100. Для изображения по умолчанию 1, для видео — 16 / 9.
 */

/**
 * Увеличение изображения по нажатию.
 * @typedef {Object} LightboxInput
 * @property {boolean} [enabled] Включить просмотр увеличенного изображения. По умолчанию false.
 * @property {string} [gallery] Имя общей галереи. По умолчанию пустая строка.
 */

Изображение — `image`

TypeScriptJavaScript + JSDoc

TypeScript

/** Параметры изображения до заполнения значений по умолчанию. */
interface ImageDataInput {
    /** Непустой допустимый URL изображения, например /upload/photo.jpg. */
    src: string;

    /** Текстовое описание изображения. По умолчанию пустая строка. */
    altText?: string;

    /** Ширина: CSS-размер или число. По умолчанию "inherit". */
    width?: string | number;

    /** Высота: CSS-размер или число. По умолчанию "inherit". */
    height?: string | number;

    /** Способ заполнения рамки. Можно не задавать. */
    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';

    /** Положение изображения в рамке. Можно не задавать. */
    objectPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';

    /** Фиксация пропорций; без настройки выключена. */
    stableAspectRatio?: AspectRatioInput;

    /** Просмотр увеличенного изображения; без настройки выключен. */
    lightbox?: LightboxInput;
}

/** Объект параметров блока изображения. */
interface ImageNodeInput {
    /** Настройки изображения. */
    imageData: ImageDataInput;
}

JavaScript

/**
 * Параметры изображения до заполнения значений по умолчанию.
 * @typedef {Object} ImageDataInput
 * @property {string} src Непустой допустимый URL изображения, например /upload/photo.jpg.
 * @property {string} [altText] Текстовое описание изображения. По умолчанию пустая строка.
 * @property {string | number} [width] Ширина: CSS-размер или число. По умолчанию "inherit".
 * @property {string | number} [height] Высота: CSS-размер или число. По умолчанию "inherit".
 * @property {'fill' | 'contain' | 'cover' | 'none' | 'scale-down'} [objectFit] Способ заполнения рамки. Можно не задавать.
 * @property {'center' | 'top' | 'bottom' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right'} [objectPosition] Положение изображения в рамке. Можно не задавать.
 * @property {AspectRatioInput} [stableAspectRatio] Фиксация пропорций; без настройки выключена.
 * @property {LightboxInput} [lightbox] Просмотр увеличенного изображения; без настройки выключен.
 */

/**
 * Объект параметров блока изображения.
 * @typedef {Object} ImageNodeInput
 * @property {ImageDataInput} imageData Настройки изображения.
 */

Примеры

Изображение по ширине блока. Высота подбирается автоматически; contain сохраняет изображение целиком.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example1: ImageNodeInput = {
    "imageData": {
        "src": "/upload/company/office.jpg",
        "altText": "Вход в офис компании",
        "width": "100%",
        "height": "auto",
        "objectFit": "contain"
    }
};

JavaScript

// Пример параметров блока.
/** @type {ImageNodeInput} */
const example1 = {
    "imageData": {
        "src": "/upload/company/office.jpg",
        "altText": "Вход в офис компании",
        "width": "100%",
        "height": "auto",
        "objectFit": "contain"
    }
};

Квадратная карточка с обрезкой краёв. В отличие от первого примера включены фиксированные пропорции и увеличение по нажатию.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example2: ImageNodeInput = {
    "imageData": {
        "src": "/upload/company/office.jpg",
        "altText": "Вход в офис компании",
        "width": "100%",
        "height": "auto",
        "objectFit": "cover",
        "objectPosition": "center",
        "stableAspectRatio": {
            "enabled": true,
            "ratio": 1
        },
        "lightbox": {
            "enabled": true,
            "gallery": "offices"
        }
    }
};

JavaScript

// Пример параметров блока.
/** @type {ImageNodeInput} */
const example2 = {
    "imageData": {
        "src": "/upload/company/office.jpg",
        "altText": "Вход в офис компании",
        "width": "100%",
        "height": "auto",
        "objectFit": "cover",
        "objectPosition": "center",
        "stableAspectRatio": {
            "enabled": true,
            "ratio": 1
        },
        "lightbox": {
            "enabled": true,
            "gallery": "offices"
        }
    }
};

Видео — `video`

TypeScriptJavaScript + JSDoc

TypeScript

/** Параметры видеозаписи до заполнения значений по умолчанию. */
interface VideoDataInput {
    /** Непустой допустимый URL видео, например /upload/video.mp4. */
    src: string;

    /** URL заставки. По умолчанию пустая строка. */
    poster?: string;

    /** CSS-размер или число пикселей. По умолчанию "100%". */
    width?: string | number;

    /** CSS-размер или число пикселей. По умолчанию "auto". */
    height?: string | number;

    /** Способ заполнения рамки. По умолчанию "contain". */
    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';

    /** Положение видео в рамке. По умолчанию "center". */
    objectPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';

    /** Фиксация пропорций; без настройки выключена, отношение 16 / 9. */
    stableAspectRatio?: AspectRatioInput;

    /** Показывать управление воспроизведением. По умолчанию true. */
    controls?: boolean;

    /** Запрашивать автозапуск. По умолчанию false; браузер может его запретить. */
    autoplay?: boolean;

    /** Повторять видео. По умолчанию false. */
    loop?: boolean;

    /** Отключить звук. По умолчанию false. */
    muted?: boolean;

    /** Разрешить воспроизведение внутри страницы. По умолчанию true. */
    playsInline?: boolean;

    /** Предварительная загрузка. По умолчанию "none". */
    preload?: 'none' | 'metadata' | 'auto';
}

/** Объект параметров видеоблока. */
interface VideoNodeInput {
    /** Настройки видео. */
    videoData: VideoDataInput;
}

JavaScript

/**
 * Параметры видеозаписи до заполнения значений по умолчанию.
 * @typedef {Object} VideoDataInput
 * @property {string} src Непустой допустимый URL видео, например /upload/video.mp4.
 * @property {string} [poster] URL заставки. По умолчанию пустая строка.
 * @property {string | number} [width] CSS-размер или число пикселей. По умолчанию "100%".
 * @property {string | number} [height] CSS-размер или число пикселей. По умолчанию "auto".
 * @property {'fill' | 'contain' | 'cover' | 'none' | 'scale-down'} [objectFit] Способ заполнения рамки. По умолчанию "contain".
 * @property {'center' | 'top' | 'bottom' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right'} [objectPosition] Положение видео в рамке. По умолчанию "center".
 * @property {AspectRatioInput} [stableAspectRatio] Фиксация пропорций; без настройки выключена, отношение 16 / 9.
 * @property {boolean} [controls] Показывать управление воспроизведением. По умолчанию true.
 * @property {boolean} [autoplay] Запрашивать автозапуск. По умолчанию false; браузер может его запретить.
 * @property {boolean} [loop] Повторять видео. По умолчанию false.
 * @property {boolean} [muted] Отключить звук. По умолчанию false.
 * @property {boolean} [playsInline] Разрешить воспроизведение внутри страницы. По умолчанию true.
 * @property {'none' | 'metadata' | 'auto'} [preload] Предварительная загрузка. По умолчанию "none".
 */

/**
 * Объект параметров видеоблока.
 * @typedef {Object} VideoNodeInput
 * @property {VideoDataInput} videoData Настройки видео.
 */

Примеры

Видео с заставкой и ручным запуском. Браузер предварительно загружает только метаданные.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example1: VideoNodeInput = {
    "videoData": {
        "src": "/upload/video/overview.mp4",
        "poster": "/upload/video/overview.jpg",
        "width": "100%",
        "height": "auto",
        "controls": true,
        "autoplay": false,
        "muted": false,
        "preload": "metadata"
    }
};

JavaScript

// Пример параметров блока.
/** @type {VideoNodeInput} */
const example1 = {
    "videoData": {
        "src": "/upload/video/overview.mp4",
        "poster": "/upload/video/overview.jpg",
        "width": "100%",
        "height": "auto",
        "controls": true,
        "autoplay": false,
        "muted": false,
        "preload": "metadata"
    }
};

Тот же ролик с повтором и попыткой автозапуска без звука. Автозапуск всё равно зависит от политики браузера.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example2: VideoNodeInput = {
    "videoData": {
        "src": "/upload/video/overview.mp4",
        "width": "100%",
        "height": "auto",
        "controls": true,
        "autoplay": true,
        "muted": true,
        "loop": true,
        "playsInline": true
    }
};

JavaScript

// Пример параметров блока.
/** @type {VideoNodeInput} */
const example2 = {
    "videoData": {
        "src": "/upload/video/overview.mp4",
        "width": "100%",
        "height": "auto",
        "controls": true,
        "autoplay": true,
        "muted": true,
        "loop": true,
        "playsInline": true
    }
};

Кнопка — `button`

TypeScriptJavaScript + JSDoc

TypeScript

/** Подпись и оформление кнопки. */
interface ButtonDataInput {
    /** Непустая подпись кнопки; пробелы по краям удаляются. */
    content: string;

    /** Имя варианта из конфигурации редактора, например "primary". */
    variant: string;

    /** Размер кнопки. По умолчанию "large". */
    size?: 'small' | 'medium' | 'large';

    /** Дополнительные data-* атрибуты. По умолчанию пустой объект. */
    dataAttributes?: Record<string, string | null | undefined>;
}

/** Объект параметров кнопки со ссылкой. */
interface ButtonNodeInput {
    /** Подпись и оформление. */
    buttonData: ButtonDataInput;

    /** Параметры перехода. Объект обязателен, его поля можно не задавать. */
    linkData: LinkInput;
}

JavaScript

/**
 * Подпись и оформление кнопки.
 * @typedef {Object} ButtonDataInput
 * @property {string} content Непустая подпись кнопки; пробелы по краям удаляются.
 * @property {string} variant Имя варианта из конфигурации редактора, например "primary".
 * @property {'small' | 'medium' | 'large'} [size] Размер кнопки. По умолчанию "large".
 * @property {Record<string, string | null | undefined>} [dataAttributes] Дополнительные data-* атрибуты. По умолчанию пустой объект.
 */

/**
 * Объект параметров кнопки со ссылкой.
 * @typedef {Object} ButtonNodeInput
 * @property {ButtonDataInput} buttonData Подпись и оформление.
 * @property {LinkInput} linkData Параметры перехода. Объект обязателен, его поля можно не задавать.
 */

Примеры

Большая кнопка ведёт на страницу контактов в том же окне. Вариант primary должен быть зарегистрирован в редакторе. buttonData описывает внешний вид, linkData — переход.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example1: ButtonNodeInput = {
    "buttonData": {
        "content": "Связаться с нами",
        "variant": "primary",
        "size": "large",
        "dataAttributes": {}
    },
    "linkData": {
        "href": "/contacts/",
        "target": "_self"
    }
};

JavaScript

// Пример параметров блока.
/** @type {ButtonNodeInput} */
const example1 = {
    "buttonData": {
        "content": "Связаться с нами",
        "variant": "primary",
        "size": "large",
        "dataAttributes": {}
    },
    "linkData": {
        "href": "/contacts/",
        "target": "_self"
    }
};

Компактная кнопка открывает внешний сайт. От первого примера отличаются размер, адрес и параметры новой вкладки.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example2: ButtonNodeInput = {
    "buttonData": {
        "content": "Документация",
        "variant": "primary",
        "size": "small",
        "dataAttributes": {}
    },
    "linkData": {
        "href": "https://example.com/docs/",
        "target": "_blank",
        "rel": "noopener noreferrer"
    }
};

JavaScript

// Пример параметров блока.
/** @type {ButtonNodeInput} */
const example2 = {
    "buttonData": {
        "content": "Документация",
        "variant": "primary",
        "size": "small",
        "dataAttributes": {}
    },
    "linkData": {
        "href": "https://example.com/docs/",
        "target": "_blank",
        "rel": "noopener noreferrer"
    }
};

Ссылка — `link`

TypeScriptJavaScript + JSDoc

TypeScript

/** Адрес и поведение ссылки. */
interface LinkInput {
    /** URL или якорь, например /contacts/ или #contacts. Можно не задавать. */
    href?: string;

    /** HTML-атрибут rel, например "noopener noreferrer". Можно не задавать. */
    rel?: string;

    /** Открыть в текущем окне или новой вкладке. Можно не задавать. */
    target?: '_self' | '_blank';
}

JavaScript

/**
 * Адрес и поведение ссылки.
 * @typedef {Object} LinkInput
 * @property {string} [href] URL или якорь, например /contacts/ или #contacts. Можно не задавать.
 * @property {string} [rel] HTML-атрибут rel, например "noopener noreferrer". Можно не задавать.
 * @property {'_self' | '_blank'} [target] Открыть в текущем окне или новой вкладке. Можно не задавать.
 */

Примеры

Ссылка на раздел текущей страницы. На странице должен быть элемент с идентификатором contacts.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example1: LinkInput = {
    "href": "#contacts",
    "target": "_self"
};

JavaScript

// Пример параметров блока.
/** @type {LinkInput} */
const example1 = {
    "href": "#contacts",
    "target": "_self"
};

Внешняя ссылка открывается в новой вкладке. rel задаёт соответствующие атрибуты ссылки.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example2: LinkInput = {
    "href": "https://example.com/",
    "target": "_blank",
    "rel": "noopener noreferrer"
};

JavaScript

// Пример параметров блока.
/** @type {LinkInput} */
const example2 = {
    "href": "https://example.com/",
    "target": "_blank",
    "rel": "noopener noreferrer"
};

Макет — `layout`

TypeScriptJavaScript + JSDoc

TypeScript

/** Параметры сетки макета. */
interface LayoutInput {
    /** Непустое CSS-описание колонок, например "1fr 1fr". */
    templateColumns: string;

    /** CSS-описание строк. По умолчанию "1fr". */
    templateRows?: string;

    /** Промежуток между колонками: CSS-размер или число пикселей. По умолчанию "24px". */
    columnGap?: string | number;

    /** Промежуток между строками. По умолчанию "24px". */
    rowGap?: string | number;

    /** Показывать границы колонок. По умолчанию true. */
    showColumnBorders?: boolean;

    /** Сложить блоки в столбец или сохранить сетку. По умолчанию "stack". */
    mobileBehavior?: 'stack' | 'keep-grid';

    /** Именованный порог переключения. По умолчанию "md". */
    mobileBreakpoint?: 'sm' | 'md' | 'lg';
}

JavaScript

/**
 * Параметры сетки макета.
 * @typedef {Object} LayoutInput
 * @property {string} templateColumns Непустое CSS-описание колонок, например "1fr 1fr".
 * @property {string} [templateRows] CSS-описание строк. По умолчанию "1fr".
 * @property {string | number} [columnGap] Промежуток между колонками: CSS-размер или число пикселей. По умолчанию "24px".
 * @property {string | number} [rowGap] Промежуток между строками. По умолчанию "24px".
 * @property {boolean} [showColumnBorders] Показывать границы колонок. По умолчанию true.
 * @property {'stack' | 'keep-grid'} [mobileBehavior] Сложить блоки в столбец или сохранить сетку. По умолчанию "stack".
 * @property {'sm' | 'md' | 'lg'} [mobileBreakpoint] Именованный порог переключения. По умолчанию "md".
 */

Примеры

Две равные колонки с промежутком 24 px. На узком экране они перестраиваются в один столбец.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example1: LayoutInput = {
    "templateColumns": "1fr 1fr",
    "templateRows": "1fr",
    "columnGap": "24px",
    "rowGap": "24px",
    "mobileBehavior": "stack",
    "mobileBreakpoint": "md"
};

JavaScript

// Пример параметров блока.
/** @type {LayoutInput} */
const example1 = {
    "templateColumns": "1fr 1fr",
    "templateRows": "1fr",
    "columnGap": "24px",
    "rowGap": "24px",
    "mobileBehavior": "stack",
    "mobileBreakpoint": "md"
};

Узкая боковая колонка и основное содержимое. keep-grid сохраняет сетку на узком экране, поэтому такой вариант нужно отдельно проверить на телефоне.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example2: LayoutInput = {
    "templateColumns": "240px 1fr",
    "columnGap": "32px",
    "rowGap": "16px",
    "mobileBehavior": "keep-grid",
    "mobileBreakpoint": "md"
};

JavaScript

// Пример параметров блока.
/** @type {LayoutInput} */
const example2 = {
    "templateColumns": "240px 1fr",
    "columnGap": "32px",
    "rowGap": "16px",
    "mobileBehavior": "keep-grid",
    "mobileBreakpoint": "md"
};

Оглавление — `navigation`

TypeScriptJavaScript + JSDoc

TypeScript

/** Настройки автоматически составляемого оглавления. */
interface NavigationInput {
    /** Заголовок до 120 символов. По умолчанию "Содержание". */
    title?: string;

    /** Включать заголовки H2. По умолчанию true. */
    includeH2?: boolean;

    /** Включать заголовки H3. По умолчанию true. */
    includeH3?: boolean;

    /** Нумерация, маркеры или отсутствие маркеров. По умолчанию "ordered". */
    listStyle?: 'ordered' | 'unordered' | 'plain';
}

JavaScript

/**
 * Настройки автоматически составляемого оглавления.
 * @typedef {Object} NavigationInput
 * @property {string} [title] Заголовок до 120 символов. По умолчанию "Содержание".
 * @property {boolean} [includeH2] Включать заголовки H2. По умолчанию true.
 * @property {boolean} [includeH3] Включать заголовки H3. По умолчанию true.
 * @property {'ordered' | 'unordered' | 'plain'} [listStyle] Нумерация, маркеры или отсутствие маркеров. По умолчанию "ordered".
 */

Примеры

Нумерованное оглавление включает заголовки второго и третьего уровней.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example1: NavigationInput = {
    "title": "На этой странице",
    "includeH2": true,
    "includeH3": true,
    "listStyle": "ordered"
};

JavaScript

// Пример параметров блока.
/** @type {NavigationInput} */
const example1 = {
    "title": "На этой странице",
    "includeH2": true,
    "includeH3": true,
    "listStyle": "ordered"
};

Короткое оглавление включает только второй уровень и не показывает маркеры.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example2: NavigationInput = {
    "title": "Разделы",
    "includeH2": true,
    "includeH3": false,
    "listStyle": "plain"
};

JavaScript

// Пример параметров блока.
/** @type {NavigationInput} */
const example2 = {
    "title": "Разделы",
    "includeH2": true,
    "includeH3": false,
    "listStyle": "plain"
};

Слайдер — `slider`

TypeScriptJavaScript + JSDoc

TypeScript

/** Параметры слайдера. Настройки autoplay действуют при autoplay: true. */
interface SliderInput {
    /** Идентификатор до 80 символов. По умолчанию пустая строка. */
    id?: string;

    /** Включить работу слайдера. По умолчанию true. */
    active?: boolean;

    /** Выравнивание слайда. По умолчанию "start". */
    align?: 'start' | 'center' | 'end';

    /** Горизонтальное или вертикальное движение. По умолчанию "x". */
    axis?: 'x' | 'y';

    /** Высота вертикального слайдера. По умолчанию "480px". */
    verticalHeight?: string | number;

    /** Обработка крайних позиций прокрутки. По умолчанию "trimSnaps". */
    containScroll?: 'trimSnaps' | 'keepSnaps' | 'none';

    /** Направление чтения. По умолчанию "ltr". */
    direction?: 'ltr' | 'rtl';

    /** Переключение по кругу. По умолчанию false. */
    loop?: boolean;

    /** Свободная прокрутка после перетаскивания. По умолчанию false. */
    dragFree?: boolean;

    /** Порог перетаскивания: целое от 0 до 100. По умолчанию 10. */
    dragThreshold?: number;

    /** Параметр длительности анимации: целое от 20 до 60, не миллисекунды. По умолчанию 25. */
    duration?: number;

    /** Доля видимости слайда: от 0 до 1. По умолчанию 0. */
    inViewThreshold?: number;

    /** Разрешить пропуск позиций при перетаскивании. По умолчанию false. */
    skipSnaps?: boolean;

    /** Индекс первого видимого слайда: целое от 0 до 999. По умолчанию 0. */
    startIndex?: number;

    /** Обрабатывать перетаскивание. По умолчанию true. */
    watchDrag?: boolean;

    /** Обрабатывать переход фокуса. По умолчанию true. */
    watchFocus?: boolean;

    /** Обновляться при изменении размеров. По умолчанию true. */
    watchResize?: boolean;

    /** Обновляться при изменении состава слайдов. По умолчанию true. */
    watchSlides?: boolean;

    /** Число слайдов за шаг. По умолчанию строка "1". */
    slidesToScroll?: '1' | '2' | '3' | 'auto';

    /** Показывать стрелки. По умолчанию true. */
    showArrows?: boolean;

    /** Показывать точки. По умолчанию true. */
    showDots?: boolean;

    /** Вариант размещения слайдов. По умолчанию "single". */
    responsive?: 'single' | 'two' | 'three' | 'cards';

    /** Промежуток между слайдами. По умолчанию "16px". */
    gap?: string | number;

    /** Включить автопереключение. По умолчанию false. */
    autoplay?: boolean;

    /** Пауза в миллисекундах: целое от 1000 до 60000. По умолчанию 5000. */
    autoplayDelay?: number;

    /** Переключаться автоматически без анимации. По умолчанию false. */
    autoplayJump?: boolean;

    /** Запустить автопереключение при инициализации. По умолчанию true. */
    autoplayPlayOnInit?: boolean;

    /** Остановить автопереключение при фокусе внутри слайда. По умолчанию true. */
    autoplayStopOnFocusIn?: boolean;

    /** Остановить автопереключение после взаимодействия пользователя. По умолчанию true. */
    autoplayStopOnInteraction?: boolean;

    /** Остановить автопереключение при наведении. По умолчанию true. */
    autoplayStopOnMouseEnter?: boolean;

    /** Остановиться на последней позиции. По умолчанию false. */
    autoplayStopOnLastSnap?: boolean;
}

JavaScript

/**
 * Параметры слайдера. Настройки autoplay действуют при autoplay: true.
 * @typedef {Object} SliderInput
 * @property {string} [id] Идентификатор до 80 символов. По умолчанию пустая строка.
 * @property {boolean} [active] Включить работу слайдера. По умолчанию true.
 * @property {'start' | 'center' | 'end'} [align] Выравнивание слайда. По умолчанию "start".
 * @property {'x' | 'y'} [axis] Горизонтальное или вертикальное движение. По умолчанию "x".
 * @property {string | number} [verticalHeight] Высота вертикального слайдера. По умолчанию "480px".
 * @property {'trimSnaps' | 'keepSnaps' | 'none'} [containScroll] Обработка крайних позиций прокрутки. По умолчанию "trimSnaps".
 * @property {'ltr' | 'rtl'} [direction] Направление чтения. По умолчанию "ltr".
 * @property {boolean} [loop] Переключение по кругу. По умолчанию false.
 * @property {boolean} [dragFree] Свободная прокрутка после перетаскивания. По умолчанию false.
 * @property {number} [dragThreshold] Порог перетаскивания: целое от 0 до 100. По умолчанию 10.
 * @property {number} [duration] Параметр длительности анимации: целое от 20 до 60, не миллисекунды. По умолчанию 25.
 * @property {number} [inViewThreshold] Доля видимости слайда: от 0 до 1. По умолчанию 0.
 * @property {boolean} [skipSnaps] Разрешить пропуск позиций при перетаскивании. По умолчанию false.
 * @property {number} [startIndex] Индекс первого видимого слайда: целое от 0 до 999. По умолчанию 0.
 * @property {boolean} [watchDrag] Обрабатывать перетаскивание. По умолчанию true.
 * @property {boolean} [watchFocus] Обрабатывать переход фокуса. По умолчанию true.
 * @property {boolean} [watchResize] Обновляться при изменении размеров. По умолчанию true.
 * @property {boolean} [watchSlides] Обновляться при изменении состава слайдов. По умолчанию true.
 * @property {'1' | '2' | '3' | 'auto'} [slidesToScroll] Число слайдов за шаг. По умолчанию строка "1".
 * @property {boolean} [showArrows] Показывать стрелки. По умолчанию true.
 * @property {boolean} [showDots] Показывать точки. По умолчанию true.
 * @property {'single' | 'two' | 'three' | 'cards'} [responsive] Вариант размещения слайдов. По умолчанию "single".
 * @property {string | number} [gap] Промежуток между слайдами. По умолчанию "16px".
 * @property {boolean} [autoplay] Включить автопереключение. По умолчанию false.
 * @property {number} [autoplayDelay] Пауза в миллисекундах: целое от 1000 до 60000. По умолчанию 5000.
 * @property {boolean} [autoplayJump] Переключаться автоматически без анимации. По умолчанию false.
 * @property {boolean} [autoplayPlayOnInit] Запустить автопереключение при инициализации. По умолчанию true.
 * @property {boolean} [autoplayStopOnFocusIn] Остановить автопереключение при фокусе внутри слайда. По умолчанию true.
 * @property {boolean} [autoplayStopOnInteraction] Остановить автопереключение после взаимодействия пользователя. По умолчанию true.
 * @property {boolean} [autoplayStopOnMouseEnter] Остановить автопереключение при наведении. По умолчанию true.
 * @property {boolean} [autoplayStopOnLastSnap] Остановиться на последней позиции. По умолчанию false.
 */

Примеры

Слайдер переключается вручную и показывает один слайд. startIndex: 0 означает первый слайд.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example1: SliderInput = {
    "id": "reviews",
    "axis": "x",
    "responsive": "single",
    "startIndex": 0,
    "loop": false,
    "showArrows": true,
    "showDots": true,
    "autoplay": false
};

JavaScript

// Пример параметров блока.
/** @type {SliderInput} */
const example1 = {
    "id": "reviews",
    "axis": "x",
    "responsive": "single",
    "startIndex": 0,
    "loop": false,
    "showArrows": true,
    "showDots": true,
    "autoplay": false
};

Карточки переключаются каждые пять секунд по кругу. Наведение мыши и взаимодействие пользователя останавливают автопереключение.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example2: SliderInput = {
    "id": "products",
    "axis": "x",
    "responsive": "cards",
    "gap": "16px",
    "loop": true,
    "autoplay": true,
    "autoplayDelay": 5000,
    "autoplayStopOnMouseEnter": true,
    "autoplayStopOnInteraction": true
};

JavaScript

// Пример параметров блока.
/** @type {SliderInput} */
const example2 = {
    "id": "products",
    "axis": "x",
    "responsive": "cards",
    "gap": "16px",
    "loop": true,
    "autoplay": true,
    "autoplayDelay": 5000,
    "autoplayStopOnMouseEnter": true,
    "autoplayStopOnInteraction": true
};

Вкладки — `tabs`

TypeScriptJavaScript + JSDoc

TypeScript

/** Параметры блока вкладок. */
interface TabsInput {
    /** Идентификатор до 80 символов. По умолчанию пустая строка. */
    id?: string;

    /** Количество вкладок: целое от 1 до 12. По умолчанию 3. */
    tabCount?: number;

    /** Расположение переключателей. По умолчанию "horizontal". */
    orientation?: 'horizontal' | 'vertical';

    /** Промежуток между переключателями. По умолчанию "4px". */
    listGap?: string | number;

    /** Ширина вертикальной панели переключателей. По умолчанию "240px". */
    listWidth?: string | number;

    /** Минимальный размер переключателя. По умолчанию "120px". */
    triggerMinSize?: string | number;

    /** Внутренний отступ переключателя. По умолчанию "12px". */
    triggerPadding?: string | number;
}

JavaScript

/**
 * Параметры блока вкладок.
 * @typedef {Object} TabsInput
 * @property {string} [id] Идентификатор до 80 символов. По умолчанию пустая строка.
 * @property {number} [tabCount] Количество вкладок: целое от 1 до 12. По умолчанию 3.
 * @property {'horizontal' | 'vertical'} [orientation] Расположение переключателей. По умолчанию "horizontal".
 * @property {string | number} [listGap] Промежуток между переключателями. По умолчанию "4px".
 * @property {string | number} [listWidth] Ширина вертикальной панели переключателей. По умолчанию "240px".
 * @property {string | number} [triggerMinSize] Минимальный размер переключателя. По умолчанию "120px".
 * @property {string | number} [triggerPadding] Внутренний отступ переключателя. По умолчанию "12px".
 */

Примеры

Три вкладки с горизонтальными переключателями.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example1: TabsInput = {
    "id": "product-details",
    "tabCount": 3,
    "orientation": "horizontal",
    "listGap": "4px"
};

JavaScript

// Пример параметров блока.
/** @type {TabsInput} */
const example1 = {
    "id": "product-details",
    "tabCount": 3,
    "orientation": "horizontal",
    "listGap": "4px"
};

Те же три вкладки, но переключатели расположены вертикально в колонке шириной 240 px.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example2: TabsInput = {
    "id": "product-details",
    "tabCount": 3,
    "orientation": "vertical",
    "listWidth": "240px",
    "listGap": "8px"
};

JavaScript

// Пример параметров блока.
/** @type {TabsInput} */
const example2 = {
    "id": "product-details",
    "tabCount": 3,
    "orientation": "vertical",
    "listWidth": "240px",
    "listGap": "8px"
};

Панель вкладки — `tabs-panel`

TypeScriptJavaScript + JSDoc

TypeScript

/** Параметры одной панели внутри блока вкладок. */
interface TabPanelInput {
    /** Идентификатор до 80 символов. По умолчанию пустая строка. */
    id?: string;

    /** Непустая подпись до 120 символов. Если не указана, редактор подставляет стандартную подпись. */
    title?: string;
}

JavaScript

/**
 * Параметры одной панели внутри блока вкладок.
 * @typedef {Object} TabPanelInput
 * @property {string} [id] Идентификатор до 80 символов. По умолчанию пустая строка.
 * @property {string} [title] Непустая подпись до 120 символов. Если не указана, редактор подставляет стандартную подпись.
 */

Примеры

Одна панель в составе блока вкладок. title отображается на её переключателе; для других панелей задайте свои идентификаторы.

TypeScriptJavaScript + JSDoc

TypeScript

// Пример параметров блока.
const example1: TabPanelInput = {
    "id": "delivery",
    "title": "Доставка"
};

JavaScript

// Пример параметров блока.
/** @type {TabPanelInput} */
const example1 = {
    "id": "delivery",
    "title": "Доставка"
};

Узлы расширений

В отличие от параметров выше, следующие объекты — фрагменты сохранённого JSON документа. Здесь показаны поля самого расширения; у настоящего узла могут быть дополнительные служебные поля редактора.

Декларативный блок

Атомарный блок хранит идентификатор расширения и значения полей внутри payload. Состав data задаётся описанием установленного блока: нельзя добавлять произвольные поля, даже если они подходят по типу.

TypeScriptJavaScript + JSDoc

TypeScript

/** Данные атомарного декларативного блока в сохранённом документе. */
interface DeclarativePayload {
    /** Идентификатор установленного расширения. */
    extensionId: string;

    /** Тип блока из описания расширения. */
    blockType: string;

    /** Версия схемы данных. */
    schemaVersion: 1;

    /** Значения полей, объявленных расширением. Неизвестные поля не допускаются. */
    data: Record<string, string | number | boolean>;
}

/** Поля атомарного декларативного узла; служебные поля документа здесь опущены. */
interface DeclarativeNodeExample {
    /** Тип узла. */
    type: 'glit-declarative';

    /** Версия формата узла. */
    version: 1;

    /** Описание блока и его данные. */
    payload: DeclarativePayload;
}

JavaScript

/**
 * Данные атомарного декларативного блока в сохранённом документе.
 * @typedef {Object} DeclarativePayload
 * @property {string} extensionId Идентификатор установленного расширения.
 * @property {string} blockType Тип блока из описания расширения.
 * @property {1} schemaVersion Версия схемы данных.
 * @property {Record<string, string | number | boolean>} data Значения полей, объявленных расширением. Неизвестные поля не допускаются.
 */

/**
 * Поля атомарного декларативного узла; служебные поля документа здесь опущены.
 * @typedef {Object} DeclarativeNodeExample
 * @property {'glit-declarative'} type Тип узла.
 * @property {1} version Версия формата узла.
 * @property {DeclarativePayload} payload Описание блока и его данные.
 */

Пример данных:

TypeScriptJavaScript + JSDoc

TypeScript

// Фрагмент сохранённого узла.
const node: DeclarativeNodeExample = {
    "type": "glit-declarative",
    "version": 1,
    "payload": {
        "extensionId": "starter.notice",
        "blockType": "notice",
        "schemaVersion": 1,
        "data": {
            "title": "Доставка",
            "text": "Работаем по всей России",
            "showText": true
        }
    }
};

JavaScript

// Фрагмент сохранённого узла.
/** @type {DeclarativeNodeExample} */
const node = {
    "type": "glit-declarative",
    "version": 1,
    "payload": {
        "extensionId": "starter.notice",
        "blockType": "notice",
        "schemaVersion": 1,
        "data": {
            "title": "Доставка",
            "text": "Работаем по всей России",
            "showText": true
        }
    }
};

JavaScript-блок

У JavaScript-расширения свой формат узла. Например, учебный пакет starter.native сохраняет подпись в label прямо в объекте узла. Он не использует payload декларативного блока.

TypeScriptJavaScript + JSDoc

TypeScript

/** Поля узла из учебного пакета starter.native; служебные поля здесь опущены. */
interface NativeNoticeExample {
    /** Тип узла учебного расширения. */
    type: 'starter.native.notice';

    /** Версия формата узла. */
    version: 1;

    /** Подпись длиной до 120 символов. */
    label: string;
}

JavaScript

/**
 * Поля узла из учебного пакета starter.native; служебные поля здесь опущены.
 * @typedef {Object} NativeNoticeExample
 * @property {'starter.native.notice'} type Тип узла учебного расширения.
 * @property {1} version Версия формата узла.
 * @property {string} label Подпись длиной до 120 символов.
 */

Пример данных:

TypeScriptJavaScript + JSDoc

TypeScript

// Фрагмент сохранённого узла.
const node: NativeNoticeExample = {
    "type": "starter.native.notice",
    "version": 1,
    "label": "Доставка по России"
};

JavaScript

// Фрагмент сохранённого узла.
/** @type {NativeNoticeExample} */
const node = {
    "type": "starter.native.notice",
    "version": 1,
    "label": "Доставка по России"
};

Декларативный контейнер с вложенными блоками использует тип glit-declarative-container и отдельные узлы именованных областей; пример атомарного блока выше его не заменяет. Описание собственных блоков и шаблонов приведено в отдельном разделе.

Формат других JavaScript-узлов определяется документацией их расширений. Готовый учебный пакет доступен в архиве примера.

Структуры данных блоков

Общие настройки изображения и видео

Изображение — image

Примеры

Видео — video

Примеры

Кнопка — button

Примеры

Ссылка — link

Примеры

Макет — layout

Примеры

Оглавление — navigation

Примеры

Слайдер — slider

Примеры

Вкладки — tabs

Примеры

Панель вкладки — tabs-panel

Примеры

Узлы расширений

Декларативный блок

JavaScript-блок

Изображение — `image`

Видео — `video`

Кнопка — `button`

Ссылка — `link`

Макет — `layout`

Оглавление — `navigation`

Слайдер — `slider`

Вкладки — `tabs`

Панель вкладки — `tabs-panel`