@gravity-ui/markdown-editor 13.0.0

package/build/cjs/markup/commands/inline.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertFiles = exports.insertImages = exports.insertAnchor = exports.insertLink = void 0;
+const autocomplete_1 = require("@codemirror/autocomplete");
+const defaultLinkSnippet = (0, autocomplete_1.snippet)(`[#{2:link}](#{1:url} "#{3:title}")`);
+const insertLink = ({ state, dispatch }) => {
+    const { from, to, empty } = state.selection.main;
+    const linkSnippet = empty
+        ? defaultLinkSnippet
+        : (0, autocomplete_1.snippet)(`[#{2:${state.sliceDoc(from, to)}}](#{1:url} "#{3:title}")`);
+    linkSnippet({ state, dispatch }, null, from, to);
+    return true;
+};
+exports.insertLink = insertLink;
+const defaultAnchorSnippet = (0, autocomplete_1.snippet)(`#[#{2:text}](#{1:anchor} "#{3:title}")`);
+const insertAnchor = ({ state, dispatch }) => {
+    const { from, to, empty } = state.selection.main;
+    const anchorSnippet = empty
+        ? defaultAnchorSnippet
+        : (0, autocomplete_1.snippet)(`#[#{2:${state.sliceDoc(from, to)}}](#{1:anchor} "#{3:title}")`);
+    anchorSnippet({ state, dispatch }, null, from, to);
+    return true;
+};
+exports.insertAnchor = insertAnchor;
+function insertImages(images) {
+    return ({ state, dispatch }) => {
+        const markup = images
+            .map(({ title, url, alt, width, height }) => {
+            const titleStr = title ? ` "${title}"` : '';
+            const sizeStr = (width !== null && width !== void 0 ? width : height) ? ` =${width !== null && width !== void 0 ? width : ''}x${height !== null && height !== void 0 ? height : ''}` : '';
+            return `![${alt !== null && alt !== void 0 ? alt : ''}](${url !== null && url !== void 0 ? url : ''}${titleStr}${sizeStr})`;
+        })
+            .join(' ');
+        const tr = state.changeByRange((range) => {
+            const changes = state.changes({ from: range.from, to: range.to, insert: markup });
+            return { changes, range: range.map(changes) };
+        });
+        dispatch(state.update(tr));
+        return true;
+    };
+}
+exports.insertImages = insertImages;
+const insertFiles = (files) => {
+    return ({ state, dispatch }) => {
+        const markup = files
+            .map((attrs) => {
+            const attrsStr = Object.entries(attrs)
+                .map(([key, value]) => `${key}="${value.replace('"', '')}"`)
+                .join(' ');
+            return `{% file ${attrsStr} %}`;
+        })
+            .join(' ');
+        const tr = state.changeByRange((range) => {
+            const changes = state.changes({ from: range.from, to: range.to, insert: markup });
+            return { changes, range: range.map(changes) };
+        });
+        dispatch(state.update(tr));
+        return true;
+    };
+};
+exports.insertFiles = insertFiles;

package/build/cjs/markup/commands/lists.d.ts

@@ -0,0 +1,5 @@
+import type { StateCommand } from '@codemirror/state';
+export declare const toBulletList: StateCommand;
+export declare const toOrderedList: StateCommand;
+export declare const sinkListItem: StateCommand;
+export declare const liftListItem: StateCommand;

package/build/cjs/markup/commands/lists.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.liftListItem = exports.sinkListItem = exports.toOrderedList = exports.toBulletList = void 0;
+const helpers_1 = require("./helpers");
+exports.toBulletList = (0, helpers_1.wrapPerLine)({ beforeText: '- ' });
+exports.toOrderedList = (0, helpers_1.wrapPerLine)({ beforeText: '1. ' });
+exports.sinkListItem = (0, helpers_1.wrapPerLine)({ beforeText: '  ', skipEmptyLine: false });
+const liftListItem = ({ state, dispatch }) => {
+    const tr = state.changeByRange((range) => {
+        const changeSpec = [];
+        (0, helpers_1.iterateOverRangeLines)(state.doc, range, (line) => {
+            if (line.text.startsWith('  '))
+                changeSpec.push({ from: line.from, to: line.from + 2, insert: '' });
+            else if (line.text.startsWith(' '))
+                changeSpec.push({ from: line.from, to: line.from + 1, insert: '' });
+        });
+        const changes = state.changes(changeSpec);
+        return { changes, range: range.map(changes) };
+    });
+    dispatch(state.update(tr));
+    return true;
+};
+exports.liftListItem = liftListItem;

