@gravity-ui/markdown-editor 15.8.0 → 15.9.0

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":"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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/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/behavior/SelectionContext/index.d.ts

@@ -3,5 +3,17 @@ import { type ContextConfig } from "./tooltip.js";
 export type { ContextConfig as SelectionContextConfig, ContextGroupItemData as SelectionContextItemData, } from "./tooltip.js";
 export type SelectionContextOptions = {
     config?: ContextConfig;
+    /**
+     * Placement of context popup
+     *
+     * @default 'bottom'
+     */
+    placement?: 'top' | 'bottom';
+    /**
+     * Prevents context popup from overflowing
+     *
+     * @default false
+     */
+    flip?: boolean;
 };
 export declare const SelectionContext: ExtensionAuto<SelectionContextOptions>;

package/build/cjs/extensions/behavior/SelectionContext/index.js

@@ -5,9 +5,10 @@ const prosemirror_keymap_1 = require("prosemirror-keymap");
 const prosemirror_state_1 = require("prosemirror-state");
 const nodes_1 = require("../../../utils/nodes.js");
 const tooltip_1 = require("./tooltip.js");
-const SelectionContext = (builder, { config }) => {
+const SelectionContext = (builder, opts) => {
+    const { config } = opts;
     if (Array.isArray(config) && config.length > 0) {
-        builder.addPlugin(({ actions }) => new prosemirror_state_1.Plugin(new SelectionTooltip(actions, config, builder.logger)));
+        builder.addPlugin(({ actions }) => new prosemirror_state_1.Plugin(new SelectionTooltip(actions, config, builder.logger, opts)));
     }
 };
 exports.SelectionContext = SelectionContext;
@@ -16,8 +17,8 @@ class SelectionTooltip {
     tooltip;
     hideTimeoutRef = null;
     _isMousePressed = false;
-    constructor(actions, menuConfig, logger) {
-        this.tooltip = new tooltip_1.TooltipView(actions, menuConfig, logger);
+    constructor(actions, menuConfig, logger, options) {
+        this.tooltip = new tooltip_1.TooltipView(actions, menuConfig, logger, options);
     }
     get props() {
         return {

package/build/cjs/extensions/behavior/SelectionContext/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/behavior/SelectionContext/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {keydownHandler} from 'prosemirror-keymap';\nimport {\n    AllSelection,\n    type EditorState,\n    Plugin,\n    type PluginSpec,\n    TextSelection,\n} from 'prosemirror-state';\nimport type {EditorProps, EditorView} from 'prosemirror-view';\n\nimport type {ActionStorage, ExtensionAuto} from '../../../core';\nimport type {Logger2} from '../../../logger';\nimport {isCodeBlock} from '../../../utils/nodes';\n\nimport {type ContextConfig, TooltipView} from './tooltip';\n\nexport type {\n    ContextConfig as SelectionContextConfig,\n    ContextGroupItemData as SelectionContextItemData,\n} from './tooltip';\n\nexport type SelectionContextOptions = {\n    config?: ContextConfig;\n};\n\nexport const SelectionContext: ExtensionAuto<SelectionContextOptions> = (builder, {config}) => {\n    if (Array.isArray(config) && config.length > 0) {\n        builder.addPlugin(\n            ({actions}) => new Plugin(new SelectionTooltip(actions, config, builder.logger)),\n        );\n    }\n};\n\ntype TinyState = Pick<EditorState, 'doc' | 'selection'>;\n\nclass SelectionTooltip implements PluginSpec<unknown> {\n    private destroyed = false;\n\n    private tooltip: TooltipView;\n    private hideTimeoutRef: ReturnType<typeof setTimeout> | null = null;\n\n    private _isMousePressed = false;\n\n    constructor(actions: ActionStorage, menuConfig: ContextConfig, logger: Logger2.ILogger) {\n        this.tooltip = new TooltipView(actions, menuConfig, logger);\n    }\n\n    get props(): EditorProps {\n        return {\n            // same as keymap({})\n            handleKeyDown: keydownHandler({\n                // hide context menu when Esc was pressed\n                Escape: (_state, _dispatch, view) => {\n                    if (this.tooltip.isTooltipOpen) {\n                        this.tooltip.hide(view!);\n                        return true;\n                    }\n                    return false;\n                },\n            }),\n            handleDOMEvents: {\n                mousedown: (view) => {\n                    const startState: TinyState = {\n                        doc: view.state.doc,\n                        selection: view.state.selection,\n                    };\n                    this._isMousePressed = true;\n                    this.cancelTooltipHiding();\n                    this.tooltip.hide(view);\n\n                    const onMouseUp = () => {\n                        if (this.destroyed) return;\n                        this._isMousePressed = false;\n                        this.update(view, startState);\n                    };\n\n                    document.addEventListener('mouseup', onMouseUp, {once: true});\n                },\n            },\n        };\n    }\n\n    view(view: EditorView) {\n        this.update(view);\n        return {\n            update: this.update.bind(this),\n            destroy: () => {\n                this.destroyed = true;\n                this.cancelTooltipHiding();\n                this.tooltip.destroy();\n            },\n        };\n    }\n\n    private update(view: EditorView, prevState?: TinyState) {\n        if (this._isMousePressed) return;\n\n        this.cancelTooltipHiding();\n\n        // Don't show tooltip if editor not mounted to the DOM\n        // or when view is out of focus\n        if (!view.dom.parentNode || !view.hasFocus()) {\n            this.tooltip.hide(view);\n            return;\n        }\n\n        const {state} = view;\n        // Don't do anything if the document/selection didn't change\n        if (prevState && prevState.doc.eq(state.doc) && prevState.selection.eq(state.selection))\n            return;\n\n        const {selection} = state;\n        // Hide the tooltip if the selection is empty\n        if (\n            selection.empty ||\n            !(selection instanceof TextSelection || selection instanceof AllSelection)\n        ) {\n            this.tooltip.hide(view);\n            return;\n        }\n\n        // Hide the tooltip when one side of selection inside codeblock\n        if (isCodeBlock(selection.$from.parent) || isCodeBlock(selection.$to.parent)) {\n            this.tooltip.hide(view);\n            return;\n        }\n\n        this.tooltip.show(view, {\n            onOpenChange: (_open, _event, reason) => {\n                if (reason !== 'escape-key') this.scheduleTooltipHiding(view);\n            },\n        });\n    }\n\n    private scheduleTooltipHiding(view: EditorView) {\n        this.hideTimeoutRef = setTimeout(() => {\n            // hide tooltip if view is out of focus after 30 ms\n            if (!view.hasFocus()) {\n                this.tooltip.hide(view);\n            }\n        }, 30);\n    }\n\n    private cancelTooltipHiding() {\n        if (this.hideTimeoutRef !== null) {\n            clearTimeout(this.hideTimeoutRef);\n            this.hideTimeoutRef = null;\n        }\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/behavior/SelectionContext/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {keydownHandler} from 'prosemirror-keymap';\nimport {\n    AllSelection,\n    type EditorState,\n    Plugin,\n    type PluginSpec,\n    TextSelection,\n} from 'prosemirror-state';\nimport type {EditorProps, EditorView} from 'prosemirror-view';\n\nimport type {ActionStorage, ExtensionAuto} from '../../../core';\nimport type {Logger2} from '../../../logger';\nimport {isCodeBlock} from '../../../utils/nodes';\n\nimport {type ContextConfig, TooltipView} from './tooltip';\n\nexport type {\n    ContextConfig as SelectionContextConfig,\n    ContextGroupItemData as SelectionContextItemData,\n} from './tooltip';\n\nexport type SelectionContextOptions = {\n    config?: ContextConfig;\n    /**\n     * Placement of context popup\n     *\n     * @default 'bottom'\n     */\n    placement?: 'top' | 'bottom';\n    /**\n     * Prevents context popup from overflowing\n     *\n     * @default false\n     */\n    flip?: boolean;\n};\n\nexport const SelectionContext: ExtensionAuto<SelectionContextOptions> = (builder, opts) => {\n    const {config} = opts;\n    if (Array.isArray(config) && config.length > 0) {\n        builder.addPlugin(\n            ({actions}) => new Plugin(new SelectionTooltip(actions, config, builder.logger, opts)),\n        );\n    }\n};\n\ntype TinyState = Pick<EditorState, 'doc' | 'selection'>;\n\nclass SelectionTooltip implements PluginSpec<unknown> {\n    private destroyed = false;\n\n    private tooltip: TooltipView;\n    private hideTimeoutRef: ReturnType<typeof setTimeout> | null = null;\n\n    private _isMousePressed = false;\n\n    constructor(\n        actions: ActionStorage,\n        menuConfig: ContextConfig,\n        logger: Logger2.ILogger,\n        options: SelectionContextOptions,\n    ) {\n        this.tooltip = new TooltipView(actions, menuConfig, logger, options);\n    }\n\n    get props(): EditorProps {\n        return {\n            // same as keymap({})\n            handleKeyDown: keydownHandler({\n                // hide context menu when Esc was pressed\n                Escape: (_state, _dispatch, view) => {\n                    if (this.tooltip.isTooltipOpen) {\n                        this.tooltip.hide(view!);\n                        return true;\n                    }\n                    return false;\n                },\n            }),\n            handleDOMEvents: {\n                mousedown: (view) => {\n                    const startState: TinyState = {\n                        doc: view.state.doc,\n                        selection: view.state.selection,\n                    };\n                    this._isMousePressed = true;\n                    this.cancelTooltipHiding();\n                    this.tooltip.hide(view);\n\n                    const onMouseUp = () => {\n                        if (this.destroyed) return;\n                        this._isMousePressed = false;\n                        this.update(view, startState);\n                    };\n\n                    document.addEventListener('mouseup', onMouseUp, {once: true});\n                },\n            },\n        };\n    }\n\n    view(view: EditorView) {\n        this.update(view);\n        return {\n            update: this.update.bind(this),\n            destroy: () => {\n                this.destroyed = true;\n                this.cancelTooltipHiding();\n                this.tooltip.destroy();\n            },\n        };\n    }\n\n    private update(view: EditorView, prevState?: TinyState) {\n        if (this._isMousePressed) return;\n\n        this.cancelTooltipHiding();\n\n        // Don't show tooltip if editor not mounted to the DOM\n        // or when view is out of focus\n        if (!view.dom.parentNode || !view.hasFocus()) {\n            this.tooltip.hide(view);\n            return;\n        }\n\n        const {state} = view;\n        // Don't do anything if the document/selection didn't change\n        if (prevState && prevState.doc.eq(state.doc) && prevState.selection.eq(state.selection))\n            return;\n\n        const {selection} = state;\n        // Hide the tooltip if the selection is empty\n        if (\n            selection.empty ||\n            !(selection instanceof TextSelection || selection instanceof AllSelection)\n        ) {\n            this.tooltip.hide(view);\n            return;\n        }\n\n        // Hide the tooltip when one side of selection inside codeblock\n        if (isCodeBlock(selection.$from.parent) || isCodeBlock(selection.$to.parent)) {\n            this.tooltip.hide(view);\n            return;\n        }\n\n        this.tooltip.show(view, {\n            onOpenChange: (_open, _event, reason) => {\n                if (reason !== 'escape-key') this.scheduleTooltipHiding(view);\n            },\n        });\n    }\n\n    private scheduleTooltipHiding(view: EditorView) {\n        this.hideTimeoutRef = setTimeout(() => {\n            // hide tooltip if view is out of focus after 30 ms\n            if (!view.hasFocus()) {\n                this.tooltip.hide(view);\n            }\n        }, 30);\n    }\n\n    private cancelTooltipHiding() {\n        if (this.hideTimeoutRef !== null) {\n            clearTimeout(this.hideTimeoutRef);\n            this.hideTimeoutRef = null;\n        }\n    }\n}\n"]}

package/build/cjs/extensions/behavior/SelectionContext/tooltip.d.ts

@@ -11,15 +11,22 @@ export type ContextGroupItemData = (ToolbarGroupItemData<ActionStorage> & {
 });
 export type ContextGroupData = ContextGroupItemData[];
 export type ContextConfig = ContextGroupData[];
+export type TooltipViewParams = {
+    /** @default 'bottom' */
+    placement?: 'top' | 'bottom';
+    /** @default false */
+    flip?: boolean;
+};
 export declare class TooltipView {
     #private;
-    private logger;
-    private actions;
-    private menuConfig;
+    private readonly logger;
+    private readonly actions;
+    private readonly menuConfig;
+    private readonly placement;
     private view;
     private baseProps;
     private _tooltipRenderItem;
-    constructor(actions: ActionStorage, menuConfig: ContextConfig, logger: Logger2.ILogger);
+    constructor(actions: ActionStorage, menuConfig: ContextConfig, logger: Logger2.ILogger, params: TooltipViewParams);
     get isTooltipOpen(): boolean;
     show(view: EditorView, popupProps?: PopupProps): void;
     hide(view: EditorView): void;
@@ -29,5 +36,4 @@ export declare class TooltipView {
     private renderPopup;
     private get tooltipRenderItem();
     private calcPosition;
-    private get popupTextOffset();
 }

package/build/cjs/extensions/behavior/SelectionContext/tooltip.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooltipView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@floating-ui/react"); // eslint-disable-line import/no-extraneous-dependencies
 const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = require("../../../lodash.js");
 const logger_1 = require("../../../logger.js");
@@ -19,13 +18,16 @@ class TooltipView {
     logger;
     actions;
     menuConfig;
+    placement;
     view;
     baseProps = { show: false, poppupProps: {} };
     _tooltipRenderItem = null;
-    constructor(actions, menuConfig, logger) {
+    constructor(actions, menuConfig, logger, params) {
         this.logger = logger;
         this.actions = actions;
         this.menuConfig = menuConfig;
+        const { flip, placement = 'bottom' } = params;
+        this.placement = flip ? placement : [placement];
     }
     get isTooltipOpen() {
         return this.#isTooltipOpen;
@@ -91,39 +93,35 @@ class TooltipView {
         return this._tooltipRenderItem;
     }
     calcPosition(view) {
-        const viewDom = view.dom;
-        // The box in which the tooltip is positioned, to use as base
-        const viewBox = viewDom.getBoundingClientRect();
-        const viewWidth = viewBox.right - viewBox.left;
-        const viewHalfWidth = viewWidth / 2;
-        // These are in screen coordinates
-        const start = view.coordsAtPos(view.state.selection.from);
-        const end = view.coordsAtPos(view.state.selection.to);
-        // Find a center-ish x position from the selection endpoints (when
-        // crossing lines, end may be more to the left)
-        const left = Math.max((start.left + end.left) / 2, start.left + 3);
-        const leftOffset = left - (viewBox.left + viewHalfWidth);
-        const bottomOffset = -(viewBox.bottom - end.bottom) + this.popupTextOffset;
+        const virtualElem = {
+            getBoundingClientRect() {
+                // These are in screen coordinates
+                const start = view.coordsAtPos(view.state.selection.from);
+                const end = view.coordsAtPos(view.state.selection.to);
+                // Find a center-ish x position from the selection endpoints (when
+                // crossing lines, end may be more to the left)
+                const yCenter = Math.max((start.left + end.left) / 2, start.left + 3);
+                const top = start.top;
+                const left = yCenter - 1;
+                const width = 2;
+                const height = end.bottom - start.top;
+                return {
+                    top,
+                    left,
+                    right: left + width,
+                    bottom: top + height,
+                    y: top,
+                    x: left,
+                    height,
+                    width,
+                };
+            },
+        };
         return {
-            placement: 'bottom',
-            anchorElement: viewDom,
-            // override floating middlewares
-            floatingMiddlewares: [
-                (0, react_1.offset)({
-                    mainAxis: bottomOffset,
-                    crossAxis: leftOffset,
-                }),
-                (0, react_1.shift)({
-                    mainAxis: true,
-                    crossAxis: false,
-                    padding: 4,
-                }),
-            ],
+            placement: this.placement,
+            anchorElement: virtualElem,
         };
     }
-    get popupTextOffset() {
-        return 4; // 4px offset from text selection
-    }
 }
 exports.TooltipView = TooltipView;
 //# sourceMappingURL=tooltip.js.map