Html in the Wizard (for string fields)

src/i18n-keysets/wizard/en.json

@@ -169,6 +169,7 @@
   "label_holidays": "Holidays on the chart",
   "label_horizontal": "Horizontal",
   "label_hour": "Hour",
+  "label_html": "HTML",
   "label_ignore": "Ignore",
   "label_integer": "Integer",
   "label_invalid-name": "The chart with the specified name already exists",
@@ -193,8 +194,9 @@
   "label_logarithmic": "Logarithmic",
   "label_manual": "Manual",
   "label_markdown": "Markdown",
-  "label_markdown-tooltip": "The field value will be formatted according to the Markdown language",
   "label_markup": "Markup",
+  "label_markup-type": "Markup type",
+  "label_markup-type-tooltip": "The field value will be formatted according to the selected markup language",
   "label_max": "Maximum",
   "label_message-link-copied": "Link copied",
   "label_min": "Minimum",

src/i18n-keysets/wizard/ru.json

@@ -169,6 +169,7 @@
   "label_holidays": "Выходные на графике",
   "label_horizontal": "Горизонтальные",
   "label_hour": "Час",
+  "label_html": "HTML",
   "label_ignore": "Не отображать",
   "label_integer": "Целое число",
   "label_invalid-name": "Чарт с таким именем уже сущестует",
@@ -193,8 +194,9 @@
   "label_logarithmic": "Логарифмическая",
   "label_manual": "Вручную",
   "label_markdown": "Markdown",
-  "label_markdown-tooltip": "Значение поля будет отформатировано в соответствии с разметкой Markdown",
   "label_markup": "Разметка",
+  "label_markup-type": "Разметка",
+  "label_markup-type-tooltip": "Значение поля будет отформатировано в соответствии с выбранным языком разметки",
   "label_max": "Максимум",
   "label_message-link-copied": "Ссылка скопирована",
   "label_min": "Минимум",

src/server/components/features/features-list/HtmlInWizard.ts

@@ -0,0 +1,10 @@
+import {Feature} from '../../../../shared';
+import {createFeatureConfig} from '../utils';
+
+export default createFeatureConfig({
+    name: Feature.HtmlInWizard,
+    state: {
+        development: false,
+        production: false,
+    },
+});

src/server/modes/charts/plugins/datalens/preparers/bar-x/prepare-bar-x.ts