package/build/cjs/markup/commands/marks.d.ts

@@ -0,0 +1,7 @@
+export declare const colorify: (color: string) => import("@codemirror/state").StateCommand;
+export declare const toggleBold: import("@codemirror/state").StateCommand;
+export declare const toggleItalic: import("@codemirror/state").StateCommand;
+export declare const toggleStrikethrough: import("@codemirror/state").StateCommand;
+export declare const toggleUnderline: import("@codemirror/state").StateCommand;
+export declare const toggleMonospace: import("@codemirror/state").StateCommand;
+export declare const toggleMarked: import("@codemirror/state").StateCommand;

package/build/cjs/markup/commands/marks.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleMarked = exports.toggleMonospace = exports.toggleUnderline = exports.toggleStrikethrough = exports.toggleItalic = exports.toggleBold = exports.colorify = void 0;
+const helpers_1 = require("./helpers");
+const colorify = (color) => (0, helpers_1.inlineWrapTo)(`{${color}}(`, ')');
+exports.colorify = colorify;
+exports.toggleBold = (0, helpers_1.toggleInlineMarkupFactory)('**');
+exports.toggleItalic = (0, helpers_1.toggleInlineMarkupFactory)('_');
+exports.toggleStrikethrough = (0, helpers_1.toggleInlineMarkupFactory)('~~');
+exports.toggleUnderline = (0, helpers_1.toggleInlineMarkupFactory)('++');
+exports.toggleMonospace = (0, helpers_1.toggleInlineMarkupFactory)('##');
+exports.toggleMarked = (0, helpers_1.toggleInlineMarkupFactory)('==');

package/build/cjs/markup/commands/math.d.ts

@@ -0,0 +1,2 @@
+export declare const wrapToMathInline: import("@codemirror/state").StateCommand;
+export declare const wrapToMathBlock: import("@codemirror/state").StateCommand;

package/build/cjs/markup/commands/math.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapToMathBlock = exports.wrapToMathInline = void 0;
+const helpers_1 = require("./helpers");
+exports.wrapToMathInline = (0, helpers_1.inlineWrapTo)('$');
+exports.wrapToMathBlock = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '$$' + lineBreak, ({ lineBreak }) => lineBreak + '$$');

package/build/cjs/markup/commands/yfm.d.ts

@@ -0,0 +1,5 @@
+import type { StateCommand } from '@codemirror/state';
+export declare const wrapToYfmCut: StateCommand;
+export declare const wrapToYfmNote: StateCommand;
+export declare const insertYfmTabs: StateCommand;
+export declare const insertYfmTable: StateCommand;

package/build/cjs/markup/commands/yfm.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertYfmTable = exports.insertYfmTabs = exports.wrapToYfmNote = exports.wrapToYfmCut = void 0;
+const helpers_1 = require("./helpers");
+exports.wrapToYfmCut = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '{% cut "title" %}' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endcut %}');
+exports.wrapToYfmNote = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '{% note info %}' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endnote %}');
+exports.insertYfmTabs = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '{% list tabs %}' + lineBreak.repeat(2) + '- Tab name' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endlist %}', { before: '  ', after: '' });
+exports.insertYfmTable = (0, helpers_1.wrapToBlock)(({ lineBreak }) => ['#|', '||'].join(lineBreak) + lineBreak, ({ lineBreak }) => lineBreak + ['|', '', '||', '||', '', '|', '', '||', '|#', ''].join(lineBreak));

