@gravity-ui/markdown-editor 15.8.0 → 15.8.1

package/build/cjs/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/cjs/bundle/MarkupEditorComponent.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkupEditorComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const MarkupEditorComponent = function MarkupEditorComponent({ editor, autofocus, className, children }) {
+const MarkupEditorComponent = function MarkupEditorComponent({ editor, autofocus, className, children, qa }) {
     const ref = (0, react_1.useRef)(null);
     // insert editor to dom
     (0, react_1.useLayoutEffect)(() => {
@@ -24,7 +24,7 @@ const MarkupEditorComponent = function MarkupEditorComponent({ editor, autofocus
     }, [editor.markupEditor]);
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    (0, jsx_runtime_1.jsx)("div", { ref: ref, className: className, onClick: (event) => {
+    (0, jsx_runtime_1.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/cjs/bundle/MarkupEditorComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkupEditorComponent.js","sourceRoot":"../../../src","sources":["bundle/MarkupEditorComponent.tsx"],"names":[],"mappings":";;;;AAAA,iCAAyD;AAWlD,MAAM,qBAAqB,GAC9B,SAAS,qBAAqB,CAAC,EAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAC;IACnE,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEzC,uBAAuB;IACvB,IAAA,uBAAe,EAAC,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,IAAA,iBAAS,EAAC,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,gCACI,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;AAvCO,QAAA,qBAAqB,yBAuC5B","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,iCAAyD;AAalD,MAAM,qBAAqB,GAC9B,SAAS,qBAAqB,CAAC,EAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAC;IACvE,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEzC,uBAAuB;IACvB,IAAA,uBAAe,EAAC,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,IAAA,iBAAS,EAAC,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,2CACa,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;AAxCO,QAAA,qBAAqB,yBAwC5B","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/cjs/bundle/MarkupEditorView.js

@@ -29,7 +29,7 @@ exports.MarkupEditorView = (0, react_1.memo)((props) => {
     return ((0, jsx_runtime_1.jsxs)("div", { className: b({ toolbar: toolbarVisible }, [className]), "data-qa": qa, children: [toolbarVisible ? ((0, jsx_runtime_1.jsx)(context_1.MarkupToolbarContextProvider, { value: {
                     uploadHandler: editor.fileUploadHandler,
                     needToSetDimensionsForUploadedImages: editor.needToSetDimensionsForUploadedImages,
-                }, children: (0, jsx_runtime_1.jsx)(ToolbarView_1.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, (0, jsx_runtime_1.jsx)(MarkupEditorComponent_1.MarkupEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor', { 'toolbar-visible': toolbarVisible }), children: (0, jsx_runtime_1.jsx)(extensions_1.ReactRendererComponent, { storage: editor.renderStorage }) })] }));
+                }, children: (0, jsx_runtime_1.jsx)(ToolbarView_1.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, (0, jsx_runtime_1.jsx)(MarkupEditorComponent_1.MarkupEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor', { 'toolbar-visible': toolbarVisible }), children: (0, jsx_runtime_1.jsx)(extensions_1.ReactRendererComponent, { storage: editor.renderStorage }) })] }));
 });
 exports.MarkupEditorView.displayName = 'MarkdownMarkupEditorView';
 //# sourceMappingURL=MarkupEditorView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MarkupEditorView.js","sourceRoot":"../../../src","sources":["bundle/MarkupEditorView.tsx"],"names":[],"mappings":";;;;AAAA,iCAA2B;AAI3B,+CAAqD;AACrD,uDAAqD;AACrD,yCAAuC;AACvC,mDAAmD;AAGnD,sEAA8D;AAC9D,kDAA0C;AAC1C,yDAAsE;AAItE,kCAAiC;AAEjC,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,eAAe,CAAC,CAAC;AAiBjB,QAAA,gBAAgB,GAAG,IAAA,YAAI,EAAwB,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,IAAA,qBAAa,EAAC,CAAC,IAAI,EAAE,EAAE;QACnB,qBAAY,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,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,cAAc,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,aACjE,cAAc,CAAC,CAAC,CAAC,CACd,uBAAC,sCAA4B,IACzB,KAAK,EAAE;oBACH,aAAa,EAAE,MAAM,CAAC,iBAAiB;oBACvC,oCAAoC,EAChC,MAAM,CAAC,oCAAoC;iBAClD,YAED,uBAAC,yBAAW,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,uBAAC,6CAAqB,IAClB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,cAAc,EAAC,CAAC,YAE3D,uBAAC,mCAAsB,IAAC,OAAO,EAAE,MAAM,CAAC,aAAa,GAAI,GACrC,IACtB,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AACH,wBAAgB,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,iCAA2B;AAI3B,+CAAqD;AACrD,uDAAqD;AACrD,yCAAuC;AACvC,mDAAmD;AAGnD,sEAA8D;AAC9D,kDAA0C;AAC1C,yDAAsE;AAItE,kCAAiC;AAEjC,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,eAAe,CAAC,CAAC;AAiBjB,QAAA,gBAAgB,GAAG,IAAA,YAAI,EAAwB,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,IAAA,qBAAa,EAAC,CAAC,IAAI,EAAE,EAAE;QACnB,qBAAY,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,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,cAAc,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,aACjE,cAAc,CAAC,CAAC,CAAC,CACd,uBAAC,sCAA4B,IACzB,KAAK,EAAE;oBACH,aAAa,EAAE,MAAM,CAAC,iBAAiB;oBACvC,oCAAoC,EAChC,MAAM,CAAC,oCAAoC;iBAClD,YAED,uBAAC,yBAAW,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,uBAAC,6CAAqB,IAClB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,cAAc,EAAC,CAAC,YAE3D,uBAAC,mCAAsB,IAAC,OAAO,EAAE,MAAM,CAAC,aAAa,GAAI,GACrC,IACtB,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AACH,wBAAgB,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/cjs/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/cjs/bundle/ToolbarView.js

@@ -8,7 +8,7 @@ const menubar_1 = require("../i18n/menubar/index.js");
 const useSticky_1 = require("../react-utils/useSticky.js");
 const toolbar_1 = require("../toolbar/index.js");
 const sticky_1 = require("./sticky/index.js");
-function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, }) {
+function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, qa, }) {
     const rerender = (0, react_use_1.useUpdate)();
     (0, react_1.useLayoutEffect)(() => {
         editor.on('rerender-toolbar', rerender);
@@ -18,7 +18,7 @@ function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarC
     }, [editor, rerender]);
     const wrapperRef = (0, react_1.useRef)(null);
     const isStickyActive = (0, useSticky_1.useSticky)(wrapperRef) && stickyToolbar;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: sticky_1.stickyCn.toolbar({
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-qa": qa, ref: wrapperRef, className: sticky_1.stickyCn.toolbar({
             withSettings: settingsVisible,
             stickyActive: isStickyActive,
             isSticky: stickyToolbar,

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarView.js","sourceRoot":"../../../src","sources":["bundle/ToolbarView.tsx"],"names":[],"mappings":";;AAyBA,kCA8CC;;AAvED,iCAA8C;AAE9C,yCAAoC;AAGpC,sDAAqC;AACrC,2DAAmD;AACnD,iDAA+E;AAG/E,8CAAkC;AAelC,SAAgB,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,IAAA,qBAAS,GAAE,CAAC;IAC7B,IAAA,uBAAe,EAAC,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,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,IAAA,qBAAS,EAAC,UAAU,CAAC,IAAI,aAAa,CAAC;IAE9D,OAAO,CACH,iCACI,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,iBAAQ,CAAC,OAAO,CACvB;YACI,YAAY,EAAE,eAAe;YAC7B,YAAY,EAAE,cAAc;YAC5B,QAAQ,EAAE,aAAa;SAC1B,EACD,CAAC,SAAS,CAAC,CACd,aAED,uBAAC,qBAAW,IACR,IAAI,EAAE,aAAa,EACnB,aAAa,EAAE,mBAAmB,EAClC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,IAAA,cAAI,EAAC,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":";;AA2BA,kCAgDC;;AA3ED,iCAA8C;AAG9C,yCAAoC;AAGpC,sDAAqC;AACrC,2DAAmD;AACnD,iDAA+E;AAG/E,8CAAkC;AAgBlC,SAAgB,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,IAAA,qBAAS,GAAE,CAAC;IAC7B,IAAA,uBAAe,EAAC,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,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,IAAA,qBAAS,EAAC,UAAU,CAAC,IAAI,aAAa,CAAC;IAE9D,OAAO,CACH,4CACa,EAAE,EACX,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,iBAAQ,CAAC,OAAO,CACvB;YACI,YAAY,EAAE,eAAe;YAC7B,YAAY,EAAE,cAAc;YAC5B,QAAQ,EAAE,aAAa;SAC1B,EACD,CAAC,SAAS,CAAC,CACd,aAED,uBAAC,qBAAW,IACR,IAAI,EAAE,aAAa,EACnB,aAAa,EAAE,mBAAmB,EAClC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,IAAA,cAAI,EAAC,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/cjs/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/cjs/bundle/WysiwygEditorComponent.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WysiwygEditorComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const WysiwygEditorComponent = function WysiwygEditorComponent({ className, autofocus, editor, children }) {
+const WysiwygEditorComponent = function WysiwygEditorComponent({ className, autofocus, editor, children, qa }) {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const { current } = ref;
@@ -14,7 +14,7 @@ const WysiwygEditorComponent = function WysiwygEditorComponent({ className, auto
             }
         }
     }, [editor]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: className, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { "data-qa": qa, ref: ref, className: className, children: children }));
 };
 exports.WysiwygEditorComponent = WysiwygEditorComponent;
 //# sourceMappingURL=WysiwygEditorComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WysiwygEditorComponent.js","sourceRoot":"../../../src","sources":["bundle/WysiwygEditorComponent.tsx"],"names":[],"mappings":";;;;AAAA,iCAAwC;AAWjC,MAAM,sBAAsB,GAC/B,SAAS,sBAAsB,CAAC,EAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC;IACpE,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,IAAA,iBAAS,EAAC,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,gCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,YAC9B,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC;AAlBO,QAAA,sBAAsB,0BAkB7B","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,iCAAwC;AAajC,MAAM,sBAAsB,GAC/B,SAAS,sBAAsB,CAAC,EAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAC;IACxE,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,IAAA,iBAAS,EAAC,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,2CAAc,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,YAC3C,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC;AAlBO,QAAA,sBAAsB,0BAkB7B","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/cjs/bundle/WysiwygEditorView.js

@@ -25,7 +25,7 @@ exports.WysiwygEditorView = (0, react_1.memo)((props) => {
             duration: time,
         });
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ toolbar: toolbarVisible }, [className]), "data-qa": qa, children: [toolbarVisible ? ((0, jsx_runtime_1.jsx)(ToolbarView_1.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, (0, jsx_runtime_1.jsx)(WysiwygEditorComponent_1.WysiwygEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor'), children: (0, jsx_runtime_1.jsx)(extensions_1.ReactRendererComponent, { storage: editor.renderStorage }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ toolbar: toolbarVisible }, [className]), "data-qa": qa, children: [toolbarVisible ? ((0, jsx_runtime_1.jsx)(ToolbarView_1.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, (0, jsx_runtime_1.jsx)(WysiwygEditorComponent_1.WysiwygEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor'), children: (0, jsx_runtime_1.jsx)(extensions_1.ReactRendererComponent, { storage: editor.renderStorage }) })] }));
 });
 exports.WysiwygEditorView.displayName = 'MarkdownWysiwgEditorView';
 //# sourceMappingURL=WysiwygEditorView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"WysiwygEditorView.js","sourceRoot":"../../../src","sources":["bundle/WysiwygEditorView.tsx"],"names":[],"mappings":";;;;AAAA,iCAA2B;AAI3B,+CAAqD;AACrD,uDAAqD;AACrD,yCAAuC;AACvC,mDAAmD;AAGnD,kDAA0C;AAC1C,wEAAgE;AAGhE,mCAAkC;AAElC,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,gBAAgB,CAAC,CAAC;AAelB,QAAA,iBAAiB,GAAG,IAAA,YAAI,EAAyB,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,IAAA,qBAAa,EAAC,CAAC,IAAI,EAAE,EAAE;QACnB,qBAAY,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,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,cAAc,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,aACjE,cAAc,CAAC,CAAC,CAAC,CACd,uBAAC,yBAAW,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,uBAAC,+CAAsB,IAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YAChF,uBAAC,mCAAsB,IAAC,OAAO,EAAE,MAAM,CAAC,aAAa,GAAI,GACpC,IACvB,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AACH,yBAAiB,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,iCAA2B;AAI3B,+CAAqD;AACrD,uDAAqD;AACrD,yCAAuC;AACvC,mDAAmD;AAGnD,kDAA0C;AAC1C,wEAAgE;AAGhE,mCAAkC;AAElC,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,gBAAgB,CAAC,CAAC;AAelB,QAAA,iBAAiB,GAAG,IAAA,YAAI,EAAyB,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,IAAA,qBAAa,EAAC,CAAC,IAAI,EAAE,EAAE;QACnB,qBAAY,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,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,cAAc,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,aACjE,cAAc,CAAC,CAAC,CAAC,CACd,uBAAC,yBAAW,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,uBAAC,+CAAsB,IAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,YAChF,uBAAC,mCAAsB,IAAC,OAAO,EAAE,MAAM,CAAC,aAAa,GAAI,GACpC,IACvB,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AACH,yBAAiB,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/cjs/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/cjs/bundle/settings/index.js

@@ -24,11 +24,11 @@ exports.EditorSettings = (0, react_1.memo)(function EditorSettings(props) {
     const { className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible } = props;
     const [chevronElement, setChevronElement] = (0, react_1.useState)(null);
     const [popupShown, , hidePopup, togglePopup] = (0, hooks_1.useBooleanState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: bSettings(null, [className]), children: [renderPreviewButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { openDelay: toolbar_1.ToolbarTooltipDelay.Open, closeDelay: toolbar_1.ToolbarTooltipDelay.Close, title: (0, bundle_1.i18n)('preview_hint'), hotkey: "mod+shift+p", children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { qa: "g-md-markup-preview-button", size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange?.(!showPreview), selected: showPreview, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Eye }) }) }), settingsVisible && (0, jsx_runtime_1.jsx)("div", { className: bSettings('separator') })] })), settingsVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, qa: "g-md-settings-button", className: bSettings('dropdown-button'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Gear }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, children: (0, jsx_runtime_1.jsx)(SettingsContent, { ...props, onClose: hidePopup, className: bSettings('content') }) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: bSettings(null, [className]), children: [renderPreviewButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { openDelay: toolbar_1.ToolbarTooltipDelay.Open, closeDelay: toolbar_1.ToolbarTooltipDelay.Close, title: (0, bundle_1.i18n)('preview_hint'), hotkey: "mod+shift+p", children: (0, jsx_runtime_1.jsx)(uikit_1.Button, { qa: "g-md-markup-preview-button", size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange?.(!showPreview), selected: showPreview, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Eye }) }) }), settingsVisible && (0, jsx_runtime_1.jsx)("div", { className: bSettings('separator') })] })), settingsVisible && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { size: "m", view: "flat", pin: "round-round", onClick: togglePopup, ref: setChevronElement, qa: "g-md-settings-button", className: bSettings('dropdown-button'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Gear }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: popupShown, anchorElement: chevronElement, placement: placement, onOpenChange: hidePopup, children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: bContent(null, [className]), "data-qa": "g-md-settings-content", children: [(0, jsx_runtime_1.jsxs)(uikit_1.Menu, { size: "l", className: bContent('mode'), children: [(0, jsx_runtime_1.jsx)(uikit_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: bContent(null, [className]), "data-qa": qa, children: [(0, jsx_runtime_1.jsxs)(uikit_1.Menu, { size: "l", className: bContent('mode'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { qa: "g-md-settings-mode-wysiwyg", active: mode === 'wysiwyg', onClick: () => {
                             onModeChange('wysiwyg');
                             onClose();
                         }, iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: WysiwygMode_1.default }), children: (0, bundle_1.i18n)('settings_wysiwyg') }), (0, jsx_runtime_1.jsxs)(uikit_1.Menu.Item, { qa: "g-md-settings-mode-markup", active: mode === 'markup', onClick: () => {

package/build/cjs/bundle/settings/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["bundle/settings/index.tsx"],"names":[],"mappings":";;;;;AAAA,4DAA4D;AAC5D,0DAA0D;AAC1D,iCAAqC;AAErC,6CAA0D;AAC1D,6CAS2B;AAE3B,kDAAwD;AACxD,uDAAuC;AACvC,qFAAsD;AACtD,4CAAkC;AAClC,sDAAwD;AACxD,oDAAkD;AAClD,8CAAsC;AAGtC,4DAA8C;AAE9C,uBAAsB;AAEtB,MAAM,SAAS,GAAmB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAE5D,MAAM,SAAS,GAAG,IAAA,cAAE,EAAC,iBAAiB,CAAC,CAAC;AACxC,MAAM,QAAQ,GAAG,IAAA,cAAE,EAAC,kBAAkB,CAAC,CAAC;AAO3B,QAAA,cAAc,GAAG,IAAA,YAAI,EAAsB,SAAS,cAAc,CAAC,KAAK;IACjF,MAAM,EAAC,SAAS,EAAE,mBAAmB,EAAE,WAAW,EAAE,mBAAmB,EAAE,eAAe,EAAC,GACrF,KAAK,CAAC;IACV,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAA2B,IAAI,CAAC,CAAC;IACrF,MAAM,CAAC,UAAU,EAAE,AAAD,EAAG,SAAS,EAAE,WAAW,CAAC,GAAG,IAAA,uBAAe,EAAC,KAAK,CAAC,CAAC;IAEtE,OAAO,CACH,iCAAK,SAAS,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,aACvC,mBAAmB,IAAI,CACpB,6DACI,uBAAC,qBAAa,IACV,SAAS,EAAE,6BAAmB,CAAC,IAAI,EACnC,UAAU,EAAE,6BAAmB,CAAC,KAAK,EACrC,KAAK,EAAE,IAAA,aAAI,EAAC,cAAc,CAAC,EAC3B,MAAM,EAAC,aAAa,YAEpB,uBAAC,cAAM,IACH,EAAE,EAAC,4BAA4B,EAC/B,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,MAAM,EACX,GAAG,EAAC,aAAa,EACjB,SAAS,EAAE,SAAS,CAAC,gBAAgB,CAAC,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,EAAE,CAAC,CAAC,WAAW,CAAC,EAClD,QAAQ,EAAE,WAAW,YAErB,uBAAC,YAAI,IAAC,IAAI,EAAE,WAAG,GAAI,GACd,GACG,EACf,eAAe,IAAI,gCAAK,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,GAAI,IAC/D,CACN,EACA,eAAe,IAAI,CAChB,6DACI,uBAAC,cAAM,IACH,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,MAAM,EACX,GAAG,EAAC,aAAa,EACjB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,iBAAiB,EACtB,EAAE,EAAC,sBAAsB,EACzB,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,YAEvC,uBAAC,YAAI,IAAC,IAAI,EAAE,YAAI,GAAI,GACf,EACT,uBAAC,aAAK,IACF,IAAI,EAAE,UAAU,EAChB,aAAa,EAAE,cAAc,EAC7B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,SAAS,YAEvB,uBAAC,eAAe,OACR,KAAK,EACT,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,GACjC,GACE,IACT,CACN,IACC,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAeH,MAAM,eAAe,GAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AAEjG,MAAM,eAAe,GAAmC,SAAS,eAAe,CAAC,EAC7E,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,iBAAiB,EACjB,yBAAyB,EACzB,iBAAiB,EACjB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,SAAS,EACT,WAAW,GACd;IACG,OAAO,CACH,iCAAK,SAAS,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,aAAU,uBAAuB,aACxE,wBAAC,YAAI,IAAC,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,aACtC,uBAAC,YAAI,CAAC,IAAI,IACN,EAAE,EAAC,4BAA4B,EAC/B,MAAM,EAAE,IAAI,KAAK,SAAS,EAC1B,OAAO,EAAE,GAAG,EAAE;4BACV,YAAY,CAAC,SAAS,CAAC,CAAC;4BACxB,OAAO,EAAE,CAAC;wBACd,CAAC,EACD,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,qBAAe,GAAI,YAEzC,IAAA,aAAI,EAAC,kBAAkB,CAAC,GACjB,EACZ,wBAAC,YAAI,CAAC,IAAI,IACN,EAAE,EAAC,2BAA2B,EAC9B,MAAM,EAAE,IAAI,KAAK,QAAQ,EACzB,OAAO,EAAE,GAAG,EAAE;4BACV,YAAY,CAAC,QAAQ,CAAC,CAAC;4BACvB,OAAO,EAAE,CAAC;wBACd,CAAC,EACD,SAAS,EAAE,uBAAC,YAAI,IAAC,IAAI,EAAE,oBAAY,GAAI,aAEtC,IAAA,aAAI,EAAC,iBAAiB,CAAC,EACxB,uBAAC,gBAAQ,IACL,YAAY,EAAE;oCACV,SAAS,EAAE,eAAe;oCAC1B,KAAK,EAAE,KAAK;iCACf,EACD,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC,YAEhC,gCACI,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wCACX,0BAA0B;wCAC1B,wEAAwE;wCACxE,CAAC,CAAC,eAAe,EAAE,CAAC;oCACxB,CAAC,YAED,uBAAC,6BAAa,KAAG,GACf,GACC,IACH,IACT,EACP,gCAAK,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC,GAAI,EACxC,CAAC,WAAW,IAAI,CACb,iCAAK,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,aAC/B,uBAAC,gBAAQ,IACL,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,yBAAyB,YAElC,IAAA,aAAI,EAAC,kBAAkB,CAAC,GAClB,EACX,gCAAK,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAG,IAAA,aAAI,EAAC,eAAe,CAAC,GAAO,IACrE,CACT,EACA,SAAS,IAAI,CACV,iCAAK,SAAS,EAAE,QAAQ,CAAC,YAAY,CAAC,aAClC,uBAAC,gBAAQ,IACL,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,IAAI,KAAK,QAAQ,EAC3B,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,iBAAiB,IAAI,aAAI,YAElC,IAAA,aAAI,EAAC,qBAAqB,CAAC,GACrB,EACX,gCAAK,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,YACnC,IAAA,aAAI,EAAC,0BAA0B,CAAC,GAC/B,IACJ,CACT,EACD,iCAAM,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,YAAG,iBAAO,GAAQ,IACpD,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport {memo, useState} from 'react';\n\nimport {Eye, Gear, LogoMarkdown} from '@gravity-ui/icons';\nimport {\n    ActionTooltip,\n    Button,\n    Checkbox,\n    HelpMark,\n    Icon,\n    Menu,\n    Popup,\n    type PopupPlacement,\n} from '@gravity-ui/uikit';\n\nimport {type ClassNameProps, cn} from '../../classname';\nimport {i18n} from '../../i18n/bundle';\nimport WysiwygModeIcon from '../../icons/WysiwygMode';\nimport {noop} from '../../lodash';\nimport {useBooleanState} from '../../react-utils/hooks';\nimport {ToolbarTooltipDelay} from '../../toolbar';\nimport {VERSION} from '../../version';\nimport type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types';\n\nimport {MarkdownHints} from './MarkdownHints';\n\nimport './index.scss';\n\nconst placement: PopupPlacement = ['bottom-end', 'top-end'];\n\nconst bSettings = cn('editor-settings');\nconst bContent = cn('settings-content');\n\nexport type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {\n    renderPreviewButton?: boolean;\n    settingsVisible?: boolean;\n};\n\nexport const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(props) {\n    const {className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible} =\n        props;\n    const [chevronElement, setChevronElement] = useState<HTMLButtonElement | null>(null);\n    const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);\n\n    return (\n        <div className={bSettings(null, [className])}>\n            {renderPreviewButton && (\n                <>\n                    <ActionTooltip\n                        openDelay={ToolbarTooltipDelay.Open}\n                        closeDelay={ToolbarTooltipDelay.Close}\n                        title={i18n('preview_hint')}\n                        hotkey=\"mod+shift+p\"\n                    >\n                        <Button\n                            qa=\"g-md-markup-preview-button\"\n                            size=\"m\"\n                            view=\"flat\"\n                            pin=\"round-round\"\n                            className={bSettings('preview-button')}\n                            onClick={() => onShowPreviewChange?.(!showPreview)}\n                            selected={showPreview}\n                        >\n                            <Icon data={Eye} />\n                        </Button>\n                    </ActionTooltip>\n                    {settingsVisible && <div className={bSettings('separator')} />}\n                </>\n            )}\n            {settingsVisible && (\n                <>\n                    <Button\n                        size=\"m\"\n                        view=\"flat\"\n                        pin=\"round-round\"\n                        onClick={togglePopup}\n                        ref={setChevronElement}\n                        qa=\"g-md-settings-button\"\n                        className={bSettings('dropdown-button')}\n                    >\n                        <Icon data={Gear} />\n                    </Button>\n                    <Popup\n                        open={popupShown}\n                        anchorElement={chevronElement}\n                        placement={placement}\n                        onOpenChange={hidePopup}\n                    >\n                        <SettingsContent\n                            {...props}\n                            onClose={hidePopup}\n                            className={bSettings('content')}\n                        />\n                    </Popup>\n                </>\n            )}\n        </div>\n    );\n});\n\ntype SettingsContentProps = ClassNameProps & {\n    mode: MarkdownEditorMode;\n    onClose: () => void;\n    onModeChange: (mode: MarkdownEditorMode) => void;\n    onShowPreviewChange: (showPreview: boolean) => void;\n    showPreview: boolean;\n    toolbarVisibility: boolean;\n    onToolbarVisibilityChange: (val: boolean) => void;\n    splitMode?: MarkdownEditorSplitMode;\n    splitModeEnabled?: boolean;\n    onSplitModeChange?: (splitModeEnabled: boolean) => void;\n};\n\nconst mdHelpPlacement: PopupPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];\n\nconst SettingsContent: React.FC<SettingsContentProps> = function SettingsContent({\n    mode,\n    onClose,\n    onModeChange,\n    toolbarVisibility,\n    onToolbarVisibilityChange,\n    onSplitModeChange,\n    splitMode = false,\n    splitModeEnabled,\n    className,\n    showPreview,\n}) {\n    return (\n        <div className={bContent(null, [className])} data-qa=\"g-md-settings-content\">\n            <Menu size=\"l\" className={bContent('mode')}>\n                <Menu.Item\n                    qa=\"g-md-settings-mode-wysiwyg\"\n                    active={mode === 'wysiwyg'}\n                    onClick={() => {\n                        onModeChange('wysiwyg');\n                        onClose();\n                    }}\n                    iconStart={<Icon data={WysiwygModeIcon} />}\n                >\n                    {i18n('settings_wysiwyg')}\n                </Menu.Item>\n                <Menu.Item\n                    qa=\"g-md-settings-mode-markup\"\n                    active={mode === 'markup'}\n                    onClick={() => {\n                        onModeChange('markup');\n                        onClose();\n                    }}\n                    iconStart={<Icon data={LogoMarkdown} />}\n                >\n                    {i18n('settings_markup')}\n                    <HelpMark\n                        popoverProps={{\n                            placement: mdHelpPlacement,\n                            modal: false,\n                        }}\n                        className={bContent('mode-help')}\n                    >\n                        <div\n                            onClick={(e) => {\n                                // stop clicks propagation\n                                // because otherwise click in MarkdownHints handled as click on MenuItem\n                                e.stopPropagation();\n                            }}\n                        >\n                            <MarkdownHints />\n                        </div>\n                    </HelpMark>\n                </Menu.Item>\n            </Menu>\n            <div className={bContent('separator')} />\n            {!showPreview && (\n                <div className={bContent('toolbar')}>\n                    <Checkbox\n                        size=\"m\"\n                        checked={toolbarVisibility}\n                        onUpdate={onToolbarVisibilityChange}\n                    >\n                        {i18n('settings_menubar')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>{i18n('settings_hint')}</div>\n                </div>\n            )}\n            {splitMode && (\n                <div className={bContent('split-mode')}>\n                    <Checkbox\n                        size=\"m\"\n                        disabled={mode !== 'markup'}\n                        checked={splitModeEnabled}\n                        onUpdate={onSplitModeChange ?? noop}\n                    >\n                        {i18n('settings_split-mode')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>\n                        {i18n('settings_split-mode-hint')}\n                    </div>\n                </div>\n            )}\n            <span className={bContent('version')}>{VERSION}</span>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["bundle/settings/index.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport {memo, useState} from 'react';\n\nimport {Eye, Gear, LogoMarkdown} from '@gravity-ui/icons';\nimport {\n    ActionTooltip,\n    Button,\n    Checkbox,\n    HelpMark,\n    Icon,\n    Menu,\n    Popup,\n    type PopupPlacement,\n    type QAProps,\n} from '@gravity-ui/uikit';\n\nimport {type ClassNameProps, cn} from '../../classname';\nimport {i18n} from '../../i18n/bundle';\nimport WysiwygModeIcon from '../../icons/WysiwygMode';\nimport {noop} from '../../lodash';\nimport {useBooleanState} from '../../react-utils/hooks';\nimport {ToolbarTooltipDelay} from '../../toolbar';\nimport {VERSION} from '../../version';\nimport type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types';\n\nimport {MarkdownHints} from './MarkdownHints';\n\nimport './index.scss';\n\nconst placement: PopupPlacement = ['bottom-end', 'top-end'];\n\nconst bSettings = cn('editor-settings');\nconst bContent = cn('settings-content');\n\nexport type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {\n    renderPreviewButton?: boolean;\n    settingsVisible?: boolean;\n};\n\nexport const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(props) {\n    const {className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible} =\n        props;\n    const [chevronElement, setChevronElement] = useState<HTMLButtonElement | null>(null);\n    const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);\n\n    return (\n        <div className={bSettings(null, [className])}>\n            {renderPreviewButton && (\n                <>\n                    <ActionTooltip\n                        openDelay={ToolbarTooltipDelay.Open}\n                        closeDelay={ToolbarTooltipDelay.Close}\n                        title={i18n('preview_hint')}\n                        hotkey=\"mod+shift+p\"\n                    >\n                        <Button\n                            qa=\"g-md-markup-preview-button\"\n                            size=\"m\"\n                            view=\"flat\"\n                            pin=\"round-round\"\n                            className={bSettings('preview-button')}\n                            onClick={() => onShowPreviewChange?.(!showPreview)}\n                            selected={showPreview}\n                        >\n                            <Icon data={Eye} />\n                        </Button>\n                    </ActionTooltip>\n                    {settingsVisible && <div className={bSettings('separator')} />}\n                </>\n            )}\n            {settingsVisible && (\n                <>\n                    <Button\n                        size=\"m\"\n                        view=\"flat\"\n                        pin=\"round-round\"\n                        onClick={togglePopup}\n                        ref={setChevronElement}\n                        qa=\"g-md-settings-button\"\n                        className={bSettings('dropdown-button')}\n                    >\n                        <Icon data={Gear} />\n                    </Button>\n                    <Popup\n                        open={popupShown}\n                        anchorElement={chevronElement}\n                        placement={placement}\n                        onOpenChange={hidePopup}\n                    >\n                        <SettingsContent\n                            {...props}\n                            qa=\"g-md-settings-content\"\n                            onClose={hidePopup}\n                            className={bSettings('content')}\n                        />\n                    </Popup>\n                </>\n            )}\n        </div>\n    );\n});\n\ntype SettingsContentProps = ClassNameProps &\n    QAProps & {\n        mode: MarkdownEditorMode;\n        onClose: () => void;\n        onModeChange: (mode: MarkdownEditorMode) => void;\n        onShowPreviewChange: (showPreview: boolean) => void;\n        showPreview: boolean;\n        toolbarVisibility: boolean;\n        onToolbarVisibilityChange: (val: boolean) => void;\n        splitMode?: MarkdownEditorSplitMode;\n        splitModeEnabled?: boolean;\n        onSplitModeChange?: (splitModeEnabled: boolean) => void;\n    };\n\nconst mdHelpPlacement: PopupPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];\n\nconst SettingsContent: React.FC<SettingsContentProps> = function SettingsContent({\n    mode,\n    onClose,\n    onModeChange,\n    toolbarVisibility,\n    onToolbarVisibilityChange,\n    onSplitModeChange,\n    splitMode = false,\n    splitModeEnabled,\n    className,\n    showPreview,\n    qa,\n}) {\n    return (\n        <div className={bContent(null, [className])} data-qa={qa}>\n            <Menu size=\"l\" className={bContent('mode')}>\n                <Menu.Item\n                    qa=\"g-md-settings-mode-wysiwyg\"\n                    active={mode === 'wysiwyg'}\n                    onClick={() => {\n                        onModeChange('wysiwyg');\n                        onClose();\n                    }}\n                    iconStart={<Icon data={WysiwygModeIcon} />}\n                >\n                    {i18n('settings_wysiwyg')}\n                </Menu.Item>\n                <Menu.Item\n                    qa=\"g-md-settings-mode-markup\"\n                    active={mode === 'markup'}\n                    onClick={() => {\n                        onModeChange('markup');\n                        onClose();\n                    }}\n                    iconStart={<Icon data={LogoMarkdown} />}\n                >\n                    {i18n('settings_markup')}\n                    <HelpMark\n                        popoverProps={{\n                            placement: mdHelpPlacement,\n                            modal: false,\n                        }}\n                        className={bContent('mode-help')}\n                    >\n                        <div\n                            onClick={(e) => {\n                                // stop clicks propagation\n                                // because otherwise click in MarkdownHints handled as click on MenuItem\n                                e.stopPropagation();\n                            }}\n                        >\n                            <MarkdownHints />\n                        </div>\n                    </HelpMark>\n                </Menu.Item>\n            </Menu>\n            <div className={bContent('separator')} />\n            {!showPreview && (\n                <div className={bContent('toolbar')}>\n                    <Checkbox\n                        size=\"m\"\n                        checked={toolbarVisibility}\n                        onUpdate={onToolbarVisibilityChange}\n                    >\n                        {i18n('settings_menubar')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>{i18n('settings_hint')}</div>\n                </div>\n            )}\n            {splitMode && (\n                <div className={bContent('split-mode')}>\n                    <Checkbox\n                        size=\"m\"\n                        disabled={mode !== 'markup'}\n                        checked={splitModeEnabled}\n                        onUpdate={onSplitModeChange ?? noop}\n                    >\n                        {i18n('settings_split-mode')}\n                    </Checkbox>\n                    <div className={bContent('toolbar-hint')}>\n                        {i18n('settings_split-mode-hint')}\n                    </div>\n                </div>\n            )}\n            <span className={bContent('version')}>{VERSION}</span>\n        </div>\n    );\n};\n"]}

package/build/cjs/extensions/behavior/CommandMenu/component.js

@@ -23,7 +23,7 @@ function calcListHeight(itemsCount) {
 const CommandMenuComponent = ({ anchorElement, currentIndex, items, onItemClick, onOpenChange, }) => {
     if (!anchorElement)
         return null;
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: true, anchorElement: anchorElement, placement: placement, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(uikit_1.List, { virtualized: true, items: items, sortable: false, filterable: false, emptyPlaceholder: (0, suggest_1.i18n)('empty-msg'), itemHeight: ITEM_HEIGHT, itemsHeight: calcListHeight(items.length), renderItem: renderItem, deactivateOnLeave: false, activeItemIndex: currentIndex, onItemClick: (_item, index) => onItemClick(index), className: b('list'), itemClassName: b('list-item') }) }) }));
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: true, anchorElement: anchorElement, placement: placement, onOpenChange: onOpenChange, qa: "g-md-command-menu", children: (0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(uikit_1.List, { virtualized: true, items: items, sortable: false, filterable: false, emptyPlaceholder: (0, suggest_1.i18n)('empty-msg'), itemHeight: ITEM_HEIGHT, itemsHeight: calcListHeight(items.length), renderItem: renderItem, deactivateOnLeave: false, activeItemIndex: currentIndex, onItemClick: (_item, index) => onItemClick(index), className: b('list'), itemClassName: b('list-item') }) }) }));
 };
 exports.CommandMenuComponent = CommandMenuComponent;
 function renderItem({ id, title, icon, hotkey, hint, preview }) {

package/build/cjs/extensions/behavior/CommandMenu/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"../../../../../src","sources":["extensions/behavior/CommandMenu/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {HelpMark, Hotkey, Icon, List, Popup, type PopupPlacement} from '@gravity-ui/uikit';\n\nimport {cn} from '../../../classname';\nimport {i18n} from '../../../i18n/suggest';\nimport {isFunction} from '../../../lodash';\nimport {ErrorLoggerBoundary} from '../../../react-utils/ErrorBoundary';\nimport {PreviewTooltip} from '../../../toolbar/PreviewTooltip';\nimport type {AutocompletePopupProps} from '../../../utils/autocomplete-popup';\n\nimport type {CommandAction} from './types';\n\nimport './component.scss';\n\nconst b = cn('command-menu');\nconst placement: PopupPlacement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];\n\nconst ITEM_HEIGHT = 28; // px\nconst VISIBLE_ITEMS_COUNT = 10;\nconst MAX_LIST_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS_COUNT; // px\nfunction calcListHeight(itemsCount: number): number | undefined {\n    if (itemsCount <= 0) return undefined;\n    return Math.min(MAX_LIST_HEIGHT, itemsCount * ITEM_HEIGHT);\n}\n\nexport type CommandMenuItem = Pick<\n    CommandAction,\n    'id' | 'title' | 'icon' | 'hotkey' | 'hint' | 'preview'\n>;\n\nexport type CommandMenuComponentProps = AutocompletePopupProps & {\n    currentIndex?: number;\n    items: readonly CommandMenuItem[];\n    onItemClick(itemIndex: number): void;\n};\n\nexport const CommandMenuComponent: React.FC<CommandMenuComponentProps> = ({\n    anchorElement,\n    currentIndex,\n    items,\n    onItemClick,\n    onOpenChange,\n}) => {\n    if (!anchorElement) return null;\n\n    return (\n        <Popup open anchorElement={anchorElement} placement={placement} onOpenChange={onOpenChange}>\n            <div className={b()}>\n                <List<CommandMenuItem>\n                    virtualized\n                    items={items as CommandMenuItem[]}\n                    sortable={false}\n                    filterable={false}\n                    emptyPlaceholder={i18n('empty-msg')}\n                    itemHeight={ITEM_HEIGHT}\n                    itemsHeight={calcListHeight(items.length)}\n                    renderItem={renderItem}\n                    deactivateOnLeave={false}\n                    activeItemIndex={currentIndex}\n                    onItemClick={(_item, index) => onItemClick(index)}\n                    className={b('list')}\n                    itemClassName={b('list-item')}\n                />\n            </div>\n        </Popup>\n    );\n};\n\nfunction renderItem({id, title, icon, hotkey, hint, preview}: CommandMenuItem): React.ReactNode {\n    const titleText = isFunction(title) ? title() : title;\n    const hintText = isFunction(hint) ? hint() : hint;\n\n    return (\n        <PreviewTooltip preview={preview}>\n            <div key={id} className={b('item', {id})}>\n                <Icon data={icon.data} size={20} className={b('item-icon')} />\n                <div className={b('item-body')}>\n                    <span className={b('item-title')}>{titleText}</span>\n                    <div className={b('item-extra')}>\n                        {hotkey && <Hotkey value={hotkey} className={b('item-hotkey')} />}\n                        {hintText && <HelpMark className={b('item-hint')}>{hintText}</HelpMark>}\n                    </div>\n                </div>\n            </div>\n        </PreviewTooltip>\n    );\n}\n\nexport function render(props: CommandMenuComponentProps): React.ReactNode {\n    return (\n        <ErrorLoggerBoundary>\n            <CommandMenuComponent {...props} />\n        </ErrorLoggerBoundary>\n    );\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"../../../../../src","sources":["extensions/behavior/CommandMenu/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {HelpMark, Hotkey, Icon, List, Popup, type PopupPlacement} from '@gravity-ui/uikit';\n\nimport {cn} from '../../../classname';\nimport {i18n} from '../../../i18n/suggest';\nimport {isFunction} from '../../../lodash';\nimport {ErrorLoggerBoundary} from '../../../react-utils/ErrorBoundary';\nimport {PreviewTooltip} from '../../../toolbar/PreviewTooltip';\nimport type {AutocompletePopupProps} from '../../../utils/autocomplete-popup';\n\nimport type {CommandAction} from './types';\n\nimport './component.scss';\n\nconst b = cn('command-menu');\nconst placement: PopupPlacement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];\n\nconst ITEM_HEIGHT = 28; // px\nconst VISIBLE_ITEMS_COUNT = 10;\nconst MAX_LIST_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS_COUNT; // px\nfunction calcListHeight(itemsCount: number): number | undefined {\n    if (itemsCount <= 0) return undefined;\n    return Math.min(MAX_LIST_HEIGHT, itemsCount * ITEM_HEIGHT);\n}\n\nexport type CommandMenuItem = Pick<\n    CommandAction,\n    'id' | 'title' | 'icon' | 'hotkey' | 'hint' | 'preview'\n>;\n\nexport type CommandMenuComponentProps = AutocompletePopupProps & {\n    currentIndex?: number;\n    items: readonly CommandMenuItem[];\n    onItemClick(itemIndex: number): void;\n};\n\nexport const CommandMenuComponent: React.FC<CommandMenuComponentProps> = ({\n    anchorElement,\n    currentIndex,\n    items,\n    onItemClick,\n    onOpenChange,\n}) => {\n    if (!anchorElement) return null;\n\n    return (\n        <Popup\n            open\n            anchorElement={anchorElement}\n            placement={placement}\n            onOpenChange={onOpenChange}\n            qa=\"g-md-command-menu\"\n        >\n            <div className={b()}>\n                <List<CommandMenuItem>\n                    virtualized\n                    items={items as CommandMenuItem[]}\n                    sortable={false}\n                    filterable={false}\n                    emptyPlaceholder={i18n('empty-msg')}\n                    itemHeight={ITEM_HEIGHT}\n                    itemsHeight={calcListHeight(items.length)}\n                    renderItem={renderItem}\n                    deactivateOnLeave={false}\n                    activeItemIndex={currentIndex}\n                    onItemClick={(_item, index) => onItemClick(index)}\n                    className={b('list')}\n                    itemClassName={b('list-item')}\n                />\n            </div>\n        </Popup>\n    );\n};\n\nfunction renderItem({id, title, icon, hotkey, hint, preview}: CommandMenuItem): React.ReactNode {\n    const titleText = isFunction(title) ? title() : title;\n    const hintText = isFunction(hint) ? hint() : hint;\n\n    return (\n        <PreviewTooltip preview={preview}>\n            <div key={id} className={b('item', {id})}>\n                <Icon data={icon.data} size={20} className={b('item-icon')} />\n                <div className={b('item-body')}>\n                    <span className={b('item-title')}>{titleText}</span>\n                    <div className={b('item-extra')}>\n                        {hotkey && <Hotkey value={hotkey} className={b('item-hotkey')} />}\n                        {hintText && <HelpMark className={b('item-hint')}>{hintText}</HelpMark>}\n                    </div>\n                </div>\n            </div>\n        </PreviewTooltip>\n    );\n}\n\nexport function render(props: CommandMenuComponentProps): React.ReactNode {\n    return (\n        <ErrorLoggerBoundary>\n            <CommandMenuComponent {...props} />\n        </ErrorLoggerBoundary>\n    );\n}\n"]}

package/build/cjs/extensions/markdown/Link/PlaceholderWidget/widget.js

@@ -12,7 +12,7 @@ const b = (0, classname_1.cn)('link-placeholder-widget');
 const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
 const LinkPlaceholderWidget = ({ onCancel, onSubmit, }) => {
     const [anchor, setAnchor] = (0, react_utils_1.useElementState)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: setAnchor, className: b(), children: (0, jsx_runtime_1.jsx)("a", { href: "#", children: (0, widgets_1.i18n)('link') }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: true, modal: true, onOpenChange: onCancel, anchorElement: anchor, placement: placement, children: (0, jsx_runtime_1.jsx)(LinkForm_1.LinkForm, { autoFocus: true, onSubmit: onSubmit, onCancel: onCancel }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: setAnchor, className: b(), children: (0, jsx_runtime_1.jsx)("a", { href: "#", children: (0, widgets_1.i18n)('link') }) }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { qa: "g-md-link-form", open: true, modal: true, onOpenChange: onCancel, anchorElement: anchor, placement: placement, children: (0, jsx_runtime_1.jsx)(LinkForm_1.LinkForm, { autoFocus: true, onSubmit: onSubmit, onCancel: onCancel }) })] }));
 };
 exports.LinkPlaceholderWidget = LinkPlaceholderWidget;
 //# sourceMappingURL=widget.js.map

