@gravity-ui/markdown-editor 13.17.1 → 13.18.0

package/build/cjs/extensions/yfm/GPT/gptExtension/gptExtension.d.ts

@@ -0,0 +1,13 @@
+import { Action, ExtensionWithOptions } from 'src/core';
+import type { CommonAnswer } from '../ErrorScreen/types';
+import type { GptWidgetDecoViewParams } from './view';
+export declare const gptActionName = "addGptWidget";
+export declare type GptWidgetOptions<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown> = Pick<GptWidgetDecoViewParams<AnswerData, PromptData>, 'gptPopupContainer' | 'answerRender' | 'onApplyResult' | 'promptPresets' | 'customPromptPlaceholder' | 'disabledPromptPlaceholder' | 'onCustomPromptApply' | 'onPromptPresetClick' | 'onTryAgain' | 'onLike' | 'onDislike' | 'onClose' | 'onUpdate' | 'gptAlertProps'>;
+export declare const gptExtension: ExtensionWithOptions<GptWidgetOptions>;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [gptActionName]: Action<{}>;
+        }
+    }
+}

package/build/cjs/extensions/yfm/GPT/gptExtension/gptExtension.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gptExtension = exports.gptActionName = void 0;
+const actions_1 = require("../actions");
+const commands_1 = require("../commands");
+const constants_1 = require("../constants");
+const plugin_1 = require("../plugin");
+exports.gptActionName = 'addGptWidget';
+const gptExtension = (builder, options) => {
+    builder.addAction(exports.gptActionName, actions_1.showGptWidget);
+    builder.addPlugin(({ serializer, markupParser }) => {
+        return (0, plugin_1.gptWidgetPlugin)(Object.assign(Object.assign({}, options), { serializer, parser: markupParser }));
+    });
+    builder.addKeymap(() => ({
+        [constants_1.gptHotKeys.openGptKey]: commands_1.runGpt,
+    }), builder.Priority.VeryLow);
+};
+exports.gptExtension = gptExtension;

package/build/cjs/extensions/yfm/GPT/gptExtension/view.css

@@ -0,0 +1,17 @@
+.g-md-gpt-widget-deco {
+  background-color: var(--g-color-base-info-light-hover);
+}
+
+.g-md-gpt-popup {
+  --layer-navigation-bar: 900;
+  pointer-events: initial;
+}
+.g-md-gpt-popup[class] {
+  border-radius: var(--g-spacing-2);
+}
+.g-md-gpt-popup__content {
+  width: 720px;
+  padding: var(--g-spacing-3);
+  pointer-events: all;
+  box-shadow: -8px 2px 16px -4px var(--g-color-private-purple-150), 8px 2px 16px -4px var(--g-color-private-blue-150);
+}

package/build/cjs/extensions/yfm/GPT/gptExtension/view.d.ts

@@ -0,0 +1,36 @@
+import type { PopupProps } from '@gravity-ui/uikit';
+import type { EditorState, PluginView } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { Parser, Serializer } from 'src/core';
+import type { CommonAnswer } from '../ErrorScreen/types';
+import type { GptDialogProps } from '../GptDialog/GptDialog';
+export declare const cnGptPopup: import("@bem-react/classname").ClassNameFormatter;
+export declare type GptWidgetDecoViewParams<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown> = Omit<GptDialogProps<AnswerData, PromptData>, 'markup' | 'onApplyResult'> & {
+    serializer: Serializer;
+    parser: Parser;
+} & {
+    onApplyResult?: GptDialogProps['onApplyResult'];
+    gptPopupContainer?: PopupProps['container'];
+};
+export declare class GptWidgetDecoView implements Required<PluginView> {
+    private readonly _view;
+    private readonly _renderer;
+    private _decoElem;
+    private _params;
+    private _serializer;
+    private _parser;
+    private _confirmOpen;
+    constructor(view: EditorView, params: GptWidgetDecoViewParams);
+    update(view: EditorView, prevState: EditorState): void;
+    destroy(): void;
+    private _resetState;
+    private _onConfirmCancel;
+    private _onConfirmOk;
+    private _render;
+    private _onGptAnswerUpdate;
+    private _onSubmit;
+    private _onClose;
+    private _getContentOfDecoration;
+    private _getCurrentDecoration;
+    private _getPluginState;
+}