package/build/cjs/markup/editor.d.ts

@@ -0,0 +1,21 @@
+import type { EditorView } from '@codemirror/view';
+import { CommonEditor, MarkupString } from '../common';
+export interface CodeEditor {
+    readonly cm: EditorView;
+}
+export declare class Editor implements CommonEditor, CodeEditor {
+    #private;
+    get cm(): EditorView;
+    get codemirror(): EditorView;
+    constructor(cm: EditorView);
+    focus(): void;
+    hasFocus(): boolean;
+    getValue(): MarkupString;
+    isEmpty(): boolean;
+    clear(): void;
+    replace(newMarkup: MarkupString): void;
+    prepend(markup: MarkupString): void;
+    append(markup: MarkupString): void;
+    moveCursor(position: 'start' | 'end'): void;
+    private _fixMarkupBeforeInsert;
+}

package/build/cjs/markup/editor.js

@@ -0,0 +1,85 @@
+"use strict";
+var _Editor_cm;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = void 0;
+const tslib_1 = require("tslib");
+class Editor {
+    constructor(cm) {
+        _Editor_cm.set(this, void 0);
+        tslib_1.__classPrivateFieldSet(this, _Editor_cm, cm, "f");
+    }
+    get cm() {
+        return tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f");
+    }
+    get codemirror() {
+        return tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f");
+    }
+    focus() {
+        return tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").focus();
+    }
+    hasFocus() {
+        return tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").hasFocus;
+    }
+    getValue() {
+        return tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").state.doc.toString();
+    }
+    isEmpty() {
+        return (tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").state.doc.lines === 1 && tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").state.doc.line(1).text.trim().length === 0);
+    }
+    clear() {
+        this.replace('');
+    }
+    replace(newMarkup) {
+        tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").dispatch({ changes: { from: 0, to: tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").state.doc.length, insert: newMarkup } });
+    }
+    prepend(markup) {
+        const changes = tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").state.changes({
+            from: 0,
+            insert: this._fixMarkupBeforeInsert(markup),
+        });
+        tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").dispatch({ changes, selection: tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").state.selection.map(changes, 1) });
+    }
+    append(markup) {
+        if (this.isEmpty()) {
+            tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").dispatch({ changes: { from: 0, insert: this._fixMarkupBeforeInsert(markup) } });
+            this.moveCursor('end');
+            return;
+        }
+        const { lineBreak } = tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").state;
+        let insert;
+        const { doc, doc: { lines }, } = tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").state;
+        if (lines >= 2 && doc.lineAt(lines).length === 0) {
+            if (doc.lineAt(lines - 1).length === 0)
+                insert = markup;
+            else
+                insert = lineBreak + markup;
+        }
+        else {
+            insert = lineBreak + lineBreak + markup;
+        }
+        tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").dispatch({ changes: { from: doc.length, insert } });
+    }
+    moveCursor(position) {
+        let pos;
+        switch (position) {
+            case 'start':
+                pos = 0;
+                break;
+            case 'end':
+                pos = tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").state.doc.length;
+                break;
+            default:
+                throw new Error('The "position" argument must be "start" or "end"');
+        }
+        tslib_1.__classPrivateFieldGet(this, _Editor_cm, "f").dispatch({ selection: { anchor: pos } });
+    }
+    _fixMarkupBeforeInsert(markup) {
+        if (markup.endsWith('\n\n'))
+            return markup;
+        if (markup.endsWith('\n'))
+            return markup + '\n';
+        return markup + '\n\n';
+    }
+}
+exports.Editor = Editor;
+_Editor_cm = new WeakMap();

package/build/cjs/markup/index.d.ts

@@ -0,0 +1,3 @@
+export * from './codemirror';
+export * from './commands';
+export * from './editor';

package/build/cjs/markup/index.js

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

package/build/cjs/plugins/BaseTooltip/index.css

