@gravity-ui/markdown-editor 13.24.0 → 13.25.1

package/README.md

@@ -59,6 +59,8 @@ Read more:
 - [How to add Mermaid extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-connect-mermaid-extension.md)
 - [How to write extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-create-extension.md)
 - [How to add GPT extension](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-connect-gpt-extensions.md)
+- [How to add text binding extension in markdown](https://github.com/gravity-ui/markdown-editor/blob/main/docs/how-to-add-text-binding-extension-in-markdown.md)
+
 
 
 ### i18n

package/build/cjs/bundle/MarkdownEditorView.js

@@ -60,7 +60,10 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
     const editorMode = editor.currentMode;
     const markupSplitMode = editor.splitModeEnabled && editor.splitMode && editorMode === 'markup';
     const canRenderPreview = Boolean(editor.renderPreview && editorMode === 'markup' && !editor.splitModeEnabled);
-    (0, react_use_1.useKey)((e) => canRenderPreview && isPreviewKeyDown(e), () => onShowPreviewChange(!showPreview), { event: 'keydown' }, [showPreview, editorMode, onShowPreviewChange, canRenderPreview]);
+    (0, react_use_1.useKey)((e) => canRenderPreview && isPreviewKeyDown(e), (e) => {
+        e.preventDefault();
+        onShowPreviewChange(!showPreview);
+    }, { event: 'keydown' }, [showPreview, editorMode, onShowPreviewChange, canRenderPreview]);
     const editorWrapperRef = (0, react_1.useRef)(null);
     const splitModeViewWrapperRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -77,18 +80,19 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
             onShowPreviewChange(false);
         }
     }, { event: 'keydown' }, [hidePreviewAfterSubmit, enableSubmitInPreview, showPreview, showPreview]);
-    const settings = (0, react_1.useMemo)(() => (react_1.default.createElement(Settings, { mode: editorMode, onModeChange: onModeChange, toolbarVisibility: editor.toolbarVisible && !showPreview, onToolbarVisibilityChange: onToolbarVisibilityChange, onSplitModeChange: onSplitModeChange, splitModeEnabled: editor.splitModeEnabled, splitMode: editor.splitMode, stickyToolbar: stickyToolbar, onShowPreviewChange: onShowPreviewChange, showPreview: showPreview, renderPreviewButton: canRenderPreview })), [
-        canRenderPreview,
-        stickyToolbar,
-        editor.splitMode,
-        editor.splitModeEnabled,
-        editor.toolbarVisible,
+    const settings = (0, react_1.useMemo)(() => (react_1.default.createElement(Settings, { mode: editorMode, settingsVisible: settingsVisible, onModeChange: onModeChange, toolbarVisibility: editor.toolbarVisible && !showPreview, onToolbarVisibilityChange: onToolbarVisibilityChange, onSplitModeChange: onSplitModeChange, splitModeEnabled: editor.splitModeEnabled, splitMode: editor.splitMode, stickyToolbar: stickyToolbar, onShowPreviewChange: onShowPreviewChange, showPreview: showPreview, renderPreviewButton: canRenderPreview })), [
         editorMode,
+        settingsVisible,
+        editor.toolbarVisible,
+        editor.splitModeEnabled,
+        editor.splitMode,
         onModeChange,
-        onShowPreviewChange,
-        onSplitModeChange,
-        onToolbarVisibilityChange,
         showPreview,
+        onToolbarVisibilityChange,
+        onSplitModeChange,
+        stickyToolbar,
+        onShowPreviewChange,
+        canRenderPreview,
     ]);
     return (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { onError: (e) => {
             logger_1.logger.error(e);
@@ -121,8 +125,8 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
                     })),
                     settings)) : (react_1.default.createElement(react_1.default.Fragment, null,
                     editorMode === 'wysiwyg' && (react_1.default.createElement(WysiwygEditorView_1.WysiwygEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: wysiwygToolbarConfig, toolbarVisible: editor.toolbarVisible, hiddenActionsConfig: wysiwygHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar }, editor.toolbarVisible && settingsVisible && settings)),
-                    editorMode === 'markup' && (react_1.default.createElement(MarkupEditorView_1.MarkupEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: markupToolbarConfig, toolbarVisible: editor.toolbarVisible, splitMode: editor.splitMode, splitModeEnabled: editor.splitModeEnabled, hiddenActionsConfig: markupHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar }, editor.toolbarVisible && settingsVisible && settings)),
-                    !editor.toolbarVisible && settingsVisible && settings))),
+                    editorMode === 'markup' && (react_1.default.createElement(MarkupEditorView_1.MarkupEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: markupToolbarConfig, toolbarVisible: editor.toolbarVisible, splitMode: editor.splitMode, splitModeEnabled: editor.splitModeEnabled, hiddenActionsConfig: markupHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar }, editor.toolbarVisible && settings)),
+                    !editor.toolbarVisible && settings))),
                 markupSplitMode && (react_1.default.createElement(react_1.default.Fragment, null,
                     editor.splitMode === 'horizontal' ? (react_1.default.createElement(HorizontalDrag_1.HorizontalDrag, { editor: editor, isMounted: isMounted, leftElRef: editorWrapperRef, rightElRef: splitModeViewWrapperRef, wrapperRef: divRef })) : (react_1.default.createElement("div", { className: b('resizer') })),
                     react_1.default.createElement(SplitModeView_1.SplitModeView, { editor: editor, ref: splitModeViewWrapperRef })))))));
