@gravity-ui/page-constructor 4.1.2 → 4.3.12-alpha.3

package/server/text-transform/common.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.typografTransformer = exports.yfmTransformer = exports.createItemsParser = void 0;
+const plugins_1 = __importDefault(require("@doc-tools/transform/lib/plugins"));
 const utils_1 = require("./utils");
 const createItemsParser = (fields) => (transformer, items) => items.map((item) => {
     if (!item) {
@@ -20,8 +24,12 @@ const createItemsParser = (fields) => (transformer, items) => items.map((item) =
     }
 });
 exports.createItemsParser = createItemsParser;
-function yfmTransformer(lang, content) {
-    const { html } = (0, utils_1.fullTransform)(content, { lang });
+function yfmTransformer(lang, content, options = {}) {
+    const { plugins = [] } = options;
+    const { html } = (0, utils_1.fullTransform)(content, {
+        lang,
+        plugins: [...plugins_1.default, ...plugins],
+    });
     return html;
 }
 exports.yfmTransformer = yfmTransformer;

package/server/text-transform/config.js

@@ -135,7 +135,7 @@ exports.config = {
         {
             fields: ['metaInfo'],
             parser: (0, common_1.createItemsParser)([]),
-            transformer: common_1.typografTransformer,
+            transformer: common_1.yfmTransformer,
         },
     ],
     [models_1.SubBlockType.Quote]: {

package/server/text-transform/transformers.d.ts

@@ -1,3 +1,4 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { ConstructorBlock } from '../models/constructor';
 import { Lang } from '../utils/configure';
 export type ContentVariables = Record<string, string>;
@@ -9,6 +10,7 @@ export type ContentTransformerProps = {
         lang: Lang;
         customConfig?: {};
         vars?: ContentVariables;
+        plugins?: MarkdownItPluginCb[];
     };
 };
 export declare const contentTransformer: ({ content, options }: ContentTransformerProps) => {

package/server/text-transform/transformers.js

@@ -4,17 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contentTransformer = void 0;
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 const lodash_1 = __importDefault(require("lodash"));
 const config_1 = require("./config");
 const filter_1 = require("./filter");
-function transformBlocks(blocks, lang, customConfig = {}) {
+function transformBlocks(blocks, lang, customConfig = {}, options = {}) {
     const fullConfig = Object.assign(Object.assign({}, config_1.config), customConfig);
+    const { plugins = [] } = options;
     const clonedBlocks = lodash_1.default.cloneDeep(blocks);
-    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block));
+    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block, plugins));
 }