@@ -0,0 +1,34 @@
+.g-md-base-tooltip {
+  display: flex;
+  max-width: fit-content;
+  padding: 0;
+}
+.g-md-base-tooltip__vertical-line {
+  min-height: 100%;
+  max-height: 100vh;
+  margin: 0 7px;
+  border-style: ridge;
+}
+.g-md-base-tooltip__remove-button {
+  display: flex;
+  align-items: center;
+  min-height: 100%;
+}
+.g-md-base-tooltip__content__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.g-md-base-tooltip__content__row:not(:last-child) {
+  margin-bottom: 4px;
+}
+.g-md-base-tooltip__content__input {
+  width: 180px;
+  margin-left: 8px;
+}
+.g-md-base-tooltip__content__number {
+  max-width: 150px;
+}
+.g-md-base-tooltip__content__switch {
+  margin-right: 28px;
+}

package/build/cjs/plugins/BaseTooltip/index.d.ts

@@ -0,0 +1,62 @@
+import React, { ReactNode } from 'react';
+import { PopupPlacement, PopupProps } from '@gravity-ui/uikit';
+import { Mark, MarkType, Node, NodeType } from 'prosemirror-model';
+import { PluginView } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { RendererItem } from '../../extensions';
+export declare type BaseTooltipNode = {
+    pos: number;
+    node: Node;
+    dom: HTMLElement | null;
+};
+export declare type TooltipContentCb = (view: EditorView, node: BaseTooltipNode, onChange?: (attrs: Record<string, string>) => void, forceEdit?: boolean, onOutsideClick?: () => void) => React.ReactElement | null;
+export interface BaseTooltipPluginOptions {
+    idPrefix: string;
+    content?: TooltipContentCb;
+    nodeType: NodeType | MarkType;
+    popupPlacement?: PopupPlacement;
+    disableHideOnEscapeKeyDown?: boolean;
+}
+export declare const BaseTooltipCn: import("@bem-react/classname").ClassNameFormatter;
+export declare const defaultPlacement: PopupPlacement;
+export declare const baseTooltipContentCn: import("@bem-react/classname").ClassNameFormatter;
+export declare type TooltipOnChangeCallback = (attrs: Record<string, string>, options?: {
+    setFocus?: boolean;
+    setSelection?: boolean;
+    hideTooltip?: boolean;
+    marks?: Mark[];
+}) => void;
+export declare type TooltipContentProps = {
+    node: BaseTooltipNode;
+    view: EditorView;
+    onChange?: TooltipOnChangeCallback;
+    toggleEdit?: () => void;
+};
+export declare class BaseTooltipPluginView implements PluginView {
+    protected view: EditorView;
+    protected currentNode: BaseTooltipNode | null;
+    protected readonly content?: TooltipContentCb;
+    protected readonly nodeType: NodeType | MarkType;
+    protected readonly popupPlacement?: PopupPlacement;
+    protected manualHidden: boolean;
+    protected destroyed: boolean;
+    protected readonly disableHideOnEscapeKeyDown?: boolean;
+    protected focusTrackingRafId: number | null;
+    private readonly idPrefix;
+    private renderItem?;
+    constructor(view: EditorView, options: BaseTooltipPluginOptions);
+    update(view: EditorView): void;
+    destroy(): void;
+    onEscapeDown: () => boolean;
+    protected setCurrentNode(node: NodeType): void;
+    protected changeAttrsCb: TooltipOnChangeCallback;
+    protected updateTooltipView(): void;
+    protected render(): void;
+    protected onOutsideClick: PopupProps['onOutsideClick'];
+    protected popupCloseHandler: PopupProps['onClose'];
+    protected startTrackingViewFocus(): void;
+    protected stopTrackingViewFocus(): void;
+    protected hidePopupManual(): void;
+    protected renderContent(currentNode: BaseTooltipNode): ReactNode;
+    protected createRenderItem(): RendererItem;
+}

