@gravity-ui/markdown-editor 13.17.1 → 13.18.0

package/build/esm/extensions/yfm/GPT/GptDialog/GptDialog.js

@@ -0,0 +1,98 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { ArrowRight, ArrowRotateLeft, ThumbsDown, ThumbsUp } from '@gravity-ui/icons';
+import { ActionTooltip, Alert, Button, Icon, TextInput } from '@gravity-ui/uikit';
+import { cn } from '../../../../classname';
+import { i18n } from '../../../../i18n/gpt/dialog';
+import gptIcon from '../../../../icons/GPT';
+import { useAutoFocus } from '../../../../react-utils/useAutoFocus';
+import { ErrorScreen } from '../ErrorScreen/ErrorScreen';
+import { IconRefuge } from '../IconRefuge/IconRefuge';
+import { PresetList } from '../PresetList/PresetList';
+import { gptHotKeys } from '../constants';
+import { useGpt } from '../hooks/useGpt';
+import { useGptHotKeys } from '../hooks/useGptHotKeys';
+import { getAlertGptInfo, getDisableReplaceButtonText, getInputPlaceHolder } from '../utils';
+import { LoadingScreen } from './LoadingScreen/LoadingScreen';
+import './GptDialog.css';
+export const cnGptDialog = cn('gpt-dialog');
+export const GptDialog = ({ markup, answerRender, promptPresets, disablePromptPresets, customPromptPlaceholder, disabledPromptPlaceholder, onCustomPromptApply, onPromptPresetClick, onTryAgain, onApplyResult, onClose, onLike, onDislike, onUpdate, gptAlertProps, }) => {
+    const { answer, customPrompt, loading, mode, feedbackType, feedbackTypeLoading, handleLike, handleDislike, handleCustomPromptUpdate, handleCustomPromptKeyPress, handleCustomPromptApply, handlePresetClick, handleTryAgain, handleFreshStart, handleApplyResult, showAnswer, showError, showAnswerActions, showTryAgainButton, } = useGpt({
+        markup,
+        promptPresets,
+        onLike,
+        onDislike,
+        onCustomPromptApply,
+        onPromptPresetClick,
+        onTryAgain,
+        onApplyResult,
+        onUpdate,
+    });
+    const gptAlert = gptAlertProps;
+    const customPromptContainerRef = useRef(null);
+    const [showedGptAlert, setShowedGptAlert] = useState(gptAlert === null || gptAlert === void 0 ? void 0 : gptAlert.showedGptAlert);
+    const { alertMessage, alertTheme, alertClassName } = getAlertGptInfo(gptAlert);
+    const onCloseAlert = useCallback(() => {
+        var _a;
+        if (gptAlert) {
+            gptAlert.showedGptAlert = false;
+        }
+        (_a = gptAlert === null || gptAlert === void 0 ? void 0 : gptAlert.onCloseGptAlert) === null || _a === void 0 ? void 0 : _a.call(gptAlert);
+        setShowedGptAlert(false);
+    }, [gptAlert]);
+    useAutoFocus(customPromptContainerRef, [showAnswer]);
+    useGptHotKeys(gptHotKeys.tryAgainGpt, handleTryAgain);
+    useGptHotKeys(gptHotKeys.freshStartGpt, handleFreshStart);
+    useGptHotKeys(gptHotKeys.applyResultGpt, handleApplyResult);
+    const replaceButtonText = getDisableReplaceButtonText(disablePromptPresets);
+    const inputPlaceholderText = getInputPlaceHolder(disablePromptPresets, disabledPromptPlaceholder, customPromptPlaceholder);
+    const tryAgainButton = (React.createElement(ActionTooltip, { hotkey: gptHotKeys.tryAgainGpt, title: i18n('try-again') },
+        React.createElement(Button, { className: cnGptDialog('try-again-button'), view: "normal", size: "m", onClick: handleTryAgain },
+            React.createElement(Icon, { data: ArrowRotateLeft, size: 16 }),
+            i18n('try-again'))));
+    let content = null;
+    if (loading) {
+        content = React.createElement(LoadingScreen, null);
+    }
+    else if (showError) {
+        content = React.createElement(ErrorScreen, { onRetry: handleTryAgain, onStartAgain: handleFreshStart });
+    }
+    else {
+        content = (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: cnGptDialog('header') },
+                React.createElement("div", { className: cnGptDialog('header-top') },
+                    React.createElement(IconRefuge, { containerClassName: cnGptDialog('gpt-icon'), data: gptIcon, refugeSize: 28, size: 16 }),
+                    (mode === 'only-custom' || mode === 'custom-and-presets') &&
+                        (showAnswer ? (React.createElement("span", { className: cnGptDialog('answer-title') }, i18n('answer-title'))) : (React.createElement("div", { className: cnGptDialog('custom-prompt') },
+                            React.createElement(TextInput, { controlRef: customPromptContainerRef, view: "clear", size: "m", className: cnGptDialog('custom-prompt-input'), placeholder: inputPlaceholderText, onKeyPress: handleCustomPromptKeyPress, onUpdate: handleCustomPromptUpdate }),
+                            React.createElement(Button, { className: cnGptDialog('custom-prompt-ask-button'), view: "normal", size: "s", disabled: !customPrompt, onClick: handleCustomPromptApply },
+                                React.createElement(Icon, { data: ArrowRight, size: 16 }))))),
+                    mode === 'only-presets' && (React.createElement("div", { className: cnGptDialog('alone-presets') },
+                        React.createElement("span", { className: cnGptDialog('alone-presets-text') }, i18n('only-presets-title'))))),
+                (mode === 'custom-and-presets' || mode === 'only-presets') &&
+                    ((showTryAgainButton && (React.createElement("div", { className: cnGptDialog('header-bottom') },
+                        tryAgainButton,
+                        React.createElement(ActionTooltip, { title: i18n('fresh-start-button'), hotkey: gptHotKeys.freshStartGpt },
+                            React.createElement(Button, { className: cnGptDialog('back-to-start'), view: "normal", size: "m", onClick: handleFreshStart }, i18n('fresh-start-button')))))) ||
+                        (!disablePromptPresets && (React.createElement("div", { className: cnGptDialog('header-bottom') },
+                            React.createElement(PresetList, { disablePromptPresets: disablePromptPresets, promptPresets: promptPresets, onPresetClick: handlePresetClick })))) ||
+                        (disablePromptPresets && showedGptAlert && (React.createElement(Alert, { theme: alertTheme, message: alertMessage, align: "center", className: cnGptDialog('description-alert', alertClassName), onClose: onCloseAlert }))))),
+            showAnswer && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: cnGptDialog('body') },
+                    React.createElement("div", { className: cnGptDialog('answer') }, answerRender(answer))),
+                React.createElement("div", { className: cnGptDialog('footer') },
+                    showAnswerActions && (React.createElement("div", { className: cnGptDialog('answer-actions') },
+                        React.createElement(Button, { className: cnGptDialog('like-button'), view: "normal", size: "m", onClick: handleLike, selected: feedbackType === 'like', loading: feedbackTypeLoading === 'like' },
+                            React.createElement(Icon, { data: ThumbsUp, size: 16 })),
+                        React.createElement(Button, { className: cnGptDialog('dislike-button'), view: "normal", size: "m", onClick: handleDislike, selected: feedbackType === 'dislike', loading: feedbackTypeLoading === 'dislike' },
+                            React.createElement(Icon, { data: ThumbsDown, size: 16 })),
+                        feedbackType && (React.createElement("span", { className: cnGptDialog('feedback-message') }, i18n('feedback-message'))))),
+                    React.createElement(ActionTooltip, { title: i18n('close-button'), hotkey: gptHotKeys.closeGpt },
+                        React.createElement(Button, { className: cnGptDialog('close-button'), view: "flat", size: "m", onClick: onClose }, i18n('close-button'))),
+                    React.createElement(ActionTooltip, { title: replaceButtonText, hotkey: gptHotKeys.applyResultGpt },
+                        React.createElement(Button, { className: cnGptDialog('apply-button'), view: "action", size: "m", onClick: handleApplyResult }, replaceButtonText)))))));
+    }
+    return React.createElement("div", { className: cnGptDialog() },
+        " ",
+        content,
+        " ");
+};

