@gravity-ui/page-constructor 1.0.0

package/build/esm/text-transform/blocks.js

@@ -0,0 +1,344 @@
+import { __rest } from "tslib";
+import _ from 'lodash';
+import { BlockType, SubBlockType, } from '../models';
+import { fullTransform, typografToHTML } from './utils';
+export const createItemsParser = (fields) => (transformer, items) => items.map((item) => {
+    if (!item) {
+        return item;
+    }
+    else if (typeof item === 'string') {
+        return transformer(item);
+    }
+    else {
+        return Object.assign(Object.assign({}, item), fields.reduce((acc, fieldName) => {
+            const result = Object.assign({}, acc);
+            if (item[fieldName]) {
+                result[fieldName] = transformer(item[fieldName]);
+            }
+            return result;
+        }, {}));
+    }
+});
+const parseItems = createItemsParser(['title', 'text']);
+function parseTableBlock(transformer, content) {
+    const legend = content === null || content === void 0 ? void 0 : content.legend;
+    return Object.assign(Object.assign({}, (content || {})), { legend: legend && legend.map((string) => transformer(string)) });
+}
+function parseFeatures(transformer, items) {
+    return items.map((_a) => {
+        var { title, text } = _a, rest = __rest(_a, ["title", "text"]);
+        return (Object.assign({ title: title && transformer(title), text: text && transformer(text) }, rest));
+    });
+}
+function parsePromoFeatures(transformer, items) {
+    return items.map((_a) => {
+        var { text } = _a, rest = __rest(_a, ["text"]);
+        return (Object.assign({ text: transformer(text) }, rest));
+    });
+}
+function parseSlider(transformer, block) {
+    const { title, description } = block;
+    block.title = Object.assign(Object.assign({}, title), { text: transformer(title ? title.text : '') });
+    if (description) {
+        block.description = transformer(description);
+    }
+}
+function parseCard(transformer, card) {
+    const { header, text } = card;
+    card.text = text && transformer(text);
+    if (header && header.title) {
+        card.header = card.header || {};
+        card.header.title = transformer(header.title);
+    }
+}
+const parseTitle = (transformer, title) => typeof title === 'object' && 'text' in title
+    ? Object.assign(Object.assign({}, title), { text: transformer(title.text) }) : title && transformer(title);
+function parsePriceDetailedBlock(transformer, block) {
+    const { priceType } = block;
+    const transformedBlockItems = block.items.map((item) => {
+        const { description, items: details = [] } = item;
+        if (priceType === 'marked-list') {
+            item.items = details.map((detail) => {
+                detail.text = detail.text && transformer(detail.text);
+                return detail;
+            });
+        }
+        else {
+            item.items = details.map((detail) => {
+                detail.description = detail.description && transformer(detail.description);
+                return detail;
+            });
+        }
+        item.description = transformer(description);
+        return item;
+    });
+    block.items = transformedBlockItems;
+    return block;
+}
+const parseContentLayout = (transformer, content) => {
+    if (content) {
+        const { text, additionalInfo } = content;
+        if (text) {
+            content.text = transformer(text);
+        }
+        if (additionalInfo) {
+            content.additionalInfo = transformer(additionalInfo);
+        }
+    }
+    return content;
+};
+function parseContentLayoutTitle(transformer, content) {
+    if (content === null || content === void 0 ? void 0 : content.title) {
+        const { title } = content;
+        content.title = title && parseTitle(transformer, title);
+    }
+    return content;
+}
+export function yfmTransformer(lang, content) {
+    const { html } = fullTransform(content, { lang });
+    return html;
+}
+export function typografTransformer(lang, content) {
+    return typografToHTML(content, lang);
+}
+const config = {
+    [SubBlockType.Partner]: {
+        fields: ['text'],
+        transformer: typografTransformer,
+    },
+    [SubBlockType.BasicCard]: [
+        {
+            fields: ['title'],
+            transformer: typografTransformer,
+        },
+        {
+            fields: ['text', 'additionalInfo'],
+            transformer: yfmTransformer,
+        },
+    ],
+    [SubBlockType.TutorialCard]: {
+        fields: ['text', 'title'],
+        transformer: typografTransformer,
+    },
+    [SubBlockType.BackgroundCard]: [
+        {
+            fields: ['text', 'additionalInfo'],
+            transformer: yfmTransformer,
+        },
+        {
+            fields: ['title'],
+            transformer: typografTransformer,
+        },
+    ],
+    [SubBlockType.CardWithImage]: [
+        {
+            fields: ['description', 'additionalInfo'],
+            transformer: yfmTransformer,
+        },
+        {
+            fields: ['title'],
+            transformer: typografTransformer,
+        },
+    ],
+    [SubBlockType.Quote]: {
+        fields: ['text'],
+        transformer: typografTransformer,
+    },
+    [SubBlockType.Card]: {
+        transformer: yfmTransformer,
+        parser: parseCard,
+    },
+    [BlockType.ExtendedFeaturesBlock]: [
+        {
+            fields: ['title'],
+            transformer: typografTransformer,
+            parser: parseTitle,
+        },
+        {
+            fields: ['description'],
+            transformer: yfmTransformer,
+        },
+        {
+            fields: ['items'],
+            transformer: typografTransformer,
+            parser: parseFeatures,
+        },
+    ],
+    [BlockType.PromoFeaturesBlock]: {
+        fields: ['items'],
+        transformer: yfmTransformer,
+        parser: parsePromoFeatures,
+    },
+    [BlockType.SliderBlock]: {
+        transformer: typografTransformer,
+        parser: parseSlider,
+    },
+    [BlockType.QuestionsBlock]: [
+        {
+            fields: ['title'],
+            transformer: typografTransformer,
+        },
+        {
+            fields: ['text', 'additionalInfo'],
+            transformer: yfmTransformer,
+        },
+        {
+            fields: ['items'],
+            transformer: yfmTransformer,
+            parser: parseFeatures,
+        },
+    ],
+    [BlockType.BannerBlock]: [
+        {
+            fields: ['title'],
+            transformer: typografTransformer,
+        },
+        {
+            fields: ['subtitle'],
+            transformer: yfmTransformer,
+        },
+    ],
+    [SubBlockType.BannerCard]: [
+        {
+            fields: ['title'],
+            transformer: typografTransformer,
+        },
+        {
+            fields: ['subtitle'],
+            transformer: yfmTransformer,
+        },
+    ],
+    [BlockType.MediaBlock]: [
+        {
+            fields: ['title'],
+            transformer: typografTransformer,
+        },
+        {
+            fields: ['description', 'title', 'additionalInfo'],
+            transformer: yfmTransformer,
+        },
+    ],
+    [BlockType.TabsBlock]: [
+        {
+            fields: ['title'],
+            transformer: typografTransformer,
+            parser: parseTitle,
+        },
+        {
+            fields: ['items'],
+            transformer: yfmTransformer,
+            parser: parseItems,
+        },
+    ],
+    [BlockType.TableBlock]: [
+        {
+            fields: ['table'],
+            transformer: yfmTransformer,
+            parser: parseTableBlock,
+        },
+    ],
+    [BlockType.HeaderSliderBlock]: [
+        {
+            fields: ['items'],
+            transformer: typografTransformer,
+            parser: createItemsParser(['title', 'overtitle']),
+        },
+        {
+            fields: ['items'],
+            transformer: yfmTransformer,
+            parser: createItemsParser(['description']),
+        },
+    ],
+    [BlockType.SimpleBlock]: [
+        {
+            fields: ['description'],
+            transformer: yfmTransformer,
+        },
+    ],
+    [SubBlockType.PriceDetailed]: [
+        {
+            transformer: yfmTransformer,
+            parser: parsePriceDetailedBlock,
+        },
+    ],
+    [BlockType.HeaderBlock]: [
+        {
+            fields: ['description'],
+            transformer: yfmTransformer,
+        },
+    ],
+    [BlockType.ContentLayoutBlock]: [
+        {
+            fields: ['textContent'],
+            transformer: yfmTransformer,
+            parser: parseContentLayout,
+        },
+        {
+            fields: ['textContent'],
+            transformer: typografTransformer,
+            parser: parseContentLayoutTitle,
+        },
+    ],
+    [SubBlockType.Content]: [
+        {
+            fields: ['text', 'additionalInfo'],
+            transformer: yfmTransformer,
+        },
+        {
+            fields: ['title'],
+            transformer: typografTransformer,
+            parser: parseTitle,
+        },
+    ],
+    [BlockType.PreviewBlock]: [
+        {
+            fields: ['description'],
+            transformer: yfmTransformer,
+        },
+    ],
+};
+function addRandomOrder(block) {
+    if (block) {
+        if ('randomOrder' in block && block.randomOrder && 'children' in block && block.children) {
+            block.children = _.shuffle(block.children);
+        }
+    }
+}
+function transformBlock(lang, blocksConfig, block) {
+    const blockConfig = blocksConfig[block.type];
+    addRandomOrder(block);
+    if (blockConfig) {
+        const configs = Array.isArray(blockConfig) ? blockConfig : [blockConfig];
+        configs.forEach((transformConfig) => {
+            const { fields, transformer: transformerRaw, parser } = transformConfig;
+            const transformer = transformerRaw.bind(null, lang);
+            if (fields) {
+                fields.forEach((field) => {
+                    if (block[field]) {
+                        if (parser) {
+                            block[field] = parser(transformer, block[field]);
+                        }
+                        else if (typeof block[field] === 'string') {
+                            block[field] = transformer(block[field]);
+                        }
+                    }
+                });
+            }
+            else if (parser) {
+                parser(transformer, block);
+            }
+        });
+    }
+    if ('children' in block && block.children) {
+        transformBlocks(block.children, lang, blocksConfig);
+    }
+}
+export function transformBlocks(blocks, lang, customConfig = {}) {
+    const fullConfig = Object.assign(Object.assign({}, config), customConfig);
+    blocks.forEach(transformBlock.bind(null, lang, fullConfig));
+}
+export function transformFootnotes(footnotes, lang) {
+    return footnotes
+        .map((footnote) => fullTransform(footnote, { path: __dirname, lang, allowHTML: true }).html)
+        .filter(Boolean);
+}