package/build/cjs/plugins/BaseTooltip/index.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseTooltipPluginView = exports.baseTooltipContentCn = exports.defaultPlacement = exports.BaseTooltipCn = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const classname_1 = require("../../classname");
+const extensions_1 = require("../../extensions");
+const ErrorBoundary_1 = require("../../react-utils/ErrorBoundary");
+exports.BaseTooltipCn = (0, classname_1.cn)('base-tooltip');
+exports.defaultPlacement = [
+    'bottom-start',
+    'top-start',
+    'bottom-end',
+    'top-end',
+];
+const b = exports.BaseTooltipCn;
+exports.baseTooltipContentCn = (0, classname_1.cn)('base-tooltip-content');
+class BaseTooltipPluginView {
+    constructor(view, options) {
+        this.currentNode = null;
+        this.manualHidden = false;
+        this.destroyed = false;
+        this.focusTrackingRafId = null;
+        this.onEscapeDown = () => {
+            if (this.disableHideOnEscapeKeyDown)
+                return false;
+            if (this.currentNode && !this.manualHidden) {
+                this.hidePopupManual();
+                return true;
+            }
+            return false;
+        };
+        this.changeAttrsCb = (attrs, options) => {
+            if (this.currentNode) {
+                let tr = this.view.state.tr.setNodeMarkup(this.currentNode.pos, undefined, Object.assign(Object.assign({}, this.currentNode.node.attrs), attrs), (options === null || options === void 0 ? void 0 : options.marks) || []);
+                if (options === null || options === void 0 ? void 0 : options.setSelection) {
+                    tr = tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, this.currentNode.pos));
+                }
+                this.view.dispatch(tr);
+                if (options === null || options === void 0 ? void 0 : options.setFocus) {
+                    this.view.focus();
+                }
+                if (options === null || options === void 0 ? void 0 : options.hideTooltip) {
+                    this.hidePopupManual();
+                }
+            }
+        };
+        this.onOutsideClick = () => {
+            this.hidePopupManual();
+        };
+        this.popupCloseHandler = (_e, reason) => {
+            if (this.disableHideOnEscapeKeyDown && reason === 'escapeKeyDown')
+                return;
+            this.hidePopupManual();
+            if (reason === 'outsideClick' && !this.view.hasFocus()) {
+                this.startTrackingViewFocus();
+            }
+        };
+        this.view = view;
+        this.idPrefix = options.idPrefix;
+        this.content = options.content;
+        this.nodeType = options.nodeType;
+        this.popupPlacement = options.popupPlacement;
+        this.disableHideOnEscapeKeyDown = options.disableHideOnEscapeKeyDown;
+    }
+    update(view) {
+        this.view = view;
+        this.updateTooltipView();
+    }
+    destroy() {
+        var _a;
+        this.destroyed = true;
+        (_a = this.renderItem) === null || _a === void 0 ? void 0 : _a.remove();
+        this.renderItem = undefined;
+    }
+    setCurrentNode(node) {
+        const view = this.view;
+        const domAtPos = view.domAtPos.bind(view);
+        const { selection } = view.state;
+        const { $from, $to } = selection;
+        const parent = (0, prosemirror_utils_1.findSelectedNodeOfType)(node)(selection) || (0, prosemirror_utils_1.findParentNodeOfType)(node)(selection);
+        if (!parent || !$from.node(parent.depth).eq($to.node(parent.depth))) {
+            this.currentNode = null;
+            this.manualHidden = false;
+            this.stopTrackingViewFocus();
+            return;
+        }
+        if (!this.currentNode ||
+            !this.currentNode.node.eq(parent.node) ||
+            this.currentNode.pos !== parent.pos) {
+            this.manualHidden = false;
+            this.stopTrackingViewFocus();
+        }
+        const { pos, node: parentNode } = parent;
+        const dom = (0, prosemirror_utils_1.findDomRefAtPos)(pos, domAtPos);
+        this.currentNode = {
+            pos,
+            node: parentNode,
+            dom,
+        };
+    }
+    updateTooltipView() {
+        var _a;
+        const oldNode = this.currentNode;
+        this.setCurrentNode(this.view.state.schema.nodes[this.nodeType.name]);
+        // Do not rerender if we have the same node in selection
+        if (oldNode &&
+            ((_a = this.currentNode) === null || _a === void 0 ? void 0 : _a.node.eq(oldNode.node)) &&
+            this.currentNode.pos === oldNode.pos &&
+            this.currentNode.dom === oldNode.dom)
+            return;
+        this.render();
+    }
+    render() {
+        var _a;
+        if (this.destroyed)
+            return;
+        this.renderItem = (_a = this.renderItem) !== null && _a !== void 0 ? _a : this.createRenderItem();
+        this.renderItem.rerender();
+    }
+    startTrackingViewFocus() {
+        this.focusTrackingRafId = requestAnimationFrame(() => {
+            if (this.view.hasFocus()) {
+                this.focusTrackingRafId = null;
+                this.manualHidden = false;
+                this.render();
+                return;
+            }
+            this.startTrackingViewFocus();
+        });
+    }
+    stopTrackingViewFocus() {
+        if (this.focusTrackingRafId !== null) {
+            cancelAnimationFrame(this.focusTrackingRafId);
+            this.focusTrackingRafId = null;
+        }
+    }
+    hidePopupManual() {
+        this.manualHidden = true;
+        this.render();
+    }
+    renderContent(currentNode) {
+        if (!this.content)
+            return null;
+        // hack for popup rerender
+        window.dispatchEvent(new CustomEvent('scroll'));
+        return (react_1.default.createElement(uikit_1.Popup, { open: true, hasArrow: false, contentClassName: b(), anchorRef: { current: currentNode.dom }, placement: this.popupPlacement || exports.defaultPlacement, onClose: this.popupCloseHandler },
+            react_1.default.createElement("div", null, this.content(this.view, currentNode, this.changeAttrsCb))));
+    }
+    createRenderItem() {
+        return (0, extensions_1.getReactRendererFromState)(this.view.state).createItem(this.idPrefix, () => this.currentNode && !this.manualHidden ? (react_1.default.createElement(ErrorBoundary_1.ErrorLoggerBoundary, null, this.renderContent(this.currentNode))) : null);
+    }
+}
+exports.BaseTooltipPluginView = BaseTooltipPluginView;