@@ -14,6 +14,7 @@ import {
     getXAxisMode,
     isDateField,
     isDimensionField,
+    isHtmlField,
     isMarkdownField,
     isMarkupField,
     isMeasureField,
@@ -114,6 +115,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
     const labelsLength = labels && labels.length;
     const isMarkdownLabel = isMarkdownField(labelItem);
     const isMarkupLabel = isMarkupField(labelItem);
+    const isHtmlLabel = isHtmlField(labelItem);
 
     const segmentField = segments[0];
     const segmentIndexInOrder = getSegmentsIndexInOrder(order, segmentField, idToTitle);
@@ -332,7 +334,10 @@ export function prepareBarX(args: PrepareFunctionArgs) {
                     id: line.id,
                     title: line.title || 'Null',
                     tooltip: line.tooltip,
-                    dataLabels: {...line.dataLabels, useHTML: isMarkdownLabel || isMarkupLabel},
+                    dataLabels: {
+                        ...line.dataLabels,
+                        useHTML: isMarkdownLabel || isMarkupLabel || isHtmlLabel,
+                    },
                     data: categories
                         .map((category, i) => {
                             const lineData = line.data[category];
@@ -385,6 +390,7 @@ export function prepareBarX(args: PrepareFunctionArgs) {
                             point.label = getLabelValue(innerLabels?.[category], {
                                 isMarkdownLabel,
                                 isMarkupLabel,
+                                isHtmlLabel,
                             });
 
                             if (isActionParamsEnable) {
@@ -485,6 +491,10 @@ export function prepareBarX(args: PrepareFunctionArgs) {
             ChartEditor.updateConfig({useMarkup: true});
         }
 
+        if (isHtmlLabel) {
+            ChartEditor.updateConfig({useHtml: true});
+        }
+
         if (isXCategoryAxis) {
             return {
                 graphs,

src/server/modes/charts/plugins/datalens/preparers/bar-y/prepare-bar-y-data.ts

@@ -10,6 +10,7 @@ import {
     getFakeTitleOrTitle,
     getXAxisMode,
     isDateField,
+    isHtmlField,
     isMarkdownField,
     isMarkupField,
     isMeasureField,
@@ -99,6 +100,7 @@ export function prepareBarYData({
     const labelItem = labels?.[0];
     const isMarkdownLabel = isMarkdownField(labelItem);
     const isMarkupLabel = isMarkupField(labelItem);
+    const isHtmlLabel = isHtmlField(labelItem);
 
     const isColorItemExist = Boolean(colorItem && colorItem.type !== 'PSEUDO');
     const isColorizeByMeasure = isMeasureField(colorItem);
@@ -312,7 +314,7 @@ export function prepareBarYData({
                     dataLabels: {
                         enabled: Boolean(labelItem),
                         ...line.dataLabels,
-                        useHTML: isMarkdownLabel || isMarkupLabel,
+                        useHTML: isMarkdownLabel || isMarkupLabel || isHtmlLabel,
                     },
                     data: categories
                         .map((category, i) => {
@@ -353,6 +355,7 @@ export function prepareBarYData({
                             point.label = getLabelValue(innerLabels?.[category], {
                                 isMarkdownLabel,
                                 isMarkupLabel,
+                                isHtmlLabel,
                             });
 
                             if (isActionParamsEnable) {
@@ -448,6 +451,10 @@ export function prepareBarYData({
             ChartEditor.updateConfig({useMarkup: true});
         }
 
+        if (isHtmlLabel) {
+            ChartEditor.updateConfig({useHtml: true});
+        }
+
         if (isXCategoryAxis) {
             return {
                 graphs,

src/server/modes/charts/plugins/datalens/preparers/geopoint/index.ts

@@ -9,6 +9,7 @@ import type {
 } from '../../../../../../../shared';
 import {
     Feature,
+    MARKUP_TYPE,
     MINIMUM_FRACTION_DIGITS,
     WRAPPED_MARKDOWN_KEY,
     getFakeTitleOrTitle,
@@ -335,7 +336,7 @@ function prepareGeopoint(options: PrepareFunctionArgs, {isClusteredPoints = fals
                     );
                     const text = itemTitle ? `${itemTitle}: ${value}` : value;
 
-                    if (tooltipField?.isMarkdown) {
+                    if (tooltipField?.markupType === MARKUP_TYPE.markdown) {
                         pointData[WRAPPED_MARKDOWN_KEY] = text;
                     } else {
                         pointData.text = shouldEscapeUserValue ? escape(text) : text;
@@ -369,10 +370,14 @@ function prepareGeopoint(options: PrepareFunctionArgs, {isClusteredPoints = fals
         });
     });
 
-    if (tooltips.some((item) => item.isMarkdown)) {
+    if (tooltips.some((item) => item.markupType === MARKUP_TYPE.markdown)) {
         ChartEditor.updateConfig({useMarkdown: true});
     }
 
+    if (tooltips.some((item) => item.markupType === MARKUP_TYPE.html)) {
+        ChartEditor.updateConfig({useHtml: true});
+    }
+
     let mapOptions: GeopointMapOptions = {
         opacity: ALPHA,
         showCustomLegend: true,

src/server/modes/charts/plugins/datalens/preparers/geopolygon.ts

@@ -11,11 +11,14 @@ import type {
 } from '../../../../../../shared';
 import {
     DATASET_FIELD_TYPES,
+    MARKUP_TYPE,
     MINIMUM_FRACTION_DIGITS,
     WRAPPED_MARKDOWN_KEY,
     getFakeTitleOrTitle,
+    isHtmlField,
     isMarkdownField,
 } from '../../../../../../shared';
+import {wrapHtml} from '../../../../../../shared/utils/ui-sandbox';
 import {hexToRgb} from '../utils/color-helpers';
 import {GEO_MAP_LAYERS_LEVEL} from '../utils/constants';
 import type {Coordinate} from '../utils/geo-helpers';
@@ -241,16 +244,23 @@ function prepareGeopolygon(options: PrepareFunctionArgs) {
         const itemTitle = shouldUseFieldTitle ? getFakeTitleOrTitle(tooltip as ServerField) : '';
         const tooltipText = itemTitle ? `${itemTitle}: ${formattedText}` : formattedText;
         const isMarkupField = tooltip?.data_type === DATASET_FIELD_TYPES.MARKUP;
+        const useHtml = isHtmlField(tooltip);
 
-        if (isMarkupField || isMarkdownField(tooltip)) {
+        if (isMarkupField || isMarkdownField(tooltip) || useHtml) {
             polygon.properties.rawText = true;
         }
 
+        if (useHtml) {
+            ChartEditor.updateConfig({useHtml: true});
+        }
+
         let tooltipData;
         if (isMarkupField) {
             tooltipData = {key: itemTitle, value: formattedText};
-        } else if (tooltip?.isMarkdown) {
+        } else if (tooltip?.markupType === MARKUP_TYPE.markdown) {
             tooltipData = {[WRAPPED_MARKDOWN_KEY]: tooltipText};
+        } else if (tooltip?.markupType === MARKUP_TYPE.html) {
+            tooltipData = {text: wrapHtml(tooltipText)};
         } else {
             tooltipData = {text: tooltipText};
         }

src/server/modes/charts/plugins/datalens/preparers/line/prepare-line-data.ts

@@ -11,6 +11,7 @@ import {
     getFakeTitleOrTitle,
     getXAxisMode,
     isDateField,
+    isHtmlField,
     isMarkdownField,
     isMarkupField,
     isMeasureField,
@@ -109,6 +110,7 @@ export function prepareLineData(args: PrepareFunctionArgs) {
     const labelsLength = labels && labels.length;
     const isMarkdownLabel = isMarkdownField(labelItem);
     const isMarkupLabel = isMarkupField(labelItem);
+    const isHtmlLabel = isHtmlField(labelItem);
 
     const segmentField = segments[0];
     const segmentIndexInOrder = getSegmentsIndexInOrder(order, segmentField, idToTitle);
@@ -345,7 +347,10 @@ export function prepareLineData(args: PrepareFunctionArgs) {
                     id: line.id,
                     title: line.title || 'Null',
                     tooltip: line.tooltip,
-                    dataLabels: {...line.dataLabels, useHTML: isMarkdownLabel || isMarkupLabel},
+                    dataLabels: {
+                        ...line.dataLabels,
+                        useHTML: isMarkdownLabel || isMarkupLabel || isHtmlLabel,
+                    },
                     data: categories
                         .map((category, i) => {
                             const lineData = line.data[category];
@@ -415,6 +420,7 @@ export function prepareLineData(args: PrepareFunctionArgs) {
                             point.label = getLabelValue(innerLabels?.[category], {
                                 isMarkdownLabel,
                                 isMarkupLabel,
+                                isHtmlLabel,
                             });
 
                             if (isActionParamsEnable) {
@@ -532,6 +538,10 @@ export function prepareLineData(args: PrepareFunctionArgs) {
             ChartEditor.updateConfig({useMarkup: true});
         }
 
+        if (isHtmlLabel) {
+            ChartEditor.updateConfig({useHtml: true});
+        }
+
         if (isXCategoryAxis) {
             return {
                 graphs,

src/server/modes/charts/plugins/datalens/preparers/pie/prepare-pie-data.ts

@@ -6,6 +6,7 @@ import {
     getDistinctValue,
     getFakeTitleOrTitle,
     isFieldHierarchy,
+    isHtmlField,
     isMarkdownField,
     isMarkupField,
     isMeasureValue,
@@ -14,6 +15,7 @@ import {
     wrapMarkupValue,
 } from '../../../../../../../shared';
 import {wrapMarkdownValue} from '../../../../../../../shared/utils/markdown';
+import {wrapHtml} from '../../../../../../../shared/utils/ui-sandbox';
 import type {ChartColorsConfig} from '../../types';
 import type {ColorValue} from '../../utils/color-helpers';
 import {getColorsByMeasureField, getThresholdValues} from '../../utils/color-helpers';
@@ -129,6 +131,7 @@ export function preparePieData(args: PrepareFunctionArgs) {
         : -1;
     const isMarkdownLabel = isMarkdownField(labelItem);
     const isMarkupLabel = isMarkupField(labelItem);
+    const isHtmlLabel = isHtmlField(labelItem);
 
     const measureIndex = findIndexInOrder(order, measure, idToTitle[measure.guid]);
     const measureDataType = idToDataType[measure.guid] || measure.data_type;
@@ -183,7 +186,7 @@ export function preparePieData(args: PrepareFunctionArgs) {
                               ? MINIMUM_FRACTION_DIGITS
                               : 0,
                   }),
-            useHTML: isMarkdownLabel || isMarkupLabel,
+            useHTML: (isMarkdownLabel || isMarkupLabel || isHtmlLabel) ?? undefined,
         },
     };
 
@@ -248,6 +251,8 @@ export function preparePieData(args: PrepareFunctionArgs) {
                 point.label = wrapMarkdownValue(labelValue);
             } else if (labelValue && isMarkupLabel) {
                 point.label = wrapMarkupValue(labelValue);
+            } else if (labelValue && isHtmlLabel) {
+                point.label = wrapHtml(labelValue);
             } else {
                 point.label = getFormattedValue(labelValue, {
                     ...labelField,
@@ -302,6 +307,10 @@ export function preparePieData(args: PrepareFunctionArgs) {
         ChartEditor.updateConfig({useMarkup: true});
     }
 
+    if (isHtmlLabel) {
+        ChartEditor.updateConfig({useHtml: true});
+    }
+
     return {graphs: [pie], totals: totals.find((value) => value), label: labelField, measure};
 }