-function transformBlock(lang, blocksConfig, block) {
+function transformBlock(lang, blocksConfig, block, plugins) {
     const blockConfig = blocksConfig[block.type];
     if (block) {
         if ('randomOrder' in block && block.randomOrder && 'children' in block && block.children) {
@@ -25,7 +24,9 @@ function transformBlock(lang, blocksConfig, block) {
         const configs = Array.isArray(blockConfig) ? blockConfig : [blockConfig];
         configs.forEach((transformConfig) => {
             const { fields, transformer: transformerRaw, parser } = transformConfig;
-            const transformer = transformerRaw.bind(null, lang);
+            const transformer = (content) => 
+            // eslint-disable-next-line no-useless-call
+            transformerRaw.call(null, lang, content, { plugins });
             if (fields) {
                 fields.forEach((field) => {
                     if (block[field]) {
@@ -49,9 +50,11 @@ function transformBlock(lang, blocksConfig, block) {
     return block;
 }
 const contentTransformer = ({ content, options }) => {
-    const { lang, customConfig = {}, vars } = options;
+    const { lang, customConfig = {}, vars, plugins = [] } = options;
     const { blocks = [] } = (vars ? (0, filter_1.filterContent)(content, vars) : content);
-    const transformedBlocks = transformBlocks(blocks, lang, customConfig);
+    const transformedBlocks = transformBlocks(blocks, lang, customConfig, {
+        plugins,
+    });
     return {
         blocks: transformedBlocks,
     };

package/server/utils/blocks.d.ts

@@ -1,13 +1,10 @@
 import { ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize } from '../models';
-export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
+export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h3" | "h4";
 export declare function hasBlockTag(content: string): boolean;
 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 getCustomSubBlockTypes: (customBlocks?: CustomConfig) => string[];
-export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];
+export declare const getCustomItems: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => {};
+export declare const getCustomTypes: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => string[];
 export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock[];
 export declare const getHeaderBlock: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock | undefined;
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
+export declare const getQaAttrubutes: (qa?: string, ...customKeys: (string | Array<string>)[]) => Record<string, string>;

package/server/utils/blocks.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+exports.getQaAttrubutes = exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
+const lodash_1 = require("lodash");
 const models_1 = require("../models");
 const BLOCK_ELEMENTS = [
     'div',
@@ -39,14 +40,15 @@ const BLOCK_ELEMENTS = [
     'td',
 ];
 const BLOCK_ELEMENTS_REGEX = `<(${BLOCK_ELEMENTS.join('|')})[^>]*>`;
+const QA_ATTRIBUTES_KEYS = ['container', 'content', 'wrapper', 'image', 'button', 'animate'];
 function getHeaderTag(size) {
     switch (size) {
         case 'l':
             return 'h1';
         case 's':
-            return 'h4';
+            return 'h3';
         case 'xs':
-            return 'h5';
+            return 'h4';
         case 'm':
         default:
             return 'h2';
@@ -62,23 +64,18 @@ function getBlockKey(block, index) {
     return `${block.type}-${index}`;
 }
 exports.getBlockKey = getBlockKey;
-const getCustomBlockTypes = ({ blocks = {}, headers = {} } = {}) => [
-    ...Object.keys(blocks),
-    ...Object.keys(headers),
-];
-exports.getCustomBlockTypes = getCustomBlockTypes;
-const getCustomItems = ({ blocks = {}, headers = {}, subBlocks = {} } = {}) => (Object.assign(Object.assign(Object.assign({}, blocks), headers), subBlocks));
-exports.getCustomItems = getCustomItems;
-const getCustomSubBlockTypes = (customBlocks = {}) => {
-    const { subBlocks = {} } = customBlocks;
-    return Object.keys(subBlocks);
+const getCustomItems = (types, customBlocks = {}) => {
+    return types.reduce((result, type) => {
+        return Object.assign(result, customBlocks[type] || {});
+    }, {});
 };
-exports.getCustomSubBlockTypes = getCustomSubBlockTypes;
-const getCustomHeaderTypes = (customBlocks = {}) => {
-    const { headers = {} } = customBlocks;
-    return Object.keys(headers);
+exports.getCustomItems = getCustomItems;
+const getCustomTypes = (types, customBlocks = {}) => {
+    return types.reduce((result, type) => {
+        return result.concat(Object.keys(customBlocks[type] || {}));
+    }, []);
 };
-exports.getCustomHeaderTypes = getCustomHeaderTypes;
+exports.getCustomTypes = getCustomTypes;
 const getShareUrlWithParams = (url, params = {}) => {
     const result = new URL(url);
     Object.entries(params).forEach(([name, value]) => {
@@ -125,3 +122,15 @@ const getShareLink = (url, type, title, text) => {
     }
 };
 exports.getShareLink = getShareLink;
+const getQaAttrubutes = (qa, ...customKeys) => {
+    const attributes = {};
+    if (qa) {
+        const keys = QA_ATTRIBUTES_KEYS.concat((0, lodash_1.flatten)(customKeys));
+        keys.forEach((key) => {
+            attributes[(0, lodash_1.camelCase)(key)] = `${qa}-${key}`;
+        });
+        attributes.default = qa;
+    }
+    return attributes;
+};
+exports.getQaAttrubutes = getQaAttrubutes;

package/server/utils/cn.d.ts

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

package/server/utils/cn.js

@@ -1,12 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.block = exports.NAMESPACE = void 0;
-const bem_cn_lite_1 = __importDefault(require("bem-cn-lite"));
+exports.block = exports.cn = exports.NAMESPACE = void 0;
+const classname_1 = require("@bem-react/classname");
 exports.NAMESPACE = 'pc-';
-function block(name) {
-    return (0, bem_cn_lite_1.default)(`${exports.NAMESPACE}${name}`);
-}
-exports.block = block;
+exports.cn = (0, classname_1.withNaming)({ e: '__', m: '_' });
+exports.block = (0, classname_1.withNaming)({ n: exports.NAMESPACE, e: '__', m: '_' });

package/styles/mixins.scss

@@ -164,6 +164,7 @@
         padding: 0 0 $indentL;
 
         &:first-child {
+            // @deprecated
             margin-top: var(--pc-first-block-indent, #{$indentXXL});
         }
     }
@@ -246,7 +247,9 @@
 
     &_border_line,
     &_border_none {
-        cursor: default;
+        @if $hover {
+            @include card-hover();
+        }
     }
 
     &_border_shadow {

package/styles/storybook/common.scss

@@ -29,7 +29,9 @@
 }
 
 .pc-page-constructor {
+    // @deprecated
     --pc-first-block-mobile-indent: 32px;
+    // @deprecated
     --pc-first-block-indent: 64px;
     margin-bottom: 120px;
 }

package/styles/styles.css

@@ -30,6 +30,10 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor_notice p {
   color: var(--g-color-text-secondary);
 }
+.yfm_constructor.yfm_constructor_meta_info p {
+  color: var(--pc-media-card-meta-info-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
 .yfm_constructor.yfm_constructor li,

package/styles/yfm.scss

@@ -34,6 +34,13 @@
             }
         }
 
+        &_meta_info {
+            p {
+                color: var(--pc-media-card-meta-info-color);
+                font-weight: var(--g-text-accent-font-weight);
+            }
+        }
+
         ul,
         ol,
         li,