package/build/esm/text-transform/index.d.ts

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './blocks';

package/build/esm/text-transform/index.js

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './blocks';

package/build/esm/text-transform/utils.d.ts

@@ -0,0 +1,30 @@
+import sanitize from 'sanitize-html';
+import { Options, Output } from '@doc-tools/transform';
+import { Lang } from '../utils/configure';
+export declare enum TransformType {
+    Text = "text",
+    Html = "html"
+}
+interface TransformOptions extends Options {
+    lang: Lang;
+}
+export declare const DEFAULT_ALLOWED_TAGS: string[];
+export declare const typografConfig: {
+    enabled: string[];
+    disabled: string[];
+};
+export declare const sanitizeStripOptions: sanitize.IOptions;
+export declare function typograf(text: string, lang?: Lang): string;
+export declare function sanitizeHtml(html: string, options?: sanitize.IOptions): string;
+export declare function typografToHTML(text: string, lang: Lang, allowedTags?: string[]): string;
+export declare function typografToText(text: string, lang: Lang): string;
+export declare const transformMarkdown: (input: string, options: TransformOptions) => Output['result'];
+export declare function fullTransform(input: string, { lang, ...options }: TransformOptions): Output['result'];
+export interface TypografEntityParams {
+    entity: Record<string, string>;
+    fields: string[];
+    lang: Lang;
+    transformType: TransformType;
+}
+export declare function typografEntity({ entity, fields, lang, transformType, }: TypografEntityParams): Record<string, string>;
+export {};

