From e9f695578981b5a97abe59845edabae831e1b084 Mon Sep 17 00:00:00 2001
From: NasgulNexus <mostovoyegor@yandex-team.ru>
Date: Tue, 1 Apr 2025 12:50:40 +0200
Subject: [PATCH 1/2] fix: help mark dangerouslySetInnerHTML

---
 src/lib/kit/components/Card/Card.tsx                        | 6 +++++-
 .../components/Inputs/TableArrayInput/TableArrayInput.tsx   | 6 +++++-
 src/lib/kit/components/Layouts/Column/Column.tsx            | 6 +++++-
 src/lib/kit/components/Layouts/Row/Row.tsx                  | 6 +++++-
 src/lib/kit/components/Layouts/Section/Section.tsx          | 6 +++++-
 .../SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx     | 6 +++++-
 src/lib/kit/components/TogglerCard/TogglerCard.tsx          | 6 +++++-
 .../kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx    | 6 +++++-
 src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx      | 6 +++++-
 .../kit/components/Views/TableArrayView/TableArrayView.tsx  | 6 +++++-
 10 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/lib/kit/components/Card/Card.tsx b/src/lib/kit/components/Card/Card.tsx
index a4864156..bccd344c 100644
--- a/src/lib/kit/components/Card/Card.tsx
+++ b/src/lib/kit/components/Card/Card.tsx
@@ -95,7 +95,11 @@ export const Card: React.FC<CardProps> = ({
                                     placement: COMMON_POPOVER_PLACEMENT,
                                 }}
                             >
-                                {description}
+                                <span
+                                    dangerouslySetInnerHTML={{
+                                        __html: description,
+                                    }}
+                                />
                             </HelpMark>
                         </div>
                     ) : null}
diff --git a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx
index 37c79f8a..c1052117 100644
--- a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx
+++ b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx
@@ -115,7 +115,11 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
                                   placement: COMMON_POPOVER_PLACEMENT,
                               }}
                           >
-                              {description}
+                              <span
+                                  dangerouslySetInnerHTML={{
+                                      __html: description,
+                                  }}
+                              />
                           </HelpMark>
                       </Flex>
                   ),
diff --git a/src/lib/kit/components/Layouts/Column/Column.tsx b/src/lib/kit/components/Layouts/Column/Column.tsx
index 43bd4816..988a84a9 100644
--- a/src/lib/kit/components/Layouts/Column/Column.tsx
+++ b/src/lib/kit/components/Layouts/Column/Column.tsx
@@ -40,7 +40,11 @@ const ColumnBase = <T extends FieldValue, S extends Spec>({
                                         placement: COMMON_POPOVER_PLACEMENT,
                                     }}
                                 >
-                                    {spec.viewSpec.layoutDescription}
+                                    <span
+                                        dangerouslySetInnerHTML={{
+                                            __html: spec.viewSpec.layoutDescription,
+                                        }}
+                                    />
                                 </HelpMark>
                             </Text>
                         </span>
diff --git a/src/lib/kit/components/Layouts/Row/Row.tsx b/src/lib/kit/components/Layouts/Row/Row.tsx
index e88434a4..d7b6bf71 100644
--- a/src/lib/kit/components/Layouts/Row/Row.tsx
+++ b/src/lib/kit/components/Layouts/Row/Row.tsx
@@ -43,7 +43,11 @@ const RowBase = <T extends FieldValue, S extends Spec>({
                                         placement: COMMON_POPOVER_PLACEMENT,
                                     }}
                                 >
-                                    {spec.viewSpec.layoutDescription}
+                                    <span
+                                        dangerouslySetInnerHTML={{
+                                            __html: spec.viewSpec.layoutDescription,
+                                        }}
+                                    />
                                 </HelpMark>
                             </Text>
                         </span>
