@gravity-ui/markdown-editor 13.0.0

package/build/cjs/extensions/behavior/Autocomplete/types.d.ts

@@ -0,0 +1,10 @@
+import type { Options, Trigger } from 'prosemirror-autocomplete';
+export type { FromTo, AutocompleteAction, Trigger as AutocompleteTrigger, } from 'prosemirror-autocomplete';
+export { ActionKind as AutocompleteActionKind } from 'prosemirror-autocomplete';
+export interface AutocompleteHandler extends Pick<Options, 'onArrow' | 'onClose' | 'onEnter' | 'onFilter' | 'onOpen'> {
+    onDestroy?: () => void;
+}
+export declare type AutocompleteItem = {
+    trigger: Trigger;
+    handler: AutocompleteHandler;
+};

package/build/cjs/extensions/behavior/Autocomplete/types.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompleteActionKind = void 0;
+var prosemirror_autocomplete_1 = require("prosemirror-autocomplete");
+Object.defineProperty(exports, "AutocompleteActionKind", { enumerable: true, get: function () { return prosemirror_autocomplete_1.ActionKind; } });

package/build/cjs/extensions/behavior/ClicksOnEdges/ClicksOnEdges.d.ts

@@ -0,0 +1,13 @@
+import { Action, Extension } from '../../../core';
+declare const startActionName = "addEmptyDefaultTextblockToStartOfDocument";
+declare const endActionName = "addEmptyDefaultTextblockToEndOfDocument";
+export declare const ClicksOnEdges: Extension;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [startActionName]: Action;
+            [endActionName]: Action;
+        }
+    }
+}
+export {};

package/build/cjs/extensions/behavior/ClicksOnEdges/ClicksOnEdges.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClicksOnEdges = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const commands_1 = require("./commands");
+const startActionName = 'addEmptyDefaultTextblockToStartOfDocument';
+const endActionName = 'addEmptyDefaultTextblockToEndOfDocument';
+const ClicksOnEdges = (builder) => {
+    builder.addAction(startActionName, () => ({
+        isEnable: commands_1.addParagraphToStart,
+        run: commands_1.addParagraphToStart,
+    }));
+    builder.addAction(endActionName, () => ({
+        isEnable: commands_1.addParagraphToEnd,
+        run: commands_1.addParagraphToEnd,
+    }));
+    builder.addPlugin(() => {
+        return new prosemirror_state_1.Plugin({
+            props: {
+                handleClick(view, _pos, event) {
+                    if (event.target !== view.dom)
+                        return false;
+                    const { firstChild, lastChild } = event.target;
+                    if (!firstChild || !lastChild)
+                        return false;
+                    const targetRect = event.target.getBoundingClientRect();
+                    const firstRect = firstChild.getBoundingClientRect();
+                    const lastRect = lastChild.getBoundingClientRect();
+                    const firstOffsetTop = firstRect.top - targetRect.y;
+                    const lastOffsetBottom = lastRect.bottom - targetRect.y;
+                    if (event.offsetY < firstOffsetTop) {
+                        return (0, commands_1.addParagraphToStart)(view.state, view.dispatch);
+                    }
+                    if (event.offsetY > lastOffsetBottom) {
+                        return (0, commands_1.addParagraphToEnd)(view.state, view.dispatch);
+                    }
+                    return false;
+                },
+            },
+        });
+    });
+};
+exports.ClicksOnEdges = ClicksOnEdges;

package/build/cjs/extensions/behavior/ClicksOnEdges/commands.d.ts

@@ -0,0 +1,3 @@
+import { Command } from 'prosemirror-state';
+export declare const addParagraphToStart: Command;
+export declare const addParagraphToEnd: Command;