package/build/esm/extensions/yfm/GPT/GptDialog/LoadingScreen/LoadingScreen.css

@@ -0,0 +1,22 @@
+.g-md-gpt-dialog-loading-screen__header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.g-md-gpt-dialog-loading-screen__icon {
+  margin-right: 4px;
+}
+.g-md-gpt-dialog-loading-screen__text {
+  margin-right: 8px;
+  font-size: var(--g-text-body-2-font-size);
+  font-weight: 500;
+}
+.g-md-gpt-dialog-loading-screen__skeleton-small-button {
+  width: 90px;
+  height: 28px;
+  margin-right: 8px;
+}
+.g-md-gpt-dialog-loading-screen__skeleton-medium-button {
+  width: 120px;
+  height: 28px;
+}

package/build/esm/extensions/yfm/GPT/GptDialog/LoadingScreen/LoadingScreen.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import './LoadingScreen.css';
+export declare const cnGptDialogLoadingScreen: import("@bem-react/classname").ClassNameFormatter;
+export declare const LoadingScreen: FC;

package/build/esm/extensions/yfm/GPT/GptDialog/LoadingScreen/LoadingScreen.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { cn } from '@bem-react/classname';
+import { Skeleton } from '@gravity-ui/uikit';
+import { i18n } from '../../../../../i18n/gpt/loading';
+import GPTLoading from '../../../../../icons/GPTLoading';
+import { IconRefuge } from '../../IconRefuge/IconRefuge';
+import './LoadingScreen.css';
+export const cnGptDialogLoadingScreen = cn('gpt-dialog-loading-screen');
+export const LoadingScreen = () => {
+    return (React.createElement("div", { className: cnGptDialogLoadingScreen() },
+        React.createElement("div", { className: cnGptDialogLoadingScreen('header') },
+            React.createElement(IconRefuge, { containerClassName: cnGptDialogLoadingScreen('icon'), data: GPTLoading, refugeSize: 28, size: 20 }),
+            React.createElement("span", { className: cnGptDialogLoadingScreen('text') }, i18n('loading-text'))),
+        React.createElement("div", { className: cnGptDialogLoadingScreen('skeleton') },
+            React.createElement(Skeleton, { className: cnGptDialogLoadingScreen('skeleton-small-button') }),
+            React.createElement(Skeleton, { className: cnGptDialogLoadingScreen('skeleton-medium-button') }))));
+};