package/build/esm/text-transform/utils.js

@@ -0,0 +1,105 @@
+import { __rest } from "tslib";
+import Typograf from 'typograf';
+import sanitize from 'sanitize-html';
+import transformYFM from '@doc-tools/transform';
+import { Lang } from '../utils/configure';
+export var TransformType;
+(function (TransformType) {
+    TransformType["Text"] = "text";
+    TransformType["Html"] = "html";
+})(TransformType || (TransformType = {}));
+export const DEFAULT_ALLOWED_TAGS = [
+    'br',
+    'b',
+    'i',
+    'strong',
+    'em',
+    'sup',
+    'sub',
+    'a',
+    'ul',
+    'ol',
+    'li',
+];
+export const typografConfig = {
+    enabled: ['common/nbsp/afterNumber', 'common/nbsp/afterParagraphMark'],
+    disabled: ['common/symbols/cf'],
+};
+export const sanitizeStripOptions = {
+    allowedTags: [],
+    allowedAttributes: {},
+};
+Typograf.addRule({
+    name: 'common/html/sup',
+    queue: 'end',
+    /* TODO mange with it: in typograf types AddRuleOptions.handler takes only one param: text.
+    But in cloud-www was used this notation with 3 params */
+    //@ts-ignore
+    handler: function (text, settings, context) {
+        const { prefs: { htmlEntity: { type = '' } = {} } = {} } = context;
+        let symbols;
+        switch (type) {
+            case 'digit':
+                symbols = '®|©|™';
+                break;
+            case 'name':
+                symbols = '®|©|™';
+                break;
+            default:
+                symbols = '®|©|™';
+                break;
+        }
+        const symbolsRegex = new RegExp(`(?<!<sup>\\s*)(${symbols})|(${symbols})(?!\\s*<\\/sup>)`, 'gi');
+        return text.replace(symbolsRegex, '<sup>$1</sup>');
+    },
+    htmlAttrs: false,
+});
+function enableRules(tp) {
+    const { disabled, enabled } = typografConfig;
+    enabled.forEach((rule) => tp.enableRule(rule));
+    disabled.forEach((rule) => tp.disableRule(rule));
+}
+export function typograf(text, lang = Lang.Ru) {
+    const localeByLang = {
+        [Lang.Ru]: ['ru', 'en-US'],
+        [Lang.En]: ['en-US', 'ru'],
+    };
+    const tp = new Typograf({
+        locale: localeByLang[lang],
+        htmlEntity: { type: 'name' },
+    });
+    enableRules(tp);
+    return tp.execute(text);
+}
+export function sanitizeHtml(html, options = sanitizeStripOptions) {
+    return html && sanitize(html, options || sanitizeStripOptions);
+}
+export function typografToHTML(text, lang, allowedTags = DEFAULT_ALLOWED_TAGS) {
+    return text && typograf(sanitizeHtml(text, { allowedTags }), lang);
+}
+export function typografToText(text, lang) {
+    return text && sanitizeHtml(typograf(text, lang));
+}
+export const transformMarkdown = (input, options) => {
+    const { result } = transformYFM(input !== null && input !== void 0 ? input : '', options);
+    return result;
+};
+export function fullTransform(input, _a) {
+    var { lang } = _a, options = __rest(_a, ["lang"]);
+    const result = transformMarkdown(input, Object.assign({ lang }, options));
+    const { html, title } = result;
+    return Object.assign(Object.assign({}, result), { html: typograf(html, lang), title: title && typograf(title, lang) });
+}
+export function typografEntity({ entity, fields, lang = Lang.Ru, transformType = TransformType.Text, }) {
+    const transformTypeMap = {
+        text: typografToText,
+        html: typografToHTML,
+    };
+    const transformer = transformTypeMap[transformType];
+    fields.forEach((fieldName) => {
+        if (entity[fieldName]) {
+            entity[fieldName] = transformer(entity[fieldName], lang);
+        }
+    });
+    return entity;
+}