package/build/cjs/extensions/behavior/ClicksOnEdges/commands.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addParagraphToEnd = exports.addParagraphToStart = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const base_1 = require("../../../extensions/base");
+const addParagraphToStart = (state, dispatch) => {
+    const { firstChild } = state.doc;
+    if ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.type) === (0, base_1.pType)(state.schema)) {
+        // paragraph already at start of doc
+        if (dispatch) {
+            const pos = 1;
+            const tr = state.tr;
+            tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos));
+            dispatch(tr.scrollIntoView());
+        }
+        return true;
+    }
+    insertParagraph(0, state, dispatch);
+    return true;
+};
+exports.addParagraphToStart = addParagraphToStart;
+const addParagraphToEnd = (state, dispatch) => {
+    const { lastChild } = state.doc;
+    if (!lastChild)
+        return false;
+    if (lastChild.type === (0, base_1.pType)(state.schema) && lastChild.nodeSize === 2) {
+        // empty paragraph already at end of doc
+        if (dispatch) {
+            const pos = state.doc.nodeSize - 3;
+            const tr = state.tr;
+            tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos));
+            dispatch(tr.scrollIntoView());
+        }
+        return true;
+    }
+    insertParagraph(state.doc.nodeSize - 2, state, dispatch);
+    return true;
+};
+exports.addParagraphToEnd = addParagraphToEnd;
+function insertParagraph(pos, state, dispatch) {
+    if (!dispatch)
+        return;
+    const tr = state.tr;
+    tr.insert(pos, (0, base_1.pType)(state.schema).create());
+    tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos + 1));
+    dispatch(tr.scrollIntoView());
+}

package/build/cjs/extensions/behavior/ClicksOnEdges/index.d.ts

@@ -0,0 +1 @@
+export * from './ClicksOnEdges';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ClicksOnEdges"), exports);

package/build/cjs/extensions/behavior/Clipboard/clipboard.d.ts

@@ -0,0 +1,10 @@
+import { Plugin } from 'prosemirror-state';
+import { Parser, Serializer } from '../../../core';
+import '../../../types/spec';
+export declare type ClipboardPluginOptions = {
+    mdParser: Parser;
+    textParser: Parser;
+    serializer: Serializer;
+    pasteFileHandler?: (file: File) => void;
+};
+export declare const clipboard: ({ textParser, mdParser, serializer, pasteFileHandler, }: ClipboardPluginOptions) => Plugin<any>;

package/build/cjs/extensions/behavior/Clipboard/clipboard.js