package/build/esm/extensions/yfm/GPT/IconRefuge/IconRefuge.classname.d.ts

@@ -0,0 +1 @@
+export declare const cnIconRefuge: import("@bem-react/classname").ClassNameFormatter;

package/build/esm/extensions/yfm/GPT/IconRefuge/IconRefuge.classname.js

@@ -0,0 +1,2 @@
+import { cn } from '@bem-react/classname';
+export const cnIconRefuge = cn('icon-refuge');

package/build/esm/extensions/yfm/GPT/IconRefuge/IconRefuge.css

@@ -0,0 +1,8 @@
+.icon-refuge {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+.icon-refuge_inline {
+  display: inline-flex;
+}

package/build/esm/extensions/yfm/GPT/IconRefuge/IconRefuge.d.ts

@@ -0,0 +1,15 @@
+import type { FC } from 'react';
+import type { IconRefugeProps } from './IconRefuge.types';
+import './IconRefuge.css';
+/**
+ * Creates a div wrapper above the icon, which sets the min-width and min-height
+ * equal to its refugeSize prop, puts the original icon in the middle and
+ * proxies the rest of the propses to it.
+ *
+ * The component is made in order to add margins to icons that have
+ * margins are indented, but their svg exactly wrap around the edges of the image
+ *
+ * It seems that all icons will be square, if not, then you can simply add
+ * refugeWidth and refugeHeight
+ */
+export declare const IconRefuge: FC<IconRefugeProps>;

package/build/esm/extensions/yfm/GPT/IconRefuge/IconRefuge.js

@@ -0,0 +1,25 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { cnIconRefuge } from './IconRefuge.classname';
+import './IconRefuge.css';
+/**
+ * Creates a div wrapper above the icon, which sets the min-width and min-height
+ * equal to its refugeSize prop, puts the original icon in the middle and
+ * proxies the rest of the propses to it.
+ *
+ * The component is made in order to add margins to icons that have
+ * margins are indented, but their svg exactly wrap around the edges of the image
+ *
+ * It seems that all icons will be square, if not, then you can simply add
+ * refugeWidth and refugeHeight
+ */
+export const IconRefuge = (_a) => {
+    var { refugeSize, containerClassName, containerStyle, widthOnly, inlineIcon, title, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["refugeSize", "containerClassName", "containerStyle", "widthOnly", "inlineIcon", "title", 'aria-label']);
+    if (props.size === refugeSize && !title && !ariaLabel && !containerStyle) {
+        return React.createElement(Icon, Object.assign({}, props));
+    }
+    return (React.createElement("div", { className: cnIconRefuge({ inline: inlineIcon }, containerClassName), title: title, "aria-label": ariaLabel, style: Object.assign({ minWidth: refugeSize, minHeight: widthOnly ? undefined : refugeSize }, containerStyle) },
+        React.createElement(Icon, Object.assign({ size: refugeSize }, props))));
+};
+IconRefuge.displayName = 'Icon';

package/build/esm/extensions/yfm/GPT/IconRefuge/index.d.ts

@@ -0,0 +1,2 @@
+export { IconRefuge } from './IconRefuge';
+export type { IconRefugeProps } from './IconRefuge.types';

package/build/esm/extensions/yfm/GPT/IconRefuge/index.js

@@ -0,0 +1 @@
+export { IconRefuge } from './IconRefuge';

package/build/esm/extensions/yfm/GPT/PresetList/PresetList.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import type { GptDialogProps } from '../GptDialog/GptDialog';
+import './Presetlist.css';
+export declare type PresetListProps<PromptData extends unknown = unknown> = {
+    disablePromptPresets: GptDialogProps['disablePromptPresets'];
+    promptPresets: GptDialogProps['promptPresets'];
+    onPresetClick: (data: PromptData) => void;
+};
+export declare const cnGptDialogPresetList: import("@bem-react/classname").ClassNameFormatter;
+export declare const PresetList: FC<PresetListProps>;

package/build/esm/extensions/yfm/GPT/PresetList/PresetList.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ActionTooltip, Button, DropdownMenu } from '@gravity-ui/uikit';
+import { cn } from '../../../../classname';
+import { i18n } from '../../../../i18n/gpt/dialog';
+import { gptHotKeys } from '../constants';
+import { useGptHotKeys } from '../hooks/useGptHotKeys';
+import { usePresetList } from '../hooks/usePresetList';
+import './Presetlist.css';
+export const cnGptDialogPresetList = cn('gpt-dialog-preset-list');
+const PresetItem = ({ preset, onPresetClick, disablePromptPresets, hotKey }) => {
+    useGptHotKeys(hotKey, () => {
+        onPresetClick(preset.data);
+    }, { enableOnFormTags: true });
+    return (React.createElement(ActionTooltip, { title: preset.display, hotkey: hotKey },
+        React.createElement(Button, { className: cnGptDialogPresetList('preset'), view: "normal", size: "m", disabled: disablePromptPresets, onClick: () => onPresetClick(preset.data) }, preset.display)));
+};
+export const PresetList = ({ disablePromptPresets, promptPresets, onPresetClick, }) => {
+    const { presetsContainerRef, visiblePresets, hiddenPresets, showMoreButton, measured } = usePresetList({
+        promptPresets,
+        onPresetClick,
+    });
+    return (React.createElement("div", { className: cnGptDialogPresetList({ measured }), ref: presetsContainerRef },
+        visiblePresets.map((preset, index) => (React.createElement(PresetItem, { preset: preset, key: preset.display, hotKey: preset.hotKey || gptHotKeys.presetsKey(String(index + 1)), disablePromptPresets: disablePromptPresets, onPresetClick: onPresetClick }))),
+        showMoreButton && (React.createElement(DropdownMenu, { switcherWrapperClassName: cnGptDialogPresetList('more-button-wrapper'), switcher: React.createElement(Button, { className: cnGptDialogPresetList('more-button'), view: "normal", size: "m" }, i18n('more')), items: hiddenPresets }))));
+};