package/build/esm/utils/blocks.d.ts

@@ -0,0 +1,9 @@
+import { ConstructorBlock } from '../models/constructor';
+import { TextSize, CustomConfig } from '../models';
+export declare function getHeaderTag(size: TextSize): "h1" | "h4" | "h2";
+export declare function getBlockKey(block: ConstructorBlock, index: number): string;
+export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
+export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
+    [x: string]: any;
+};
+export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];

package/build/esm/utils/blocks.js

@@ -0,0 +1,23 @@
+export function getHeaderTag(size) {
+    switch (size) {
+        case 'l':
+            return 'h1';
+        case 's':
+            return 'h4';
+        case 'm':
+        default:
+            return 'h2';
+    }
+}
+export function getBlockKey(block, index) {
+    return `${block.type}-${index}`;
+}
+export const getCustomBlockTypes = ({ blocks = {}, headers = {} } = {}) => [
+    ...Object.keys(blocks),
+    ...Object.keys(headers),
+];
+export const getCustomItems = ({ blocks = {}, headers = {}, subBlocks = {} } = {}) => (Object.assign(Object.assign(Object.assign({}, blocks), headers), subBlocks));
+export const getCustomHeaderTypes = (customBlocks = {}) => {
+    const { headers = {} } = customBlocks;
+    return Object.keys(headers);
+};

package/build/esm/utils/cn.d.ts

@@ -0,0 +1,4 @@
+import blockOrigin from 'bem-cn-lite';
+export declare const NAMESPACE = "pc-";
+export declare type CnBlock = ReturnType<typeof blockOrigin>;
+export declare function block(name: string): CnBlock;

package/build/esm/utils/cn.js

@@ -0,0 +1,5 @@
+import blockOrigin from 'bem-cn-lite';
+export const NAMESPACE = 'pc-';
+export function block(name) {
+    return blockOrigin(`${NAMESPACE}${name}`);
+}

package/build/esm/utils/configure.d.ts

@@ -0,0 +1,12 @@
+export declare enum Lang {
+    Ru = "ru",
+    En = "en"
+}
+interface Config {
+    lang?: Lang;
+}
+declare type Subscriber = (config: Config) => void;
+export declare const configure: (newConfig: Config) => void;
+export declare const subscribeConfigure: (sub: Subscriber) => () => void;
+export declare const getConfig: () => Config;
+export {};

package/build/esm/utils/configure.js