@@ -0,0 +1,238 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clipboard = void 0;
+const prosemirror_model_1 = require("prosemirror-model");
+const prosemirror_state_1 = require("prosemirror-state");
+const core_1 = require("../../../core");
+const logger_1 = require("../../../logger");
+require("../../../types/spec");
+const helpers_1 = require("../../../utils/helpers");
+const selection_1 = require("../../../utils/selection");
+const serialize_for_clipboard_1 = require("../../../utils/serialize-for-clipboard");
+const BaseSchema_1 = require("../../base/BaseSchema");
+const code_1 = require("./code");
+const utils_1 = require("./utils");
+const clipboard = ({ textParser, mdParser, serializer, pasteFileHandler, }) => {
+    return new prosemirror_state_1.Plugin({
+        props: {
+            handleDOMEvents: {
+                copy(view, e) {
+                    if (!e.clipboardData)
+                        return false;
+                    const result = serializeSelected(view, serializer);
+                    if (result) {
+                        e.preventDefault();
+                        setClipboardData(e.clipboardData, result);
+                        return true;
+                    }
+                    return false;
+                },
+                cut(view, e) {
+                    if (!e.clipboardData)
+                        return false;
+                    const result = serializeSelected(view, serializer);
+                    if (result) {
+                        e.preventDefault();
+                        setClipboardData(e.clipboardData, result);
+                        view.dispatch(view.state.tr
+                            .deleteSelection()
+                            .scrollIntoView()
+                            .setMeta('uiEvent', 'cut'));
+                        return true;
+                    }
+                    return false;
+                },
+                paste(view, e) {
+                    if (!e.clipboardData)
+                        return false;
+                    let data;
+                    let isPasteHandled = false;
+                    if ((0, utils_1.isIosSafariShare)(e.clipboardData) &&
+                        (data = e.clipboardData.getData(utils_1.DataTransferType.UriList))) {
+                        const schema = view.state.schema;
+                        view.dispatch((0, core_1.trackTransactionMetrics)(view.state.tr.replaceSelection(
+                        // paste link inline
+                        new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from((0, BaseSchema_1.pType)(schema).create(null, schema.text(data))), 1, 1)), 'paste', { clipboardDataFormat: utils_1.DataTransferType.UriList }));
+                        isPasteHandled = true;
+                        e.preventDefault();
+                        return true;
+                    }
+                    if (!e.clipboardData.types.includes(utils_1.DataTransferType.Yfm) &&
+                        (data = e.clipboardData.getData(utils_1.DataTransferType.Html))) {
+                        const textFromHtml = (0, utils_1.extractTextContentFromHtml)(data);
+                        if (textFromHtml) {
+                            const res = (0, helpers_1.tryCatch)(() => textParser.parse(textFromHtml));
+                            if (res.success) {
+                                const docNode = res.result;
+                                const slice = getSliceFromMarkupFragment(docNode.content);
+                                view.dispatch((0, core_1.trackTransactionMetrics)(view.state.tr.replaceSelection(slice), 'paste', { clipboardDataFormat: utils_1.DataTransferType.Html }));
+                                isPasteHandled = true;
+                            }
+                            else {
+                                logger_1.logger.error(res.error);
+                                console.error(res.error);
+                            }
+                        }
+                        else
+                            return false; // default html pasting
+                    }
+                    if (!isPasteHandled &&
+                        ((data = e.clipboardData.getData(utils_1.DataTransferType.Yfm)) ||
+                            (data = e.clipboardData.getData(utils_1.DataTransferType.Text)))) {
+                        let parser;
+                        let dataFormat;
+                        if (e.clipboardData.types.includes(utils_1.DataTransferType.Yfm)) {
+                            parser = mdParser;
+                            dataFormat = utils_1.DataTransferType.Yfm;
+                        }
+                        else {
+                            parser = textParser;
+                            dataFormat = utils_1.DataTransferType.Text;
+                        }
+                        const codeType = (0, code_1.isInsideCode)(view.state);
+                        if (codeType) {
+                            const schema = view.state.schema;
+                            view.dispatch((0, core_1.trackTransactionMetrics)(view.state.tr.replaceSelectionWith(schema.text(codeType === 'inline' ? data.trim() : data)), 'paste', { clipboardDataFormat: dataFormat, code: codeType }));
+                            isPasteHandled = true;
+                        }
+                        else {
+                            const res = (0, helpers_1.tryCatch)(() => parser.parse(data));
+                            if (res.success) {
+                                const docNode = res.result;
+                                const slice = getSliceFromMarkupFragment(docNode.content);
+                                view.dispatch((0, core_1.trackTransactionMetrics)(view.state.tr.replaceSelection(slice), 'paste', { clipboardDataFormat: dataFormat }));
+                                isPasteHandled = true;
+                            }
+                            else {
+                                logger_1.logger.error(res.error);
+                                console.error(res.error);
+                            }
+                        }
+                    }
+                    if (e.clipboardData.files.length && pasteFileHandler) {
+                        for (const file of Array.from(e.clipboardData.files)) {
+                            pasteFileHandler(file);
+                        }
+                        isPasteHandled = true;
+                    }
+                    if (isPasteHandled) {
+                        e.preventDefault();
+                        return true;
+                    }
+                    return false;
+                },
+            },
+        },
+    });
+};
+exports.clipboard = clipboard;
+function getSliceFromMarkupFragment(fragment) {
+    var _a;
+    let start = 0;
+    let end = 0;
+    if ((_a = fragment.firstChild) === null || _a === void 0 ? void 0 : _a.isTextblock) {
+        start = 1;
+        if (fragment.childCount === 1) {
+            end = 1;
+        }
+    }
+    return new prosemirror_model_1.Slice(fragment, start, end);
+}
+function serializeSelected(view, serializer) {
+    const sel = view.state.selection;
+    if (sel.empty)
+        return null;
+    if (getSharedDepthNode(sel).type.spec.code) {
+        const fragment = sel.content().content;
+        return { text: fragment.textBetween(0, fragment.size) };
+    }
+    const markup = serializer.serialize(getCopyContent(view.state).content);
+    const { dom, text } = (0, serialize_for_clipboard_1.serializeForClipboard)(view, sel.content());
+    return { markup, text, html: dom.innerHTML };
+}
+function setClipboardData(data, result) {
+    data.clearData();
+    if (typeof result.markup === 'string')
+        data.setData(utils_1.DataTransferType.Yfm, result.markup);
+    if (typeof result.html === 'string')
+        data.setData(utils_1.DataTransferType.Html, result.html);
+    data.setData(utils_1.DataTransferType.Text, result.text);
+}
+function getCopyContent(state) {
+    var _a;
+    const sel = state.selection;
+    if ((0, selection_1.isWholeSelection)(sel)) {
+        return new prosemirror_model_1.Slice(state.doc.content, 0, 0);
+    }
+    if (isTextSelectionWithinSameTextBlock(sel)) {
+        return new prosemirror_model_1.Slice(createFragmentFromInlineSelection(state), 0, 0);
+    }
+    if ((0, selection_1.isNodeSelection)(sel)) {
+        const { node } = sel;
+        if (node.type.spec.complex) {
+            if (node.isTextblock) {
+                return new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from(state.schema.node(BaseSchema_1.BaseNode.Paragraph, {}, node.content)), 1, 1);
+            }
+            else {
+                const { complex } = node.type.spec;
+                if (complex === 'root') {
+                    return new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from(node), 1, 1);
+                }
+                else if (complex === 'leaf') {
+                    return new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from(node.content), 1, 1);
+                }
+                else {
+                    // TODO: handle copy of intermediate complex block node
+                }
+            }
+        }
+        else {
+            return new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from(node), 1, 1);
+        }
+    }
+    let slice = getSelectionContent(sel);
+    // replace first node with paragraph if needed
+    if (((_a = slice.content.firstChild) === null || _a === void 0 ? void 0 : _a.isTextblock) &&
+        slice.content.firstChild.type.name !== BaseSchema_1.BaseNode.Paragraph) {
+        let shouldTransformFirstChildToPara = true;
+        const { firstChild } = slice.content;
+        // if all text selected inside first node, don't replace it with paragraph
+        if (firstChild.eq(sel.$from.parent)) {
+            shouldTransformFirstChildToPara = false;
+        }
+        if (shouldTransformFirstChildToPara) {
+            slice = new prosemirror_model_1.Slice(slice.content.replaceChild(0, state.schema.node(BaseSchema_1.BaseNode.Paragraph, {}, firstChild.content)), slice.openStart, slice.openStart);
+        }
+    }
+    return slice;
+}
+function isTextSelectionWithinSameTextBlock(sel) {
+    return (0, selection_1.isTextSelection)(sel) && sel.$from.sameParent(sel.$to) && sel.$from.parent.isTextblock;
+}
+function createFragmentFromInlineSelection(state) {
+    const sel = state.selection;
+    const inlineSlice = state.doc.slice(sel.from, sel.to);
+    const isComplexTextblock = Boolean(sel.$from.parent.type.spec.complex);
+    const isAllContentSelected = sel.$from.parent.content.eq(inlineSlice.content);
+    if (isComplexTextblock || !isAllContentSelected) {
+        // copy selected inline content to paragraph if current node is complex
+        // or if only part of it's content was selected
+        return prosemirror_model_1.Fragment.from(state.schema.node(BaseSchema_1.BaseNode.Paragraph, {}, inlineSlice.content));
+    }
+    return prosemirror_model_1.Fragment.from(sel.$from.parent.copy(inlineSlice.content));
+}
+/**
+ * Like `selection.content()`, but smarter.
+ * Copy a structure of complex nodes,
+ * e.g. if select part of cut title it creates slice with yfm-cut –> yfm-cut-title -> selected text
+ * it works well with simple nodes, but to handle cases as described above, custom logic needed
+ */
+function getSelectionContent(sel) {
+    const sharedNodeType = getSharedDepthNode(sel).type;
+    const sharedNodeComplex = sharedNodeType.spec.complex;
+    const includeParents = sharedNodeComplex && sharedNodeComplex !== 'leaf';
+    return sel.$from.doc.slice(sel.$from.pos, sel.to, includeParents);
+}
+function getSharedDepthNode({ $from, $to }) {
+    return $from.node($from.sharedDepth($to.pos));
+}

