@gravity-ui/markdown-editor 15.7.0 → 15.8.1

package/build/esm/bundle/MarkdownEditorView.d.ts

@@ -6,10 +6,7 @@ import type { MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData } f
 import "../styles/styles.css";
 import "./MarkdownEditorView.css";
 export declare const cnEditorComponent: import("@bem-react/classname").ClassNameFormatter;
-export type MarkdownEditorViewProps = ClassNameProps & QAProps & {
-    editor?: Editor;
-    autofocus?: boolean;
-    toolbarsPreset?: ToolbarsPreset;
+type ToolbarConfigs = {
     /**
      * @deprecated use `toolbarsPreset` instead
      */
@@ -26,35 +23,17 @@ export type MarkdownEditorViewProps = ClassNameProps & QAProps & {
      * @deprecated use `toolbarsPreset` instead
      */
     wysiwygHiddenActionsConfig?: WToolbarItemData[];
-    /** @default true */
-    settingsVisible?: boolean;
-    stickyToolbar: boolean;
-    enableSubmitInPreview?: boolean;
-    hidePreviewAfterSubmit?: boolean;
 };
-export declare const MarkdownEditorView: import("react").ForwardRefExoticComponent<ClassNameProps & QAProps & {
+type ViewProps = {
     editor?: Editor;
     autofocus?: boolean;
-    toolbarsPreset?: ToolbarsPreset;
-    /**
-     * @deprecated use `toolbarsPreset` instead
-     */
-    markupToolbarConfig?: MToolbarData;
-    /**
-     * @deprecated use `toolbarsPreset` instead
-     */
-    wysiwygToolbarConfig?: WToolbarData;
-    /**
-     * @deprecated use `toolbarsPreset` instead
-     */
-    markupHiddenActionsConfig?: MToolbarItemData[];
-    /**
-     * @deprecated use `toolbarsPreset` instead
-     */
-    wysiwygHiddenActionsConfig?: WToolbarItemData[];
     /** @default true */
     settingsVisible?: boolean;
+    toolbarsPreset?: ToolbarsPreset;
     stickyToolbar: boolean;
     enableSubmitInPreview?: boolean;
     hidePreviewAfterSubmit?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type MarkdownEditorViewProps = ClassNameProps & ToolbarConfigs & ViewProps & QAProps & {};
+export declare const MarkdownEditorView: import("react").ForwardRefExoticComponent<ClassNameProps & ToolbarConfigs & ViewProps & QAProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/build/esm/bundle/MarkdownEditorView.js

@@ -20,18 +20,7 @@ import "../styles/styles.css";
 import "./MarkdownEditorView.css"; // eslint-disable-line import/order
 export const cnEditorComponent = cn('editor-component');
 const b = cnEditorComponent;
-export const MarkdownEditorView = forwardRef((props, ref) => {
-    const divRef = useEnsuredForwardedRef(ref);
-    const [isMounted, setIsMounted] = useState(false);
-    useEffect(() => {
-        setIsMounted(true);
-    }, []);
-    const [showPreview, , unsetShowPreview, toggleShowPreview] = useBooleanState(false);
-    const context = useMarkdownEditorContext();
-    const editor = (props.editor ?? context);
-    if (!editor)
-        throw new Error('[MarkdownEditorView]: an instance of the editor must be passed through the props or context');
-    const { qa, autofocus, className, settingsVisible = true, toolbarsPreset, stickyToolbar, wysiwygToolbarConfig: initialWysiwygToolbarConfig, markupToolbarConfig: initialMarkupToolbarConfig, wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig, markupHiddenActionsConfig: initialMarkupHiddenActionsConfig, enableSubmitInPreview = true, hidePreviewAfterSubmit = false, } = props;
+const EditorWrapper = forwardRef(({ autofocus, editor, editorMode, enableSubmitInPreview, hidePreviewAfterSubmit, isFocused, markupHiddenActionsConfig: initialMarkupHiddenActionsConfig, markupToolbarConfig: initialMarkupToolbarConfig, qa, settingsVisible, showPreview, stickyToolbar, toggleShowPreview, toolbarsPreset, unsetShowPreview, wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig, wysiwygToolbarConfig: initialWysiwygToolbarConfig, }, ref) => {
     const { wysiwygToolbarConfig, markupToolbarConfig, wysiwygHiddenActionsConfig, markupHiddenActionsConfig, } = useMemo(() => getToolbarsConfigs({
         toolbarsPreset,
         props: {
@@ -49,13 +38,6 @@ export const MarkdownEditorView = forwardRef((props, ref) => {
         initialMarkupHiddenActionsConfig,
         editor.preset,
     ]);
-    const rerender = useUpdate();
-    useLayoutEffect(() => {
-        editor.on('rerender', rerender);
-        return () => {
-            editor.off('rerender', rerender);
-        };
-    }, [editor, rerender]);
     const onModeChange = useCallback((type) => {
         editor.changeEditorMode({ mode: type, reason: 'settings' });
         unsetShowPreview();
@@ -72,44 +54,67 @@ export const MarkdownEditorView = forwardRef((props, ref) => {
         if (showPreviewValue !== showPreview)
             toggleShowPreview();
     }, [editor, showPreview, toggleShowPreview]);
-    const editorMode = editor.currentMode;
-    const markupSplitMode = editor.splitModeEnabled && editor.splitMode && editorMode === 'markup';
     const canRenderPreview = Boolean(editor.renderPreview && editorMode === 'markup' && !editor.splitModeEnabled);
     useKey((e) => canRenderPreview && isPreviewKeyDown(e), (e) => {
         e.preventDefault();
         onShowPreviewChange(!showPreview);
     }, { event: 'keydown' }, [showPreview, editorMode, onShowPreviewChange, canRenderPreview]);
-    const editorWrapperRef = useRef(null);
-    const splitModeViewWrapperRef = useRef(null);
-    useEffect(() => {
-        if (showPreview) {
-            divRef.current.focus();
-        }
-    }, [divRef, showPreview]);
-    useKey((e) => enableSubmitInPreview &&
-        showPreview &&
-        isWrapperFocused(divRef) &&
-        isSubmitKeyDown(e), () => {
+    useKey((e) => Boolean(enableSubmitInPreview && showPreview && isFocused && isSubmitKeyDown(e)), () => {
         editor.emit('submit', null);
         if (hidePreviewAfterSubmit) {
             onShowPreviewChange(false);
         }
     }, { event: 'keydown' }, [hidePreviewAfterSubmit, enableSubmitInPreview, showPreview, showPreview]);
-    const settings = useMemo(() => (_jsx(Settings, { mode: editorMode, settingsVisible: settingsVisible, onModeChange: onModeChange, toolbarVisibility: editor.toolbarVisible && !showPreview, onToolbarVisibilityChange: onToolbarVisibilityChange, onSplitModeChange: onSplitModeChange, splitModeEnabled: editor.splitModeEnabled, splitMode: editor.splitMode, stickyToolbar: stickyToolbar, onShowPreviewChange: onShowPreviewChange, showPreview: showPreview, renderPreviewButton: canRenderPreview })), [
-        editorMode,
-        settingsVisible,
-        editor.toolbarVisible,
-        editor.splitModeEnabled,
-        editor.splitMode,
+    const settingsProps = {
+        mode: editorMode,
         onModeChange,
-        showPreview,
-        onToolbarVisibilityChange,
+        onShowPreviewChange,
         onSplitModeChange,
+        onToolbarVisibilityChange,
+        renderPreviewButton: canRenderPreview,
+        showPreview,
+        splitMode: editor.splitMode,
+        splitModeEnabled: editor.splitModeEnabled,
         stickyToolbar,
-        onShowPreviewChange,
-        canRenderPreview,
-    ]);
+        toolbarVisibility: editor.toolbarVisible && !showPreview,
+    };
+    return (_jsx("div", { className: b('editor-wrapper'), ref: ref, "data-qa": qa, "data-mode": editor.currentMode, children: showPreview ? (_jsxs(_Fragment, { children: [_jsx("div", { className: b('preview-wrapper'), children: editor.renderPreview?.({
+                        getValue: editor.getValue,
+                        mode: 'preview',
+                        md: editor.mdOptions,
+                        directiveSyntax: editor.directiveSyntax,
+                    }) }), _jsx(Settings, { ...settingsProps, settingsVisible: settingsVisible })] })) : (_jsxs(_Fragment, { children: [editorMode === 'wysiwyg' && (_jsx(WysiwygEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: wysiwygToolbarConfig, toolbarVisible: editor.toolbarVisible, hiddenActionsConfig: wysiwygHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar, children: _jsx(Settings, { ...settingsProps, settingsVisible: settingsVisible && editor.toolbarVisible }) })), editorMode === 'markup' && (_jsx(MarkupEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: markupToolbarConfig, toolbarVisible: editor.toolbarVisible, splitMode: editor.splitMode, splitModeEnabled: editor.splitModeEnabled, hiddenActionsConfig: markupHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar, children: _jsx(Settings, { ...settingsProps, settingsVisible: settingsVisible && editor.toolbarVisible }) })), _jsx(Settings, { ...settingsProps, settingsVisible: !editor.toolbarVisible && settingsVisible, renderPreviewButton: !editor.toolbarVisible && editorMode === 'markup' })] })) }));
+});
+EditorWrapper.displayName = 'EditorWrapper';
+export const MarkdownEditorView = forwardRef((props, ref) => {
+    const divRef = useEnsuredForwardedRef(ref);
+    const editorWrapperRef = useRef(null);
+    const [showPreview, , unsetShowPreview, toggleShowPreview] = useBooleanState(false);
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    const context = useMarkdownEditorContext();
+    const editor = (props.editor ?? context);
+    if (!editor)
+        throw new Error('[MarkdownEditorView]: an instance of the editor must be passed through the props or context');
+    const { autofocus, className, enableSubmitInPreview = true, hidePreviewAfterSubmit = false, markupHiddenActionsConfig, markupToolbarConfig, qa, settingsVisible = true, stickyToolbar, toolbarsPreset, wysiwygHiddenActionsConfig, wysiwygToolbarConfig, } = props;
+    const rerender = useUpdate();
+    useLayoutEffect(() => {
+        editor.on('rerender', rerender);
+        return () => {
+            editor.off('rerender', rerender);
+        };
+    }, [editor, rerender]);
+    const editorMode = editor.currentMode;
+    const markupSplitMode = editor.splitModeEnabled && editor.splitMode && editorMode === 'markup';
+    const splitModeViewWrapperRef = useRef(null);
     const toaster = useToaster();
+    useEffect(() => {
+        if (showPreview) {
+            divRef.current.focus();
+        }
+    }, [divRef, showPreview]);
     return (_jsx(ErrorBoundary, { onError: (e) => {
             globalLogger.error(e);
             editor.logger.error(e);
@@ -132,12 +137,7 @@ export const MarkdownEditorView = forwardRef((props, ref) => {
         }, children: _jsxs("div", { ref: divRef, "data-qa": qa, className: b({
                 settings: settingsVisible,
                 split: markupSplitMode && editor.splitMode,
-            }, [className]), role: "button", tabIndex: 0, children: [_jsx("div", { className: b('editor-wrapper'), ref: editorWrapperRef, "data-qa": "g-md-editor-mode", "data-mode": editor.currentMode, children: showPreview ? (_jsxs(_Fragment, { children: [_jsx("div", { className: b('preview-wrapper'), children: editor.renderPreview?.({
-                                    getValue: editor.getValue,
-                                    mode: 'preview',
-                                    md: editor.mdOptions,
-                                    directiveSyntax: editor.directiveSyntax,
-                                }) }), settings] })) : (_jsxs(_Fragment, { children: [editorMode === 'wysiwyg' && (_jsx(WysiwygEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: wysiwygToolbarConfig, toolbarVisible: editor.toolbarVisible, hiddenActionsConfig: wysiwygHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar, children: editor.toolbarVisible && settingsVisible && settings })), editorMode === 'markup' && (_jsx(MarkupEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: markupToolbarConfig, toolbarVisible: editor.toolbarVisible, splitMode: editor.splitMode, splitModeEnabled: editor.splitModeEnabled, hiddenActionsConfig: markupHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar, children: editor.toolbarVisible && settings })), !editor.toolbarVisible && settings] })) }), markupSplitMode && (_jsxs(_Fragment, { children: [editor.splitMode === 'horizontal' ? (_jsx(HorizontalDrag, { editor: editor, isMounted: isMounted, leftElRef: editorWrapperRef, rightElRef: splitModeViewWrapperRef, wrapperRef: divRef })) : (_jsx("div", { className: b('resizer') })), _jsx(SplitModeView, { editor: editor, ref: splitModeViewWrapperRef })] }))] }) }));
+            }, [className]), role: "button", tabIndex: 0, children: [_jsx(EditorWrapper, { autofocus: autofocus, editor: editor, editorMode: editorMode, enableSubmitInPreview: enableSubmitInPreview, hidePreviewAfterSubmit: hidePreviewAfterSubmit, isFocused: isWrapperFocused(divRef), markupHiddenActionsConfig: markupHiddenActionsConfig, markupToolbarConfig: markupToolbarConfig, qa: "g-md-editor-mode", ref: editorWrapperRef, settingsVisible: settingsVisible, showPreview: showPreview, stickyToolbar: stickyToolbar, toggleShowPreview: toggleShowPreview, toolbarsPreset: toolbarsPreset, unsetShowPreview: unsetShowPreview, wysiwygHiddenActionsConfig: wysiwygHiddenActionsConfig, wysiwygToolbarConfig: wysiwygToolbarConfig }), markupSplitMode && (_jsxs(_Fragment, { children: [editor.splitMode === 'horizontal' ? (_jsx(HorizontalDrag, { editor: editor, isMounted: isMounted, leftElRef: editorWrapperRef, rightElRef: splitModeViewWrapperRef, wrapperRef: divRef })) : (_jsx("div", { className: b('resizer') })), _jsx(SplitModeView, { editor: editor, ref: splitModeViewWrapperRef })] }))] }) }));
 });
 MarkdownEditorView.displayName = 'MarkdownEditorView';
 const MarkupSearchAnchor = ({ mode }) => (_jsx(_Fragment, { children: mode === 'markup' && _jsx("div", { className: "g-md-search-anchor" }) }));

package/build/esm/bundle/MarkdownEditorView.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditorView.js","sourceRoot":"../../../src","sources":["bundle/MarkdownEditorView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\n\nimport {type QAProps, useToaster} from '@gravity-ui/uikit';\nimport {ErrorBoundary} from 'react-error-boundary';\nimport {useEnsuredForwardedRef, useKey, useUpdate} from 'react-use';\n\nimport {type ClassNameProps, cn} from '../classname';\nimport {i18n} from '../i18n/bundle';\nimport {globalLogger} from '../logger';\nimport type {ToolbarsPreset} from '../modules/toolbars/types';\nimport {useBooleanState, useSticky} from '../react-utils';\nimport {isMac} from '../utils';\n\nimport type {Editor, EditorInt} from './Editor';\nimport {HorizontalDrag} from './HorizontalDrag';\nimport {MarkupEditorView} from './MarkupEditorView';\nimport {SplitModeView} from './SplitModeView';\nimport {WysiwygEditorView} from './WysiwygEditorView';\nimport {useMarkdownEditorContext} from './context';\nimport {EditorSettings, type EditorSettingsProps} from './settings';\nimport {stickyCn} from './sticky';\nimport type {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from './toolbar/types';\nimport {getToolbarsConfigs} from './toolbar/utils/toolbarsConfigs';\nimport type {MarkdownEditorMode} from './types';\n\nimport '../styles/styles.scss';\nimport './MarkdownEditorView.scss'; // eslint-disable-line import/order\n\nexport const cnEditorComponent = cn('editor-component');\nconst b = cnEditorComponent;\n\nexport type MarkdownEditorViewProps = ClassNameProps &\n    QAProps & {\n        editor?: Editor;\n        autofocus?: boolean;\n        toolbarsPreset?: ToolbarsPreset;\n        /**\n         * @deprecated use `toolbarsPreset` instead\n         */\n        markupToolbarConfig?: MToolbarData;\n        /**\n         * @deprecated use `toolbarsPreset` instead\n         */\n        wysiwygToolbarConfig?: WToolbarData;\n        /**\n         * @deprecated use `toolbarsPreset` instead\n         */\n        markupHiddenActionsConfig?: MToolbarItemData[];\n        /**\n         * @deprecated use `toolbarsPreset` instead\n         */\n        wysiwygHiddenActionsConfig?: WToolbarItemData[];\n        /** @default true */\n        settingsVisible?: boolean;\n        stickyToolbar: boolean;\n        enableSubmitInPreview?: boolean;\n        hidePreviewAfterSubmit?: boolean;\n    };\n\nexport const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewProps>(\n    (props, ref) => {\n        const divRef = useEnsuredForwardedRef(ref as React.MutableRefObject<HTMLDivElement>);\n\n        const [isMounted, setIsMounted] = useState(false);\n        useEffect(() => {\n            setIsMounted(true);\n        }, []);\n\n        const [showPreview, , unsetShowPreview, toggleShowPreview] = useBooleanState(false);\n\n        const context = useMarkdownEditorContext();\n        const editor = (props.editor ?? context) as EditorInt;\n        if (!editor)\n            throw new Error(\n                '[MarkdownEditorView]: an instance of the editor must be passed through the props or context',\n            );\n\n        const {\n            qa,\n            autofocus,\n            className,\n            settingsVisible = true,\n            toolbarsPreset,\n            stickyToolbar,\n            wysiwygToolbarConfig: initialWysiwygToolbarConfig,\n            markupToolbarConfig: initialMarkupToolbarConfig,\n            wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig,\n            markupHiddenActionsConfig: initialMarkupHiddenActionsConfig,\n            enableSubmitInPreview = true,\n            hidePreviewAfterSubmit = false,\n        } = props;\n\n        const {\n            wysiwygToolbarConfig,\n            markupToolbarConfig,\n            wysiwygHiddenActionsConfig,\n            markupHiddenActionsConfig,\n        } = useMemo(\n            () =>\n                getToolbarsConfigs({\n                    toolbarsPreset,\n                    props: {\n                        wysiwygToolbarConfig: initialWysiwygToolbarConfig,\n                        markupToolbarConfig: initialMarkupToolbarConfig,\n                        wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig,\n                        markupHiddenActionsConfig: initialMarkupHiddenActionsConfig,\n                    },\n                    preset: editor.preset,\n                }),\n            [\n                toolbarsPreset,\n                initialWysiwygToolbarConfig,\n                initialMarkupToolbarConfig,\n                initialWysiwygHiddenActionsConfig,\n                initialMarkupHiddenActionsConfig,\n                editor.preset,\n            ],\n        );\n\n        const rerender = useUpdate();\n        useLayoutEffect(() => {\n            editor.on('rerender', rerender);\n            return () => {\n                editor.off('rerender', rerender);\n            };\n        }, [editor, rerender]);\n\n        const onModeChange = useCallback(\n            (type: MarkdownEditorMode) => {\n                editor.changeEditorMode({mode: type, reason: 'settings'});\n                unsetShowPreview();\n            },\n            [editor, unsetShowPreview],\n        );\n        const onToolbarVisibilityChange = useCallback(\n            (visible: boolean) => {\n                editor.changeToolbarVisibility({visible});\n            },\n            [editor],\n        );\n        const onSplitModeChange = useCallback(\n            (splitModeEnabled: boolean) => {\n                unsetShowPreview();\n                editor.changeSplitModeEnabled({splitModeEnabled});\n            },\n            [editor, unsetShowPreview],\n        );\n\n        const onShowPreviewChange = useCallback(\n            (showPreviewValue: boolean) => {\n                editor.changeSplitModeEnabled({splitModeEnabled: false});\n                if (showPreviewValue !== showPreview) toggleShowPreview();\n            },\n            [editor, showPreview, toggleShowPreview],\n        );\n\n        const editorMode = editor.currentMode;\n        const markupSplitMode =\n            editor.splitModeEnabled && editor.splitMode && editorMode === 'markup';\n        const canRenderPreview = Boolean(\n            editor.renderPreview && editorMode === 'markup' && !editor.splitModeEnabled,\n        );\n\n        useKey(\n            (e) => canRenderPreview && isPreviewKeyDown(e),\n            (e) => {\n                e.preventDefault();\n                onShowPreviewChange(!showPreview);\n            },\n            {event: 'keydown'},\n            [showPreview, editorMode, onShowPreviewChange, canRenderPreview],\n        );\n\n        const editorWrapperRef = useRef(null);\n        const splitModeViewWrapperRef = useRef(null);\n\n        useEffect(() => {\n            if (showPreview) {\n                divRef.current.focus();\n            }\n        }, [divRef, showPreview]);\n\n        useKey(\n            (e) =>\n                enableSubmitInPreview &&\n                showPreview &&\n                isWrapperFocused(divRef) &&\n                isSubmitKeyDown(e),\n            () => {\n                editor.emit('submit', null);\n\n                if (hidePreviewAfterSubmit) {\n                    onShowPreviewChange(false);\n                }\n            },\n            {event: 'keydown'},\n            [hidePreviewAfterSubmit, enableSubmitInPreview, showPreview, showPreview],\n        );\n\n        const settings = useMemo(\n            () => (\n                <Settings\n                    mode={editorMode}\n                    settingsVisible={settingsVisible}\n                    onModeChange={onModeChange}\n                    toolbarVisibility={editor.toolbarVisible && !showPreview}\n                    onToolbarVisibilityChange={onToolbarVisibilityChange}\n                    onSplitModeChange={onSplitModeChange}\n                    splitModeEnabled={editor.splitModeEnabled}\n                    splitMode={editor.splitMode}\n                    stickyToolbar={stickyToolbar}\n                    onShowPreviewChange={onShowPreviewChange}\n                    showPreview={showPreview}\n                    renderPreviewButton={canRenderPreview}\n                />\n            ),\n            [\n                editorMode,\n                settingsVisible,\n                editor.toolbarVisible,\n                editor.splitModeEnabled,\n                editor.splitMode,\n                onModeChange,\n                showPreview,\n                onToolbarVisibilityChange,\n                onSplitModeChange,\n                stickyToolbar,\n                onShowPreviewChange,\n                canRenderPreview,\n            ],\n        );\n\n        const toaster = useToaster();\n\n        return (\n            <ErrorBoundary\n                onError={(e) => {\n                    globalLogger.error(e);\n                    editor.logger.error(e);\n                }}\n                fallbackRender={({error, resetErrorBoundary}) => {\n                    toaster.add({\n                        theme: 'danger',\n                        name: 'g-md-editor-error',\n                        title: i18n('error-title'),\n                        content: error.message,\n                    });\n                    setTimeout(() => {\n                        resetErrorBoundary();\n                        editor.changeEditorMode({\n                            mode: 'markup',\n                            reason: 'error-boundary',\n                            emit: false,\n                        });\n                    });\n                    return null;\n                }}\n            >\n                <div\n                    ref={divRef}\n                    data-qa={qa}\n                    className={b(\n                        {\n                            settings: settingsVisible,\n                            split: markupSplitMode && editor.splitMode,\n                        },\n                        [className],\n                    )}\n                    role=\"button\"\n                    tabIndex={0}\n                >\n                    <div\n                        className={b('editor-wrapper')}\n                        ref={editorWrapperRef}\n                        data-qa=\"g-md-editor-mode\"\n                        data-mode={editor.currentMode}\n                    >\n                        {showPreview ? (\n                            <>\n                                <div className={b('preview-wrapper')}>\n                                    {editor.renderPreview?.({\n                                        getValue: editor.getValue,\n                                        mode: 'preview',\n                                        md: editor.mdOptions,\n                                        directiveSyntax: editor.directiveSyntax,\n                                    })}\n                                </div>\n                                {settings}\n                            </>\n                        ) : (\n                            <>\n                                {editorMode === 'wysiwyg' && (\n                                    <WysiwygEditorView\n                                        editor={editor}\n                                        autofocus={autofocus}\n                                        settingsVisible={settingsVisible}\n                                        toolbarConfig={wysiwygToolbarConfig}\n                                        toolbarVisible={editor.toolbarVisible}\n                                        hiddenActionsConfig={wysiwygHiddenActionsConfig}\n                                        className={b('editor', {mode: editorMode})}\n                                        toolbarClassName={b('toolbar')}\n                                        stickyToolbar={stickyToolbar}\n                                    >\n                                        {editor.toolbarVisible && settingsVisible && settings}\n                                    </WysiwygEditorView>\n                                )}\n                                {editorMode === 'markup' && (\n                                    <MarkupEditorView\n                                        editor={editor}\n                                        autofocus={autofocus}\n                                        settingsVisible={settingsVisible}\n                                        toolbarConfig={markupToolbarConfig}\n                                        toolbarVisible={editor.toolbarVisible}\n                                        splitMode={editor.splitMode}\n                                        splitModeEnabled={editor.splitModeEnabled}\n                                        hiddenActionsConfig={markupHiddenActionsConfig}\n                                        className={b('editor', {mode: editorMode})}\n                                        toolbarClassName={b('toolbar')}\n                                        stickyToolbar={stickyToolbar}\n                                    >\n                                        {editor.toolbarVisible && settings}\n                                    </MarkupEditorView>\n                                )}\n                                {!editor.toolbarVisible && settings}\n                            </>\n                        )}\n                    </div>\n\n                    {markupSplitMode && (\n                        <>\n                            {editor.splitMode === 'horizontal' ? (\n                                <HorizontalDrag\n                                    editor={editor}\n                                    isMounted={isMounted}\n                                    leftElRef={editorWrapperRef}\n                                    rightElRef={splitModeViewWrapperRef}\n                                    wrapperRef={divRef}\n                                />\n                            ) : (\n                                <div className={b('resizer')} />\n                            )}\n                            <SplitModeView editor={editor} ref={splitModeViewWrapperRef} />\n                        </>\n                    )}\n                </div>\n            </ErrorBoundary>\n        );\n    },\n);\nMarkdownEditorView.displayName = 'MarkdownEditorView';\n\ninterface MarkupSearchAnchorProps extends Pick<EditorSettingsProps, 'mode'> {}\n\nconst MarkupSearchAnchor: React.FC<MarkupSearchAnchorProps> = ({mode}) => (\n    <>{mode === 'markup' && <div className=\"g-md-search-anchor\"></div>}</>\n);\n\nfunction Settings(props: EditorSettingsProps & {stickyToolbar: boolean}) {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isSticky = useSticky(wrapperRef) && props.toolbarVisibility && props.stickyToolbar;\n\n    return (\n        <>\n            {(props.renderPreviewButton || props.settingsVisible) && (\n                <div className={b('settings-wrapper')}>\n                    <div\n                        ref={wrapperRef}\n                        className={stickyCn.settings({\n                            withToolbar: props.toolbarVisibility,\n                            stickyActive: isSticky,\n                        })}\n                    >\n                        <EditorSettings {...props} />\n                        <MarkupSearchAnchor {...props} />\n                    </div>\n                </div>\n            )}\n        </>\n    );\n}\n\nfunction isPreviewKeyDown(e: KeyboardEvent) {\n    const modKey = isMac() ? e.metaKey : e.ctrlKey;\n    return modKey && e.shiftKey && e.code === 'KeyP';\n}\n\nfunction isWrapperFocused(divRef: React.RefObject<HTMLDivElement>) {\n    return document.activeElement === divRef.current;\n}\n\nfunction isSubmitKeyDown(e: KeyboardEvent) {\n    const modKey = isMac() ? e.metaKey : e.ctrlKey;\n    return modKey && e.code === 'Enter';\n}\n"]}
+{"version":3,"file":"MarkdownEditorView.js","sourceRoot":"../../../src","sources":["bundle/MarkdownEditorView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\n\nimport {type QAProps, useToaster} from '@gravity-ui/uikit';\nimport {ErrorBoundary} from 'react-error-boundary';\nimport {useEnsuredForwardedRef, useKey, useUpdate} from 'react-use';\n\nimport {type ClassNameProps, cn} from '../classname';\nimport {i18n} from '../i18n/bundle';\nimport {globalLogger} from '../logger';\nimport type {ToolbarsPreset} from '../modules/toolbars/types';\nimport {useBooleanState, useSticky} from '../react-utils';\nimport {isMac} from '../utils';\n\nimport type {Editor, EditorInt} from './Editor';\nimport {HorizontalDrag} from './HorizontalDrag';\nimport {MarkupEditorView} from './MarkupEditorView';\nimport {SplitModeView} from './SplitModeView';\nimport {WysiwygEditorView} from './WysiwygEditorView';\nimport {useMarkdownEditorContext} from './context';\nimport {EditorSettings, type EditorSettingsProps} from './settings';\nimport {stickyCn} from './sticky';\nimport type {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from './toolbar/types';\nimport {getToolbarsConfigs} from './toolbar/utils/toolbarsConfigs';\nimport type {MarkdownEditorMode} from './types';\n\nimport '../styles/styles.scss';\nimport './MarkdownEditorView.scss'; // eslint-disable-line import/order\n\nexport const cnEditorComponent = cn('editor-component');\nconst b = cnEditorComponent;\n\ninterface EditorWrapperProps extends QAProps, ToolbarConfigs, Omit<ViewProps, 'editor'> {\n    editor: EditorInt;\n    editorMode: MarkdownEditorMode;\n    isFocused: boolean;\n    showPreview: boolean;\n    toggleShowPreview: () => void;\n    unsetShowPreview: () => void;\n}\nconst EditorWrapper = forwardRef<HTMLDivElement, EditorWrapperProps>(\n    (\n        {\n            autofocus,\n            editor,\n            editorMode,\n            enableSubmitInPreview,\n            hidePreviewAfterSubmit,\n            isFocused,\n            markupHiddenActionsConfig: initialMarkupHiddenActionsConfig,\n            markupToolbarConfig: initialMarkupToolbarConfig,\n            qa,\n            settingsVisible,\n            showPreview,\n            stickyToolbar,\n            toggleShowPreview,\n            toolbarsPreset,\n            unsetShowPreview,\n            wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig,\n            wysiwygToolbarConfig: initialWysiwygToolbarConfig,\n        },\n        ref,\n    ) => {\n        const {\n            wysiwygToolbarConfig,\n            markupToolbarConfig,\n            wysiwygHiddenActionsConfig,\n            markupHiddenActionsConfig,\n        } = useMemo(\n            () =>\n                getToolbarsConfigs({\n                    toolbarsPreset,\n                    props: {\n                        wysiwygToolbarConfig: initialWysiwygToolbarConfig,\n                        markupToolbarConfig: initialMarkupToolbarConfig,\n                        wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig,\n                        markupHiddenActionsConfig: initialMarkupHiddenActionsConfig,\n                    },\n                    preset: editor.preset,\n                }),\n            [\n                toolbarsPreset,\n                initialWysiwygToolbarConfig,\n                initialMarkupToolbarConfig,\n                initialWysiwygHiddenActionsConfig,\n                initialMarkupHiddenActionsConfig,\n                editor.preset,\n            ],\n        );\n        const onModeChange = useCallback(\n            (type: MarkdownEditorMode) => {\n                editor.changeEditorMode({mode: type, reason: 'settings'});\n                unsetShowPreview();\n            },\n            [editor, unsetShowPreview],\n        );\n        const onToolbarVisibilityChange = useCallback(\n            (visible: boolean) => {\n                editor.changeToolbarVisibility({visible});\n            },\n            [editor],\n        );\n        const onSplitModeChange = useCallback(\n            (splitModeEnabled: boolean) => {\n                unsetShowPreview();\n                editor.changeSplitModeEnabled({splitModeEnabled});\n            },\n            [editor, unsetShowPreview],\n        );\n        const onShowPreviewChange = useCallback(\n            (showPreviewValue: boolean) => {\n                editor.changeSplitModeEnabled({splitModeEnabled: false});\n                if (showPreviewValue !== showPreview) toggleShowPreview();\n            },\n            [editor, showPreview, toggleShowPreview],\n        );\n        const canRenderPreview = Boolean(\n            editor.renderPreview && editorMode === 'markup' && !editor.splitModeEnabled,\n        );\n\n        useKey(\n            (e) => canRenderPreview && isPreviewKeyDown(e),\n            (e) => {\n                e.preventDefault();\n                onShowPreviewChange(!showPreview);\n            },\n            {event: 'keydown'},\n            [showPreview, editorMode, onShowPreviewChange, canRenderPreview],\n        );\n\n        useKey(\n            (e) => Boolean(enableSubmitInPreview && showPreview && isFocused && isSubmitKeyDown(e)),\n            () => {\n                editor.emit('submit', null);\n\n                if (hidePreviewAfterSubmit) {\n                    onShowPreviewChange(false);\n                }\n            },\n            {event: 'keydown'},\n            [hidePreviewAfterSubmit, enableSubmitInPreview, showPreview, showPreview],\n        );\n\n        const settingsProps = {\n            mode: editorMode,\n            onModeChange,\n            onShowPreviewChange,\n            onSplitModeChange,\n            onToolbarVisibilityChange,\n            renderPreviewButton: canRenderPreview,\n            showPreview,\n            splitMode: editor.splitMode,\n            splitModeEnabled: editor.splitModeEnabled,\n            stickyToolbar,\n            toolbarVisibility: editor.toolbarVisible && !showPreview,\n        };\n\n        return (\n            <div\n                className={b('editor-wrapper')}\n                ref={ref}\n                data-qa={qa}\n                data-mode={editor.currentMode}\n            >\n                {showPreview ? (\n                    <>\n                        <div className={b('preview-wrapper')}>\n                            {editor.renderPreview?.({\n                                getValue: editor.getValue,\n                                mode: 'preview',\n                                md: editor.mdOptions,\n                                directiveSyntax: editor.directiveSyntax,\n                            })}\n                        </div>\n                        <Settings {...settingsProps} settingsVisible={settingsVisible} />\n                    </>\n                ) : (\n                    <>\n                        {editorMode === 'wysiwyg' && (\n                            <WysiwygEditorView\n                                editor={editor}\n                                autofocus={autofocus}\n                                settingsVisible={settingsVisible}\n                                toolbarConfig={wysiwygToolbarConfig}\n                                toolbarVisible={editor.toolbarVisible}\n                                hiddenActionsConfig={wysiwygHiddenActionsConfig}\n                                className={b('editor', {mode: editorMode})}\n                                toolbarClassName={b('toolbar')}\n                                stickyToolbar={stickyToolbar}\n                            >\n                                <Settings\n                                    {...settingsProps}\n                                    settingsVisible={settingsVisible && editor.toolbarVisible}\n                                />\n                            </WysiwygEditorView>\n                        )}\n                        {editorMode === 'markup' && (\n                            <MarkupEditorView\n                                editor={editor}\n                                autofocus={autofocus}\n                                settingsVisible={settingsVisible}\n                                toolbarConfig={markupToolbarConfig}\n                                toolbarVisible={editor.toolbarVisible}\n                                splitMode={editor.splitMode}\n                                splitModeEnabled={editor.splitModeEnabled}\n                                hiddenActionsConfig={markupHiddenActionsConfig}\n                                className={b('editor', {mode: editorMode})}\n                                toolbarClassName={b('toolbar')}\n                                stickyToolbar={stickyToolbar}\n                            >\n                                <Settings\n                                    {...settingsProps}\n                                    settingsVisible={settingsVisible && editor.toolbarVisible}\n                                />\n                            </MarkupEditorView>\n                        )}\n                        <Settings\n                            {...settingsProps}\n                            settingsVisible={!editor.toolbarVisible && settingsVisible}\n                            renderPreviewButton={!editor.toolbarVisible && editorMode === 'markup'}\n                        />\n                    </>\n                )}\n            </div>\n        );\n    },\n);\n\nEditorWrapper.displayName = 'EditorWrapper';\n\ntype ToolbarConfigs = {\n    /**\n     * @deprecated use `toolbarsPreset` instead\n     */\n    markupToolbarConfig?: MToolbarData;\n    /**\n     * @deprecated use `toolbarsPreset` instead\n     */\n    wysiwygToolbarConfig?: WToolbarData;\n    /**\n     * @deprecated use `toolbarsPreset` instead\n     */\n    markupHiddenActionsConfig?: MToolbarItemData[];\n    /**\n     * @deprecated use `toolbarsPreset` instead\n     */\n    wysiwygHiddenActionsConfig?: WToolbarItemData[];\n};\n\ntype ViewProps = {\n    editor?: Editor;\n    autofocus?: boolean;\n    /** @default true */\n    settingsVisible?: boolean;\n    toolbarsPreset?: ToolbarsPreset;\n    stickyToolbar: boolean;\n    enableSubmitInPreview?: boolean;\n    hidePreviewAfterSubmit?: boolean;\n};\n\nexport type MarkdownEditorViewProps = ClassNameProps & ToolbarConfigs & ViewProps & QAProps & {};\n\nexport const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewProps>(\n    (props, ref) => {\n        const divRef = useEnsuredForwardedRef(ref as React.MutableRefObject<HTMLDivElement>);\n        const editorWrapperRef = useRef(null);\n        const [showPreview, , unsetShowPreview, toggleShowPreview] = useBooleanState(false);\n\n        const [isMounted, setIsMounted] = useState(false);\n        useEffect(() => {\n            setIsMounted(true);\n        }, []);\n\n        const context = useMarkdownEditorContext();\n        const editor = (props.editor ?? context) as EditorInt;\n        if (!editor)\n            throw new Error(\n                '[MarkdownEditorView]: an instance of the editor must be passed through the props or context',\n            );\n\n        const {\n            autofocus,\n            className,\n            enableSubmitInPreview = true,\n            hidePreviewAfterSubmit = false,\n            markupHiddenActionsConfig,\n            markupToolbarConfig,\n            qa,\n            settingsVisible = true,\n            stickyToolbar,\n            toolbarsPreset,\n            wysiwygHiddenActionsConfig,\n            wysiwygToolbarConfig,\n        } = props;\n\n        const rerender = useUpdate();\n        useLayoutEffect(() => {\n            editor.on('rerender', rerender);\n            return () => {\n                editor.off('rerender', rerender);\n            };\n        }, [editor, rerender]);\n\n        const editorMode = editor.currentMode;\n        const markupSplitMode =\n            editor.splitModeEnabled && editor.splitMode && editorMode === 'markup';\n\n        const splitModeViewWrapperRef = useRef(null);\n\n        const toaster = useToaster();\n\n        useEffect(() => {\n            if (showPreview) {\n                divRef.current.focus();\n            }\n        }, [divRef, showPreview]);\n\n        return (\n            <ErrorBoundary\n                onError={(e) => {\n                    globalLogger.error(e);\n                    editor.logger.error(e);\n                }}\n                fallbackRender={({error, resetErrorBoundary}) => {\n                    toaster.add({\n                        theme: 'danger',\n                        name: 'g-md-editor-error',\n                        title: i18n('error-title'),\n                        content: error.message,\n                    });\n                    setTimeout(() => {\n                        resetErrorBoundary();\n                        editor.changeEditorMode({\n                            mode: 'markup',\n                            reason: 'error-boundary',\n                            emit: false,\n                        });\n                    });\n                    return null;\n                }}\n            >\n                <div\n                    ref={divRef}\n                    data-qa={qa}\n                    className={b(\n                        {\n                            settings: settingsVisible,\n                            split: markupSplitMode && editor.splitMode,\n                        },\n                        [className],\n                    )}\n                    role=\"button\"\n                    tabIndex={0}\n                >\n                    <EditorWrapper\n                        autofocus={autofocus}\n                        editor={editor}\n                        editorMode={editorMode}\n                        enableSubmitInPreview={enableSubmitInPreview}\n                        hidePreviewAfterSubmit={hidePreviewAfterSubmit}\n                        isFocused={isWrapperFocused(divRef)}\n                        markupHiddenActionsConfig={markupHiddenActionsConfig}\n                        markupToolbarConfig={markupToolbarConfig}\n                        qa=\"g-md-editor-mode\"\n                        ref={editorWrapperRef}\n                        settingsVisible={settingsVisible}\n                        showPreview={showPreview}\n                        stickyToolbar={stickyToolbar}\n                        toggleShowPreview={toggleShowPreview}\n                        toolbarsPreset={toolbarsPreset}\n                        unsetShowPreview={unsetShowPreview}\n                        wysiwygHiddenActionsConfig={wysiwygHiddenActionsConfig}\n                        wysiwygToolbarConfig={wysiwygToolbarConfig}\n                    />\n\n                    {markupSplitMode && (\n                        <>\n                            {editor.splitMode === 'horizontal' ? (\n                                <HorizontalDrag\n                                    editor={editor}\n                                    isMounted={isMounted}\n                                    leftElRef={editorWrapperRef}\n                                    rightElRef={splitModeViewWrapperRef}\n                                    wrapperRef={divRef}\n                                />\n                            ) : (\n                                <div className={b('resizer')} />\n                            )}\n                            <SplitModeView editor={editor} ref={splitModeViewWrapperRef} />\n                        </>\n                    )}\n                </div>\n            </ErrorBoundary>\n        );\n    },\n);\nMarkdownEditorView.displayName = 'MarkdownEditorView';\n\ninterface MarkupSearchAnchorProps extends Pick<EditorSettingsProps, 'mode'> {}\n\nconst MarkupSearchAnchor: React.FC<MarkupSearchAnchorProps> = ({mode}) => (\n    <>{mode === 'markup' && <div className=\"g-md-search-anchor\"></div>}</>\n);\n\nfunction Settings(props: EditorSettingsProps & {stickyToolbar: boolean}) {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isSticky = useSticky(wrapperRef) && props.toolbarVisibility && props.stickyToolbar;\n\n    return (\n        <>\n            {(props.renderPreviewButton || props.settingsVisible) && (\n                <div className={b('settings-wrapper')}>\n                    <div\n                        ref={wrapperRef}\n                        className={stickyCn.settings({\n                            withToolbar: props.toolbarVisibility,\n                            stickyActive: isSticky,\n                        })}\n                    >\n                        <EditorSettings {...props} />\n                        <MarkupSearchAnchor {...props} />\n                    </div>\n                </div>\n            )}\n        </>\n    );\n}\n\nfunction isPreviewKeyDown(e: KeyboardEvent) {\n    const modKey = isMac() ? e.metaKey : e.ctrlKey;\n    return modKey && e.shiftKey && e.code === 'KeyP';\n}\n\nfunction isWrapperFocused(divRef: React.RefObject<HTMLDivElement>) {\n    return document.activeElement === divRef.current;\n}\n\nfunction isSubmitKeyDown(e: KeyboardEvent) {\n    const modKey = isMac() ? e.metaKey : e.ctrlKey;\n    return modKey && e.code === 'Enter';\n}\n"]}

package/build/esm/bundle/MarkupEditorComponent.d.ts

@@ -1,5 +1,6 @@
+import type { QAProps } from '@gravity-ui/uikit';
 import type { EditorInt } from "./Editor.js";
-export type MarkupEditorComponentProps = {
+export type MarkupEditorComponentProps = QAProps & {
     editor: EditorInt;
     autofocus?: boolean;
     className?: string;

package/build/esm/bundle/MarkupEditorComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef } from 'react';
-export const MarkupEditorComponent = function MarkupEditorComponent({ editor, autofocus, className, children }) {
+export const MarkupEditorComponent = function MarkupEditorComponent({ editor, autofocus, className, children, qa }) {
     const ref = useRef(null);
     // insert editor to dom
     useLayoutEffect(() => {
@@ -21,7 +21,7 @@ export const MarkupEditorComponent = function MarkupEditorComponent({ editor, au
     }, [editor.markupEditor]);
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    _jsx("div", { ref: ref, className: className, onClick: (event) => {
+    _jsx("div", { "data-qa": qa, ref: ref, className: className, onClick: (event) => {
             const target = event.target;
             if (target instanceof Element && target.classList.contains('cm-editor')) {
                 editor.markupEditor.focus();

package/build/esm/bundle/MarkupEditorComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkupEditorComponent.js","sourceRoot":"../../../src","sources":["bundle/MarkupEditorComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,eAAe,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAWzD,MAAM,CAAC,MAAM,qBAAqB,GAC9B,SAAS,qBAAqB,CAAC,EAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAC;IACnE,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,uBAAuB;IACvB,eAAe,CAAC,GAAG,EAAE;QACjB,MAAM,OAAO,GAAG,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC;QAC3C,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;YACd,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,GAAG,EAAE;YACR,OAAO,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1B,wCAAwC;IACxC,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC;QACxC,IAAI,SAAS,EAAE,CAAC;YACZ,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAChC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1B,OAAO;IACH,0GAA0G;IAC1G,cACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACf,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;YAE5B,IAAI,MAAM,YAAY,OAAO,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;gBACtE,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;YAChC,CAAC;QACL,CAAC,YAEA,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useEffect, useLayoutEffect, useRef} from 'react';\n\nimport type {EditorInt} from './Editor';\n\nexport type MarkupEditorComponentProps = {\n    editor: EditorInt;\n    autofocus?: boolean;\n    className?: string;\n    children?: React.ReactNode;\n};\n\nexport const MarkupEditorComponent: React.FC<MarkupEditorComponentProps> =\n    function MarkupEditorComponent({editor, autofocus, className, children}) {\n        const ref = useRef<HTMLDivElement>(null);\n\n        // insert editor to dom\n        useLayoutEffect(() => {\n            const domElem = editor.markupEditor.cm.dom;\n            if (ref.current) {\n                ref.current.appendChild(domElem);\n            }\n            return () => {\n                domElem.remove();\n            };\n        }, [editor.markupEditor]);\n\n        // update editor after connecting to dom\n        useEffect(() => {\n            editor.markupEditor.cm.requestMeasure();\n            if (autofocus) {\n                editor.markupEditor.focus();\n            }\n        }, [editor.markupEditor]);\n\n        return (\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n            <div\n                ref={ref}\n                className={className}\n                onClick={(event) => {\n                    const target = event.target;\n\n                    if (target instanceof Element && target.classList.contains('cm-editor')) {\n                        editor.markupEditor.focus();\n                    }\n                }}\n            >\n                {children}\n            </div>\n        );\n    };\n"]}
+{"version":3,"file":"MarkupEditorComponent.js","sourceRoot":"../../../src","sources":["bundle/MarkupEditorComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,eAAe,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAazD,MAAM,CAAC,MAAM,qBAAqB,GAC9B,SAAS,qBAAqB,CAAC,EAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAC;IACvE,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,uBAAuB;IACvB,eAAe,CAAC,GAAG,EAAE;QACjB,MAAM,OAAO,GAAG,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC;QAC3C,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;YACd,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,GAAG,EAAE;YACR,OAAO,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1B,wCAAwC;IACxC,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC;QACxC,IAAI,SAAS,EAAE,CAAC;YACZ,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAChC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1B,OAAO;IACH,0GAA0G;IAC1G,yBACa,EAAE,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACf,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;YAE5B,IAAI,MAAM,YAAY,OAAO,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;gBACtE,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;YAChC,CAAC;QACL,CAAC,YAEA,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useEffect, useLayoutEffect, useRef} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\n\nimport type {EditorInt} from './Editor';\n\nexport type MarkupEditorComponentProps = QAProps & {\n    editor: EditorInt;\n    autofocus?: boolean;\n    className?: string;\n    children?: React.ReactNode;\n};\n\nexport const MarkupEditorComponent: React.FC<MarkupEditorComponentProps> =\n    function MarkupEditorComponent({editor, autofocus, className, children, qa}) {\n        const ref = useRef<HTMLDivElement>(null);\n\n        // insert editor to dom\n        useLayoutEffect(() => {\n            const domElem = editor.markupEditor.cm.dom;\n            if (ref.current) {\n                ref.current.appendChild(domElem);\n            }\n            return () => {\n                domElem.remove();\n            };\n        }, [editor.markupEditor]);\n\n        // update editor after connecting to dom\n        useEffect(() => {\n            editor.markupEditor.cm.requestMeasure();\n            if (autofocus) {\n                editor.markupEditor.focus();\n            }\n        }, [editor.markupEditor]);\n\n        return (\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n            <div\n                data-qa={qa}\n                ref={ref}\n                className={className}\n                onClick={(event) => {\n                    const target = event.target;\n\n                    if (target instanceof Element && target.classList.contains('cm-editor')) {\n                        editor.markupEditor.focus();\n                    }\n                }}\n            >\n                {children}\n            </div>\n        );\n    };\n"]}

package/build/esm/bundle/MarkupEditorView.js

@@ -26,7 +26,7 @@ export const MarkupEditorView = memo((props) => {
     return (_jsxs("div", { className: b({ toolbar: toolbarVisible }, [className]), "data-qa": qa, children: [toolbarVisible ? (_jsx(MarkupToolbarContextProvider, { value: {
                     uploadHandler: editor.fileUploadHandler,
                     needToSetDimensionsForUploadedImages: editor.needToSetDimensionsForUploadedImages,
-                }, children: _jsx(ToolbarView, { editor: editor, editorMode: "markup", toolbarEditor: editor, hiddenActionsConfig: hiddenActionsConfig, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, toolbarFocus: () => editor.focus(), settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]), children: children }) })) : null, _jsx(MarkupEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor', { 'toolbar-visible': toolbarVisible }), children: _jsx(ReactRendererComponent, { storage: editor.renderStorage }) })] }));
+                }, children: _jsx(ToolbarView, { qa: "g-md-toolbar", editor: editor, editorMode: "markup", toolbarEditor: editor, hiddenActionsConfig: hiddenActionsConfig, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, toolbarFocus: () => editor.focus(), settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]), children: children }) })) : null, _jsx(MarkupEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor', { 'toolbar-visible': toolbarVisible }), children: _jsx(ReactRendererComponent, { storage: editor.renderStorage }) })] }));
 });
 MarkupEditorView.displayName = 'MarkdownMarkupEditorView';
 //# sourceMappingURL=MarkupEditorView.js.map

package/build/esm/bundle/MarkupEditorView.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkupEditorView.js","sourceRoot":"../../../src","sources":["bundle/MarkupEditorView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAsB,EAAE,EAAC,wBAAqB;AACrD,OAAO,EAAC,sBAAsB,EAAC,+BAAsB;AACrD,OAAO,EAAC,YAAY,EAAC,qBAAkB;AACvC,OAAO,EAAC,aAAa,EAAC,gCAA6B;AAGnD,OAAO,EAAC,qBAAqB,EAAC,mCAAgC;AAC9D,OAAO,EAAC,WAAW,EAAC,yBAAsB;AAC1C,OAAO,EAAC,4BAA4B,EAAC,oCAAiC;AAItE,gCAAiC;AAEjC,MAAM,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC;AAiB9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAwB,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,EACF,MAAM,EACN,SAAS,EACT,eAAe,EACf,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,EAAE,EACF,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,aAAa,GAAG,IAAI,GACvB,GAAG,KAAK,CAAC;IACV,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;QACnB,YAAY,CAAC,OAAO,CAAC;YACjB,SAAS,EAAE,eAAe;YAC1B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;YAClB,SAAS,EAAE,eAAe;YAC1B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,cAAc,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,aACjE,cAAc,CAAC,CAAC,CAAC,CACd,KAAC,4BAA4B,IACzB,KAAK,EAAE;oBACH,aAAa,EAAE,MAAM,CAAC,iBAAiB;oBACvC,oCAAoC,EAChC,MAAM,CAAC,oCAAoC;iBAClD,YAED,KAAC,WAAW,IACR,MAAM,EAAE,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,aAAa,EAAE,MAAM,EACrB,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAClC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,gBAAgB,CAAC,CAAC,YAE1C,QAAQ,GACC,GACa,CAClC,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,qBAAqB,IAClB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,cAAc,EAAC,CAAC,YAE3D,KAAC,sBAAsB,IAAC,OAAO,EAAE,MAAM,CAAC,aAAa,GAAI,GACrC,IACtB,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,0BAA0B,CAAC","sourcesContent":["import {memo} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\n\nimport {type ClassNameProps, cn} from '../classname';\nimport {ReactRendererComponent} from '../extensions';\nimport {globalLogger} from '../logger';\nimport {useRenderTime} from '../react-utils/hooks';\n\nimport type {EditorInt} from './Editor';\nimport {MarkupEditorComponent} from './MarkupEditorComponent';\nimport {ToolbarView} from './ToolbarView';\nimport {MarkupToolbarContextProvider} from './toolbar/markup/context';\nimport type {MToolbarData, MToolbarItemData} from './toolbar/types';\nimport type {MarkdownEditorSplitMode} from './types';\n\nimport './MarkupEditorView.scss';\n\nconst b = cn('markup-editor');\n\nexport type MarkupEditorViewProps = ClassNameProps &\n    QAProps & {\n        editor: EditorInt;\n        autofocus?: boolean;\n        toolbarConfig: MToolbarData;\n        settingsVisible?: boolean;\n        toolbarVisible?: boolean;\n        stickyToolbar?: boolean;\n        toolbarClassName?: string;\n        splitMode?: MarkdownEditorSplitMode;\n        splitModeEnabled: boolean;\n        hiddenActionsConfig?: MToolbarItemData[];\n        children?: React.ReactNode;\n    };\n\nexport const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {\n    const {\n        editor,\n        autofocus,\n        settingsVisible,\n        toolbarVisible,\n        toolbarConfig,\n        hiddenActionsConfig,\n        qa,\n        className,\n        toolbarClassName,\n        children,\n        stickyToolbar = true,\n    } = props;\n    useRenderTime((time) => {\n        globalLogger.metrics({\n            component: 'markup-editor',\n            event: 'render',\n            duration: time,\n        });\n        editor.logger.metrics({\n            component: 'markup-editor',\n            event: 'render',\n            duration: time,\n        });\n    });\n\n    return (\n        <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>\n            {toolbarVisible ? (\n                <MarkupToolbarContextProvider\n                    value={{\n                        uploadHandler: editor.fileUploadHandler,\n                        needToSetDimensionsForUploadedImages:\n                            editor.needToSetDimensionsForUploadedImages,\n                    }}\n                >\n                    <ToolbarView\n                        editor={editor}\n                        editorMode=\"markup\"\n                        toolbarEditor={editor}\n                        hiddenActionsConfig={hiddenActionsConfig}\n                        stickyToolbar={stickyToolbar}\n                        toolbarConfig={toolbarConfig}\n                        toolbarFocus={() => editor.focus()}\n                        settingsVisible={settingsVisible}\n                        className={b('toolbar', [toolbarClassName])}\n                    >\n                        {children}\n                    </ToolbarView>\n                </MarkupToolbarContextProvider>\n            ) : null}\n            <MarkupEditorComponent\n                autofocus={autofocus}\n                editor={editor}\n                className={b('editor', {'toolbar-visible': toolbarVisible})}\n            >\n                <ReactRendererComponent storage={editor.renderStorage} />\n            </MarkupEditorComponent>\n        </div>\n    );\n});\nMarkupEditorView.displayName = 'MarkdownMarkupEditorView';\n"]}
+{"version":3,"file":"MarkupEditorView.js","sourceRoot":"../../../src","sources":["bundle/MarkupEditorView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAsB,EAAE,EAAC,wBAAqB;AACrD,OAAO,EAAC,sBAAsB,EAAC,+BAAsB;AACrD,OAAO,EAAC,YAAY,EAAC,qBAAkB;AACvC,OAAO,EAAC,aAAa,EAAC,gCAA6B;AAGnD,OAAO,EAAC,qBAAqB,EAAC,mCAAgC;AAC9D,OAAO,EAAC,WAAW,EAAC,yBAAsB;AAC1C,OAAO,EAAC,4BAA4B,EAAC,oCAAiC;AAItE,gCAAiC;AAEjC,MAAM,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC;AAiB9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAwB,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,EACF,MAAM,EACN,SAAS,EACT,eAAe,EACf,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,EAAE,EACF,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,aAAa,GAAG,IAAI,GACvB,GAAG,KAAK,CAAC;IACV,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;QACnB,YAAY,CAAC,OAAO,CAAC;YACjB,SAAS,EAAE,eAAe;YAC1B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;YAClB,SAAS,EAAE,eAAe;YAC1B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,cAAc,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,aACjE,cAAc,CAAC,CAAC,CAAC,CACd,KAAC,4BAA4B,IACzB,KAAK,EAAE;oBACH,aAAa,EAAE,MAAM,CAAC,iBAAiB;oBACvC,oCAAoC,EAChC,MAAM,CAAC,oCAAoC;iBAClD,YAED,KAAC,WAAW,IACR,EAAE,EAAC,cAAc,EACjB,MAAM,EAAE,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,aAAa,EAAE,MAAM,EACrB,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAClC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,gBAAgB,CAAC,CAAC,YAE1C,QAAQ,GACC,GACa,CAClC,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,qBAAqB,IAClB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,cAAc,EAAC,CAAC,YAE3D,KAAC,sBAAsB,IAAC,OAAO,EAAE,MAAM,CAAC,aAAa,GAAI,GACrC,IACtB,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,0BAA0B,CAAC","sourcesContent":["import {memo} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\n\nimport {type ClassNameProps, cn} from '../classname';\nimport {ReactRendererComponent} from '../extensions';\nimport {globalLogger} from '../logger';\nimport {useRenderTime} from '../react-utils/hooks';\n\nimport type {EditorInt} from './Editor';\nimport {MarkupEditorComponent} from './MarkupEditorComponent';\nimport {ToolbarView} from './ToolbarView';\nimport {MarkupToolbarContextProvider} from './toolbar/markup/context';\nimport type {MToolbarData, MToolbarItemData} from './toolbar/types';\nimport type {MarkdownEditorSplitMode} from './types';\n\nimport './MarkupEditorView.scss';\n\nconst b = cn('markup-editor');\n\nexport type MarkupEditorViewProps = ClassNameProps &\n    QAProps & {\n        editor: EditorInt;\n        autofocus?: boolean;\n        toolbarConfig: MToolbarData;\n        settingsVisible?: boolean;\n        toolbarVisible?: boolean;\n        stickyToolbar?: boolean;\n        toolbarClassName?: string;\n        splitMode?: MarkdownEditorSplitMode;\n        splitModeEnabled: boolean;\n        hiddenActionsConfig?: MToolbarItemData[];\n        children?: React.ReactNode;\n    };\n\nexport const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {\n    const {\n        editor,\n        autofocus,\n        settingsVisible,\n        toolbarVisible,\n        toolbarConfig,\n        hiddenActionsConfig,\n        qa,\n        className,\n        toolbarClassName,\n        children,\n        stickyToolbar = true,\n    } = props;\n    useRenderTime((time) => {\n        globalLogger.metrics({\n            component: 'markup-editor',\n            event: 'render',\n            duration: time,\n        });\n        editor.logger.metrics({\n            component: 'markup-editor',\n            event: 'render',\n            duration: time,\n        });\n    });\n\n    return (\n        <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>\n            {toolbarVisible ? (\n                <MarkupToolbarContextProvider\n                    value={{\n                        uploadHandler: editor.fileUploadHandler,\n                        needToSetDimensionsForUploadedImages:\n                            editor.needToSetDimensionsForUploadedImages,\n                    }}\n                >\n                    <ToolbarView\n                        qa=\"g-md-toolbar\"\n                        editor={editor}\n                        editorMode=\"markup\"\n                        toolbarEditor={editor}\n                        hiddenActionsConfig={hiddenActionsConfig}\n                        stickyToolbar={stickyToolbar}\n                        toolbarConfig={toolbarConfig}\n                        toolbarFocus={() => editor.focus()}\n                        settingsVisible={settingsVisible}\n                        className={b('toolbar', [toolbarClassName])}\n                    >\n                        {children}\n                    </ToolbarView>\n                </MarkupToolbarContextProvider>\n            ) : null}\n            <MarkupEditorComponent\n                autofocus={autofocus}\n                editor={editor}\n                className={b('editor', {'toolbar-visible': toolbarVisible})}\n            >\n                <ReactRendererComponent storage={editor.renderStorage} />\n            </MarkupEditorComponent>\n        </div>\n    );\n});\nMarkupEditorView.displayName = 'MarkdownMarkupEditorView';\n"]}

package/build/esm/bundle/ToolbarView.d.ts

@@ -1,8 +1,9 @@
+import type { QAProps } from '@gravity-ui/uikit';
 import type { ClassNameProps } from "../classname.js";
 import { type ToolbarData, type ToolbarItemData } from "../toolbar/index.js";
 import type { EditorInt } from "./Editor.js";
 import type { MarkdownEditorMode } from "./types.js";
-export type ToolbarViewProps<T> = ClassNameProps & {
+export type ToolbarViewProps<T> = ClassNameProps & QAProps & {
     editor: EditorInt;
     editorMode: MarkdownEditorMode;
     toolbarEditor: T;
@@ -13,4 +14,4 @@ export type ToolbarViewProps<T> = ClassNameProps & {
     children?: React.ReactNode;
     stickyToolbar: boolean;
 };
-export declare function ToolbarView<T>({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, }: ToolbarViewProps<T>): JSX.Element;
+export declare function ToolbarView<T>({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, qa, }: ToolbarViewProps<T>): JSX.Element;

package/build/esm/bundle/ToolbarView.js

@@ -5,7 +5,7 @@ import { i18n } from "../i18n/menubar/index.js";
 import { useSticky } from "../react-utils/useSticky.js";
 import { FlexToolbar } from "../toolbar/index.js";
 import { stickyCn } from "./sticky/index.js";
-export function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, }) {
+export function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, qa, }) {
     const rerender = useUpdate();
     useLayoutEffect(() => {
         editor.on('rerender-toolbar', rerender);
@@ -15,7 +15,7 @@ export function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, t
     }, [editor, rerender]);
     const wrapperRef = useRef(null);
     const isStickyActive = useSticky(wrapperRef) && stickyToolbar;
-    return (_jsxs("div", { ref: wrapperRef, className: stickyCn.toolbar({
+    return (_jsxs("div", { "data-qa": qa, ref: wrapperRef, className: stickyCn.toolbar({
             withSettings: settingsVisible,
             stickyActive: isStickyActive,
             isSticky: stickyToolbar,

package/build/esm/bundle/ToolbarView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarView.js","sourceRoot":"../../../src","sources":["bundle/ToolbarView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAC,IAAI,EAAC,iCAAwB;AACrC,OAAO,EAAC,SAAS,EAAC,oCAAiC;AACnD,OAAO,EAAC,WAAW,EAAyC,4BAAmB;AAG/E,OAAO,EAAC,QAAQ,EAAC,0BAAiB;AAelC,MAAM,UAAU,WAAW,CAAI,EAC3B,MAAM,EACN,UAAU,EACV,aAAa,EACb,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,GACK;IAClB,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,eAAe,CAAC,GAAG,EAAE;QACjB,MAAM,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,GAAG,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,SAAS,CAAC,UAAU,CAAC,IAAI,aAAa,CAAC;IAE9D,OAAO,CACH,eACI,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,QAAQ,CAAC,OAAO,CACvB;YACI,YAAY,EAAE,eAAe;YAC7B,YAAY,EAAE,cAAc;YAC5B,QAAQ,EAAE,aAAa;SAC1B,EACD,CAAC,SAAS,CAAC,CACd,aAED,KAAC,WAAW,IACR,IAAI,EAAE,aAAa,EACnB,aAAa,EAAE,mBAAmB,EAClC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,EAC9B,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAC,CAAC,GAChF,EACD,QAAQ,IACP,CACT,CAAC;AACN,CAAC","sourcesContent":["import {useLayoutEffect, useRef} from 'react';\n\nimport {useUpdate} from 'react-use';\n\nimport type {ClassNameProps} from '../classname';\nimport {i18n} from '../i18n/menubar';\nimport {useSticky} from '../react-utils/useSticky';\nimport {FlexToolbar, type ToolbarData, type ToolbarItemData} from '../toolbar';\n\nimport type {EditorInt} from './Editor';\nimport {stickyCn} from './sticky';\nimport type {MarkdownEditorMode} from './types';\n\nexport type ToolbarViewProps<T> = ClassNameProps & {\n    editor: EditorInt;\n    editorMode: MarkdownEditorMode;\n    toolbarEditor: T;\n    toolbarFocus: () => void;\n    toolbarConfig: ToolbarData<T>;\n    settingsVisible?: boolean;\n    hiddenActionsConfig?: ToolbarItemData<T>[];\n    children?: React.ReactNode;\n    stickyToolbar: boolean;\n};\n\nexport function ToolbarView<T>({\n    editor,\n    editorMode,\n    toolbarEditor,\n    toolbarFocus,\n    toolbarConfig,\n    hiddenActionsConfig,\n    settingsVisible,\n    className,\n    children,\n    stickyToolbar,\n}: ToolbarViewProps<T>) {\n    const rerender = useUpdate();\n    useLayoutEffect(() => {\n        editor.on('rerender-toolbar', rerender);\n        return () => {\n            editor.off('rerender-toolbar', rerender);\n        };\n    }, [editor, rerender]);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isStickyActive = useSticky(wrapperRef) && stickyToolbar;\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={stickyCn.toolbar(\n                {\n                    withSettings: settingsVisible,\n                    stickyActive: isStickyActive,\n                    isSticky: stickyToolbar,\n                },\n                [className],\n            )}\n        >\n            <FlexToolbar\n                data={toolbarConfig}\n                hiddenActions={hiddenActionsConfig}\n                editor={toolbarEditor}\n                focus={toolbarFocus}\n                dotsTitle={i18n('more_action')}\n                onClick={(id, attrs) => editor.emit('toolbar-action', {id, attrs, editorMode})}\n            />\n            {children}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"ToolbarView.js","sourceRoot":"../../../src","sources":["bundle/ToolbarView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAC,IAAI,EAAC,iCAAwB;AACrC,OAAO,EAAC,SAAS,EAAC,oCAAiC;AACnD,OAAO,EAAC,WAAW,EAAyC,4BAAmB;AAG/E,OAAO,EAAC,QAAQ,EAAC,0BAAiB;AAgBlC,MAAM,UAAU,WAAW,CAAI,EAC3B,MAAM,EACN,UAAU,EACV,aAAa,EACb,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,EAAE,GACgB;IAClB,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,eAAe,CAAC,GAAG,EAAE;QACjB,MAAM,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,GAAG,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,SAAS,CAAC,UAAU,CAAC,IAAI,aAAa,CAAC;IAE9D,OAAO,CACH,0BACa,EAAE,EACX,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,QAAQ,CAAC,OAAO,CACvB;YACI,YAAY,EAAE,eAAe;YAC7B,YAAY,EAAE,cAAc;YAC5B,QAAQ,EAAE,aAAa;SAC1B,EACD,CAAC,SAAS,CAAC,CACd,aAED,KAAC,WAAW,IACR,IAAI,EAAE,aAAa,EACnB,aAAa,EAAE,mBAAmB,EAClC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,EAC9B,OAAO,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAC,CAAC,GAChF,EACD,QAAQ,IACP,CACT,CAAC;AACN,CAAC","sourcesContent":["import {useLayoutEffect, useRef} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\nimport {useUpdate} from 'react-use';\n\nimport type {ClassNameProps} from '../classname';\nimport {i18n} from '../i18n/menubar';\nimport {useSticky} from '../react-utils/useSticky';\nimport {FlexToolbar, type ToolbarData, type ToolbarItemData} from '../toolbar';\n\nimport type {EditorInt} from './Editor';\nimport {stickyCn} from './sticky';\nimport type {MarkdownEditorMode} from './types';\n\nexport type ToolbarViewProps<T> = ClassNameProps &\n    QAProps & {\n        editor: EditorInt;\n        editorMode: MarkdownEditorMode;\n        toolbarEditor: T;\n        toolbarFocus: () => void;\n        toolbarConfig: ToolbarData<T>;\n        settingsVisible?: boolean;\n        hiddenActionsConfig?: ToolbarItemData<T>[];\n        children?: React.ReactNode;\n        stickyToolbar: boolean;\n    };\n\nexport function ToolbarView<T>({\n    editor,\n    editorMode,\n    toolbarEditor,\n    toolbarFocus,\n    toolbarConfig,\n    hiddenActionsConfig,\n    settingsVisible,\n    className,\n    children,\n    stickyToolbar,\n    qa,\n}: ToolbarViewProps<T>) {\n    const rerender = useUpdate();\n    useLayoutEffect(() => {\n        editor.on('rerender-toolbar', rerender);\n        return () => {\n            editor.off('rerender-toolbar', rerender);\n        };\n    }, [editor, rerender]);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isStickyActive = useSticky(wrapperRef) && stickyToolbar;\n\n    return (\n        <div\n            data-qa={qa}\n            ref={wrapperRef}\n            className={stickyCn.toolbar(\n                {\n                    withSettings: settingsVisible,\n                    stickyActive: isStickyActive,\n                    isSticky: stickyToolbar,\n                },\n                [className],\n            )}\n        >\n            <FlexToolbar\n                data={toolbarConfig}\n                hiddenActions={hiddenActionsConfig}\n                editor={toolbarEditor}\n                focus={toolbarFocus}\n                dotsTitle={i18n('more_action')}\n                onClick={(id, attrs) => editor.emit('toolbar-action', {id, attrs, editorMode})}\n            />\n            {children}\n        </div>\n    );\n}\n"]}

package/build/esm/bundle/WysiwygEditorComponent.d.ts

@@ -1,5 +1,6 @@
+import type { QAProps } from '@gravity-ui/uikit';
 import type { EditorInt } from "./Editor.js";
-export type WysiwygEditorComponentProps = {
+export type WysiwygEditorComponentProps = QAProps & {
     className?: string;
     autofocus?: boolean;
     editor: EditorInt;

package/build/esm/bundle/WysiwygEditorComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export const WysiwygEditorComponent = function WysiwygEditorComponent({ className, autofocus, editor, children }) {
+export const WysiwygEditorComponent = function WysiwygEditorComponent({ className, autofocus, editor, children, qa }) {
     const ref = useRef(null);
     useEffect(() => {
         const { current } = ref;
@@ -11,6 +11,6 @@ export const WysiwygEditorComponent = function WysiwygEditorComponent({ classNam
             }
         }
     }, [editor]);
-    return (_jsx("div", { ref: ref, className: className, children: children }));
+    return (_jsx("div", { "data-qa": qa, ref: ref, className: className, children: children }));
 };
 //# sourceMappingURL=WysiwygEditorComponent.js.map

package/build/esm/bundle/WysiwygEditorComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"WysiwygEditorComponent.js","sourceRoot":"../../../src","sources":["bundle/WysiwygEditorComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAWxC,MAAM,CAAC,MAAM,sBAAsB,GAC/B,SAAS,sBAAsB,CAAC,EAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC;IACpE,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,EAAC,OAAO,EAAC,GAAG,GAAG,CAAC;QACtB,IAAI,OAAO,EAAE,CAAC;YACV,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAC9C,IAAI,SAAS,EAAE,CAAC;gBACZ,MAAM,CAAC,KAAK,EAAE,CAAC;YACnB,CAAC;QACL,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,YAC9B,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useEffect, useRef} from 'react';\n\nimport type {EditorInt} from './Editor';\n\nexport type WysiwygEditorComponentProps = {\n    className?: string;\n    autofocus?: boolean;\n    editor: EditorInt;\n    children?: React.ReactNode;\n};\n\nexport const WysiwygEditorComponent: React.FC<WysiwygEditorComponentProps> =\n    function WysiwygEditorComponent({className, autofocus, editor, children}) {\n        const ref = useRef<HTMLDivElement>(null);\n        useEffect(() => {\n            const {current} = ref;\n            if (current) {\n                current.appendChild(editor.wysiwygEditor.dom);\n                if (autofocus) {\n                    editor.focus();\n                }\n            }\n        }, [editor]);\n\n        return (\n            <div ref={ref} className={className}>\n                {children}\n            </div>\n        );\n    };\n"]}
+{"version":3,"file":"WysiwygEditorComponent.js","sourceRoot":"../../../src","sources":["bundle/WysiwygEditorComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAaxC,MAAM,CAAC,MAAM,sBAAsB,GAC/B,SAAS,sBAAsB,CAAC,EAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAC;IACxE,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,EAAC,OAAO,EAAC,GAAG,GAAG,CAAC;QACtB,IAAI,OAAO,EAAE,CAAC;YACV,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAC9C,IAAI,SAAS,EAAE,CAAC;gBACZ,MAAM,CAAC,KAAK,EAAE,CAAC;YACnB,CAAC;QACL,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACH,yBAAc,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,YAC3C,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useEffect, useRef} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\n\nimport type {EditorInt} from './Editor';\n\nexport type WysiwygEditorComponentProps = QAProps & {\n    className?: string;\n    autofocus?: boolean;\n    editor: EditorInt;\n    children?: React.ReactNode;\n};\n\nexport const WysiwygEditorComponent: React.FC<WysiwygEditorComponentProps> =\n    function WysiwygEditorComponent({className, autofocus, editor, children, qa}) {\n        const ref = useRef<HTMLDivElement>(null);\n        useEffect(() => {\n            const {current} = ref;\n            if (current) {\n                current.appendChild(editor.wysiwygEditor.dom);\n                if (autofocus) {\n                    editor.focus();\n                }\n            }\n        }, [editor]);\n\n        return (\n            <div data-qa={qa} ref={ref} className={className}>\n                {children}\n            </div>\n        );\n    };\n"]}

package/build/esm/bundle/WysiwygEditorView.js

@@ -22,7 +22,7 @@ export const WysiwygEditorView = memo((props) => {
             duration: time,
         });
     });
-    return (_jsxs("div", { className: b({ toolbar: toolbarVisible }, [className]), "data-qa": qa, children: [toolbarVisible ? (_jsx(ToolbarView, { editor: editor, editorMode: "wysiwyg", toolbarEditor: editor, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, toolbarFocus: () => editor.focus(), hiddenActionsConfig: hiddenActionsConfig, settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]), children: children })) : null, _jsx(WysiwygEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor'), children: _jsx(ReactRendererComponent, { storage: editor.renderStorage }) })] }));
+    return (_jsxs("div", { className: b({ toolbar: toolbarVisible }, [className]), "data-qa": qa, children: [toolbarVisible ? (_jsx(ToolbarView, { qa: "g-md-toolbar", editor: editor, editorMode: "wysiwyg", toolbarEditor: editor, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, toolbarFocus: () => editor.focus(), hiddenActionsConfig: hiddenActionsConfig, settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]), children: children })) : null, _jsx(WysiwygEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor'), children: _jsx(ReactRendererComponent, { storage: editor.renderStorage }) })] }));
 });
 WysiwygEditorView.displayName = 'MarkdownWysiwgEditorView';
 //# sourceMappingURL=WysiwygEditorView.js.map

package/build/esm/bundle/WysiwygEditorView.js.map

@@ -1 +1 @@
-{"version":3,"file":"WysiwygEditorView.js","sourceRoot":"../../../src","sources":["bundle/WysiwygEditorView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAsB,EAAE,EAAC,wBAAqB;AACrD,OAAO,EAAC,sBAAsB,EAAC,+BAAsB;AACrD,OAAO,EAAC,YAAY,EAAC,qBAAkB;AACvC,OAAO,EAAC,aAAa,EAAC,gCAA6B;AAGnD,OAAO,EAAC,WAAW,EAAC,yBAAsB;AAC1C,OAAO,EAAC,sBAAsB,EAAC,oCAAiC;AAGhE,iCAAkC;AAElC,MAAM,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC;AAe/B,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAyB,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EACF,MAAM,EACN,SAAS,EACT,eAAe,EACf,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,EAAE,EACF,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,aAAa,GAAG,IAAI,GACvB,GAAG,KAAK,CAAC;IACV,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;QACnB,YAAY,CAAC,OAAO,CAAC;YACjB,SAAS,EAAE,gBAAgB;YAC3B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;YAClB,SAAS,EAAE,gBAAgB;YAC3B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IACH,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,cAAc,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,aACjE,cAAc,CAAC,CAAC,CAAC,CACd,KAAC,WAAW,IACR,MAAM,EAAE,MAAM,EACd,UAAU,EAAC,SAAS,EACpB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAClC,mBAAmB,EAAE,mBAAmB,EACxC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,gBAAgB,CAAC,CAAC,YAE1C,QAAQ,GACC,CACjB,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,sBAAsB,IAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YAChF,KAAC,sBAAsB,IAAC,OAAO,EAAE,MAAM,CAAC,aAAa,GAAI,GACpC,IACvB,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AACH,iBAAiB,CAAC,WAAW,GAAG,0BAA0B,CAAC","sourcesContent":["import {memo} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\n\nimport {type ClassNameProps, cn} from '../classname';\nimport {ReactRendererComponent} from '../extensions';\nimport {globalLogger} from '../logger';\nimport {useRenderTime} from '../react-utils/hooks';\n\nimport type {EditorInt} from './Editor';\nimport {ToolbarView} from './ToolbarView';\nimport {WysiwygEditorComponent} from './WysiwygEditorComponent';\nimport type {WToolbarData, WToolbarItemData} from './toolbar/types';\n\nimport './WysiwygEditorView.scss';\n\nconst b = cn('wysiwyg-editor');\n\nexport type WysiwygEditorViewProps = ClassNameProps &\n    QAProps & {\n        editor: EditorInt;\n        autofocus?: boolean;\n        settingsVisible?: boolean;\n        toolbarConfig: WToolbarData;\n        toolbarVisible?: boolean;\n        stickyToolbar?: boolean;\n        toolbarClassName?: string;\n        hiddenActionsConfig?: WToolbarItemData[];\n        children?: React.ReactNode;\n    };\n\nexport const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {\n    const {\n        editor,\n        autofocus,\n        settingsVisible,\n        toolbarVisible,\n        toolbarConfig,\n        hiddenActionsConfig,\n        qa,\n        className,\n        toolbarClassName,\n        children,\n        stickyToolbar = true,\n    } = props;\n    useRenderTime((time) => {\n        globalLogger.metrics({\n            component: 'wysiwyg-editor',\n            event: 'render',\n            duration: time,\n        });\n        editor.logger.metrics({\n            component: 'wysiwyg-editor',\n            event: 'render',\n            duration: time,\n        });\n    });\n    return (\n        <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>\n            {toolbarVisible ? (\n                <ToolbarView\n                    editor={editor}\n                    editorMode=\"wysiwyg\"\n                    toolbarEditor={editor}\n                    stickyToolbar={stickyToolbar}\n                    toolbarConfig={toolbarConfig}\n                    toolbarFocus={() => editor.focus()}\n                    hiddenActionsConfig={hiddenActionsConfig}\n                    settingsVisible={settingsVisible}\n                    className={b('toolbar', [toolbarClassName])}\n                >\n                    {children}\n                </ToolbarView>\n            ) : null}\n            <WysiwygEditorComponent autofocus={autofocus} editor={editor} className={b('editor')}>\n                <ReactRendererComponent storage={editor.renderStorage} />\n            </WysiwygEditorComponent>\n        </div>\n    );\n});\nWysiwygEditorView.displayName = 'MarkdownWysiwgEditorView';\n"]}
+{"version":3,"file":"WysiwygEditorView.js","sourceRoot":"../../../src","sources":["bundle/WysiwygEditorView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAsB,EAAE,EAAC,wBAAqB;AACrD,OAAO,EAAC,sBAAsB,EAAC,+BAAsB;AACrD,OAAO,EAAC,YAAY,EAAC,qBAAkB;AACvC,OAAO,EAAC,aAAa,EAAC,gCAA6B;AAGnD,OAAO,EAAC,WAAW,EAAC,yBAAsB;AAC1C,OAAO,EAAC,sBAAsB,EAAC,oCAAiC;AAGhE,iCAAkC;AAElC,MAAM,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC;AAe/B,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAyB,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EACF,MAAM,EACN,SAAS,EACT,eAAe,EACf,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,EAAE,EACF,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,aAAa,GAAG,IAAI,GACvB,GAAG,KAAK,CAAC;IACV,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;QACnB,YAAY,CAAC,OAAO,CAAC;YACjB,SAAS,EAAE,gBAAgB;YAC3B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;YAClB,SAAS,EAAE,gBAAgB;YAC3B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IACH,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,cAAc,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,aACjE,cAAc,CAAC,CAAC,CAAC,CACd,KAAC,WAAW,IACR,EAAE,EAAC,cAAc,EACjB,MAAM,EAAE,MAAM,EACd,UAAU,EAAC,SAAS,EACpB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAClC,mBAAmB,EAAE,mBAAmB,EACxC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,gBAAgB,CAAC,CAAC,YAE1C,QAAQ,GACC,CACjB,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,sBAAsB,IAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YAChF,KAAC,sBAAsB,IAAC,OAAO,EAAE,MAAM,CAAC,aAAa,GAAI,GACpC,IACvB,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AACH,iBAAiB,CAAC,WAAW,GAAG,0BAA0B,CAAC","sourcesContent":["import {memo} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\n\nimport {type ClassNameProps, cn} from '../classname';\nimport {ReactRendererComponent} from '../extensions';\nimport {globalLogger} from '../logger';\nimport {useRenderTime} from '../react-utils/hooks';\n\nimport type {EditorInt} from './Editor';\nimport {ToolbarView} from './ToolbarView';\nimport {WysiwygEditorComponent} from './WysiwygEditorComponent';\nimport type {WToolbarData, WToolbarItemData} from './toolbar/types';\n\nimport './WysiwygEditorView.scss';\n\nconst b = cn('wysiwyg-editor');\n\nexport type WysiwygEditorViewProps = ClassNameProps &\n    QAProps & {\n        editor: EditorInt;\n        autofocus?: boolean;\n        settingsVisible?: boolean;\n        toolbarConfig: WToolbarData;\n        toolbarVisible?: boolean;\n        stickyToolbar?: boolean;\n        toolbarClassName?: string;\n        hiddenActionsConfig?: WToolbarItemData[];\n        children?: React.ReactNode;\n    };\n\nexport const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {\n    const {\n        editor,\n        autofocus,\n        settingsVisible,\n        toolbarVisible,\n        toolbarConfig,\n        hiddenActionsConfig,\n        qa,\n        className,\n        toolbarClassName,\n        children,\n        stickyToolbar = true,\n    } = props;\n    useRenderTime((time) => {\n        globalLogger.metrics({\n            component: 'wysiwyg-editor',\n            event: 'render',\n            duration: time,\n        });\n        editor.logger.metrics({\n            component: 'wysiwyg-editor',\n            event: 'render',\n            duration: time,\n        });\n    });\n    return (\n        <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>\n            {toolbarVisible ? (\n                <ToolbarView\n                    qa=\"g-md-toolbar\"\n                    editor={editor}\n                    editorMode=\"wysiwyg\"\n                    toolbarEditor={editor}\n                    stickyToolbar={stickyToolbar}\n                    toolbarConfig={toolbarConfig}\n                    toolbarFocus={() => editor.focus()}\n                    hiddenActionsConfig={hiddenActionsConfig}\n                    settingsVisible={settingsVisible}\n                    className={b('toolbar', [toolbarClassName])}\n                >\n                    {children}\n                </ToolbarView>\n            ) : null}\n            <WysiwygEditorComponent autofocus={autofocus} editor={editor} className={b('editor')}>\n                <ReactRendererComponent storage={editor.renderStorage} />\n            </WysiwygEditorComponent>\n        </div>\n    );\n});\nWysiwygEditorView.displayName = 'MarkdownWysiwgEditorView';\n"]}

package/build/esm/bundle/settings/index.d.ts

@@ -1,3 +1,4 @@
+import { type QAProps } from '@gravity-ui/uikit';
 import { type ClassNameProps } from "../../classname.js";
 import type { MarkdownEditorMode, MarkdownEditorSplitMode } from "../types.js";
 import "./index.css";
@@ -6,7 +7,7 @@ export type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {
     settingsVisible?: boolean;
 };
 export declare const EditorSettings: import("react").NamedExoticComponent<EditorSettingsProps>;
-type SettingsContentProps = ClassNameProps & {
+type SettingsContentProps = ClassNameProps & QAProps & {
     mode: MarkdownEditorMode;
     onClose: () => void;
     onModeChange: (mode: MarkdownEditorMode) => void;

package/build/esm/bundle/settings/index.js

@@ -20,11 +20,11 @@ export const EditorSettings = memo(function EditorSettings(props) {
     const { className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible } = props;
     const [chevronElement, setChevronElement] = useState(null);
     const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);
-    return (_jsxs("div", { className: bSettings(null, [className]), children: [renderPreviewButton && (_jsxs(_Fragment, { children: [_jsx(ActionTooltip, { openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: i18n('preview_hint'), hotkey: "mod+shift+p", children: _jsx(Button, { qa: "g-md-markup-preview-button", size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange?.(!showPreview), selected: showPreview, children: _jsx(Icon, { data: Eye }) }) }), settingsVisible && _jsx("div", { className: bSettings('separator') })] })), settingsVisible && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, qa: "g-md-settings-button", className: bSettings('dropdown-button'), children: _jsx(Icon, { data: Gear }) }), _jsx(Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, children: _jsx(SettingsContent, { ...props, onClose: hidePopup, className: bSettings('content') }) })] }))] }));
+    return (_jsxs("div", { className: bSettings(null, [className]), children: [renderPreviewButton && (_jsxs(_Fragment, { children: [_jsx(ActionTooltip, { openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: i18n('preview_hint'), hotkey: "mod+shift+p", children: _jsx(Button, { qa: "g-md-markup-preview-button", size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange?.(!showPreview), selected: showPreview, children: _jsx(Icon, { data: Eye }) }) }), settingsVisible && _jsx("div", { className: bSettings('separator') })] })), settingsVisible && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, qa: "g-md-settings-button", className: bSettings('dropdown-button'), children: _jsx(Icon, { data: Gear }) }), _jsx(Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, children: _jsx(SettingsContent, { ...props, qa: "g-md-settings-content", onClose: hidePopup, className: bSettings('content') }) })] }))] }));
 });
 const mdHelpPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];
-const SettingsContent = function SettingsContent({ mode, onClose, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, }) {
-    return (_jsxs("div", { className: bContent(null, [className]), "data-qa": "g-md-settings-content", children: [_jsxs(Menu, { size: "l", className: bContent('mode'), children: [_jsx(Menu.Item, { qa: "g-md-settings-mode-wysiwyg", active: mode === 'wysiwyg', onClick: () => {
+const SettingsContent = function SettingsContent({ mode, onClose, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, qa, }) {
+    return (_jsxs("div", { className: bContent(null, [className]), "data-qa": qa, children: [_jsxs(Menu, { size: "l", className: bContent('mode'), children: [_jsx(Menu.Item, { qa: "g-md-settings-mode-wysiwyg", active: mode === 'wysiwyg', onClick: () => {
                             onModeChange('wysiwyg');
                             onClose();
                         }, iconStart: _jsx(Icon, { data: WysiwygModeIcon }), children: i18n('settings_wysiwyg') }), _jsxs(Menu.Item, { qa: "g-md-settings-mode-markup", active: mode === 'markup', onClick: () => {