package/build/cjs/extensions/yfm/GPT/gptExtension/view.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GptWidgetDecoView = exports.cnGptPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const prosemirror_model_1 = require("prosemirror-model");
+const prosemirror_state_1 = require("prosemirror-state");
+const react_use_1 = require("react-use");
+const classname_1 = require("../../../../classname");
+const behavior_1 = require("../../../behavior");
+const GptDialog_1 = require("../GptDialog/GptDialog");
+const constants_1 = require("../constants");
+const plugin_1 = require("../plugin");
+exports.cnGptPopup = (0, classname_1.cn)('gpt-popup');
+class GptWidgetDecoView {
+    constructor(view, params) {
+        this._decoElem = null;
+        this._onConfirmCancel = () => {
+            this._confirmOpen = false;
+            this._renderer.rerender();
+        };
+        this._onConfirmOk = () => {
+            this._onClose();
+        };
+        this._onGptAnswerUpdate = (answer) => {
+            var _a, _b;
+            (_b = (_a = this._params).onUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, answer);
+        };
+        this._onSubmit = (answer) => {
+            var _a, _b;
+            const deco = this._getCurrentDecoration();
+            if (!deco)
+                return;
+            const { from, to } = deco;
+            const answerNode = this._parser.parse(answer);
+            const tr = this._view.state.tr;
+            const meta = { action: 'hide' };
+            tr.setMeta(plugin_1.pluginKey, meta);
+            tr.replace(from, to, new prosemirror_model_1.Slice(answerNode.content, 1, 1));
+            tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, tr.mapping.map(to)));
+            this._view.dispatch(tr);
+            setTimeout(() => {
+                this._view.focus();
+            }, 0);
+            (_b = (_a = this._params).onApplyResult) === null || _b === void 0 ? void 0 : _b.call(_a, answer);
+            this._resetState();
+        };
+        this._onClose = () => {
+            var _a, _b;
+            const deco = this._getCurrentDecoration();
+            if (!deco) {
+                return;
+            }
+            const tr = this._view.state.tr;
+            const meta = { action: 'hide' };
+            tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, deco.from, deco.to));
+            tr.setMeta(plugin_1.pluginKey, meta);
+            this._view.dispatch(tr);
+            setTimeout(() => {
+                this._view.focus();
+            }, 0);
+            (_b = (_a = this._params).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this._resetState();
+        };
+        this._view = view;
+        this._params = params;
+        this._serializer = params.serializer;
+        this._parser = params.parser;
+        this._confirmOpen = false;
+        this._renderer = (0, behavior_1.getReactRendererFromState)(view.state).createItem('gpt-widget-view', this._render.bind(this));
+    }
+    update(view, prevState) {
+        var _a;
+        const { state, dispatch } = view;
+        if (this._decoElem && !state.selection.eq(prevState.selection)) {
+            const transaction = state.tr;
+            const meta = { action: 'hide' };
+            dispatch(transaction.setMeta(plugin_1.pluginKey, meta));
+            this._view.focus();
+            return;
+        }
+        const decoElements = Array.from(view.dom.querySelectorAll(`.${constants_1.WIDGET_DECO_CLASS_NAME}`));
+        this._decoElem = (_a = decoElements.at(-1)) !== null && _a !== void 0 ? _a : null;
+        this._renderer.rerender();
+    }
+    destroy() {
+        this._resetState();
+        this._renderer.remove();
+    }
+    _resetState() {
+        this._decoElem = null;
+        this._confirmOpen = false;
+    }
+    _render() {
+        if (!this._decoElem)
+            return null;
+        const markup = this._getContentOfDecoration();
+        if (markup === undefined) {
+            return null;
+        }
+        return (react_1.default.createElement(Widget, { markup: markup, anchorRef: { current: this._decoElem }, answerRender: this._params.answerRender, promptPresets: this._params.promptPresets, disablePromptPresets: this._params.disablePromptPresets, customPromptPlaceholder: this._params.customPromptPlaceholder, disabledPromptPlaceholder: this._params.disabledPromptPlaceholder, gptAlertProps: this._params.gptAlertProps, 
+            /* eslint-disable-next-line react/jsx-handler-names */
+            onApplyResult: this._onSubmit, 
+            /* eslint-disable-next-line react/jsx-handler-names */
+            onCustomPromptApply: this._params.onCustomPromptApply, 
+            /* eslint-disable-next-line react/jsx-handler-names */
+            onPromptPresetClick: this._params.onPromptPresetClick, 
+            /* eslint-disable-next-line react/jsx-handler-names */
+            onTryAgain: this._params.onTryAgain, 
+            /* eslint-disable-next-line react/jsx-handler-names */
+            onLike: this._params.onLike, 
+            /* eslint-disable-next-line react/jsx-handler-names */
+            onDislike: this._params.onDislike, 
+            /* eslint-disable-next-line react/jsx-handler-names */
+            onClose: this._onClose, 
+            /* eslint-disable-next-line react/jsx-handler-names */
+            onUpdate: this._onGptAnswerUpdate, 
+            /* eslint-disable-next-line react/jsx-handler-names */
+            confirmOpen: this._confirmOpen, 
+            /* eslint-disable-next-line react/jsx-handler-names */
+            onConfirmOk: this._onConfirmOk, 
+            /* eslint-disable-next-line react/jsx-handler-names */
+            onConfirmCancel: this._onConfirmCancel, container: this._params.gptPopupContainer }));
+    }
+    _getContentOfDecoration() {
+        const deco = this._getCurrentDecoration();
+        if (!deco)
+            return undefined;
+        const { from, to } = deco;
+        try {
+            const fragment = this._view.state.doc.slice(from, to, true).content;
+            const yfmMarkup = this._serializer.serialize(fragment);
+            return yfmMarkup;
+        }
+        catch (error) {
+            console.error(error);
+            return this._view.state.doc.textBetween(from, to, '\n', '');
+        }
+    }
+    _getCurrentDecoration() {
+        var _a;
+        return (_a = this._getPluginState()) === null || _a === void 0 ? void 0 : _a.find(undefined, undefined, 
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return
+        (spec) => spec[constants_1.WIDGET_DECO_SPEC_FLAG])[0];
+    }
+    _getPluginState() {
+        return plugin_1.pluginKey.getState(this._view.state);
+    }
+}
+exports.GptWidgetDecoView = GptWidgetDecoView;
+function Widget({ markup, anchorRef, answerRender, promptPresets, disablePromptPresets, customPromptPlaceholder, disabledPromptPlaceholder, onCustomPromptApply, onApplyResult, onPromptPresetClick, onTryAgain, onLike, onDislike, onClose, onUpdate, container, gptAlertProps, }) {
+    (0, react_1.useEffect)(() => {
+        // rerender the popup
+        window.dispatchEvent(new CustomEvent('scroll'));
+    }, [anchorRef]);
+    (0, react_use_1.useMount)(() => {
+        if ((anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && 'scrollIntoView' in anchorRef.current) {
+            anchorRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
+        }
+    });
+    const handleUpdate = (0, react_1.useCallback)((result) => {
+        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(result);
+    }, [onUpdate]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(uikit_1.Popup, { className: (0, exports.cnGptPopup)(), contentClassName: (0, exports.cnGptPopup)('content'), open: true, anchorRef: anchorRef, placement: constants_1.gptPopupPlacement, onOutsideClick: onClose, focusTrap: true, strategy: "absolute", container: container, onEscapeKeyDown: onClose },
+            react_1.default.createElement(GptDialog_1.GptDialog, { markup: markup, answerRender: answerRender, promptPresets: promptPresets, disablePromptPresets: disablePromptPresets, customPromptPlaceholder: customPromptPlaceholder, disabledPromptPlaceholder: disabledPromptPlaceholder, onApplyResult: onApplyResult, onCustomPromptApply: onCustomPromptApply, onPromptPresetClick: onPromptPresetClick, onTryAgain: onTryAgain, onLike: onLike, onDislike: onDislike, onClose: onClose, onUpdate: handleUpdate, gptAlertProps: gptAlertProps }))));
+}