diff --git a/src/lib/kit/components/Layouts/Section/Section.tsx b/src/lib/kit/components/Layouts/Section/Section.tsx
index 19d93918..4cb144e1 100644
--- a/src/lib/kit/components/Layouts/Section/Section.tsx
+++ b/src/lib/kit/components/Layouts/Section/Section.tsx
@@ -122,7 +122,11 @@ const SectionBase = <
                             placement: COMMON_POPOVER_PLACEMENT,
                         }}
                     >
-                        {spec.viewSpec.layoutDescription}
+                        <span
+                            dangerouslySetInnerHTML={{
+                                __html: spec.viewSpec.layoutDescription,
+                            }}
+                        />
                     </HelpMark>
                 </Text>
             );
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
index d7110104..896be9d3 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -206,7 +206,11 @@ export class SimpleVerticalAccordeon extends React.Component<
                         placement: COMMON_POPOVER_PLACEMENT,
                     }}
                 >
-                    {note}
+                    <span
+                        dangerouslySetInnerHTML={{
+                            __html: note,
+                        }}
+                    />
                 </HelpMark>
             </Text>
         ) : null;
diff --git a/src/lib/kit/components/TogglerCard/TogglerCard.tsx b/src/lib/kit/components/TogglerCard/TogglerCard.tsx
index 12c95b02..f7f05146 100644
--- a/src/lib/kit/components/TogglerCard/TogglerCard.tsx
+++ b/src/lib/kit/components/TogglerCard/TogglerCard.tsx
@@ -45,7 +45,11 @@ export const TogglerCard: React.FC<TogglerCardProps> = ({
                             placement: COMMON_POPOVER_PLACEMENT,
                         }}
                     >
-                        {description}
+                        <span
+                            dangerouslySetInnerHTML={{
+                                __html: description,
+                            }}
+                        />
                     </HelpMark>
                 ) : null}
             </div>
diff --git a/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx b/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx
index 7235f0ff..4d0c7eab 100644
--- a/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx
+++ b/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx
@@ -36,7 +36,11 @@ export const ViewColumn = <T extends FormValue, S extends Spec>({
                             placement: COMMON_POPOVER_PLACEMENT,
                         }}
                     >
-                        {spec.viewSpec.layoutDescription}
+                        <span
+                            dangerouslySetInnerHTML={{
+                                __html: spec.viewSpec.layoutDescription,
+                            }}
+                        />
                     </HelpMark>
                 ) : null}
             </div>
diff --git a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx
index 4d80d448..3f29d8af 100644
--- a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx
+++ b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx
@@ -36,7 +36,11 @@ export const ViewRow = <T extends FormValue, S extends Spec>({
                             placement: COMMON_POPOVER_PLACEMENT,
                         }}
                     >
-                        {spec.viewSpec.layoutDescription}
+                        <span
+                            dangerouslySetInnerHTML={{
+                                __html: spec.viewSpec.layoutDescription,
+                            }}
+                        />
                     </HelpMark>
                 ) : null}
                 <div className={b('dots')} />
diff --git a/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx b/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx
index 8e47f87c..fc4fbac9 100644
--- a/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx
+++ b/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx
@@ -53,7 +53,11 @@ export const TableArrayView: ArrayView = ({value = [], spec, name}) => {
                                       placement: COMMON_POPOVER_PLACEMENT,
                                   }}
                               >
-                                  {description}
+                                  <span
+                                      dangerouslySetInnerHTML={{
+                                          __html: description,
+                                      }}
+                                  />
                               </HelpMark>
                           </Flex>
                       )

From 31e43bf670f04c1d5427f0356cb8601ac421afea Mon Sep 17 00:00:00 2001
From: NasgulNexus <mostovoyegor@yandex-team.ru>
Date: Tue, 1 Apr 2025 13:15:21 +0200
Subject: [PATCH 2/2] fix: add component HTML content