@@ -132,13 +136,13 @@ const MarkupSearchAnchor = ({ mode }) => (react_1.default.createElement(react_1.
 function Settings(props) {
     const wrapperRef = (0, react_1.useRef)(null);
     const isSticky = (0, react_utils_1.useSticky)(wrapperRef) && props.toolbarVisibility && props.stickyToolbar;
-    return (react_1.default.createElement("div", { className: b('settings-wrapper') },
+    return (react_1.default.createElement(react_1.default.Fragment, null, (props.renderPreviewButton || props.settingsVisible) && (react_1.default.createElement("div", { className: b('settings-wrapper') },
         react_1.default.createElement("div", { ref: wrapperRef, className: sticky_1.stickyCn.settings({
                 withToolbar: props.toolbarVisibility,
                 stickyActive: isSticky,
             }) },
             react_1.default.createElement(settings_1.EditorSettings, Object.assign({}, props)),
-            react_1.default.createElement(MarkupSearchAnchor, Object.assign({}, props)))));
+            react_1.default.createElement(MarkupSearchAnchor, Object.assign({}, props)))))));
 }
 function isPreviewKeyDown(e) {
     const modKey = (0, utils_1.isMac)() ? e.metaKey : e.ctrlKey;

package/build/cjs/bundle/config/action-names.d.ts

@@ -1,3 +1,3 @@
-declare const namesObj: Record<"bold" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "mono" | "paragraph" | "anchor" | "table" | "image" | "code_inline" | "code_block" | "file" | "checkbox" | "bulletList" | "orderedList" | "emoji" | "tabs" | "yfm_cut" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "yfm_note" | "gpt" | "undo" | "redo" | "math_inline" | "math_block" | "mermaid" | "liftListItem" | "sinkListItem" | "yfm_block" | "yfm_html_block" | "yfm_layout" | "horizontalrule", string>;
+declare const namesObj: Record<"bold" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "mono" | "paragraph" | "anchor" | "table" | "image" | "code_inline" | "code_block" | "file" | "checkbox" | "bulletList" | "orderedList" | "emoji" | "tabs" | "yfm_cut" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "yfm_note" | "gpt" | "undo" | "redo" | "liftListItem" | "sinkListItem" | "yfm_block" | "yfm_html_block" | "yfm_layout" | "horizontalrule" | "math_inline" | "math_block" | "mermaid", string>;
 export declare const ActionName: Readonly<typeof namesObj>;
 export {};

package/build/cjs/bundle/config/wysiwyg.js

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset = exports.wMermaidItemData = exports.wSelectionMenuConfig = exports.wToggleHeadingFoldingItemData = exports.wToolbarConfig = exports.wHiddenData = exports.wCommandMenuConfig = exports.wGptItemData = exports.wYfmHtmlBlockItemData = exports.wMathListItem = exports.wMathListConfig = exports.wMathBlockItemData = exports.wTabsItemData = exports.wMathInlineItemData = exports.wFileItemData = exports.wEmojiItemData = exports.wHruleItemData = exports.wImageItemData = exports.wCodeListConfig = exports.wCodeBlockItemData = exports.wCodeItemData = exports.wTableItemData = exports.wNoteItemData = exports.wListMoveListConfig = exports.wCutItemData = exports.wQuoteItemData = exports.wLinkItemData = exports.wCheckboxItemData = exports.wListsListConfig = exports.wHeadingListConfig = exports.wTextItemData = exports.wBiusGroupConfig = exports.wMarkedItemData = exports.wMonospaceItemData = exports.wStrikethroughItemData = exports.wUnderlineItemData = exports.wItalicItemData = exports.wBoldItemData = exports.wHistoryGroupConfig = void 0;
 const extensions_1 = require("../../extensions");
-// for typings from Math
-const constants_1 = require("../../extensions/yfm/GPT/constants");
+const constants_1 = require("../../extensions/additional/GPT/constants");
 const hints_1 = require("../../i18n/hints");
 const menubar_1 = require("../../i18n/menubar");
 const shortcuts_1 = require("../../shortcuts");

package/build/cjs/bundle/settings/index.d.ts

@@ -3,6 +3,7 @@ import { ClassNameProps } from '../../classname';
 import type { EditorMode, SplitMode } from '../Editor';
 export declare type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {
     renderPreviewButton?: boolean;
+    settingsVisible?: boolean;
 };
 export declare const EditorSettings: React.NamedExoticComponent<EditorSettingsProps>;
 declare type SettingsContentProps = ClassNameProps & {

package/build/cjs/bundle/settings/index.js

@@ -20,7 +20,7 @@ const placement = ['bottom-end', 'top-end'];
 const bSettings = (0, classname_1.cn)('editor-settings');
 const bContent = (0, classname_1.cn)('settings-content');
 exports.EditorSettings = react_1.default.memo(function EditorSettings(props) {
-    const { className, onShowPreviewChange, showPreview, renderPreviewButton } = props;
+    const { className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible } = props;
     const chevronRef = react_1.default.useRef(null);
     const [popupShown, , hidePopup, togglePopup] = (0, hooks_1.useBooleanState)(false);
     return (react_1.default.createElement("div", { className: bSettings(null, [className]) },
@@ -28,11 +28,12 @@ exports.EditorSettings = react_1.default.memo(function EditorSettings(props) {
             react_1.default.createElement(uikit_1.ActionTooltip, { openDelay: toolbar_1.ToolbarTooltipDelay.Open, closeDelay: toolbar_1.ToolbarTooltipDelay.Close, title: (0, bundle_1.i18n)('preview_hint'), hotkey: "mod+shift+p" },
                 react_1.default.createElement(uikit_1.Button, { size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange === null || onShowPreviewChange === void 0 ? void 0 : onShowPreviewChange(!showPreview), selected: showPreview },
                     react_1.default.createElement(uikit_1.Icon, { data: icons_1.Eye }))),
-            react_1.default.createElement("div", { className: bSettings('separator') }))),
-        react_1.default.createElement(uikit_1.Button, { size: "m", view: "flat", ref: chevronRef, pin: "round-round", onClick: togglePopup, className: bSettings('dropdown-button') },
-            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Gear })),
-        react_1.default.createElement(uikit_1.Popup, { open: popupShown, anchorRef: chevronRef, placement: placement, onClose: hidePopup },
-            react_1.default.createElement(SettingsContent, Object.assign({}, props, { onClose: hidePopup, className: bSettings('content') })))));
+            settingsVisible && react_1.default.createElement("div", { className: bSettings('separator') }))),
+        settingsVisible && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(uikit_1.Button, { size: "m", view: "flat", ref: chevronRef, pin: "round-round", onClick: togglePopup, className: bSettings('dropdown-button') },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.Gear })),
+            react_1.default.createElement(uikit_1.Popup, { open: popupShown, anchorRef: chevronRef, placement: placement, onClose: hidePopup },
+                react_1.default.createElement(SettingsContent, Object.assign({}, props, { 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, }) {

package/build/cjs/extensions/{yfm → additional}/GPT/GptDialog/GptDialog.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+/// <reference types="react" />
 import { AlertProps } from '@gravity-ui/uikit';
 import type { CommonAnswer, GptRequestData, PromptPreset } from '../ErrorScreen/types';
 export declare type GptDialogProps<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown> = {
@@ -25,4 +25,4 @@ export declare type GptDialogProps<AnswerData extends CommonAnswer = CommonAnswe
     };
 };
 export declare const cnGptDialog: import("@bem-react/classname").ClassNameFormatter;
-export declare const GptDialog: FC<GptDialogProps>;
+export declare const GptDialog: <AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown>({ markup, answerRender, promptPresets, disablePromptPresets, customPromptPlaceholder, disabledPromptPlaceholder, onCustomPromptApply, onPromptPresetClick, onTryAgain, onApplyResult, onClose, onLike, onDislike, onUpdate, gptAlertProps, }: GptDialogProps<AnswerData, PromptData>) => JSX.Element;

package/build/cjs/extensions/additional/GPT/MarkupGpt/commands.d.ts

@@ -0,0 +1,4 @@
+import type { Command, EditorView } from '../../../../cm/view';
+export declare const showMarkupGpt: (view: EditorView) => void;
+export declare const hideMarkupGpt: (view: EditorView) => void;
+export declare const runMarkupGpt: Command;

package/build/cjs/extensions/additional/GPT/MarkupGpt/commands.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runMarkupGpt = exports.hideMarkupGpt = exports.showMarkupGpt = void 0;
+const effects_1 = require("./effects");
+const showMarkupGpt = (view) => {
+    view.dispatch({ effects: [effects_1.ShowMarkupGptEffect.of(null)] });
+};
+exports.showMarkupGpt = showMarkupGpt;
+const hideMarkupGpt = (view) => {
+    view.dispatch({ effects: [effects_1.HideMarkupGptEffect.of(null)] });
+};
+exports.hideMarkupGpt = hideMarkupGpt;
+const runMarkupGpt = (view) => {
+    if (view)
+        (0, exports.showMarkupGpt)(view);
+    return true;
+};
+exports.runMarkupGpt = runMarkupGpt;

package/build/cjs/extensions/additional/GPT/MarkupGpt/effects.d.ts

@@ -0,0 +1,2 @@
+export declare const ShowMarkupGptEffect: import("@codemirror/state").StateEffectType<null>;
+export declare const HideMarkupGptEffect: import("@codemirror/state").StateEffectType<null>;

package/build/cjs/extensions/additional/GPT/MarkupGpt/effects.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HideMarkupGptEffect = exports.ShowMarkupGptEffect = void 0;
+const state_1 = require("../../../../cm/state");
+exports.ShowMarkupGptEffect = state_1.StateEffect.define();
+exports.HideMarkupGptEffect = state_1.StateEffect.define();

package/build/cjs/extensions/additional/GPT/MarkupGpt/index.d.ts

@@ -0,0 +1,5 @@
+import { GptWidgetOptions } from '../../..';
+import { CommonAnswer } from '../ErrorScreen/types';
+export { mGptToolbarItem } from './toolbar';
+export { showMarkupGpt, hideMarkupGpt } from './commands';
+export declare function mGptExtension<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown>(props: GptWidgetOptions<AnswerData, PromptData>): import("@codemirror/state").Extension[];

package/build/cjs/extensions/additional/GPT/MarkupGpt/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mGptExtension = exports.hideMarkupGpt = exports.showMarkupGpt = exports.mGptToolbarItem = void 0;
+const view_1 = require("@codemirror/view");
+const constants_1 = require("../constants");
+const commands_1 = require("./commands");
+const plugin_1 = require("./plugin");
+var toolbar_1 = require("./toolbar");
+Object.defineProperty(exports, "mGptToolbarItem", { enumerable: true, get: function () { return toolbar_1.mGptToolbarItem; } });
+var commands_2 = require("./commands");
+Object.defineProperty(exports, "showMarkupGpt", { enumerable: true, get: function () { return commands_2.showMarkupGpt; } });
+Object.defineProperty(exports, "hideMarkupGpt", { enumerable: true, get: function () { return commands_2.hideMarkupGpt; } });
+function mGptExtension(props) {
+    return [
+        (0, plugin_1.mGptPlugin)(props).extension,
+        view_1.keymap.of([
+            {
+                key: constants_1.gptHotKeys.openGptKey,
+                run: commands_1.runMarkupGpt,
+            },
+        ]),
+    ];
+}
+exports.mGptExtension = mGptExtension;

package/build/cjs/extensions/additional/GPT/MarkupGpt/plugin.d.ts

@@ -0,0 +1,23 @@
+import { GptWidgetOptions } from '../../..';
+import { type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '../../../../cm/view';
+import { CommonAnswer } from '../ErrorScreen/types';
+export declare function mGptPlugin<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown>(gptProps: GptWidgetOptions<AnswerData, PromptData>): ViewPlugin<{
+    readonly _view: EditorView;
+    readonly _renderItem: import("../../..").RendererItem;
+    _anchor: Element | null;
+    decos: DecorationSet;
+    disablePromptPresets: boolean;
+    markup: string | null;
+    selectedPosition: {
+        from: number;
+        to: number;
+    };
+    update(update: ViewUpdate): void;
+    docViewUpdate(): void;
+    destroy(): void;
+    renderPopup(): JSX.Element | null;
+    _getDecorationText(update: ViewUpdate, from: number, to: number): string;
+    _clearSelectedText(): void;
+    _setSelectedText(str: string): void;
+    _onApplyResult(changedMarkup: string): void;
+}>;

package/build/cjs/extensions/additional/GPT/MarkupGpt/plugin.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mGptPlugin = void 0;
+const view_1 = require("@codemirror/view");
+const view_2 = require("../../../../cm/view");
+const markup_1 = require("../../../../markup");
+const constants_1 = require("../constants");
+const utils_1 = require("../utils");
+const commands_1 = require("./commands");
+const effects_1 = require("./effects");
+const popup_1 = require("./popup");
+class SpanWidget extends view_1.WidgetType {
+    constructor(className, textContent) {
+        super();
+        this.className = '';
+        this.textContent = '';
+        this.className = className;
+        this.textContent = textContent;
+    }
+    toDOM() {
+        const spanElem = document.createElement('span');
+        spanElem.className = this.className;
+        spanElem.textContent = this.textContent;
+        return spanElem;
+    }
+}
+function mGptPlugin(gptProps) {
+    return view_2.ViewPlugin.fromClass(class {
+        constructor(view) {
+            this._anchor = null;
+            this.decos = view_2.Decoration.none;
+            this.disablePromptPresets = true;
+            this.markup = null;
+            this.selectedPosition = {
+                from: 0,
+                to: 0,
+            };
+            this._view = view;
+            this._renderItem = view.state
+                .facet(markup_1.ReactRendererFacet)
+                .createItem('gpt-in-markup-mode', () => this.renderPopup());
+        }
+        update(update) {
+            if (update.docChanged || update.selectionSet) {
+                this.decos = view_2.Decoration.none;
+                return;
+            }
+            this.decos = this.decos.map(update.changes);
+            const { from, to } = update.state.selection.main;
+            this.selectedPosition.from = from;
+            this.selectedPosition.to = to;
+            for (const tr of update.transactions) {
+                for (const eff of tr.effects) {
+                    if (eff.is(effects_1.ShowMarkupGptEffect)) {
+                        this._setSelectedText(this._getDecorationText(update, from, to));
+                        if (from === to) {
+                            this.disablePromptPresets = true;
+                            if ((0, utils_1.isEmptyGptPrompts)(gptProps, true))
+                                return;
+                            const decorationWidget = view_2.Decoration.widget({
+                                widget: new SpanWidget(constants_1.WIDGET_DECO_CLASS_NAME, ' '),
+                            });
+                            this.decos = view_2.Decoration.set([decorationWidget.range(from)]);
+                            return;
+                        }
+                        this.disablePromptPresets = false;
+                        if ((0, utils_1.isEmptyGptPrompts)(gptProps, false))
+                            return;
+                        this.decos = view_2.Decoration.set([
+                            {
+                                from,
+                                to,
+                                value: view_2.Decoration.mark({ class: constants_1.WIDGET_DECO_CLASS_NAME }),
+                            },
+                        ]);
+                    }
+                    if (eff.is(effects_1.HideMarkupGptEffect)) {
+                        this.decos = view_2.Decoration.none;
+                    }
+                }
+            }
+        }
+        docViewUpdate() {
+            this._anchor = this._view.dom
+                .getElementsByClassName(constants_1.WIDGET_DECO_CLASS_NAME)
+                .item(0);
+            this._renderItem.rerender();
+        }
+        destroy() {
+            this._clearSelectedText();
+            this._renderItem.remove();
+        }
+        renderPopup() {
+            if (!this._anchor || this.markup === null) {
+                return null;
+            }
+            return (0, popup_1.renderPopup)(this._anchor, Object.assign(Object.assign({}, gptProps), { disablePromptPresets: this.disablePromptPresets, onClose: () => (0, commands_1.hideMarkupGpt)(this._view), markup: this.markup, onApplyResult: (changedMarkup) => this._onApplyResult(changedMarkup) }));
+        }
+        _getDecorationText(update, from, to) {
+            return update.state.doc.sliceString(from, to);
+        }
+        _clearSelectedText() {
+            this.markup = null;
+        }
+        _setSelectedText(str) {
+            this.markup = str;
+        }
+        _onApplyResult(changedMarkup) {
+            const { from, to } = this.selectedPosition;
+            const changes = [{ from: from, to: to, insert: changedMarkup }];
+            const transaction = this._view.state.update({
+                changes: changes,
+                effects: [effects_1.HideMarkupGptEffect.of(null)],
+            });
+            this._view.dispatch(transaction);
+        }
+    }, {
+        decorations: (value) => value.decos,
+    });
+}
+exports.mGptPlugin = mGptPlugin;

package/build/cjs/extensions/additional/GPT/MarkupGpt/popup.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PopupProps } from '@gravity-ui/uikit';
+import { CommonAnswer } from '../ErrorScreen/types';
+import { GptDialogProps } from '../GptDialog/GptDialog';
+declare type Props<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown> = {
+    onClose: () => void;
+    markup: string;
+    onConfirmOk?: () => void;
+    onConfirmCancel?: () => void;
+} & GptDialogProps<AnswerData, PromptData> & Pick<PopupProps, 'anchorRef' | 'container'>;
+export declare function renderPopup<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown>(anchor: HTMLElement, props: Props<AnswerData, PromptData>): JSX.Element;
+export {};

package/build/cjs/extensions/additional/GPT/MarkupGpt/popup.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const GptDialog_1 = require("../GptDialog/GptDialog");
+const view_1 = require("../gptExtension/view");
+function renderPopup(anchor, props) {
+    const handleUpdate = (result) => { var _a; return (_a = props.onUpdate) === null || _a === void 0 ? void 0 : _a.call(props, result); };
+    return (react_1.default.createElement(uikit_1.Popup, { className: (0, view_1.cnGptPopup)(), contentClassName: (0, view_1.cnGptPopup)('content'), open: true, anchorRef: { current: anchor }, onOutsideClick: props.onClose, focusTrap: true, strategy: "absolute", onEscapeKeyDown: props.onClose },
+        react_1.default.createElement(GptDialog_1.GptDialog, { markup: props.markup, answerRender: props.answerRender, promptPresets: props.promptPresets, disablePromptPresets: props.disablePromptPresets, customPromptPlaceholder: props.customPromptPlaceholder, disabledPromptPlaceholder: props.disabledPromptPlaceholder, onApplyResult: props.onApplyResult, onCustomPromptApply: props.onCustomPromptApply, onPromptPresetClick: props.onPromptPresetClick, onTryAgain: props.onTryAgain, onLike: props.onLike, onDislike: props.onDislike, onClose: props.onClose, onUpdate: handleUpdate, gptAlertProps: props.gptAlertProps })));
+}
+exports.renderPopup = renderPopup;

package/build/cjs/extensions/additional/GPT/MarkupGpt/toolbar.d.ts

@@ -0,0 +1,2 @@
+import { MToolbarSingleItemData } from '../../../../bundle/config/markup';
+export declare const mGptToolbarItem: MToolbarSingleItemData;

package/build/cjs/extensions/additional/GPT/MarkupGpt/toolbar.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mGptToolbarItem = void 0;
+const extension_1 = require("../../../../i18n/gpt/extension");
+const icons_1 = require("../../../../icons");
+const toolbar_1 = require("../../../../toolbar");
+const constants_1 = require("../constants");
+const commands_1 = require("./commands");
+exports.mGptToolbarItem = {
+    id: 'gpt',
+    type: toolbar_1.ToolbarDataType.SingleButton,
+    hotkey: constants_1.gptHotKeys.openGptKeyTooltip,
+    title: () => `${(0, extension_1.i18n)('help-with-text')}`,
+    icon: { data: icons_1.GPTIcon },
+    exec: (e) => (0, commands_1.showMarkupGpt)(e.cm),
+    isActive: () => false,
+    isEnable: () => true,
+};

package/build/cjs/extensions/additional/GPT/PresetList/PresetList.d.ts

@@ -0,0 +1,9 @@
+import { CommonAnswer } from '../ErrorScreen/types';
+import type { GptDialogProps } from '../GptDialog/GptDialog';
+export declare type PresetListProps<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown> = {
+    disablePromptPresets: GptDialogProps<AnswerData, PromptData>['disablePromptPresets'];
+    promptPresets: GptDialogProps<AnswerData, PromptData>['promptPresets'];
+    onPresetClick: (data?: PromptData) => void;
+};
+export declare const cnGptDialogPresetList: import("@bem-react/classname").ClassNameFormatter;
+export declare const PresetList: <AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown>({ disablePromptPresets, promptPresets, onPresetClick, }: PresetListProps<AnswerData, PromptData>) => JSX.Element;

package/build/cjs/extensions/{yfm → additional}/GPT/PresetList/PresetList.js

@@ -10,7 +10,7 @@ const constants_1 = require("../constants");
 const useGptHotKeys_1 = require("../hooks/useGptHotKeys");
 const usePresetList_1 = require("../hooks/usePresetList");
 exports.cnGptDialogPresetList = (0, classname_1.cn)('gpt-dialog-preset-list');
-const PresetItem = ({ preset, onPresetClick, disablePromptPresets, hotKey }) => {
+const PresetItem = ({ preset, onPresetClick, disablePromptPresets, hotKey, }) => {
     (0, useGptHotKeys_1.useGptHotKeys)(hotKey, () => {
         onPresetClick(preset.data);
     }, { enableOnFormTags: true, enableOnContentEditable: true });

package/build/{esm/extensions/yfm → cjs/extensions/additional}/GPT/gptExtension/gptExtension.d.ts

@@ -1,9 +1,9 @@
-import { Action, ExtensionWithOptions } from 'src/core';
+import { Action, ExtensionBuilder } from '../../../../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>;
+export declare const gptExtension: <AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown>(builder: ExtensionBuilder, options: GptWidgetOptions<AnswerData, PromptData>) => void;
 declare global {
     namespace WysiwygEditor {
         interface Actions {

package/build/cjs/extensions/{yfm → additional}/GPT/gptExtension/view.d.ts

@@ -12,7 +12,7 @@ export declare type GptWidgetDecoViewParams<AnswerData extends CommonAnswer = Co
     onApplyResult?: GptDialogProps['onApplyResult'];
     gptPopupContainer?: PopupProps['container'];
 };
-export declare class GptWidgetDecoView implements Required<PluginView> {
+export declare class GptWidgetDecoView<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown> implements Required<PluginView> {
     private readonly _view;
     private readonly _renderer;
     private _decoElem;
@@ -20,7 +20,7 @@ export declare class GptWidgetDecoView implements Required<PluginView> {
     private _serializer;
     private _parser;
     private _confirmOpen;
-    constructor(view: EditorView, params: GptWidgetDecoViewParams);
+    constructor(view: EditorView, params: GptWidgetDecoViewParams<AnswerData, PromptData>);
     update(view: EditorView, prevState: EditorState): void;
     destroy(): void;
     private _resetState;

package/build/cjs/extensions/{yfm → additional}/GPT/hooks/useGpt.d.ts

@@ -15,7 +15,7 @@ export declare const useGpt: <AnswerData extends CommonAnswer = CommonAnswer, Pr
     handleCustomPromptUpdate: import("react").Dispatch<import("react").SetStateAction<string>>;
     handleCustomPromptKeyPress: import("react").KeyboardEventHandler<HTMLInputElement>;
     handleCustomPromptApply: () => Promise<void>;
-    handlePresetClick: (data: PromptData) => void;
+    handlePresetClick: (data?: PromptData | undefined) => void;
     handleTryAgain: () => Promise<void>;
     handleFreshStart: () => void;
     handleApplyResult: () => void;

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

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

package/build/cjs/extensions/{yfm → additional}/GPT/hooks/usePresetList.js

@@ -4,7 +4,7 @@ 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 usePresetList = ({ promptPresets, onPresetClick, }) => {
     const presetsContainerRef = (0, react_1.useRef)(null);
     const { visibleItems, hiddenItems, measured } = (0, useOverflowingHorizontalItems_1.useOverflowingHorizontalItems)({
         containerRef: presetsContainerRef,

package/build/cjs/extensions/{yfm → additional}/GPT/index.d.ts

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

package/build/cjs/extensions/{yfm → additional}/GPT/index.js

@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./toolbar"), exports);
 tslib_1.__exportStar(require("./gptExtension/gptExtension"), exports);
+tslib_1.__exportStar(require("./MarkupGpt"), exports);

package/build/{esm/extensions/yfm → cjs/extensions/additional}/GPT/plugin.d.ts

@@ -1,5 +1,6 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { DecorationSet } from 'prosemirror-view';
+import { CommonAnswer } from './ErrorScreen/types';
 import type { GptWidgetDecoViewParams } from './gptExtension/view';
 export declare type GptWidgetMeta = {
     action: 'show';
@@ -10,4 +11,4 @@ export declare type GptWidgetMeta = {
 };
 declare const key: PluginKey<DecorationSet>;
 export { key as pluginKey };
-export declare const gptWidgetPlugin: (params: GptWidgetDecoViewParams) => Plugin;
+export declare const gptWidgetPlugin: <AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown>(params: GptWidgetDecoViewParams<AnswerData, PromptData>) => Plugin;

package/build/cjs/extensions/{yfm → additional}/GPT/plugin.js

@@ -5,6 +5,7 @@ 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 utils_1 = require("./utils");
 const key = new prosemirror_state_1.PluginKey('gpt-widget');
 exports.pluginKey = key;
 const gptWidgetPlugin = (params) => {
@@ -15,18 +16,23 @@ const gptWidgetPlugin = (params) => {
             apply: (tr, decos) => {
                 const meta = tr.getMeta(key);
                 const paramsGpt = params;
+                paramsGpt.disablePromptPresets = false;
                 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;
+                        if ((0, utils_1.isEmptyGptPrompts)(paramsGpt, true))
+                            return prosemirror_view_1.DecorationSet.empty;
                         return prosemirror_view_1.DecorationSet.create(tr.doc, [
                             prosemirror_view_1.Decoration.widget(meta.from, spanElem, {
                                 [constants_1.WIDGET_DECO_SPEC_FLAG]: true,
                             }),
                         ]);
                     }
+                    if ((0, utils_1.isEmptyGptPrompts)(paramsGpt, false))
+                        return prosemirror_view_1.DecorationSet.empty;
                     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 }),
                     ]);

package/build/cjs/extensions/{yfm → additional}/GPT/utils.d.ts

@@ -1,5 +1,7 @@
 import type React from 'react';
+import { CommonAnswer } from './ErrorScreen/types';
 import { GptDialogProps } from './GptDialog/GptDialog';
+import { GptWidgetOptions } from './gptExtension/gptExtension';
 declare type CombinedKeyboardEvent = KeyboardEvent | React.KeyboardEvent;
 export declare function getAlertGptInfo(gptAlert: GptDialogProps['gptAlertProps']): {
     alertMessage: string;
@@ -10,4 +12,5 @@ export declare function getDisableReplaceButtonText(disablePromptPresets?: boole
 export declare function getInputPlaceHolder(disablePromptPresets?: boolean, disabledPromptPlaceholder?: string, customPromptPlaceholder?: string): string | undefined;
 export declare const isEnter: (event: CombinedKeyboardEvent) => boolean;
 export declare function focusWithoutScroll(element?: HTMLElement | null): void;
+export declare function isEmptyGptPrompts<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown>(gptWidgetOptions: GptWidgetOptions<AnswerData, PromptData>, disablePromptPresets: boolean): boolean;
 export {};

package/build/cjs/extensions/{yfm → additional}/GPT/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.focusWithoutScroll = exports.isEnter = exports.getInputPlaceHolder = exports.getDisableReplaceButtonText = exports.getAlertGptInfo = void 0;
+exports.isEmptyGptPrompts = exports.focusWithoutScroll = exports.isEnter = exports.getInputPlaceHolder = exports.getDisableReplaceButtonText = exports.getAlertGptInfo = void 0;
 const dialog_1 = require("../../../i18n/gpt/dialog");
 function getAlertGptInfo(gptAlert) {
     return {
@@ -29,3 +29,14 @@ function focusWithoutScroll(element) {
     window.scrollTo(x, y);
 }
 exports.focusWithoutScroll = focusWithoutScroll;
+function isEmptyGptPrompts(gptWidgetOptions, disablePromptPresets) {
+    var _a;
+    if (disablePromptPresets && !gptWidgetOptions.onCustomPromptApply)
+        return true;
+    if (!disablePromptPresets &&
+        !((_a = gptWidgetOptions.promptPresets) === null || _a === void 0 ? void 0 : _a.length) &&
+        !gptWidgetOptions.onCustomPromptApply)
+        return true;
+    return false;
+}
+exports.isEmptyGptPrompts = isEmptyGptPrompts;

package/build/cjs/extensions/additional/index.d.ts

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

package/build/cjs/extensions/additional/index.js

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