package/build/cjs/extensions/yfm/GPT/hooks/useGpt.d.ts

@@ -0,0 +1,27 @@
+import type { CommonAnswer, GptRequestData } from '../ErrorScreen/types';
+import type { GptDialogProps } from '../GptDialog/GptDialog';
+declare type UseGptProps<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown> = Pick<GptDialogProps<AnswerData, PromptData>, 'markup' | 'promptPresets' | 'onCustomPromptApply' | 'onPromptPresetClick' | 'onTryAgain' | 'onLike' | 'onDislike' | 'onApplyResult' | 'onUpdate'>;
+export declare const useGpt: <AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown>({ markup, promptPresets, onCustomPromptApply, onPromptPresetClick, onTryAgain, onLike, onDislike, onApplyResult, onUpdate, }: UseGptProps<AnswerData, PromptData>) => {
+    answer: AnswerData | undefined;
+    customPrompt: string;
+    lastRequestData: GptRequestData<PromptData> | undefined;
+    loading: boolean;
+    error: boolean;
+    mode: "custom-and-presets" | "only-custom" | "only-presets";
+    feedbackType: "dislike" | "like" | undefined;
+    feedbackTypeLoading: "dislike" | "like" | undefined;
+    handleLike: () => Promise<void>;
+    handleDislike: () => Promise<void>;
+    handleCustomPromptUpdate: import("react").Dispatch<import("react").SetStateAction<string>>;
+    handleCustomPromptKeyPress: import("react").KeyboardEventHandler<HTMLInputElement>;
+    handleCustomPromptApply: () => Promise<void>;
+    handlePresetClick: (data: PromptData) => void;
+    handleTryAgain: () => Promise<void>;
+    handleFreshStart: () => void;
+    handleApplyResult: () => void;
+    showTryAgainButton: boolean;
+    showAnswer: boolean;
+    showError: boolean;
+    showAnswerActions: boolean | undefined;
+};
+export {};