package/build/cjs/plugins/TooltipButton/TooltipButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PopupProps } from '@gravity-ui/uikit';
+declare type TooltipButtonProps = Pick<PopupProps, 'onOutsideClick'> & {
+    domRef: HTMLElement | null;
+    children?: React.ReactNode;
+};
+export declare const TooltipButton: React.FC<TooltipButtonProps>;
+export {};

package/build/cjs/plugins/TooltipButton/TooltipButton.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const react_utils_1 = require("../../react-utils");
+const TooltipButton = ({ domRef, onOutsideClick, children }) => {
+    var _a;
+    const [width, setWidth] = (0, react_1.useState)(0);
+    const [open, , hide, toggleOpen] = (0, react_utils_1.useBooleanState)(false);
+    const placement = ['bottom-end', 'bottom-start'];
+    const ref = (0, react_1.useRef)(null);
+    const childrenRef = (0, react_1.useRef)(children);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a, _b;
+        if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth) {
+            setWidth((_b = ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth);
+        }
+    }, [(_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth]);
+    return (react_1.default.createElement(uikit_1.Popup, { open: true, keepMounted: false, hasArrow: false, anchorRef: { current: domRef }, placement: 'right-start', offset: [3, -(width + 3)], onOutsideClick: onOutsideClick, modifiers: [
+            {
+                name: 'preventOverflow',
+                enabled: false,
+            },
+        ] },
+        react_1.default.createElement(uikit_1.Button, { onClick: toggleOpen, ref: ref, size: "s", view: open ? 'normal' : 'raised' },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis })),
+        react_1.default.createElement(uikit_1.Popup, { open: open, anchorRef: ref, onClose: hide, placement: placement }, childrenRef.current)));
+};
+exports.TooltipButton = TooltipButton;