package/build/esm/extensions/yfm/GPT/PresetList/Presetlist.css

@@ -0,0 +1,6 @@
+.g-md-gpt-dialog-preset-list__preset + .g-md-gpt-dialog-preset-list__preset {
+  margin-left: var(--g-spacing-2);
+}
+.g-md-gpt-dialog-preset-list__more-button-wrapper {
+  margin-left: var(--g-spacing-2);
+}

package/build/esm/extensions/yfm/GPT/actions.d.ts

@@ -0,0 +1,2 @@
+import type { ActionSpec, ExtensionDeps } from 'src/core';
+export declare const showGptWidget: (deps: ExtensionDeps) => ActionSpec;

package/build/esm/extensions/yfm/GPT/actions.js

@@ -0,0 +1,10 @@
+import { runGpt } from './commands';
+export const showGptWidget = (_deps) => ({
+    isActive() {
+        return false;
+    },
+    isEnable() {
+        return true;
+    },
+    run: runGpt,
+});

package/build/esm/extensions/yfm/GPT/commands.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'prosemirror-state';
+export declare const runGpt: Command;

package/build/esm/extensions/yfm/GPT/commands.js

@@ -0,0 +1,9 @@
+import { TextSelection } from 'prosemirror-state';
+import { pluginKey } from './plugin';
+export const runGpt = (state, dispatch) => {
+    const { selection: sel } = state;
+    const meta = { action: 'show', from: sel.from, to: sel.to };
+    const tr = state.tr.setMeta(pluginKey, meta);
+    dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(TextSelection.create(tr.doc, sel.to)));
+    return true;
+};