package/build/cjs/extensions/yfm/GPT/hooks/useGpt.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGpt = void 0;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const useGpt = ({ markup, promptPresets, onCustomPromptApply, onPromptPresetClick, onTryAgain, onLike, onDislike, onApplyResult, onUpdate, }) => {
+    const [answer, setAnswer] = (0, react_1.useState)();
+    const [lastRequestData, setLastRequestData] = (0, react_1.useState)();
+    const [customPrompt, setCustomPrompt] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(false);
+    const [feedbackType, setFeedbackType] = (0, react_1.useState)(undefined);
+    const [feedbackTypeLoading, setFeedbackTypeLoading] = (0, react_1.useState)(undefined);
+    const makeRequest = (0, react_1.useCallback)(async (requestFunction, data) => {
+        if (!requestFunction) {
+            return;
+        }
+        let result;
+        try {
+            setLoading(true);
+            setError(false);
+            setLastRequestData(data);
+            result = await requestFunction(data);
+            if (result) {
+                setAnswer(result);
+                setFeedbackType(undefined);
+            }
+        }
+        catch (error) {
+            console.error(error);
+            setError(true);
+        }
+        finally {
+            setLoading(false);
+            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(result);
+        }
+    }, [onUpdate]);
+    const handleLike = (0, react_1.useCallback)(async () => {
+        if (!onLike || !lastRequestData) {
+            return;
+        }
+        try {
+            setFeedbackType(undefined);
+            setFeedbackTypeLoading('like');
+            await onLike(lastRequestData);
+            setFeedbackType('like');
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            setFeedbackTypeLoading(undefined);
+        }
+    }, [lastRequestData, onLike]);
+    const handleDislike = (0, react_1.useCallback)(async () => {
+        if (!onDislike || !lastRequestData) {
+            return;
+        }
+        try {
+            setFeedbackType(undefined);
+            setFeedbackTypeLoading('dislike');
+            await onDislike(lastRequestData);
+            setFeedbackType('dislike');
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            setFeedbackTypeLoading(undefined);
+        }
+    }, [lastRequestData, onDislike]);
+    const handleCustomPromptApply = (0, react_1.useCallback)(async () => {
+        if (!customPrompt) {
+            return;
+        }
+        const gptRequestData = {
+            markup,
+            customPrompt,
+        };
+        await makeRequest(onCustomPromptApply, gptRequestData);
+    }, [customPrompt, makeRequest, markup, onCustomPromptApply]);
+    const handleCustomPromptKeyPress = (0, react_1.useCallback)(async (event) => {
+        if (!(0, utils_1.isEnter)(event)) {
+            return;
+        }
+        await handleCustomPromptApply();
+    }, [handleCustomPromptApply]);
+    const handlePresetClick = (0, react_1.useCallback)(async (data) => {
+        const gptRequestData = {
+            markup,
+            promptData: data,
+        };
+        await makeRequest(onPromptPresetClick, gptRequestData);
+    }, [makeRequest, markup, onPromptPresetClick]);
+    const handleTryAgain = (0, react_1.useCallback)(async () => {
+        if (!lastRequestData) {
+            return;
+        }
+        await makeRequest(onTryAgain, lastRequestData);
+    }, [lastRequestData, makeRequest, onTryAgain]);
+    const handleApplyResult = (0, react_1.useCallback)(() => {
+        var _a;
+        onApplyResult((_a = answer === null || answer === void 0 ? void 0 : answer.rawText) !== null && _a !== void 0 ? _a : '');
+    }, [answer === null || answer === void 0 ? void 0 : answer.rawText, onApplyResult]);
+    const handleFreshStart = (0, react_1.useCallback)(() => {
+        setError(false);
+        setLastRequestData(undefined);
+        setAnswer(undefined);
+        setCustomPrompt('');
+        setFeedbackType(undefined);
+        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(undefined);
+    }, [onUpdate]);
+    const showTryAgainButton = Boolean(lastRequestData && onTryAgain && !loading);
+    const showAnswer = Boolean(answer && !loading && !error);
+    const showError = error && !loading;
+    const showAnswerActions = (onLike || onDislike) && showAnswer;
+    let mode = 'custom-and-presets';
+    if (onCustomPromptApply && !(promptPresets === null || promptPresets === void 0 ? void 0 : promptPresets.length)) {
+        mode = 'only-custom';
+    }
+    else if (!onCustomPromptApply && (promptPresets === null || promptPresets === void 0 ? void 0 : promptPresets.length)) {
+        mode = 'only-presets';
+    }
+    return {
+        answer,
+        customPrompt,
+        lastRequestData,
+        loading,
+        error,
+        mode,
+        feedbackType,
+        feedbackTypeLoading,
+        handleLike,
+        handleDislike,
+        handleCustomPromptUpdate: setCustomPrompt,
+        handleCustomPromptKeyPress,
+        handleCustomPromptApply,
+        handlePresetClick,
+        handleTryAgain,
+        handleFreshStart,
+        handleApplyResult,
+        showTryAgainButton,
+        showAnswer,
+        showError,
+        showAnswerActions,
+    };
+};
+exports.useGpt = useGpt;

