fix: help mark dangerouslySetInnerHTML (#289)

Author: NasgulNexus

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,7 +96,7 @@ export const Card: React.FC<CardProps> = ({
                                     placement: COMMON_POPOVER_PLACEMENT,
                                 }}
                             >
-                                {description}
+                                <HTMLContent html={description} />
                             </HelpMark>
                         </div>
                     ) : null}

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}} />;
+};

src/lib/kit/components/HTMLContent/index.ts

@@ -0,0 +1 @@
+export * from './HTMLContent';

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,7 +116,7 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
                                   placement: COMMON_POPOVER_PLACEMENT,
                               }}
                           >
-                              {description}
+                              <HTMLContent html={description} />
                           </HelpMark>
                       </Flex>
                   ),

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,7 +41,7 @@ const ColumnBase = <T extends FieldValue, S extends Spec>({
                                         placement: COMMON_POPOVER_PLACEMENT,
                                     }}
                                 >
-                                    {spec.viewSpec.layoutDescription}
+                                    <HTMLContent html={spec.viewSpec.layoutDescription} />
                                 </HelpMark>
                             </Text>
                         </span>

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,7 +44,7 @@ const RowBase = <T extends FieldValue, S extends Spec>({
                                         placement: COMMON_POPOVER_PLACEMENT,
                                     }}
                                 >
-                                    {spec.viewSpec.layoutDescription}
+                                    <HTMLContent html={spec.viewSpec.layoutDescription} />
                                 </HelpMark>
                             </Text>
                         </span>

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,7 +123,7 @@ const SectionBase = <
                             placement: COMMON_POPOVER_PLACEMENT,
                         }}
                     >
-                        {spec.viewSpec.layoutDescription}
+                        <HTMLContent html={spec.viewSpec.layoutDescription} />
                     </HelpMark>
                 </Text>
             );

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,7 +207,7 @@ export class SimpleVerticalAccordeon extends React.Component<
                         placement: COMMON_POPOVER_PLACEMENT,
                     }}
                 >
-                    {note}
+                    <HTMLContent html={note} />
                 </HelpMark>
             </Text>
         ) : null;

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,7 +46,7 @@ export const TogglerCard: React.FC<TogglerCardProps> = ({
                             placement: COMMON_POPOVER_PLACEMENT,
                         }}
                     >
-                        {description}
+                        <HTMLContent html={description} />
                     </HelpMark>
                 ) : null}
             </div>

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,7 +37,7 @@ export const ViewColumn = <T extends FormValue, S extends Spec>({
                             placement: COMMON_POPOVER_PLACEMENT,
                         }}
                     >
-                        {spec.viewSpec.layoutDescription}
+                        <HTMLContent html={spec.viewSpec.layoutDescription} />
                     </HelpMark>
                 ) : null}
             </div>