package/build/esm/extensions/yfm/GPT/constants.d.ts

@@ -0,0 +1,13 @@
+import type { PopupProps } from '@gravity-ui/uikit/build/esm/components/Popup/Popup';
+export declare const WIDGET_DECO_CLASS_NAME = "g-md-gpt-widget-deco";
+export declare const WIDGET_DECO_SPEC_FLAG = "gpt_widget_deco";
+export declare const gptPopupPlacement: PopupProps['placement'];
+export declare const gptHotKeys: {
+    openGptKey: string;
+    openGptKeyTooltip: string;
+    presetsKey: (key: string) => string;
+    tryAgainGpt: string;
+    freshStartGpt: string;
+    applyResultGpt: string;
+    closeGpt: string;
+};

package/build/esm/extensions/yfm/GPT/constants.js

@@ -0,0 +1,12 @@
+export const WIDGET_DECO_CLASS_NAME = 'g-md-gpt-widget-deco';
+export const WIDGET_DECO_SPEC_FLAG = 'gpt_widget_deco';
+export const gptPopupPlacement = ['bottom-start', 'top-start'];
+export const gptHotKeys = {
+    openGptKey: 'Mod-h',
+    openGptKeyTooltip: 'Mod+h',
+    presetsKey: (key) => `Control+${key}`,
+    tryAgainGpt: 'Control+t',
+    freshStartGpt: 'Control+r',
+    applyResultGpt: 'Enter',
+    closeGpt: 'Escape',
+};