package/build/cjs/extensions/yfm/GPT/hooks/useGptHotKeys.d.ts

@@ -0,0 +1,2 @@
+import type { Options } from 'react-hotkeys-hook';
+export declare function useGptHotKeys(key: string, callback: () => void, options?: Options, dependencies?: unknown[]): void;

package/build/cjs/extensions/yfm/GPT/hooks/useGptHotKeys.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGptHotKeys = void 0;
+const react_hotkeys_hook_1 = require("react-hotkeys-hook");
+function useGptHotKeys(key, callback, options = {}, dependencies) {
+    (0, react_hotkeys_hook_1.useHotkeys)(key, callback, Object.assign({ preventDefault: true }, options), dependencies);
+}
+exports.useGptHotKeys = useGptHotKeys;

package/build/cjs/extensions/yfm/GPT/hooks/useOverflowingHorizontalItems.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject } from 'react';
+export declare type UseOverflowingContainerListItemsProps<ItemType extends unknown> = {
+    containerRef: RefObject<HTMLElement>;
+    items?: ItemType[];
+    itemSelector: string;
+    moreButtonSelector: string;
+    marginBetweenItems?: number;
+};
+export declare function useOverflowingHorizontalItems<ItemType>({ containerRef, items, itemSelector, moreButtonSelector, marginBetweenItems, }: UseOverflowingContainerListItemsProps<ItemType>): {
+    visibleItems: ItemType[];
+    hiddenItems: ItemType[];
+    measured: boolean;
+};