package/build/cjs/plugins/TooltipButton/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { NodeType } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { BaseTooltipNode, BaseTooltipPluginOptions, BaseTooltipPluginView, TooltipOnChangeCallback } from '../BaseTooltip';
+declare type ButtonContent = (view: EditorView, node: BaseTooltipNode, toggleEdit: () => void) => React.ReactElement;
+declare type FormContent = (view: EditorView, node: BaseTooltipNode, onChange?: TooltipOnChangeCallback) => React.ReactElement;
+interface TooltipMenuOptions extends BaseTooltipPluginOptions {
+    disableHideOnBlur?: boolean;
+    buttonContent: ButtonContent;
+    formContent: FormContent;
+}
+export declare class TooltipButtonPluginView extends BaseTooltipPluginView {
+    private enableHideOnBlur?;
+    private forceEdit;
+    private buttonContent;
+    private formContent;
+    constructor(view: EditorView, options: TooltipMenuOptions);
+    toggleEdit: () => void;
+    destroy(): void;
+    protected renderContent(currentNode: BaseTooltipNode): React.ReactNode;
+    protected setCurrentNode(node: NodeType): void;
+    protected updateTooltipView(): void;
+    private onViewFocus;
+}
+export {};

package/build/cjs/plugins/TooltipButton/index.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipButtonPluginView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const BaseTooltip_1 = require("../BaseTooltip");
+const TooltipButton_1 = require("./TooltipButton");
+class TooltipButtonPluginView extends BaseTooltip_1.BaseTooltipPluginView {
+    constructor(view, options) {
+        super(view, options);
+        this.forceEdit = false;
+        this.toggleEdit = () => {
+            this.forceEdit = !this.forceEdit;
+            this.render();
+        };
+        this.onViewFocus = () => {
+            this.forceEdit = false;
+            this.manualHidden = false;
+            this.render();
+        };
+        this.enableHideOnBlur = options.disableHideOnBlur !== true;
+        this.buttonContent = options.buttonContent;
+        this.formContent = options.formContent;
+        if (this.enableHideOnBlur) {
+            this.view.dom.addEventListener('focus', this.onViewFocus);
+        }
+    }
+    destroy() {
+        super.destroy();
+        this.view.dom.removeEventListener('focus', this.onViewFocus);
+    }
+    renderContent(currentNode) {
+        return (react_1.default.createElement(react_1.default.Fragment, null, this.forceEdit && this.formContent ? (react_1.default.createElement("div", null, this.formContent(this.view, currentNode, this.changeAttrsCb))) : (react_1.default.createElement(TooltipButton_1.TooltipButton, { domRef: currentNode.dom, onOutsideClick: this.onOutsideClick }, this.buttonContent(this.view, currentNode, this.toggleEdit)))));
+    }
+    setCurrentNode(node) {
+        var _a, _b;
+        super.setCurrentNode(node);
+        (_b = (_a = this.currentNode) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.addEventListener('dblclick', this.toggleEdit);
+    }
+    updateTooltipView() {
+        var _a, _b;
+        (_b = (_a = this.currentNode) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.removeEventListener('dblclick', this.toggleEdit);
+        super.updateTooltipView();
+    }
+}
+exports.TooltipButtonPluginView = TooltipButtonPluginView;

package/build/cjs/plugins/TooltipSelect/TooltipSelect.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PopupProps, SelectOption, SelectOptionGroup } from '@gravity-ui/uikit';
+declare type TooltipButtonProps = Pick<PopupProps, 'onOutsideClick'> & {
+    domRef: HTMLElement | null;
+    buttonTitle?: string;
+    items?: SelectOption[] | SelectOptionGroup[];
+    onUpdate: (s: string) => void;
+    withSearch?: boolean;
+};
+export declare const TooltipButton: React.FC<TooltipButtonProps>;
+export {};