---
 src/lib/kit/components/Card/Card.tsx                     | 7 ++-----
 src/lib/kit/components/HTMLContent/HTMLContent.tsx       | 9 +++++++++
 src/lib/kit/components/HTMLContent/index.ts              | 1 +
 .../Inputs/TableArrayInput/TableArrayInput.tsx           | 7 ++-----
 src/lib/kit/components/Layouts/Column/Column.tsx         | 7 ++-----
 src/lib/kit/components/Layouts/Row/Row.tsx               | 7 ++-----
 src/lib/kit/components/Layouts/Section/Section.tsx       | 7 ++-----
 .../SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx  | 7 ++-----
 src/lib/kit/components/TogglerCard/TogglerCard.tsx       | 7 ++-----
 .../kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx | 7 ++-----
 src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx   | 7 ++-----
 .../components/Views/TableArrayView/TableArrayView.tsx   | 7 ++-----
 12 files changed, 30 insertions(+), 50 deletions(-)
 create mode 100644 src/lib/kit/components/HTMLContent/HTMLContent.tsx
 create mode 100644 src/lib/kit/components/HTMLContent/index.ts

diff --git a/src/lib/kit/components/Card/Card.tsx b/src/lib/kit/components/Card/Card.tsx
index bccd344c..92147185 100644
--- a/src/lib/kit/components/Card/Card.tsx
+++ b/src/lib/kit/components/Card/Card.tsx
@@ -6,6 +6,7 @@ import isString from 'lodash/isString';
 
 import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH} from '../../constants/common';
 import {block} from '../../utils';
+import {HTMLContent} from '../HTMLContent';
 
 import './Card.scss';
 
@@ -95,11 +96,7 @@ export const Card: React.FC<CardProps> = ({
                                     placement: COMMON_POPOVER_PLACEMENT,
                                 }}
                             >
-                                <span
-                                    dangerouslySetInnerHTML={{
-                                        __html: description,
-                                    }}
-                                />
+                                <HTMLContent html={description} />
                             </HelpMark>
                         </div>
                     ) : null}
diff --git a/src/lib/kit/components/HTMLContent/HTMLContent.tsx b/src/lib/kit/components/HTMLContent/HTMLContent.tsx
new file mode 100644
index 00000000..318c11e7
--- /dev/null
+++ b/src/lib/kit/components/HTMLContent/HTMLContent.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface HTMLContentProps {
+    html: string;
+}
+
+export const HTMLContent: React.FC<HTMLContentProps> = ({html}) => {
+    return <div dangerouslySetInnerHTML={{__html: html}} />;
+};
diff --git a/src/lib/kit/components/HTMLContent/index.ts b/src/lib/kit/components/HTMLContent/index.ts
new file mode 100644
index 00000000..c5a8c407
--- /dev/null
+++ b/src/lib/kit/components/HTMLContent/index.ts
@@ -0,0 +1 @@
+export * from './HTMLContent';
diff --git a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx
index c1052117..543dc4c5 100644
--- a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx
+++ b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx
@@ -25,6 +25,7 @@ import {
 import {useSearchContext} from '../../../../core/components/Form/hooks';
 import {COMMON_POPOVER_PLACEMENT} from '../../../constants/common';
 import {block} from '../../../utils';
+import {HTMLContent} from '../../HTMLContent';
 
 import './TableArrayInput.scss';
 
@@ -115,11 +116,7 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
                                   placement: COMMON_POPOVER_PLACEMENT,
                               }}
                           >
-                              <span
-                                  dangerouslySetInnerHTML={{
-                                      __html: description,
-                                  }}
-                              />
+                              <HTMLContent html={description} />
                           </HelpMark>
                       </Flex>
                   ),
diff --git a/src/lib/kit/components/Layouts/Column/Column.tsx b/src/lib/kit/components/Layouts/Column/Column.tsx
index 988a84a9..62257ca1 100644
--- a/src/lib/kit/components/Layouts/Column/Column.tsx
+++ b/src/lib/kit/components/Layouts/Column/Column.tsx
@@ -8,6 +8,7 @@ import {isArrayItem, isArraySpec, isObjectSpec, withGenerateButton} from '../../
 import {ErrorWrapper, GenerateRandomValueButton} from '../../../components';
 import {COMMON_POPOVER_PLACEMENT} from '../../../constants/common';
 import {block} from '../../../utils';