package/build/cjs/extensions/yfm/GPT/hooks/useOverflowingHorizontalItems.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOverflowingHorizontalItems = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+function useOverflowingHorizontalItems({ containerRef, items, itemSelector, moreButtonSelector, marginBetweenItems = 0, }) {
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(0);
+    const [itemWidths, setItemWidths] = (0, react_1.useState)([]);
+    const [moreButtonWidth, setMoreButtonWidth] = (0, react_1.useState)(0);
+    (0, react_1.useLayoutEffect)(() => {
+        const measureItemSizes = () => {
+            var _a, _b, _c;
+            const itemElements = Array.from((_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(itemSelector)) !== null && _b !== void 0 ? _b : []);
+            const moreButton = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(moreButtonSelector);
+            setItemWidths(itemElements.map((item) => item.clientWidth));
+            if (moreButton) {
+                setMoreButtonWidth(moreButton.clientWidth);
+            }
+        };
+        requestAnimationFrame(measureItemSizes);
+    }, [containerRef, itemSelector, moreButtonSelector]);
+    (0, react_1.useLayoutEffect)(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const updateContainerSize = (entries) => {
+            if (entries.length > 0) {
+                setContainerWidth(entries[0].contentRect.width);
+            }
+        };
+        const updateContainerSizeDebounced = (0, debounce_1.default)(updateContainerSize, 100);
+        const containerResizeObserver = new ResizeObserver(updateContainerSizeDebounced);
+        containerResizeObserver.observe(container);
+        return () => containerResizeObserver.unobserve(container);
+    }, [containerRef]);
+    const isMeasured = itemWidths.length > 0;
+    const { visibleItems, hiddenItems } = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (!isMeasured) {
+            return {
+                visibleItems: items !== null && items !== void 0 ? items : [],
+                hiddenItems: [],
+            };
+        }
+        const itemsCount = itemWidths.length;
+        let visibleItemsCount = 0;
+        const spaceForMoreButton = moreButtonWidth + marginBetweenItems;
+        let remainingContainerWidth = containerWidth;
+        for (const width of itemWidths) {
+            const itemWidthWithMargin = width + marginBetweenItems;
+            remainingContainerWidth -= itemWidthWithMargin;
+            if (remainingContainerWidth < spaceForMoreButton) {
+                const isMoreThanOneItemLeft = itemsCount !== visibleItemsCount + 1;
+                const hasNoSpaceForTheLastItem = remainingContainerWidth < 0;
+                if (isMoreThanOneItemLeft || hasNoSpaceForTheLastItem) {
+                    break;
+                }
+            }
+            visibleItemsCount++;
+        }
+        return {
+            visibleItems: (_a = items === null || items === void 0 ? void 0 : items.slice(0, visibleItemsCount)) !== null && _a !== void 0 ? _a : [],
+            hiddenItems: (_b = items === null || items === void 0 ? void 0 : items.slice(visibleItemsCount)) !== null && _b !== void 0 ? _b : [],
+        };
+    }, [containerWidth, isMeasured, itemWidths, items, marginBetweenItems, moreButtonWidth]);
+    return { visibleItems, hiddenItems, measured: isMeasured };
+}
+exports.useOverflowingHorizontalItems = useOverflowingHorizontalItems;

package/build/cjs/extensions/yfm/GPT/hooks/usePresetList.d.ts

@@ -0,0 +1,14 @@
+import type { DropdownMenuItem } from '@gravity-ui/uikit';
+import type { GptDialogProps } from '../GptDialog/GptDialog';
+import type { PresetListProps } from '../PresetList/PresetList';
+declare type UsePresetListProps = Pick<GptDialogProps, 'promptPresets'> & {
+    onPresetClick: PresetListProps['onPresetClick'];
+};
+export declare const usePresetList: ({ promptPresets, onPresetClick }: UsePresetListProps) => {
+    measured: boolean;
+    showMoreButton: boolean;
+    presetsContainerRef: import("react").RefObject<HTMLDivElement>;
+    visiblePresets: import("../ErrorScreen/types").PromptPreset<unknown>[];
+    hiddenPresets: DropdownMenuItem<unknown>[];
+};
+export {};