package/build/cjs/extensions/behavior/Clipboard/code.d.ts

@@ -0,0 +1,4 @@
+import type { EditorState } from 'prosemirror-state';
+export declare function isInsideCode(state: EditorState): false | 'block' | 'inline';
+export declare function isInsideBlockCode(state: EditorState): boolean;
+export declare function isInsideInlineCode(state: EditorState): boolean;

package/build/cjs/extensions/behavior/Clipboard/code.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isInsideInlineCode = exports.isInsideBlockCode = exports.isInsideCode = void 0;
+const isCodeMark = (mark) => mark.type.spec.code;
+function isInsideCode(state) {
+    if (isInsideBlockCode(state))
+        return 'block';
+    if (isInsideInlineCode(state))
+        return 'inline';
+    return false;
+}
+exports.isInsideCode = isInsideCode;
+function isInsideBlockCode(state) {
+    // it is enough to check only $from
+    // when pasting, the content is inserted into a block with the type from $from
+    return Boolean(state.selection.$from.parent.type.spec.code);
+}
+exports.isInsideBlockCode = isInsideBlockCode;
+function isInsideInlineCode(state) {
+    var _a;
+    // same as for block code
+    const fromHasCodeMark = state.selection.$from.marks().some(isCodeMark);
+    if (state.selection.empty) {
+        return fromHasCodeMark || ((_a = state.storedMarks) !== null && _a !== void 0 ? _a : []).some(isCodeMark);
+    }
+    return fromHasCodeMark;
+}
+exports.isInsideInlineCode = isInsideInlineCode;