package/build/esm/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/esm/extensions/yfm/GPT/gptExtension/gptExtension.js

@@ -0,0 +1,14 @@
+import { showGptWidget } from '../actions';
+import { runGpt } from '../commands';
+import { gptHotKeys } from '../constants';
+import { gptWidgetPlugin } from '../plugin';
+export const gptActionName = 'addGptWidget';
+export const gptExtension = (builder, options) => {
+    builder.addAction(gptActionName, showGptWidget);
+    builder.addPlugin(({ serializer, markupParser }) => {
+        return gptWidgetPlugin(Object.assign(Object.assign({}, options), { serializer, parser: markupParser }));
+    });
+    builder.addKeymap(() => ({
+        [gptHotKeys.openGptKey]: runGpt,
+    }), builder.Priority.VeryLow);
+};

package/build/esm/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/esm/extensions/yfm/GPT/gptExtension/view.d.ts

@@ -0,0 +1,37 @@
+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';
+import './view.css';
+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/esm/extensions/yfm/GPT/gptExtension/view.js

@@ -0,0 +1,167 @@
+import React, { useCallback, useEffect } from 'react';
+import { Popup } from '@gravity-ui/uikit';
+import { Slice } from 'prosemirror-model';
+import { TextSelection } from 'prosemirror-state';
+import { useMount } from 'react-use';
+import { cn } from '../../../../classname';
+import { getReactRendererFromState } from '../../../behavior';
+import { GptDialog } from '../GptDialog/GptDialog';
+import { WIDGET_DECO_CLASS_NAME, WIDGET_DECO_SPEC_FLAG, gptPopupPlacement } from '../constants';
+import { pluginKey } from '../plugin';
+import './view.css';
+export const cnGptPopup = cn('gpt-popup');
+export 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(pluginKey, meta);
+            tr.replace(from, to, new Slice(answerNode.content, 1, 1));
+            tr.setSelection(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(TextSelection.create(tr.doc, deco.from, deco.to));
+            tr.setMeta(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 = 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(pluginKey, meta));
+            this._view.focus();
+            return;
+        }
+        const decoElements = Array.from(view.dom.querySelectorAll(`.${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.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[WIDGET_DECO_SPEC_FLAG])[0];
+    }
+    _getPluginState() {
+        return pluginKey.getState(this._view.state);
+    }
+}
+function Widget({ markup, anchorRef, answerRender, promptPresets, disablePromptPresets, customPromptPlaceholder, disabledPromptPlaceholder, onCustomPromptApply, onApplyResult, onPromptPresetClick, onTryAgain, onLike, onDislike, onClose, onUpdate, container, gptAlertProps, }) {
+    useEffect(() => {
+        // rerender the popup
+        window.dispatchEvent(new CustomEvent('scroll'));
+    }, [anchorRef]);
+    useMount(() => {
+        if ((anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && 'scrollIntoView' in anchorRef.current) {
+            anchorRef.current.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            });
+        }
+    });
+    const handleUpdate = useCallback((result) => {
+        onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(result);
+    }, [onUpdate]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Popup, { className: cnGptPopup(), contentClassName: cnGptPopup('content'), open: true, anchorRef: anchorRef, placement: gptPopupPlacement, onOutsideClick: onClose, focusTrap: true, strategy: "absolute", container: container, onEscapeKeyDown: onClose },
+            React.createElement(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/esm/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 {};