Add useMarkdown hook

src/ui/hooks/useMarkdown.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {DL} from 'ui';
+
+import {YfmWrapper} from '../components/YfmWrapper/YfmWrapper';
+import {getSdk} from '../libs/schematic-sdk';
+
+type Props = {
+    value: string;
+};
+
+const MarkdownCollection = new Map();
+async function renderMarkdown(value: string) {
+    if (!MarkdownCollection.has(value)) {
+        try {
+            const response = await getSdk().mix.renderMarkdown({text: value, lang: DL.USER_LANG});
+            const yfmString = response.result;
+            MarkdownCollection.set(value, yfmString);
+        } catch (e) {
+            console.error('useMarkdown failed ', e);
+        }
+    }
+
+    return MarkdownCollection.get(value);
+}
+
+export const useMarkdown = (props: Props) => {
+    const {value} = props;
+    const [markdown, setMarkdown] = React.useState<React.ReactNode>('');
+    const [isLoading, setIsLoading] = React.useState<boolean>(true);
+
+    React.useEffect(() => {
+        if (!value) {
+            return;
+        }
+
+        renderMarkdown(value).then((val) => {
+            setMarkdown(<YfmWrapper content={val} setByInnerHtml={true} />);
+            setIsLoading(false);
+        });
+    }, [value]);
+
+    return {markdown, isLoading};
+};

src/ui/libs/DatalensChartkit/ChartKit/components/Widget/components/Table/utils/render.tsx

@@ -25,6 +25,7 @@ import {
     TableRow,
     isMarkupItem,
 } from 'shared';
+import {useMarkdown} from 'ui/hooks/useMarkdown';
 
 import {Markup} from '../../../../../../../../components/Markup';
 import {markupToRawString} from '../../../../../../modules/table';
@@ -84,6 +85,13 @@ const SortIcon = ({direction}: SortIconProps) => {
     );
 };
 
+const Markdown = (props: {value: string}) => {
+    const {value} = props;
+    const {markdown} = useMarkdown({value});
+
+    return <React.Fragment>{markdown}</React.Fragment>;
+};
+
 const diffFormatter = (
     value: number,
     {precision, diff_formatter: formatter}: Omit<DiffTableColumn, 'type'>,
@@ -435,7 +443,7 @@ export const getColumnsAndNames = ({
                                 <HelpPopover
                                     className={b('column-hint')}
                                     size={'s'}
-                                    content={get(column, 'hint')}
+                                    content={<Markdown value={hint} />}
                                 />
                             )}
                         </span>

src/ui/libs/DatalensChartkit/components/Control/Items/withWrapForControls.js

@@ -4,29 +4,17 @@ import {HelpPopover} from '@gravity-ui/components';
 import block from 'bem-cn-lite';
 import PropTypes from 'prop-types';
 import {ControlQA} from 'shared';
-import {YfmWrapper} from 'ui/components/YfmWrapper/YfmWrapper';
 import {DL} from 'ui/constants';
-import {getSdk} from 'ui/libs/schematic-sdk';
+import {useMarkdown} from 'ui/hooks/useMarkdown';
 import {isMobileView} from 'ui/utils/mobile';
 
 import {CONTROL_TYPE} from '../../../modules/constants/constants';
 
 const b = block('chartkit-control-item');
 
-const TooltipWithMarkdown = (props) => {
-    const {markdown} = props;
-    const [tooltipText, setTooltipText] = React.useState();
-    React.useEffect(() => {
-        getSdk()
-            .mix.renderMarkdown({text: markdown, lang: DL.USER_LANG})
-            .then((response) => {
-                const yfmString = response.result;
-                setTooltipText(<YfmWrapper content={yfmString} setByInnerHtml={true} />);
-            });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    return <React.Fragment>{tooltipText}</React.Fragment>;
+const Markdown = (props) => {
+    const {markdown} = useMarkdown({value: props.value});
+    return <React.Fragment>{markdown}</React.Fragment>;
 };
 
 function withWrapForControls(WrappedComponent) {
@@ -74,7 +62,7 @@ function withWrapForControls(WrappedComponent) {
                         {label}
                         {hint && (
                             <HelpPopover
-                                content={<TooltipWithMarkdown markdown={hint} />}
+                                content={<Markdown value={hint} />}
                                 className={b('hint')}
                             />
                         )}

src/ui/units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/AppearanceSection.scss

@@ -6,5 +6,10 @@
 
     &__operation-checkbox {
         margin-right: 8px;
+
+        &_top {
+            align-self: flex-start;
+            margin-top: 4px;
+        }
     }
 }

src/ui/units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx

@@ -5,7 +5,6 @@ import {Checkbox} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {I18n} from 'i18n';
 import {useDispatch, useSelector} from 'react-redux';
-import {FieldWrapper} from 'ui/components/FieldWrapper/FieldWrapper';
 import {registry} from 'ui/registry';
 import {setSelectorDialogItem} from 'units/dash/store/actions/dashTyped';
 import {
@@ -20,7 +19,7 @@ const i18n = I18n.keyset('dash.control-dialog.edit');
 
 export const HintRow = () => {
     const dispatch = useDispatch();
-    const {showHint, hint, validation} = useSelector(selectSelectorDialog);
+    const {showHint, hint} = useSelector(selectSelectorDialog);
     const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled);
     const datasetField = useSelector(getDatasetField);
 
@@ -39,21 +38,18 @@ export const HintRow = () => {
     return (
         <FormRow label={i18n('field_hint')}>
             <div className={b('operation-container')}>
-                <FieldWrapper error={validation.title}>
-                    <div style={{display: 'flex', gap: '8px'}}>
-                        <Checkbox
-                            disabled={isFieldDisabled}
-                            onUpdate={handleUpdateEnable}
-                            checked={showHint}
-                            size={'l'}
-                        />
-                        <MarkdownControl
-                            value={hint ?? datasetField?.description ?? ''}
-                            onChange={handleUpdateText}
-                            disabled={isFieldDisabled || !showHint}
-                        />
-                    </div>
-                </FieldWrapper>
+                <Checkbox
+                    disabled={isFieldDisabled}
+                    onUpdate={handleUpdateEnable}
+                    checked={showHint}
+                    size={'l'}
+                    className={b('operation-checkbox', {top: true})}
+                />
+                <MarkdownControl
+                    value={hint ?? datasetField?.description ?? ''}
+                    onChange={handleUpdateText}
+                    disabled={isFieldDisabled || !showHint}
+                />
             </div>
         </FormRow>
     );

src/ui/units/wizard/components/Dialogs/DialogField/DialogField.tsx

@@ -419,18 +419,20 @@ class DialogField extends React.PureComponent<DialogFieldInnerProps, DialogField
                         />
                     }
                 />
-                <DialogFieldRow
-                    title={''}
-                    setting={
-                        <MarkdownControl
-                            value={text ?? item?.description}
-                            onChange={(value) =>
-                                this.setState({hintSettings: {enabled, text: value}})
-                            }
-                            disabled={!enabled}
-                        />
-                    }
-                />
+                {enabled && (
+                    <DialogFieldRow
+                        title={''}
+                        setting={
+                            <MarkdownControl
+                                value={text ?? item?.description}
+                                onChange={(value) =>
+                                    this.setState({hintSettings: {enabled, text: value}})
+                                }
+                                disabled={!enabled}
+                            />
+                        }
+                    />
+                )}
             </React.Fragment>
         );
     }