- {text && (
-
- {text}
-
- )}
- {yfmText && (
+ {textLocal && (
)}
diff --git a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-BorderLine-light-chromium-linux.png b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-BorderLine-light-chromium-linux.png
index 821d371e3..6a552c3d2 100644
Binary files a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-BorderLine-light-chromium-linux.png and b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-BorderLine-light-chromium-linux.png differ
diff --git a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-BorderLine-light-webkit-linux.png b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-BorderLine-light-webkit-linux.png
index 43003caa7..f40bf9671 100644
Binary files a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-BorderLine-light-webkit-linux.png and b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-BorderLine-light-webkit-linux.png differ
diff --git a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-Default-light-chromium-linux.png b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-Default-light-chromium-linux.png
index e6d02464e..f281cd753 100644
Binary files a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-Default-light-chromium-linux.png and b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-Default-light-chromium-linux.png differ
diff --git a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-Default-light-webkit-linux.png b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-Default-light-webkit-linux.png
index db27e9e80..88487e219 100644
Binary files a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-Default-light-webkit-linux.png and b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-Default-light-webkit-linux.png differ
diff --git a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-QuoteTypes-light-chromium-linux.png b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-QuoteTypes-light-chromium-linux.png
index 62cc442ec..1be730823 100644
Binary files a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-QuoteTypes-light-chromium-linux.png and b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-QuoteTypes-light-chromium-linux.png differ
diff --git a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-QuoteTypes-light-webkit-linux.png b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-QuoteTypes-light-webkit-linux.png
index 57573e8e3..6ef401103 100644
Binary files a/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-QuoteTypes-light-webkit-linux.png and b/src/sub-blocks/Quote/__snapshots__/Quote.visual.test.tsx-snapshots/Quote-render-stories-QuoteTypes-light-webkit-linux.png differ
diff --git a/src/sub-blocks/Quote/__stories__/Quote.stories.tsx b/src/sub-blocks/Quote/__stories__/Quote.stories.tsx
index 4dcf3a178..acb9736de 100644
--- a/src/sub-blocks/Quote/__stories__/Quote.stories.tsx
+++ b/src/sub-blocks/Quote/__stories__/Quote.stories.tsx
@@ -1,6 +1,6 @@
import {Meta, StoryFn} from '@storybook/react';
-import {yfmTransform} from '../../../../.storybook/utils';
+import {yfmTransformInline} from '../../../../.storybook/utils';
import {QuoteProps, QuoteType} from '../../../models';
import Quote from '../Quote';
@@ -34,7 +34,7 @@ export const DarkTheme = DefaultTemplate.bind({});
const DefaultArgs = {
...data.default.content,
- yfmText: yfmTransform(data.default.content.yfmText),
+ yfmText: yfmTransformInline(data.default.content.yfmText),
} as QuoteProps;
Default.args = DefaultArgs;
diff --git a/src/text-transform/common.ts b/src/text-transform/common.ts
index 1c1d8d542..7338cf88c 100644
--- a/src/text-transform/common.ts
+++ b/src/text-transform/common.ts
@@ -4,47 +4,78 @@ import {MarkdownItPluginCb} from '@diplodoc/transform/lib/plugins/typings';
import {Lang} from './types';
import {fullTransform, typografToHTML} from './utils';
-export type ComplexItem = {[key: string]: string};
+export type ComplexItem = {[key: string]: string | object};
export type Item = string | null | ComplexItem;
export type Transformer = (text: string) => string;
export type TransformerRaw = (
lang: Lang,
content: string,
- options: {plugins: MarkdownItPluginCb[]},
+ options: {plugins: MarkdownItPluginCb[]; renderInline?: boolean},
) => string;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type Parser = (transformer: Transformer, block: T) => T;
-export const createItemsParser = (fields: string[]) => (transformer: Transformer, items: Item[]) =>
- items.map((item) => {
- if (!item) {
- return item;
- } else if (typeof item === 'string') {
- return transformer(item);
- } else {
- return {
- ...item,
- ...fields.reduce((acc, fieldName) => {
- if (item[fieldName]) {
- // eslint-disable-next-line no-param-reassign
- acc[fieldName] = transformer(item[fieldName]);
- }
-
- return acc;
- }, {}),
- };
- }
- });
+export const createItemsParser =
+ (fields: string[]) => (transformer: Transformer, items: Item[]) => {
+ const applyTransform = (itemLocal: string | object) =>
+ typeof itemLocal === 'string' ? transformer(itemLocal as string) : itemLocal;
+
+ return items.map((item) => {
+ if (!item) {
+ return item;
+ } else if (typeof item === 'string') {
+ return transformer(item);
+ } else {
+ return {
+ ...item,
+ ...fields.reduce((acc, fieldName) => {
+ if (fieldName.includes('.')) {
+ const [firstProperty, secondProperty] = fieldName.split('.');
+ const root = item[firstProperty] as unknown as Record;
+ if (!root || typeof root !== 'object') {
+ return acc;
+ }
+
+ if (Array.isArray(root)) {
+ if (!acc[firstProperty]) {
+ // eslint-disable-next-line no-param-reassign
+ acc[firstProperty] = [];
+ }
+
+ // eslint-disable-next-line no-param-reassign
+ acc[firstProperty] = root.map((subItem: ComplexItem) => ({
+ ...subItem,
+ [secondProperty]: applyTransform(subItem[secondProperty]),
+ }));
+ } else {
+ // eslint-disable-next-line no-param-reassign
+ acc[firstProperty] = {
+ ...root,
+ [secondProperty]: applyTransform(root[secondProperty]),
+ };
+ }
+ } else if (item[fieldName]) {
+ // eslint-disable-next-line no-param-reassign
+ acc[fieldName] = applyTransform(item[fieldName]);
+ }
+
+ return acc;
+ }, {} as ComplexItem),
+ };
+ }
+ });
+ };
export function yfmTransformer(
lang: Lang,
content: string,
- options: {plugins?: MarkdownItPluginCb[]} = {},
+ options: {plugins?: MarkdownItPluginCb[]; renderInline?: boolean} = {},
) {
- const {plugins = []} = options;
+ const {plugins = [], renderInline = false} = options;
const {html} = fullTransform(content, {
lang,
plugins: [...defaultPlugins, ...plugins],
+ renderInline,
});
return html;
diff --git a/src/text-transform/config.ts b/src/text-transform/config.ts
index 75478722f..ab1c08ca5 100644
--- a/src/text-transform/config.ts
+++ b/src/text-transform/config.ts
@@ -24,7 +24,7 @@ import {
yfmTransformer,
} from './common';
-function parseTableBlock(transformer: Transformer, content: TableProps) {
+function parseTableBlockLegend(transformer: Transformer, content: TableProps) {
const legend = content?.legend;
return {
@@ -33,6 +33,29 @@ function parseTableBlock(transformer: Transformer, content: TableProps) {
};
}
+function parseTableBlockContent(transformer: Transformer, content: TableProps) {
+ const legend = content?.legend;
+ const tableContent = content?.content;
+
+ return {
+ ...(content || {}),
+ content:
+ tableContent &&
+ tableContent.map((row, i) =>
+ row.map((cell, j) => {
+ if (legend) {
+ if (i === 0 || j === 0) {
+ return transformer(cell);
+ }
+ return cell;
+ } else {
+ return transformer(cell);
+ }
+ }),
+ ),
+ };
+}
+
function parseFeatures(transformer: Transformer, items: ExtendedFeaturesItem[]) {
return items.map(({title, text, ...rest}) => ({
title: title && transformer(title),
@@ -140,8 +163,9 @@ const parseBackgroundCardItems = (transformer: Transformer, items: ContentItemPr
export const blockHeaderTransformer = [
{
fields: ['title'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
parser: parseTitle,
+ renderInline: true,
},
{
fields: ['description'],
@@ -153,6 +177,7 @@ interface BlockConfig {
transformer: TransformerRaw;
fields?: string[];
parser?: Parser;
+ renderInline?: boolean;
}
export type BlocksConfig = Record;
@@ -161,7 +186,8 @@ export const config: BlocksConfig = {
[SubBlockType.BasicCard]: [
{
fields: ['title'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
+ renderInline: true,
},
{
fields: ['text', 'additionalInfo'],
@@ -170,13 +196,9 @@ export const config: BlocksConfig = {
],
[SubBlockType.BackgroundCard]: [
{
- fields: ['text', 'additionalInfo'],
+ fields: ['title', 'text', 'additionalInfo'],
transformer: yfmTransformer,
},
- {
- fields: ['title'],
- transformer: typografTransformer,
- },
{
fields: ['list'],
parser: parseBackgroundCardItems,
@@ -190,12 +212,9 @@ export const config: BlocksConfig = {
],
[SubBlockType.ImageCard]: [
{
- fields: ['text', 'additionalInfo'],
+ fields: ['title', 'text', 'additionalInfo'],
transformer: yfmTransformer,
- },
- {
- fields: ['title'],
- transformer: typografTransformer,
+ renderInline: true,
},
],
[SubBlockType.LayoutItem]: [
@@ -207,7 +226,8 @@ export const config: BlocksConfig = {
{
fields: ['content'],
parser: parseContentLayoutTitle,
- transformer: typografTransformer,
+ transformer: yfmTransformer,
+ renderInline: true,
},
{
fields: ['metaInfo'],
@@ -217,26 +237,30 @@ export const config: BlocksConfig = {
],
[SubBlockType.Quote]: [
{
- fields: ['text'],
- transformer: typografTransformer,
- },
- {
- fields: ['yfmText'],
+ fields: ['text', 'yfmText'],
transformer: yfmTransformer,
+ renderInline: true,
},
],
[BlockType.ExtendedFeaturesBlock]: [
...blockHeaderTransformer,
{
fields: ['items'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
parser: createItemsParser(['title']),
+ renderInline: true,
},
{
fields: ['items'],
transformer: yfmTransformer,
parser: createItemsParser(['text', 'additionalInfo']),
},
+ {
+ fields: ['items'],
+ transformer: yfmTransformer,
+ parser: createItemsParser(['list.text']),
+ renderInline: true,
+ },
],
[BlockType.PromoFeaturesBlock]: [
...blockHeaderTransformer,
@@ -246,16 +270,14 @@ export const config: BlocksConfig = {
parser: parsePromoFeatures,
},
],
+ [BlockType.SliderOldBlock]: blockHeaderTransformer,
[BlockType.SliderBlock]: blockHeaderTransformer,
[BlockType.CompaniesBlock]: blockHeaderTransformer,
[BlockType.QuestionsBlock]: [
{
- fields: ['title'],
- transformer: typografTransformer,
- },
- {
- fields: ['text', 'additionalInfo'],
+ fields: ['title', 'text', 'additionalInfo'],
transformer: yfmTransformer,
+ renderInline: true,
},
{
fields: ['items'],
@@ -282,7 +304,8 @@ export const config: BlocksConfig = {
[BlockType.BannerBlock]: [
{
fields: ['title'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
+ renderInline: true,
},
{
fields: ['subtitle'],
@@ -292,7 +315,8 @@ export const config: BlocksConfig = {
[SubBlockType.BannerCard]: [
{
fields: ['title'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
+ renderInline: true,
},
{
fields: ['subtitle'],
@@ -302,7 +326,7 @@ export const config: BlocksConfig = {
[BlockType.MediaBlock]: [
...blockHeaderTransformer,
{
- fields: ['title', 'additionalInfo'],
+ fields: ['additionalInfo'],
transformer: yfmTransformer,
},
{
@@ -327,27 +351,35 @@ export const config: BlocksConfig = {
},
{
fields: ['items'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
parser: parseItemsTitle,
+ renderInline: true,
},
],
[BlockType.TableBlock]: [
+ {
+ fields: ['title'],
+ transformer: yfmTransformer,
+ renderInline: true,
+ },
{
fields: ['table'],
transformer: yfmTransformer,
- parser: parseTableBlock,
+ parser: parseTableBlockLegend,
},
- ],
- [BlockType.HeaderSliderBlock]: [
{
- fields: ['items'],
- transformer: typografTransformer,
- parser: createItemsParser(['title', 'overtitle']),
+ fields: ['table'],
+ transformer: yfmTransformer,
+ parser: parseTableBlockContent,
+ renderInline: true,
},
+ ],
+ [BlockType.HeaderSliderBlock]: [
{
fields: ['items'],
transformer: yfmTransformer,
- parser: createItemsParser(['description']),
+ parser: createItemsParser(['title', 'overtitle', 'description']),
+ renderInline: true,
},
],
[SubBlockType.PriceDetailed]: [
@@ -361,6 +393,11 @@ export const config: BlocksConfig = {
fields: ['description', 'additionalInfo'],
transformer: yfmTransformer,
},
+ {
+ fields: ['overtitle', 'title'],
+ transformer: yfmTransformer,
+ renderInline: true,
+ },
],
[BlockType.ContentLayoutBlock]: [
{
@@ -370,8 +407,9 @@ export const config: BlocksConfig = {
},
{
fields: ['textContent'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
parser: parseContentLayoutTitle,
+ renderInline: true,
},
],
[SubBlockType.Content]: [
@@ -381,8 +419,9 @@ export const config: BlocksConfig = {
},
{
fields: ['title'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
parser: parseTitle,
+ renderInline: true,
},
{
fields: ['list'],
@@ -391,6 +430,11 @@ export const config: BlocksConfig = {
},
],
[BlockType.InfoBlock]: [
+ {
+ fields: ['title'],
+ transformer: yfmTransformer,
+ renderInline: true,
+ },
{
fields: ['rightContent', 'leftContent'],
transformer: yfmTransformer,
@@ -398,14 +442,16 @@ export const config: BlocksConfig = {
},
{
fields: ['rightContent', 'leftContent'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
parser: parseContentLayoutTitle,
+ renderInline: true,
},
],
[BlockType.ShareBlock]: [
{
fields: ['title'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
+ renderInline: true,
},
],
[BlockType.CardLayoutBlock]: blockHeaderTransformer,
@@ -414,12 +460,13 @@ export const config: BlocksConfig = {
[SubBlockType.PriceCard]: [
{
fields: ['title'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
+ renderInline: true,
},
{
fields: ['list'],
transformer: yfmTransformer,
- parser: createItemsParser(['text']),
+ parser: createItemsParser(['title', 'text']),
},
],
[BlockType.FormBlock]: [
@@ -430,8 +477,9 @@ export const config: BlocksConfig = {
},
{
fields: ['textContent'],
- transformer: typografTransformer,
+ transformer: yfmTransformer,
parser: parseContentLayoutTitle,
+ renderInline: true,
},
],
};
diff --git a/src/text-transform/transformers.ts b/src/text-transform/transformers.ts
index d227fcf39..32b87d385 100644
--- a/src/text-transform/transformers.ts
+++ b/src/text-transform/transformers.ts
@@ -56,10 +56,10 @@ function transformBlock(
const configs = Array.isArray(blockConfig) ? blockConfig : [blockConfig];
configs.forEach((transformConfig) => {
- const {fields, transformer: transformerRaw, parser} = transformConfig;
+ const {fields, transformer: transformerRaw, parser, renderInline} = transformConfig;
const transformer: Transformer = (content) =>
// eslint-disable-next-line no-useless-call
- transformerRaw.call(null, lang, content, {plugins});
+ transformerRaw.call(null, lang, content, {plugins, renderInline});
if (fields) {
(fields as (keyof typeof block)[]).forEach((field) => {
diff --git a/src/utils/blocks.ts b/src/utils/blocks.ts
index 8d7ccc973..3c3399a53 100644
--- a/src/utils/blocks.ts
+++ b/src/utils/blocks.ts
@@ -1,7 +1,9 @@
+import * as React from 'react';
+
import camelCase from 'lodash/camelCase';
import flatten from 'lodash/flatten';
-import {ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize} from '../models';
+import {ConstructorBlock, CustomConfig, PCShareSocialNetwork, TagName, TextSize} from '../models';
const BLOCK_ELEMENTS = [
'div',
@@ -59,9 +61,24 @@ export function getHeaderTag(size: TextSize) {
}
}
-export function hasBlockTag(content: string): boolean {
+type SelectVariantArgs = {
+ block?: boolean;
+ content?: string;
+ children?: React.ReactNode;
+ tagName?: TagName;
+};
+
+export function selectTagName({content, children, tagName}: SelectVariantArgs): string {
+ if (!children && tagName) {
+ return tagName;
+ }
+
+ if (!content) {
+ return 'span';
+ }
+
const regex = new RegExp(BLOCK_ELEMENTS_REGEX, 'g');
- return regex.test(content);
+ return regex.test(content) ? 'div' : 'span';
}
export function getBlockKey(block: ConstructorBlock, index: number) {
diff --git a/src/widget/styles.scss b/src/widget/styles.scss
index 7a17f9ab7..7745dd8f9 100644
--- a/src/widget/styles.scss
+++ b/src/widget/styles.scss
@@ -1 +1,2 @@
@import '../../styles/styles.scss';
+@import '../../styles/fonts.scss';
diff --git a/styles/fonts.scss b/styles/fonts.scss
new file mode 100644
index 000000000..637a6e1cd
--- /dev/null
+++ b/styles/fonts.scss
@@ -0,0 +1 @@
+@import '@gravity-ui/uikit/styles/fonts.css';
diff --git a/styles/styles.scss b/styles/styles.scss
index 5c2a8d3e0..2b3d63c5b 100644
--- a/styles/styles.scss
+++ b/styles/styles.scss
@@ -1,4 +1,3 @@
-@import '@gravity-ui/uikit/styles/fonts.css';
@import '~@gravity-ui/uikit/styles/styles.css';
@import './mixins.scss';
@import './variables.scss';
diff --git a/styles/variables.scss b/styles/variables.scss
index c8682cf53..d4882bc14 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -57,3 +57,4 @@ $gridGutterMobile: 8px;
$contentWidth: calc(#{$newContentWidth} + #{$gridGutter} * 2 + #{$gridContainerPadding} * 2);
$gridContainerMargin: 16px;
+$fullscreenImageMobilePadding: 8px;