package/build/cjs/extensions/yfm/GPT/hooks/usePresetList.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePresetList = void 0;
+const react_1 = require("react");
+const PresetList_1 = require("../PresetList/PresetList");
+const useOverflowingHorizontalItems_1 = require("./useOverflowingHorizontalItems");
+const usePresetList = ({ promptPresets, onPresetClick }) => {
+    const presetsContainerRef = (0, react_1.useRef)(null);
+    const { visibleItems, hiddenItems, measured } = (0, useOverflowingHorizontalItems_1.useOverflowingHorizontalItems)({
+        containerRef: presetsContainerRef,
+        items: promptPresets,
+        itemSelector: `.${(0, PresetList_1.cnGptDialogPresetList)('preset')}`,
+        moreButtonSelector: `.${(0, PresetList_1.cnGptDialogPresetList)('more-button-wrapper')}`,
+        marginBetweenItems: 8,
+    });
+    const hiddenPresets = (0, react_1.useMemo)(() => {
+        const items = [];
+        for (const item of hiddenItems) {
+            items.push({
+                text: item.display,
+                action: () => onPresetClick(item.data),
+                items: [],
+            });
+        }
+        return items;
+    }, [onPresetClick, hiddenItems]);
+    const showMoreButton = !measured || hiddenPresets.length > 0;
+    return {
+        measured,
+        showMoreButton,
+        presetsContainerRef,
+        visiblePresets: visibleItems,
+        hiddenPresets,
+    };
+};
+exports.usePresetList = usePresetList;

package/build/cjs/extensions/yfm/GPT/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toolbar';
+export * from './gptExtension/gptExtension';

package/build/cjs/extensions/yfm/GPT/index.js

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

package/build/cjs/extensions/yfm/GPT/plugin.d.ts

@@ -0,0 +1,13 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+import type { GptWidgetDecoViewParams } from './gptExtension/view';
+export declare type GptWidgetMeta = {
+    action: 'show';
+    from: number;
+    to: number;
+} | {
+    action: 'hide';
+};
+declare const key: PluginKey<DecorationSet>;
+export { key as pluginKey };
+export declare const gptWidgetPlugin: (params: GptWidgetDecoViewParams) => Plugin;

package/build/cjs/extensions/yfm/GPT/plugin.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gptWidgetPlugin = exports.pluginKey = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_view_1 = require("prosemirror-view");
+const constants_1 = require("./constants");
+const view_1 = require("./gptExtension/view");
+const key = new prosemirror_state_1.PluginKey('gpt-widget');
+exports.pluginKey = key;
+const gptWidgetPlugin = (params) => {
+    return new prosemirror_state_1.Plugin({
+        key,
+        state: {
+            init: () => prosemirror_view_1.DecorationSet.empty,
+            apply: (tr, decos) => {
+                const meta = tr.getMeta(key);
+                const paramsGpt = params;
+                if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'show') {
+                    if (meta.to === meta.from) {
+                        const spanElem = document.createElement('span');
+                        spanElem.className = constants_1.WIDGET_DECO_CLASS_NAME;
+                        spanElem.textContent = ' ';
+                        paramsGpt.disablePromptPresets = true;
+                        return prosemirror_view_1.DecorationSet.create(tr.doc, [
+                            prosemirror_view_1.Decoration.widget(meta.from, spanElem, {
+                                [constants_1.WIDGET_DECO_SPEC_FLAG]: true,
+                            }),
+                        ]);
+                    }
+                    return prosemirror_view_1.DecorationSet.create(tr.doc, [
+                        prosemirror_view_1.Decoration.inline(meta.from, meta.to, { nodeName: 'span', class: constants_1.WIDGET_DECO_CLASS_NAME }, { [constants_1.WIDGET_DECO_SPEC_FLAG]: true }),
+                    ]);
+                }
+                if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'hide') {
+                    paramsGpt.disablePromptPresets = false;
+                    return prosemirror_view_1.DecorationSet.empty;
+                }
+                return decos.map(tr.mapping, tr.doc);
+            },
+        },
+        props: {
+            decorations: (state) => key.getState(state),
+        },
+        view: (view) => new view_1.GptWidgetDecoView(view, params),
+    });
+};
+exports.gptWidgetPlugin = gptWidgetPlugin;