fix: single place for html rendering

NasgulNexus · NasgulNexus · commit a6da3a42a8ce · 2025-04-10T09:10:30.000+02:00
diff --git a/src/lib/kit/components/AccordeonCard/AccordeonCard.tsx b/src/lib/kit/components/AccordeonCard/AccordeonCard.tsx
@@ -5,6 +5,7 @@ import {Button, Icon, Text} from '@gravity-ui/uikit';
 import isString from 'lodash/isString';
 
 import {block} from '../../utils';
+import {HTMLContent} from '../HTMLContent';
 
 import './AccordeonCard.scss';
 
@@ -23,7 +24,6 @@ export interface AccordeonCardProps {
     titleSize?: 's' | 'm';
     alwaysOpen?: boolean;
     classNameBody?: string;
-    renderHtml?: (text: string) => React.ReactNode;
 }
 export const AccordeonCard: React.FC<AccordeonCardProps> = ({
     className,
@@ -38,7 +38,6 @@ export const AccordeonCard: React.FC<AccordeonCardProps> = ({
     alwaysOpen,
     children,
     classNameBody,
-    renderHtml,
 }) => {
     const accordeonRef = React.useRef<HTMLDivElement>(null);
     const bodyRef = React.useRef<HTMLDivElement>(null);
@@ -90,19 +89,8 @@ export const AccordeonCard: React.FC<AccordeonCardProps> = ({
             return null;
         }
 
-        return (
-            <React.Fragment>
-                {renderHtml ? (
-                    renderHtml(description)
-                ) : (
-                    <span
-                        className={b('header-content-description')}
-                        dangerouslySetInnerHTML={{__html: description}}
-                    />
-                )}
-            </React.Fragment>
-        );
-    }, [description, renderHtml]);
+        return <HTMLContent className={b('header-content-description')} html={description} />;
+    }, [description]);
 
     return (
         <div ref={accordeonRef} className={b({empty: Boolean(emptyBody)}, className)}>
diff --git a/src/lib/kit/components/Card/Card.tsx b/src/lib/kit/components/Card/Card.tsx
@@ -23,7 +23,6 @@ export interface CardProps {
     alwaysOpen?: boolean;
     disableHeaderToggle?: boolean;
     checkEmptyBody?: boolean;
-    renderHtml?: (html: string) => React.ReactNode;
 }
 
 export const Card: React.FC<CardProps> = ({
@@ -37,7 +36,6 @@ export const Card: React.FC<CardProps> = ({
     disableHeaderToggle,
     checkEmptyBody,
     children,
-    renderHtml,
 }) => {
     const containerRef = React.useRef<HTMLDivElement>(null);
     const titleRef = React.useRef<HTMLDivElement>(null);
diff --git a/src/lib/kit/components/HTMLContent/HTMLContent.tsx b/src/lib/kit/components/HTMLContent/HTMLContent.tsx
@@ -1,9 +1,29 @@
 import React from 'react';
 
+import {isFunction} from 'lodash';
+
+import {useRenderHtml as useRenderHtmlForm} from '../../../core/components/Form/hooks/useRenderHtml';
+import {useRenderHtml as useRenderHtmlView} from '../../../core/components/View/hooks/useRenderHtml';
+
 interface HTMLContentProps {
     html: string;
+    className?: string;
 }
 
-export const HTMLContent: React.FC<HTMLContentProps> = ({html}) => {
-    return <div dangerouslySetInnerHTML={{__html: html}} />;
+export const HTMLContent: React.FC<HTMLContentProps> = ({html, className}) => {
+    const renderHtmlForm = useRenderHtmlForm();
+    const renderHtmlView = useRenderHtmlView();
+
+    const content = React.useMemo(() => {
+        if (renderHtmlForm && isFunction(renderHtmlForm)) {
+            return renderHtmlForm(html);
+        }
+        if (renderHtmlView && isFunction(renderHtmlView)) {
+            return renderHtmlView(html);
+        }
+
+        return <div className={className} dangerouslySetInnerHTML={{__html: html}} />;
+    }, [className, html, renderHtmlForm, renderHtmlView]);
+
+    return <React.Fragment>{content}</React.Fragment>;
 };
diff --git a/src/lib/kit/components/Inputs/TextContent/TextContent.tsx b/src/lib/kit/components/Inputs/TextContent/TextContent.tsx
@@ -5,8 +5,8 @@ import {isEmpty} from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 
 import type {StringIndependentInput, StringSpec} from '../../../../core';
-import {useRenderHtml} from '../../../../core/components/Form/hooks/useRenderHtml';
 import {block} from '../../../utils';
+import {HTMLContent} from '../../HTMLContent';
 import {LazyLoader} from '../../LazyLoader';
 
 import {loadIcon} from './utils';
@@ -19,14 +19,12 @@ export interface TextContentComponentProps {
     spec: StringSpec;
     value?: string;
     Layout?: React.FC<{spec: StringSpec; children: React.ReactElement}>;
-    renderHtml?: ReturnType<typeof useRenderHtml>;
 }
 
 export const TextContentComponent: React.FC<TextContentComponentProps> = ({
     spec,
     value,
     Layout,
-    renderHtml,
 }) => {
     const {textContentParams, layoutDescription} = spec.viewSpec;
 
@@ -43,7 +41,7 @@ export const TextContentComponent: React.FC<TextContentComponentProps> = ({
         <LazyLoader component={loadIcon(textContentParams?.icon)} />
     ) : undefined;
 
-    let content = renderHtml ? renderHtml(text) : <span dangerouslySetInnerHTML={{__html: text}} />;
+    let content = <HTMLContent html={text} />;
 
     if (textContentParams?.themeAlert) {
         const titleAlert =
@@ -114,8 +112,6 @@ export const TextContent: StringIndependentInput = ({
     meta,
     layoutProps,
 }) => {
-    const renderHtml = useRenderHtml();
-
     const WrappedLayout = React.useMemo(() => {
         if (Layout) {
             const Component: TextContentComponentProps['Layout'] = (props) => {
@@ -137,12 +133,5 @@ export const TextContent: StringIndependentInput = ({
         return undefined;
     }, [Layout, layoutProps, input, arrayInput, meta, name]);
 
-    return (
-        <TextContentComponent
-            spec={spec}
-            value={input.value}
-            Layout={WrappedLayout}
-            renderHtml={renderHtml}
-        />
-    );
+    return <TextContentComponent spec={spec} value={input.value} Layout={WrappedLayout} />;
 };
diff --git a/src/lib/kit/components/Layouts/Accordeon/Accordeon.tsx b/src/lib/kit/components/Layouts/Accordeon/Accordeon.tsx
@@ -4,7 +4,6 @@ import type {TextProps} from '@gravity-ui/uikit';
 
 import type {ArrayLayoutProps, ObjectLayoutProps} from '../../../../core';
 import {isArrayItem} from '../../../../core';
-import {useRenderHtml} from '../../../../core/components/Form/hooks/useRenderHtml';
 import {ErrorWrapper} from '../../../components';
 import {useErrorChecker} from '../../../hooks';
 import {RemoveButton} from '../../RemoveButton';
@@ -25,8 +24,6 @@ export const Accordeon = <
     meta,
     children,
 }: T): JSX.Element => {
-    const renderHtml = useRenderHtml();
-
     const {variantTitle} = spec.viewSpec.layoutProps || {};
 
     const [open, setOpen] = React.useState(Boolean(spec.viewSpec?.layoutOpen));
@@ -57,7 +54,6 @@ export const Accordeon = <
             hideInsteadOfDestroy
             withBranchView
             variantTitle={variantTitle}
-            renderHtml={renderHtml}
         >
             <ErrorWrapper name={name} meta={meta} withoutChildErrorStyles>
                 {children}
diff --git a/src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.tsx b/src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import type {ArrayLayoutProps, ObjectLayoutProps} from '../../../../core';
 import {isArrayItem} from '../../../../core';
-import {useRenderHtml} from '../../../../core/components/Form/hooks/useRenderHtml';
 import {useErrorChecker} from '../../../hooks';
 import {block} from '../../../utils';
 import {AccordeonCard} from '../../AccordeonCard';
@@ -20,8 +19,6 @@ export const AccordeonCardForm = <T extends ArrayLayoutProps | ObjectLayoutProps
     children,
     meta,
 }: T): JSX.Element => {
-    const renderHtml = useRenderHtml();
-
     const [open, setOpen] = React.useState(Boolean(spec.viewSpec?.layoutOpen));
 
     const onDrop = React.useCallback(() => {
@@ -48,7 +45,6 @@ export const AccordeonCardForm = <T extends ArrayLayoutProps | ObjectLayoutProps
             open={open}
             onToggle={setOpen}
             headerActionsTemplate={removeButton}
-            renderHtml={renderHtml}
         >
             <ErrorWrapper name={name} meta={meta} withoutChildErrorStyles>
                 {children}
diff --git a/src/lib/kit/components/Layouts/CardAccordeon.tsx b/src/lib/kit/components/Layouts/CardAccordeon.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import type {FieldValue, LayoutProps, Spec} from '../../../core';
 import {isArrayItem} from '../../../core';
-import {useRenderHtml} from '../../../core/components/Form/hooks/useRenderHtml';
 import {Card, ErrorWrapper} from '../../components';
 import {useErrorChecker} from '../../hooks';
 import {RemoveButton} from '../RemoveButton';
@@ -14,8 +13,6 @@ export const CardAccordeon = <T extends FieldValue, S extends Spec>({
     meta,
     children,
 }: LayoutProps<T, undefined, undefined, S>) => {
-    const renderHtml = useRenderHtml();
-
     const [open, setOpen] = React.useState(Boolean(spec.viewSpec?.layoutOpen));
 
     const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
@@ -43,7 +40,6 @@ export const CardAccordeon = <T extends FieldValue, S extends Spec>({
             actions={removeButton}
             open={open}
             onToggle={onToggle}
-            renderHtml={renderHtml}
         >
             <ErrorWrapper name={name} meta={meta} withoutChildErrorStyles>
                 {children}
diff --git a/src/lib/kit/components/Layouts/CardSection.tsx b/src/lib/kit/components/Layouts/CardSection.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import type {FieldValue, LayoutProps, Spec} from '../../../core';
 import {isArrayItem} from '../../../core';
-import {useRenderHtml} from '../../../core/components/Form/hooks/useRenderHtml';
 import {Card, ErrorWrapper} from '../../components';
 import {RemoveButton} from '../RemoveButton';
 
@@ -13,8 +12,6 @@ export const CardSection = <T extends FieldValue, S extends Spec>({
     meta,
     children,
 }: LayoutProps<T, undefined, undefined, S>) => {
-    const renderHtml = useRenderHtml();
-
     const removeButton = React.useMemo(() => {
         if (!isArrayItem(name) && (spec.required || !input.value)) {
             return null;
@@ -30,7 +27,6 @@ export const CardSection = <T extends FieldValue, S extends Spec>({
             description={spec.viewSpec.layoutDescription}
             actions={removeButton}
             alwaysOpen
-            renderHtml={renderHtml}
         >
             <ErrorWrapper name={name} meta={meta} withoutChildErrorStyles>
                 {children}
diff --git a/src/lib/kit/components/Layouts/Column/Column.tsx b/src/lib/kit/components/Layouts/Column/Column.tsx
@@ -5,7 +5,6 @@ import {Button, HelpMark, Icon, Text} from '@gravity-ui/uikit';
 
 import type {FieldValue, LayoutProps, Spec, StringSpec} from '../../../../core';
 import {isArrayItem, isArraySpec, isObjectSpec, withGenerateButton} from '../../../../core';
-import {useRenderHtml} from '../../../../core/components/Form/hooks/useRenderHtml';
 import {ErrorWrapper, GenerateRandomValueButton} from '../../../components';
 import {COMMON_POPOVER_PLACEMENT} from '../../../constants/common';
 import {block} from '../../../utils';
@@ -26,7 +25,6 @@ const ColumnBase = <T extends FieldValue, S extends Spec>({
 }: LayoutProps<T, undefined, undefined, S> & ColumnProps) => {
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
     const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
-    const renderHtml = useRenderHtml();
 
     return (
         <div className={b()}>
diff --git a/src/lib/kit/components/Layouts/Row/Row.tsx b/src/lib/kit/components/Layouts/Row/Row.tsx
@@ -5,7 +5,6 @@ import {Button, HelpMark, Icon, Text} from '@gravity-ui/uikit';
 
 import type {FieldValue, LayoutProps, Spec, StringSpec} from '../../../../core';
 import {isArrayItem, isArraySpec, isObjectSpec, withGenerateButton} from '../../../../core';
-import {useRenderHtml} from '../../../../core/components/Form/hooks/useRenderHtml';
 import {ErrorWrapper, GenerateRandomValueButton} from '../../../components';
 import {COMMON_POPOVER_PLACEMENT} from '../../../constants/common';
 import {block} from '../../../utils';
@@ -27,29 +26,16 @@ const RowBase = <T extends FieldValue, S extends Spec>({
     verboseDescription,
     children,
 }: LayoutProps<T, undefined, undefined, S> & RowProps) => {
-    const renderHtml = useRenderHtml();
-
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
     const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
 
     const verboseDescriptionContent = React.useMemo(() => {
         if (verboseDescription && spec.viewSpec.layoutDescription) {
-            return (
-                <React.Fragment>
-                    {renderHtml ? (
-                        renderHtml(spec.viewSpec.layoutDescription)
-                    ) : (
-                        <div
-                            className={b('description')}
-                            dangerouslySetInnerHTML={{__html: spec.viewSpec.layoutDescription}}
-                        />
-                    )}
-                </React.Fragment>
-            );
+            return <HTMLContent html={spec.viewSpec.layoutDescription} />;
         }
 
         return null;
-    }, [renderHtml, spec.viewSpec.layoutDescription, verboseDescription]);
+    }, [spec.viewSpec.layoutDescription, verboseDescription]);
 
     return (
         <div className={b()}>
diff --git a/src/lib/kit/components/Layouts/Section/Section.tsx b/src/lib/kit/components/Layouts/Section/Section.tsx
@@ -14,7 +14,6 @@ import type {
     ViewLayoutProps,
 } from '../../../../core';
 import {isArrayItem, isArraySpec, isObjectSpec} from '../../../../core';
-import {useRenderHtml} from '../../../../core/components/Form/hooks/useRenderHtml';
 import {block} from '../../../utils';
 import {HTMLContent} from '../../HTMLContent';
 import {RemoveButton} from '../../RemoveButton';
@@ -48,7 +47,6 @@ const SectionBase = <
     children,
     ...restProps
 }: (LayoutProps<D, undefined, SectionLayoutProps, S> | ViewLayoutProps<T, S>) & SectionProps) => {
-    const renderHtml = useRenderHtml();
     const input = (restProps as FieldRenderProps<D>).input as
         | FieldRenderProps<D>['input']
         | undefined;
@@ -109,16 +107,7 @@ const SectionBase = <
     let description: React.ReactNode;
     if (spec.viewSpec.layoutDescription && !ignoreDescription) {
         if (descriptionAsSubtitle) {
-            description = renderHtml ? (
-                renderHtml(spec.viewSpec.layoutDescription)
-            ) : (
-                <div
-                    className={b('description')}
-                    dangerouslySetInnerHTML={{
-                        __html: spec.viewSpec.layoutDescription,
-                    }}
-                />
-            );
+            description = <HTMLContent html={spec.viewSpec.layoutDescription} />;
         } else {
             description = (
                 <Text className={b('note')}>
diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx
@@ -29,7 +29,6 @@ interface SimpleVerticalAccordeonProps {
     withBranchView?: boolean;
     viewLayout?: boolean;
     variantTitle?: TextProps['variant'];
-    renderHtml?: (text: string) => React.ReactNode;
 }
 
 interface SimpleVerticalAccordeonState {
@@ -199,7 +198,7 @@ export class SimpleVerticalAccordeon extends React.Component<
     }
 
     private getTooltip() {
-        const {note, renderHtml} = this.props;
+        const {note} = this.props;
 
         return note ? (
             <Text className={b('tooltip')}>
diff --git a/src/lib/kit/components/TogglerCard/TogglerCard.tsx b/src/lib/kit/components/TogglerCard/TogglerCard.tsx
@@ -17,7 +17,6 @@ interface TogglerCardProps {
     onClick: () => void;
     disabled?: boolean;
     selected: boolean;
-    renderHtml?: (html: string) => React.ReactNode;
 }
 
 export const TogglerCard: React.FC<TogglerCardProps> = ({
@@ -27,7 +26,6 @@ export const TogglerCard: React.FC<TogglerCardProps> = ({
     onClick,
     disabled,
     selected,
-    renderHtml,
 }) => {
     return (
         <Card
diff --git a/src/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.tsx b/src/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.tsx
@@ -5,7 +5,6 @@ import isBoolean from 'lodash/isBoolean';
 
 import type {ArrayValue, ObjectValue, Spec, ViewLayoutProps} from '../../../../core';
 import {useDynamicFormsCtx} from '../../../../core';
-import {useRenderHtml} from '../../../../core/components/View/hooks/useRenderHtml';
 import {isNotEmptyValue} from '../../../utils';
 import {SimpleVerticalAccordeon} from '../../SimpleVerticalAccordeon';
 
@@ -21,7 +20,6 @@ export const ViewAccordeon = <
     spec,
     children,
 }: T): JSX.Element | null => {
-    const renderHtml = useRenderHtml();
     const {showLayoutDescription} = useDynamicFormsCtx();
 
     const [open, setOpen] = React.useState(
@@ -49,7 +47,6 @@ export const ViewAccordeon = <
             withBranchView
             viewLayout
             variantTitle={variantTitle}
-            renderHtml={renderHtml}
         >
             {children}
         </SimpleVerticalAccordeon>
diff --git a/src/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.tsx b/src/lib/kit/components/ViewLayouts/ViewAccordeonCard/ViewAccordeonCard.tsx
diff --git a/src/lib/kit/components/ViewLayouts/ViewCardAccordeon.tsx b/src/lib/kit/components/ViewLayouts/ViewCardAccordeon.tsx
diff --git a/src/lib/kit/components/ViewLayouts/ViewCardSection.tsx b/src/lib/kit/components/ViewLayouts/ViewCardSection.tsx
diff --git a/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx b/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx
diff --git a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx
diff --git a/src/lib/kit/components/Views/TextContentView.tsx b/src/lib/kit/components/Views/TextContentView.tsx