+import {HTMLContent} from '../../HTMLContent';
 
 import './Column.scss';
 
@@ -40,11 +41,7 @@ const ColumnBase = <T extends FieldValue, S extends Spec>({
                                         placement: COMMON_POPOVER_PLACEMENT,
                                     }}
                                 >
-                                    <span
-                                        dangerouslySetInnerHTML={{
-                                            __html: spec.viewSpec.layoutDescription,
-                                        }}
-                                    />
+                                    <HTMLContent html={spec.viewSpec.layoutDescription} />
                                 </HelpMark>
                             </Text>
                         </span>
diff --git a/src/lib/kit/components/Layouts/Row/Row.tsx b/src/lib/kit/components/Layouts/Row/Row.tsx
index d7b6bf71..4345fa0e 100644
--- a/src/lib/kit/components/Layouts/Row/Row.tsx
+++ b/src/lib/kit/components/Layouts/Row/Row.tsx
@@ -8,6 +8,7 @@ import {isArrayItem, isArraySpec, isObjectSpec, withGenerateButton} from '../../
 import {ErrorWrapper, GenerateRandomValueButton} from '../../../components';
 import {COMMON_POPOVER_PLACEMENT} from '../../../constants/common';
 import {block} from '../../../utils';
+import {HTMLContent} from '../../HTMLContent';
 
 import './Row.scss';
 
@@ -43,11 +44,7 @@ const RowBase = <T extends FieldValue, S extends Spec>({
                                         placement: COMMON_POPOVER_PLACEMENT,
                                     }}
                                 >
-                                    <span
-                                        dangerouslySetInnerHTML={{
-                                            __html: spec.viewSpec.layoutDescription,
-                                        }}
-                                    />
+                                    <HTMLContent html={spec.viewSpec.layoutDescription} />
                                 </HelpMark>
                             </Text>
                         </span>
diff --git a/src/lib/kit/components/Layouts/Section/Section.tsx b/src/lib/kit/components/Layouts/Section/Section.tsx
index 4cb144e1..84b2e673 100644
--- a/src/lib/kit/components/Layouts/Section/Section.tsx
+++ b/src/lib/kit/components/Layouts/Section/Section.tsx
@@ -15,6 +15,7 @@ import type {
 } from '../../../../core';
 import {isArrayItem, isArraySpec, isObjectSpec} from '../../../../core';
 import {block} from '../../../utils';
+import {HTMLContent} from '../../HTMLContent';
 import {RemoveButton} from '../../RemoveButton';
 
 import './Section.scss';
@@ -122,11 +123,7 @@ const SectionBase = <
                             placement: COMMON_POPOVER_PLACEMENT,
                         }}
                     >
-                        <span
-                            dangerouslySetInnerHTML={{
-                                __html: spec.viewSpec.layoutDescription,
-                            }}
-                        />
+                        <HTMLContent html={spec.viewSpec.layoutDescription} />
                     </HelpMark>
                 </Text>
             );
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
index 896be9d3..22939599 100644
--- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
+++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -6,6 +6,7 @@ import {Button, HelpMark, Icon, Popover, Text} from '@gravity-ui/uikit';
 
 import {COMMON_POPOVER_PLACEMENT} from '../../constants/common';
 import {block} from '../../utils';
+import {HTMLContent} from '../HTMLContent';
 
 import './SimpleVerticalAccordeon.scss';
 
@@ -206,11 +207,7 @@ export class SimpleVerticalAccordeon extends React.Component<
                         placement: COMMON_POPOVER_PLACEMENT,
                     }}
                 >
-                    <span
-                        dangerouslySetInnerHTML={{
-                            __html: note,
-                        }}
-                    />
+                    <HTMLContent html={note} />
                 </HelpMark>
             </Text>
         ) : null;