package/build/cjs/extensions/markdown/Link/PlaceholderWidget/widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget.js","sourceRoot":"../../../../../../src","sources":["extensions/markdown/Link/PlaceholderWidget/widget.tsx"],"names":[],"mappings":";;;;AAAA,6CAA6D;AAE7D,wDAAyC;AACzC,4DAAwE;AACxE,+DAA8C;AAC9C,kEAAwD;AAExD,wBAAuB;AAEvB,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,yBAAyB,CAAC,CAAC;AACxC,MAAM,SAAS,GAAmB,CAAC,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;AAOlF,MAAM,qBAAqB,GAAyC,CAAC,EACxE,QAAQ,EACR,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,6BAAe,GAAE,CAAC;IAC9C,OAAO,CACH,6DACI,iCAAM,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,YAEhC,8BAAG,IAAI,EAAC,GAAG,YAAE,IAAA,cAAI,EAAC,MAAM,CAAC,GAAK,GAC3B,EACP,uBAAC,aAAK,IAAC,IAAI,QAAC,KAAK,QAAC,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,YACjF,uBAAC,mBAAQ,IAAC,SAAS,QAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC1D,IACT,CACN,CAAC;AACN,CAAC,CAAC;AAhBW,QAAA,qBAAqB,yBAgBhC","sourcesContent":["import {Popup, type PopupPlacement} from '@gravity-ui/uikit';\n\nimport {cn} from '../../../../classname';\nimport {LinkForm, type LinkFormProps} from '../../../../forms/LinkForm';\nimport {i18n} from '../../../../i18n/widgets';\nimport {useElementState} from '../../../../react-utils';\n\nimport './widget.scss';\n\nconst b = cn('link-placeholder-widget');\nconst placement: PopupPlacement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];\n\nexport type LinkPlaceholderWidgetProps = {\n    onCancel: () => void;\n    onSubmit: LinkFormProps['onSubmit'];\n};\n\nexport const LinkPlaceholderWidget: React.FC<LinkPlaceholderWidgetProps> = ({\n    onCancel,\n    onSubmit,\n}) => {\n    const [anchor, setAnchor] = useElementState();\n    return (\n        <>\n            <span ref={setAnchor} className={b()}>\n                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n                <a href=\"#\">{i18n('link')}</a>\n            </span>\n            <Popup open modal onOpenChange={onCancel} anchorElement={anchor} placement={placement}>\n                <LinkForm autoFocus onSubmit={onSubmit} onCancel={onCancel} />\n            </Popup>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"widget.js","sourceRoot":"../../../../../../src","sources":["extensions/markdown/Link/PlaceholderWidget/widget.tsx"],"names":[],"mappings":";;;;AAAA,6CAA6D;AAE7D,wDAAyC;AACzC,4DAAwE;AACxE,+DAA8C;AAC9C,kEAAwD;AAExD,wBAAuB;AAEvB,MAAM,CAAC,GAAG,IAAA,cAAE,EAAC,yBAAyB,CAAC,CAAC;AACxC,MAAM,SAAS,GAAmB,CAAC,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;AAOlF,MAAM,qBAAqB,GAAyC,CAAC,EACxE,QAAQ,EACR,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,6BAAe,GAAE,CAAC;IAC9C,OAAO,CACH,6DACI,iCAAM,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,YAEhC,8BAAG,IAAI,EAAC,GAAG,YAAE,IAAA,cAAI,EAAC,MAAM,CAAC,GAAK,GAC3B,EACP,uBAAC,aAAK,IACF,EAAE,EAAC,gBAAgB,EACnB,IAAI,QACJ,KAAK,QACL,YAAY,EAAE,QAAQ,EACtB,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,SAAS,YAEpB,uBAAC,mBAAQ,IAAC,SAAS,QAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC1D,IACT,CACN,CAAC;AACN,CAAC,CAAC;AAvBW,QAAA,qBAAqB,yBAuBhC","sourcesContent":["import {Popup, type PopupPlacement} from '@gravity-ui/uikit';\n\nimport {cn} from '../../../../classname';\nimport {LinkForm, type LinkFormProps} from '../../../../forms/LinkForm';\nimport {i18n} from '../../../../i18n/widgets';\nimport {useElementState} from '../../../../react-utils';\n\nimport './widget.scss';\n\nconst b = cn('link-placeholder-widget');\nconst placement: PopupPlacement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];\n\nexport type LinkPlaceholderWidgetProps = {\n    onCancel: () => void;\n    onSubmit: LinkFormProps['onSubmit'];\n};\n\nexport const LinkPlaceholderWidget: React.FC<LinkPlaceholderWidgetProps> = ({\n    onCancel,\n    onSubmit,\n}) => {\n    const [anchor, setAnchor] = useElementState();\n    return (\n        <>\n            <span ref={setAnchor} className={b()}>\n                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}\n                <a href=\"#\">{i18n('link')}</a>\n            </span>\n            <Popup\n                qa=\"g-md-link-form\"\n                open\n                modal\n                onOpenChange={onCancel}\n                anchorElement={anchor}\n                placement={placement}\n            >\n                <LinkForm autoFocus onSubmit={onSubmit} onCancel={onCancel} />\n            </Popup>\n        </>\n    );\n};\n"]}

package/build/cjs/modules/toolbars/items.js

@@ -12,6 +12,7 @@ const MToolbarFilePopup_1 = require("../../bundle/toolbar/markup/MToolbarFilePop
 const MToolbarImagePopup_1 = require("../../bundle/toolbar/markup/MToolbarImagePopup.js");
 const WToolbarColors_1 = require("../../bundle/toolbar/wysiwyg/WToolbarColors.js");
 const WToolbarTextSelect_1 = require("../../bundle/toolbar/wysiwyg/WToolbarTextSelect.js");
+const GPT_1 = require("../../extensions/additional/GPT/index.js");
 const constants_1 = require("../../extensions/additional/GPT/constants.js");
 const specs_1 = require("../../extensions/specs.js");
 const hints_1 = require("../../i18n/hints/index.js");
@@ -722,7 +723,7 @@ exports.gptItemWysiwyg = {
     isEnable: (e) => e.actions.addGptWidget.isEnable(),
 };
 exports.gptItemMarkup = {
-    exec: (e) => (0, commands_1.insertMermaidDiagram)(e.cm),
+    exec: (e) => (0, GPT_1.showMarkupGpt)(e.cm),
     isActive: inactive,
     isEnable: enable,
 };