package/build/cjs/extensions/behavior/Clipboard/index.d.ts

@@ -0,0 +1,6 @@
+import type { ExtensionAuto } from '../../../core';
+import { ClipboardPluginOptions } from './clipboard';
+import * as clipboardUtils from './utils';
+export { clipboardUtils };
+export declare type ClipboardOptions = Pick<ClipboardPluginOptions, 'pasteFileHandler'>;
+export declare const Clipboard: ExtensionAuto<ClipboardOptions>;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Clipboard = exports.clipboardUtils = void 0;
+const tslib_1 = require("tslib");
+const clipboard_1 = require("./clipboard");
+const clipboardUtils = tslib_1.__importStar(require("./utils"));
+exports.clipboardUtils = clipboardUtils;
+const Clipboard = (builder, opts) => {
+    builder.addPlugin((deps) => (0, clipboard_1.clipboard)({
+        mdParser: deps.markupParser,
+        textParser: deps.textParser,
+        serializer: deps.serializer,
+        pasteFileHandler: opts.pasteFileHandler,
+    }), builder.PluginPriority.VeryLow);
+};
+exports.Clipboard = Clipboard;

package/build/cjs/extensions/behavior/Clipboard/utils.d.ts

@@ -0,0 +1,14 @@
+/** Сontains all data formats known to us */
+export declare enum DataTransferType {
+    Text = "text/plain",
+    Html = "text/html",
+    Yfm = "text/yfm",
+    UriList = "text/uri-list",
+    VSCodeData = "vscode-editor-data",
+    Files = "Files"
+}
+export declare function isIosSafariShare({ types }: DataTransfer): boolean;
+export declare function isFilesOnly({ types }: DataTransfer): boolean;
+export declare function isFilesFromHtml({ types }: DataTransfer): boolean;
+export declare function isImageFile(file: File): boolean;
+export declare function extractTextContentFromHtml(html: string): string | null;

package/build/cjs/extensions/behavior/Clipboard/utils.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractTextContentFromHtml = exports.isImageFile = exports.isFilesFromHtml = exports.isFilesOnly = exports.isIosSafariShare = exports.DataTransferType = void 0;
+/** Сontains all data formats known to us */
+var DataTransferType;
+(function (DataTransferType) {
+    DataTransferType["Text"] = "text/plain";
+    DataTransferType["Html"] = "text/html";
+    DataTransferType["Yfm"] = "text/yfm";
+    DataTransferType["UriList"] = "text/uri-list";
+    DataTransferType["VSCodeData"] = "vscode-editor-data";
+    DataTransferType["Files"] = "Files";
+})(DataTransferType = exports.DataTransferType || (exports.DataTransferType = {}));
+function isIosSafariShare({ types }) {
+    // if link is copied from ios safari share button,
+    // then data transfer only have text/uri-list data type
+    return (types.includes(DataTransferType.UriList) &&
+        !types.includes(DataTransferType.Text) &&
+        !types.includes(DataTransferType.Html));
+}
+exports.isIosSafariShare = isIosSafariShare;
+function isFilesOnly({ types }) {
+    return types.length === 1 && types[0] === DataTransferType.Files;
+}
+exports.isFilesOnly = isFilesOnly;
+function isFilesFromHtml({ types }) {
+    return (types.length === 2 &&
+        types.includes(DataTransferType.Files) &&
+        types.includes(DataTransferType.Html));
+}
+exports.isFilesFromHtml = isFilesFromHtml;
+function isImageFile(file) {
+    return file.type.startsWith('image/');
+}
+exports.isImageFile = isImageFile;
+function extractTextContentFromHtml(html) {
+    const element = document.createElement('div');
+    element.innerHTML = html;
+    element.replaceChildren(...Array.from(element.children).filter((v) => v.nodeName !== 'META'));
+    // Look if all nodes are div or span. That they don't have any classname and have only text child.
+    if (Array.from(element.children).every(({ nodeName, classList, childNodes }) => {
+        return ((nodeName === 'DIV' || nodeName === 'SPAN') &&
+            !classList.length &&
+            childNodes.length === 1 &&
+            (childNodes[0].nodeName === '#text' || childNodes[0].nodeName === 'BR'));
+    })) {
+        return Array.from(element.children).reduce((a, v) => a + v.textContent + '\n', '');
+    }
+    return null;
+}
+exports.extractTextContentFromHtml = extractTextContentFromHtml;

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