diff --git a/src/lib/kit/components/TogglerCard/TogglerCard.tsx b/src/lib/kit/components/TogglerCard/TogglerCard.tsx
index f7f05146..cd7c7c46 100644
--- a/src/lib/kit/components/TogglerCard/TogglerCard.tsx
+++ b/src/lib/kit/components/TogglerCard/TogglerCard.tsx
@@ -4,6 +4,7 @@ import {Card, HelpMark, Text} from '@gravity-ui/uikit';
 
 import {COMMON_POPOVER_PLACEMENT} from '../../constants/common';
 import {block} from '../../utils';
+import {HTMLContent} from '../HTMLContent';
 
 import './TogglerCard.scss';
 
@@ -45,11 +46,7 @@ export const TogglerCard: React.FC<TogglerCardProps> = ({
                             placement: COMMON_POPOVER_PLACEMENT,
                         }}
                     >
-                        <span
-                            dangerouslySetInnerHTML={{
-                                __html: description,
-                            }}
-                        />
+                        <HTMLContent html={description} />
                     </HelpMark>
                 ) : null}
             </div>
diff --git a/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx b/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx
index 4d0c7eab..e3348305 100644
--- a/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx
+++ b/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx
@@ -7,6 +7,7 @@ import {useDynamicFormsCtx} from '../../../../core';
 import {CopyButton} from '../../../../kit';
 import {COMMON_POPOVER_PLACEMENT} from '../../../constants/common';
 import {block, isNotEmptyValue} from '../../../utils';
+import {HTMLContent} from '../../HTMLContent';
 
 import './ViewColumn.scss';
 
@@ -36,11 +37,7 @@ export const ViewColumn = <T extends FormValue, S extends Spec>({
                             placement: COMMON_POPOVER_PLACEMENT,
                         }}
                     >
-                        <span
-                            dangerouslySetInnerHTML={{
-                                __html: spec.viewSpec.layoutDescription,
-                            }}
-                        />
+                        <HTMLContent html={spec.viewSpec.layoutDescription} />
                     </HelpMark>
                 ) : null}
             </div>
diff --git a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx
index 3f29d8af..60e68206 100644
--- a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx
+++ b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx
@@ -7,6 +7,7 @@ import {useDynamicFormsCtx} from '../../../../core';
 import {CopyButton} from '../../../../kit';
 import {COMMON_POPOVER_PLACEMENT} from '../../../constants/common';
 import {block, isNotEmptyValue} from '../../../utils';
+import {HTMLContent} from '../../HTMLContent';
 
 import './ViewRow.scss';
 
@@ -36,11 +37,7 @@ export const ViewRow = <T extends FormValue, S extends Spec>({
                             placement: COMMON_POPOVER_PLACEMENT,
                         }}
                     >
-                        <span
-                            dangerouslySetInnerHTML={{
-                                __html: spec.viewSpec.layoutDescription,
-                            }}
-                        />
+                        <HTMLContent html={spec.viewSpec.layoutDescription} />
                     </HelpMark>
                 ) : null}
                 <div className={b('dots')} />
diff --git a/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx b/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx
index fc4fbac9..610ea029 100644
--- a/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx
+++ b/src/lib/kit/components/Views/TableArrayView/TableArrayView.tsx
@@ -12,6 +12,7 @@ import {
 } from '../../../../core';
 import {COMMON_POPOVER_PLACEMENT} from '../../../constants/common';
 import {block} from '../../../utils';
+import {HTMLContent} from '../../HTMLContent';
 
 import './TableArrayView.scss';
 
@@ -53,11 +54,7 @@ export const TableArrayView: ArrayView = ({value = [], spec, name}) => {
                                       placement: COMMON_POPOVER_PLACEMENT,
                                   }}
                               >
-                                  <span
-                                      dangerouslySetInnerHTML={{
-                                          __html: description,
-                                      }}
-                                  />
+                                  <HTMLContent html={description} />
                               </HelpMark>
                           </Flex>
                       )