@@ -0,0 +1,20 @@
+export var Lang;
+(function (Lang) {
+    Lang["Ru"] = "ru";
+    Lang["En"] = "en";
+})(Lang || (Lang = {}));
+let subs = [];
+const config = {};
+export const configure = (newConfig) => {
+    Object.assign(config, newConfig);
+    subs.forEach((sub) => {
+        sub(config);
+    });
+};
+export const subscribeConfigure = (sub) => {
+    subs.push(sub);
+    return () => {
+        subs = subs.filter((item) => item !== sub);
+    };
+};
+export const getConfig = () => config;

package/build/esm/utils/hubspot.d.ts

@@ -0,0 +1,16 @@
+export declare type HubspotEventName = 'onBeforeFormInit' | 'onFormReady' | 'onFormSubmit' | 'onFormSubmitted' | `_${string}`;
+export interface HubspotEventData {
+    type: HubspotEventName | string;
+    eventName: HubspotEventName;
+    id: string;
+    data?: unknown;
+}
+export declare function isHubspotEventData(maybeData: unknown): maybeData is HubspotEventData;
+export interface HubspotEventHandlers {
+    onBeforeLoad?: (arg: HubspotEventData) => void;
+    onBeforeSubmit?: (arg: HubspotEventData) => void;
+    onSubmit?: (arg: HubspotEventData) => void;
+    onLoad?: (arg: HubspotEventData) => void;
+}
+export declare function loopBackHabspotEvents(formId: string): ({ data, source, origin }: MessageEvent) => void;
+export declare function handleHubspotEvents(handlers: HubspotEventHandlers, formId: string): ({ data }: MessageEvent) => void;

package/build/esm/utils/hubspot.js

@@ -0,0 +1,52 @@
+export function isHubspotEventData(maybeData) {
+    return (typeof maybeData === 'object' &&
+        maybeData !== null &&
+        'type' in maybeData &&
+        maybeData['type'] === 'hsFormCallback');
+}
+export function loopBackHabspotEvents(formId) {
+    return ({ data, source, origin }) => {
+        var _a;
+        if (!isHubspotEventData(data)) {
+            return;
+        }
+        if (data.id !== formId) {
+            return;
+        }
+        if (source === window) {
+            return;
+        }
+        (_a = source) === null || _a === void 0 ? void 0 : _a.postMessage(data, origin);
+    };
+}
+export function handleHubspotEvents(handlers, formId) {
+    return ({ data }) => {
+        var _a, _b, _c, _d;
+        if (!isHubspotEventData(data)) {
+            return;
+        }
+        if (data.id !== formId) {
+            return;
+        }
+        switch (data.eventName) {
+            case 'onBeforeFormInit': {
+                (_a = handlers.onBeforeLoad) === null || _a === void 0 ? void 0 : _a.call(handlers, data);
+                break;
+            }
+            case 'onFormReady': {
+                (_b = handlers.onLoad) === null || _b === void 0 ? void 0 : _b.call(handlers, data);
+                break;
+            }
+            case 'onFormSubmit': {
+                (_c = handlers.onBeforeSubmit) === null || _c === void 0 ? void 0 : _c.call(handlers, data);
+                break;
+            }
+            case 'onFormSubmitted': {
+                (_d = handlers.onSubmit) === null || _d === void 0 ? void 0 : _d.call(handlers, data);
+                break;
+            }
+            default:
+                break;
+        }
+    };
+}

package/build/esm/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './blocks';
+export * from './scroll';
+export * from './url';
+export * from './cn';
+export * from './url';
+export * from './theme';
+export { Lang, configure } from './configure';
+export type { HubspotEventData, HubspotEventHandlers, HubspotEventName } from './hubspot';
+export { isHubspotEventData } from './hubspot';

package/build/esm/utils/index.js

@@ -0,0 +1,8 @@
+export * from './blocks';
+export * from './scroll';
+export * from './url';
+export * from './cn';
+export * from './url';
+export * from './theme';
+export { Lang, configure } from './configure';
+export { isHubspotEventData } from './hubspot';

package/build/esm/utils/registerKeyset.d.ts

@@ -0,0 +1,5 @@
+import { i18n } from '../i18n';
+import { Lang } from './configure';
+declare type KeysData = Parameters<typeof i18n.registerKeyset>[2];
+export declare function registerKeyset<T extends KeysData>(data: Record<Lang, T>, keysetName: string): (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export {};

package/build/esm/utils/registerKeyset.js

@@ -0,0 +1,5 @@
+import { i18n } from '../i18n';
+export function registerKeyset(data, keysetName) {
+    Object.entries(data).forEach(([lang, keys]) => i18n.registerKeyset(lang, keysetName, keys));
+    return i18n.keyset(keysetName);
+}