@gravity-ui/markdown-editor 15.8.0 → 15.8.1

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: () => {

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

@@ -1 +1 @@
-{"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} 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/esm/extensions/behavior/CommandMenu/component.js

@@ -19,7 +19,7 @@ function calcListHeight(itemsCount) {
 export const CommandMenuComponent = ({ anchorElement, currentIndex, items, onItemClick, onOpenChange, }) => {
     if (!anchorElement)
         return null;
-    return (_jsx(Popup, { open: true, anchorElement: anchorElement, placement: placement, onOpenChange: onOpenChange, children: _jsx("div", { className: b(), children: _jsx(List, { virtualized: true, items: items, sortable: false, filterable: false, emptyPlaceholder: 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 (_jsx(Popup, { open: true, anchorElement: anchorElement, placement: placement, onOpenChange: onOpenChange, qa: "g-md-command-menu", children: _jsx("div", { className: b(), children: _jsx(List, { virtualized: true, items: items, sortable: false, filterable: false, emptyPlaceholder: 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') }) }) }));
 };
 function renderItem({ id, title, icon, hotkey, hint, preview }) {
     const titleText = isFunction(title) ? title() : title;

package/build/esm/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/esm/extensions/markdown/Link/PlaceholderWidget/widget.js

@@ -9,6 +9,6 @@ const b = cn('link-placeholder-widget');
 const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
 export const LinkPlaceholderWidget = ({ onCancel, onSubmit, }) => {
     const [anchor, setAnchor] = useElementState();
-    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: setAnchor, className: b(), children: _jsx("a", { href: "#", children: i18n('link') }) }), _jsx(Popup, { open: true, modal: true, onOpenChange: onCancel, anchorElement: anchor, placement: placement, children: _jsx(LinkForm, { autoFocus: true, onSubmit: onSubmit, onCancel: onCancel }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: setAnchor, className: b(), children: _jsx("a", { href: "#", children: i18n('link') }) }), _jsx(Popup, { qa: "g-md-link-form", open: true, modal: true, onOpenChange: onCancel, anchorElement: anchor, placement: placement, children: _jsx(LinkForm, { autoFocus: true, onSubmit: onSubmit, onCancel: onCancel }) })] }));
 };
 //# sourceMappingURL=widget.js.map

package/build/esm/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,OAAO,EAAC,KAAK,EAAsB,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAC,EAAE,EAAC,iCAA8B;AACzC,OAAO,EAAC,QAAQ,EAAqB,sCAAmC;AACxE,OAAO,EAAC,IAAI,EAAC,0CAAiC;AAC9C,OAAO,EAAC,eAAe,EAAC,yCAAgC;AAExD,sBAAuB;AAEvB,MAAM,CAAC,GAAG,EAAE,CAAC,yBAAyB,CAAC,CAAC;AACxC,MAAM,SAAS,GAAmB,CAAC,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;AAOzF,MAAM,CAAC,MAAM,qBAAqB,GAAyC,CAAC,EACxE,QAAQ,EACR,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,eAAe,EAAE,CAAC;IAC9C,OAAO,CACH,8BACI,eAAM,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,YAEhC,YAAG,IAAI,EAAC,GAAG,YAAE,IAAI,CAAC,MAAM,CAAC,GAAK,GAC3B,EACP,KAAC,KAAK,IAAC,IAAI,QAAC,KAAK,QAAC,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,YACjF,KAAC,QAAQ,IAAC,SAAS,QAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC1D,IACT,CACN,CAAC;AACN,CAAC,CAAC","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,OAAO,EAAC,KAAK,EAAsB,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAC,EAAE,EAAC,iCAA8B;AACzC,OAAO,EAAC,QAAQ,EAAqB,sCAAmC;AACxE,OAAO,EAAC,IAAI,EAAC,0CAAiC;AAC9C,OAAO,EAAC,eAAe,EAAC,yCAAgC;AAExD,sBAAuB;AAEvB,MAAM,CAAC,GAAG,EAAE,CAAC,yBAAyB,CAAC,CAAC;AACxC,MAAM,SAAS,GAAmB,CAAC,cAAc,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;AAOzF,MAAM,CAAC,MAAM,qBAAqB,GAAyC,CAAC,EACxE,QAAQ,EACR,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,eAAe,EAAE,CAAC;IAC9C,OAAO,CACH,8BACI,eAAM,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,YAEhC,YAAG,IAAI,EAAC,GAAG,YAAE,IAAI,CAAC,MAAM,CAAC,GAAK,GAC3B,EACP,KAAC,KAAK,IACF,EAAE,EAAC,gBAAgB,EACnB,IAAI,QACJ,KAAK,QACL,YAAY,EAAE,QAAQ,EACtB,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,SAAS,YAEpB,KAAC,QAAQ,IAAC,SAAS,QAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC1D,IACT,CACN,CAAC;AACN,CAAC,CAAC","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/esm/modules/toolbars/items.js

@@ -7,6 +7,7 @@ import { MToolbarFilePopup } from "../../bundle/toolbar/markup/MToolbarFilePopup
 import { MToolbarImagePopup } from "../../bundle/toolbar/markup/MToolbarImagePopup.js";
 import { WToolbarColors } from "../../bundle/toolbar/wysiwyg/WToolbarColors.js";
 import { WToolbarTextSelect } from "../../bundle/toolbar/wysiwyg/WToolbarTextSelect.js";
+import { showMarkupGpt } from "../../extensions/additional/GPT/index.js";
 import { gptHotKeys } from "../../extensions/additional/GPT/constants.js";
 import { headingType, pType } from "../../extensions/specs.js";
 import { i18n as i18nHint } from "../../i18n/hints/index.js";
@@ -717,7 +718,7 @@ export const gptItemWysiwyg = {
     isEnable: (e) => e.actions.addGptWidget.isEnable(),
 };
 export const gptItemMarkup = {
-    exec: (e) => insertMermaidDiagram(e.cm),
+    exec: (e) => showMarkupGpt(e.cm),
     isActive: inactive,
     isEnable: enable,
 };