@@ -0,0 +1,43 @@
+.g-md-command-menu__list.g-list {
+  width: 312px;
+}
+.g-md-command-menu__list.g-list .g-list__empty-placeholder {
+  height: 28px;
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.g-md-command-menu__list-item {
+  cursor: pointer;
+}
+.g-md-command-menu__item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0 16px;
+}
+.g-md-command-menu__item-icon {
+  display: flex;
+  flex: 0 0 auto;
+  margin-right: 8px;
+}
+.g-md-command-menu__item-body {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 12px;
+  width: 100%;
+}
+.g-md-command-menu__item-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.g-md-command-menu__item-extra {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  column-gap: 8px;
+}
+.g-md-command-menu__item-hotkey {
+  align-self: center;
+}

package/build/cjs/extensions/behavior/CommandMenu/component.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AutocompletePopupProps } from '../../../utils/autocomplete-popup';
+import type { CommandAction } from './types';
+export declare type CommandMenuItem = Pick<CommandAction, 'id' | 'title' | 'icon' | 'hotkey' | 'hint'>;
+export declare type CommandMenuComponentProps = AutocompletePopupProps & {
+    currentIndex?: number;
+    items: readonly CommandMenuItem[];
+    onClick(itemIndex: number): void;
+};
+export declare const CommandMenuComponent: React.FC<CommandMenuComponentProps>;
+export declare function render(props: CommandMenuComponentProps): React.ReactNode;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.render = exports.CommandMenuComponent = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../../classname");
+const suggest_1 = require("../../../i18n/suggest");
+const lodash_1 = require("../../../lodash");
+const ErrorBoundary_1 = require("../../../react-utils/ErrorBoundary");
+const b = (0, classname_1.cn)('command-menu');
+const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
+const ITEM_HEIGHT = 28; // px
+const VISIBLE_ITEMS_COUNT = 10;
+const MAX_LIST_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS_COUNT; // px
+function calcListHeight(itemsCount) {
+    if (itemsCount <= 0)
+        return undefined;
+    return Math.min(MAX_LIST_HEIGHT, itemsCount * ITEM_HEIGHT);
+}
+const CommandMenuComponent = ({ anchor, currentIndex, items, onClick, onEnterKeyDown, onEscapeKeyDown, onOutsideClick, }) => {
+    if (!anchor)
+        return null;
+    return (react_1.default.createElement(uikit_1.Popup, { open: true, anchorRef: { current: anchor }, placement: placement, onEnterKeyDown: onEnterKeyDown, onEscapeKeyDown: onEscapeKeyDown, onOutsideClick: onOutsideClick },
+        react_1.default.createElement("div", { className: b() },
+            react_1.default.createElement(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) => onClick(index), className: b('list'), itemClassName: b('list-item') }))));
+};
+exports.CommandMenuComponent = CommandMenuComponent;
+function renderItem({ id, title, icon, hotkey, hint }) {
+    const titleText = (0, lodash_1.isFunction)(title) ? title() : title;
+    const hintText = (0, lodash_1.isFunction)(hint) ? hint() : hint;
+    return (react_1.default.createElement("div", { key: id, className: b('item', { id }) },
+        react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: 20, className: b('item-icon') }),
+        react_1.default.createElement("div", { className: b('item-body') },
+            react_1.default.createElement("span", { className: b('item-title') }, titleText),
+            react_1.default.createElement("div", { className: b('item-extra') },
+                hotkey && react_1.default.createElement(uikit_1.Hotkey, { value: hotkey, className: b('item-hotkey') }),
+                hintText && react_1.default.createElement(components_1.HelpPopover, { className: b('item- hint'), content: hintText })))));
+}
+function render(props) {
+    return (react_1.default.createElement(ErrorBoundary_1.ErrorLoggerBoundary, null,
+        react_1.default.createElement(exports.CommandMenuComponent, Object.assign({}, props))));
+}
+exports.render = render;

package/build/cjs/extensions/behavior/CommandMenu/const.d.ts

@@ -0,0 +1 @@
+export declare const DecoClassName = "pm-command-input";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DecoClassName = void 0;
+exports.DecoClassName = 'pm-command-input';