@gravity-ui/page-constructor 4.8.0 → 4.9.1-alpha.0

package/README.md

@@ -386,3 +386,7 @@ export const MyAppEditor = ({initialContent, onChange, transformContent}: MyAppE
   <Editor content={initialContent} onChange={onChange} transformContent={transformContent} />
 );
 ```
+
+## Tests
+
+Comprehensive documentation is available at the provided [link](./test-utils/docs/README.md).

package/build/cjs/components/MetaInfo/MetaInfo.css

@@ -5,8 +5,6 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-2-line-height);
   display: flex;
   align-items: center;
-  font-weight: 500;
-  color: var(--pc-media-card-meta-info-color);
 }
 .pc-meta-info__item:not(:first-child) {
   margin-left: 16px;

package/build/cjs/components/MetaInfo/MetaInfo.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
+const index_1 = require("../index");
 const b = (0, utils_1.block)('meta-info');
-const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (react_1.default.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement(index_1.YFMWrapper, { content: metaInfoItem, key: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
 exports.default = MetaInfo;

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -84,6 +84,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/build/cjs/text-transform/common.d.ts

@@ -1,13 +1,14 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { Lang } from '../utils/configure';
 export type ComplexItem = {
     [key: string]: string;
 };
 export type Item = string | null | ComplexItem;
 export type Transformer = (text: string) => string;
-export type TransformerRaw = (lang: Lang, content: string) => string;
+export type TransformerRaw = (lang: Lang, content: string, additionalPlugins: MarkdownItPluginCb[]) => string;
 export type Parser<T = any> = (transformer: Transformer, block: T) => T;
 export declare const createItemsParser: (fields: string[]) => (transformer: Transformer, items: Item[]) => (string | {
     [x: string]: string;
 } | null)[];
-export declare function yfmTransformer(lang: Lang, content: string): string;
+export declare function yfmTransformer(lang: Lang, content: string, additionalPlugins?: MarkdownItPluginCb[]): string;
 export declare function typografTransformer(lang: Lang, content: string): string;

package/build/cjs/text-transform/common.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.typografTransformer = exports.yfmTransformer = exports.createItemsParser = void 0;
+const tslib_1 = require("tslib");
+const plugins_1 = tslib_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 +22,11 @@ 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, additionalPlugins = []) {
+    const { html } = (0, utils_1.fullTransform)(content, {
+        lang,
+        plugins: [...plugins_1.default, ...additionalPlugins],
+    });
     return html;
 }
 exports.yfmTransformer = yfmTransformer;

package/build/cjs/text-transform/config.js

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

package/build/cjs/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;
+        additionalPlugins?: MarkdownItPluginCb[];
     };
 };
 export declare const contentTransformer: ({ content, options }: ContentTransformerProps) => {

package/build/cjs/text-transform/transformers.js

@@ -2,17 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.contentTransformer = void 0;
 const tslib_1 = require("tslib");
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const config_1 = require("./config");
 const filter_1 = require("./filter");
-function transformBlocks(blocks, lang, customConfig = {}) {
+function transformBlocks(blocks, lang, customConfig = {}, additionalPlugins = []) {
     const fullConfig = Object.assign(Object.assign({}, config_1.config), customConfig);
     const clonedBlocks = lodash_1.default.cloneDeep(blocks);
-    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block));
+    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block, additionalPlugins));
 }
-function transformBlock(lang, blocksConfig, block) {
+function transformBlock(lang, blocksConfig, block, additionalPlugins) {
     const blockConfig = blocksConfig[block.type];
     if (block) {
         if ('randomOrder' in block && block.randomOrder && 'children' in block && block.children) {
@@ -23,7 +21,7 @@ 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) => transformerRaw(lang, content, additionalPlugins);
             if (fields) {
                 fields.forEach((field) => {
                     if (block[field]) {
@@ -47,9 +45,9 @@ function transformBlock(lang, blocksConfig, block) {
     return block;
 }
 const contentTransformer = ({ content, options }) => {
-    const { lang, customConfig = {}, vars } = options;
+    const { lang, customConfig = {}, vars, additionalPlugins = [] } = options;
     const { blocks = [] } = (vars ? (0, filter_1.filterContent)(content, vars) : content);
-    const transformedBlocks = transformBlocks(blocks, lang, customConfig);
+    const transformedBlocks = transformBlocks(blocks, lang, customConfig, additionalPlugins);
     return {
         blocks: transformedBlocks,
     };

package/build/esm/components/MetaInfo/MetaInfo.css

@@ -5,8 +5,6 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-2-line-height);
   display: flex;
   align-items: center;
-  font-weight: 500;
-  color: var(--pc-media-card-meta-info-color);
 }
 .pc-meta-info__item:not(:first-child) {
   margin-left: 16px;

package/build/esm/components/MetaInfo/MetaInfo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { block } from '../../utils';
+import { YFMWrapper } from '../index';
 import './MetaInfo.css';
 const b = block('meta-info');
-const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement(YFMWrapper, { content: metaInfoItem, key: metaInfoItem, className: b('item'), modifiers: { constructor: true, constructorMetaInfo: true } })))));
 export default MetaInfo;

package/build/esm/containers/PageConstructor/PageConstructor.css

@@ -84,6 +84,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/build/esm/text-transform/common.d.ts

@@ -1,13 +1,14 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { Lang } from '../utils/configure';
 export type ComplexItem = {
     [key: string]: string;
 };
 export type Item = string | null | ComplexItem;
 export type Transformer = (text: string) => string;
-export type TransformerRaw = (lang: Lang, content: string) => string;
+export type TransformerRaw = (lang: Lang, content: string, additionalPlugins: MarkdownItPluginCb[]) => string;
 export type Parser<T = any> = (transformer: Transformer, block: T) => T;
 export declare const createItemsParser: (fields: string[]) => (transformer: Transformer, items: Item[]) => (string | {
     [x: string]: string;
 } | null)[];
-export declare function yfmTransformer(lang: Lang, content: string): string;
+export declare function yfmTransformer(lang: Lang, content: string, additionalPlugins?: MarkdownItPluginCb[]): string;
 export declare function typografTransformer(lang: Lang, content: string): string;

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

@@ -1,3 +1,4 @@
+import defaultPlugins from '@doc-tools/transform/lib/plugins';
 import { fullTransform, typografToHTML } from './utils';
 export const createItemsParser = (fields) => (transformer, items) => items.map((item) => {
     if (!item) {
@@ -16,8 +17,11 @@ export const createItemsParser = (fields) => (transformer, items) => items.map((
         }, {}));
     }
 });
-export function yfmTransformer(lang, content) {
-    const { html } = fullTransform(content, { lang });
+export function yfmTransformer(lang, content, additionalPlugins = []) {
+    const { html } = fullTransform(content, {
+        lang,
+        plugins: [...defaultPlugins, ...additionalPlugins],
+    });
     return html;
 }
 export function typografTransformer(lang, content) {

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

@@ -122,7 +122,7 @@ export const config = {
         {
             fields: ['metaInfo'],
             parser: createItemsParser([]),
-            transformer: typografTransformer,
+            transformer: yfmTransformer,
         },
     ],
     [SubBlockType.Quote]: {

package/build/esm/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;
+        additionalPlugins?: MarkdownItPluginCb[];
     };
 };
 export declare const contentTransformer: ({ content, options }: ContentTransformerProps) => {

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

@@ -1,14 +1,12 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
 import _ from 'lodash';
 import { config } from './config';
 import { filterContent } from './filter';
-function transformBlocks(blocks, lang, customConfig = {}) {
+function transformBlocks(blocks, lang, customConfig = {}, additionalPlugins = []) {
     const fullConfig = Object.assign(Object.assign({}, config), customConfig);
     const clonedBlocks = _.cloneDeep(blocks);
-    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block));
+    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block, additionalPlugins));
 }
-function transformBlock(lang, blocksConfig, block) {
+function transformBlock(lang, blocksConfig, block, additionalPlugins) {
     const blockConfig = blocksConfig[block.type];
     if (block) {
         if ('randomOrder' in block && block.randomOrder && 'children' in block && block.children) {
@@ -19,7 +17,7 @@ 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) => transformerRaw(lang, content, additionalPlugins);
             if (fields) {
                 fields.forEach((field) => {
                     if (block[field]) {
@@ -43,9 +41,9 @@ function transformBlock(lang, blocksConfig, block) {
     return block;
 }
 export const contentTransformer = ({ content, options }) => {
-    const { lang, customConfig = {}, vars } = options;
+    const { lang, customConfig = {}, vars, additionalPlugins = [] } = options;
     const { blocks = [] } = (vars ? filterContent(content, vars) : content);
-    const transformedBlocks = transformBlocks(blocks, lang, customConfig);
+    const transformedBlocks = transformBlocks(blocks, lang, customConfig, additionalPlugins);
     return {
         blocks: transformedBlocks,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.8.0",
+  "version": "4.9.1-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

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

@@ -1,13 +1,14 @@
+import { MarkdownItPluginCb } from '@doc-tools/transform/lib/plugins/typings';
 import { Lang } from '../utils/configure';
 export type ComplexItem = {
     [key: string]: string;
 };
 export type Item = string | null | ComplexItem;
 export type Transformer = (text: string) => string;
-export type TransformerRaw = (lang: Lang, content: string) => string;
+export type TransformerRaw = (lang: Lang, content: string, additionalPlugins: MarkdownItPluginCb[]) => string;
 export type Parser<T = any> = (transformer: Transformer, block: T) => T;
 export declare const createItemsParser: (fields: string[]) => (transformer: Transformer, items: Item[]) => (string | {
     [x: string]: string;
 } | null)[];
-export declare function yfmTransformer(lang: Lang, content: string): string;
+export declare function yfmTransformer(lang: Lang, content: string, additionalPlugins?: MarkdownItPluginCb[]): string;
 export declare function typografTransformer(lang: Lang, content: string): string;

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,11 @@ 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, additionalPlugins = []) {
+    const { html } = (0, utils_1.fullTransform)(content, {
+        lang,
+        plugins: [...plugins_1.default, ...additionalPlugins],
+    });
     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;
+        additionalPlugins?: MarkdownItPluginCb[];
     };
 };
 export declare const contentTransformer: ({ content, options }: ContentTransformerProps) => {

package/server/text-transform/transformers.js

@@ -4,17 +4,15 @@ 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 = {}, additionalPlugins = []) {
     const fullConfig = Object.assign(Object.assign({}, config_1.config), customConfig);
     const clonedBlocks = lodash_1.default.cloneDeep(blocks);
-    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block));
+    return clonedBlocks.map((block) => transformBlock(lang, fullConfig, block, additionalPlugins));
 }
-function transformBlock(lang, blocksConfig, block) {
+function transformBlock(lang, blocksConfig, block, additionalPlugins) {
     const blockConfig = blocksConfig[block.type];
     if (block) {
         if ('randomOrder' in block && block.randomOrder && 'children' in block && block.children) {
@@ -25,7 +23,7 @@ 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) => transformerRaw(lang, content, additionalPlugins);
             if (fields) {
                 fields.forEach((field) => {
                     if (block[field]) {
@@ -49,9 +47,9 @@ function transformBlock(lang, blocksConfig, block) {
     return block;
 }
 const contentTransformer = ({ content, options }) => {
-    const { lang, customConfig = {}, vars } = options;
+    const { lang, customConfig = {}, vars, additionalPlugins = [] } = options;
     const { blocks = [] } = (vars ? (0, filter_1.filterContent)(content, vars) : content);
-    const transformedBlocks = transformBlocks(blocks, lang, customConfig);
+    const transformedBlocks = transformBlocks(blocks, lang, customConfig, additionalPlugins);
     return {
         blocks: transformedBlocks,
     };

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,