@gravity-ui/markdown-editor 13.17.0 → 13.18.0

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

@@ -0,0 +1,144 @@
+import { useCallback, useState } from 'react';
+import { isEnter } from '../utils';
+export const useGpt = ({ markup, promptPresets, onCustomPromptApply, onPromptPresetClick, onTryAgain, onLike, onDislike, onApplyResult, onUpdate, }) => {
+    const [answer, setAnswer] = useState();
+    const [lastRequestData, setLastRequestData] = useState();
+    const [customPrompt, setCustomPrompt] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    const [feedbackType, setFeedbackType] = useState(undefined);
+    const [feedbackTypeLoading, setFeedbackTypeLoading] = useState(undefined);
+    const makeRequest = 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 = 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 = 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 = useCallback(async () => {
+        if (!customPrompt) {
+            return;
+        }
+        const gptRequestData = {
+            markup,
+            customPrompt,
+        };
+        await makeRequest(onCustomPromptApply, gptRequestData);
+    }, [customPrompt, makeRequest, markup, onCustomPromptApply]);
+    const handleCustomPromptKeyPress = useCallback(async (event) => {
+        if (!isEnter(event)) {
+            return;
+        }
+        await handleCustomPromptApply();
+    }, [handleCustomPromptApply]);
+    const handlePresetClick = useCallback(async (data) => {
+        const gptRequestData = {
+            markup,
+            promptData: data,
+        };
+        await makeRequest(onPromptPresetClick, gptRequestData);
+    }, [makeRequest, markup, onPromptPresetClick]);
+    const handleTryAgain = useCallback(async () => {
+        if (!lastRequestData) {
+            return;
+        }
+        await makeRequest(onTryAgain, lastRequestData);
+    }, [lastRequestData, makeRequest, onTryAgain]);
+    const handleApplyResult = 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 = 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,
+    };
+};

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

@@ -0,0 +1,4 @@
+import { useHotkeys } from 'react-hotkeys-hook';
+export function useGptHotKeys(key, callback, options = {}, dependencies) {
+    useHotkeys(key, callback, Object.assign({ preventDefault: true }, options), dependencies);
+}

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

@@ -0,0 +1,65 @@
+import { useLayoutEffect, useMemo, useState } from 'react';
+import debounceFn from 'lodash/debounce';
+export function useOverflowingHorizontalItems({ containerRef, items, itemSelector, moreButtonSelector, marginBetweenItems = 0, }) {
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [itemWidths, setItemWidths] = useState([]);
+    const [moreButtonWidth, setMoreButtonWidth] = useState(0);
+    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]);
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const updateContainerSize = (entries) => {
+            if (entries.length > 0) {
+                setContainerWidth(entries[0].contentRect.width);
+            }
+        };
+        const updateContainerSizeDebounced = debounceFn(updateContainerSize, 100);
+        const containerResizeObserver = new ResizeObserver(updateContainerSizeDebounced);
+        containerResizeObserver.observe(container);
+        return () => containerResizeObserver.unobserve(container);
+    }, [containerRef]);
+    const isMeasured = itemWidths.length > 0;
+    const { visibleItems, hiddenItems } = 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 };
+}

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

@@ -0,0 +1,32 @@
+import { useMemo, useRef } from 'react';
+import { cnGptDialogPresetList } from '../PresetList/PresetList';
+import { useOverflowingHorizontalItems } from './useOverflowingHorizontalItems';
+export const usePresetList = ({ promptPresets, onPresetClick }) => {
+    const presetsContainerRef = useRef(null);
+    const { visibleItems, hiddenItems, measured } = useOverflowingHorizontalItems({
+        containerRef: presetsContainerRef,
+        items: promptPresets,
+        itemSelector: `.${cnGptDialogPresetList('preset')}`,
+        moreButtonSelector: `.${cnGptDialogPresetList('more-button-wrapper')}`,
+        marginBetweenItems: 8,
+    });
+    const hiddenPresets = 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,
+    };
+};

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { WIDGET_DECO_CLASS_NAME, WIDGET_DECO_SPEC_FLAG } from './constants';
+import { GptWidgetDecoView } from './gptExtension/view';
+const key = new PluginKey('gpt-widget');
+export { key as pluginKey };
+export const gptWidgetPlugin = (params) => {
+    return new Plugin({
+        key,
+        state: {
+            init: () => 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 = WIDGET_DECO_CLASS_NAME;
+                        spanElem.textContent = ' ';
+                        paramsGpt.disablePromptPresets = true;
+                        return DecorationSet.create(tr.doc, [
+                            Decoration.widget(meta.from, spanElem, {
+                                [WIDGET_DECO_SPEC_FLAG]: true,
+                            }),
+                        ]);
+                    }
+                    return DecorationSet.create(tr.doc, [
+                        Decoration.inline(meta.from, meta.to, { nodeName: 'span', class: WIDGET_DECO_CLASS_NAME }, { [WIDGET_DECO_SPEC_FLAG]: true }),
+                    ]);
+                }
+                if ((meta === null || meta === void 0 ? void 0 : meta.action) === 'hide') {
+                    paramsGpt.disablePromptPresets = false;
+                    return DecorationSet.empty;
+                }
+                return decos.map(tr.mapping, tr.doc);
+            },
+        },
+        props: {
+            decorations: (state) => key.getState(state),
+        },
+        view: (view) => new GptWidgetDecoView(view, params),
+    });
+};

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

@@ -0,0 +1,3 @@
+import { type WToolbarSingleItemData } from '../../../toolbar';
+export declare const cnGptButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const wGptToolbarItem: WToolbarSingleItemData;

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

@@ -0,0 +1,18 @@
+import { cn } from '@bem-react/classname';
+import { i18n } from '../../../i18n/gpt/extension';
+import gptIcon from '../../../icons/GPT';
+import { ToolbarDataType } from '../../../toolbar';
+import { gptHotKeys } from './constants';
+export const cnGptButton = cn('gpt-button');
+export const wGptToolbarItem = {
+    type: ToolbarDataType.SingleButton,
+    id: 'gpt',
+    title: () => `${i18n('help-with-text')}`,
+    hotkey: gptHotKeys.openGptKeyTooltip,
+    icon: { data: gptIcon },
+    disabledPopoverVisible: false,
+    exec: (actionsStorage) => actionsStorage.actions.addGptWidget.run({}),
+    isActive: (actionsStorage) => actionsStorage.actions.addGptWidget.isActive(),
+    isEnable: (actionsStorage) => actionsStorage.actions.addGptWidget.isEnable(),
+    className: cnGptButton(),
+};

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

@@ -0,0 +1,13 @@
+import type React from 'react';
+import { GptDialogProps } from './GptDialog/GptDialog';
+declare type CombinedKeyboardEvent = KeyboardEvent | React.KeyboardEvent;
+export declare function getAlertGptInfo(gptAlert: GptDialogProps['gptAlertProps']): {
+    alertMessage: string;
+    alertTheme: import("@gravity-ui/uikit/build/esm/components/Alert/types").AlertTheme;
+    alertClassName: string | undefined;
+};
+export declare function getDisableReplaceButtonText(disablePromptPresets?: boolean): string;
+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 {};

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

@@ -0,0 +1,23 @@
+import { i18n } from '../../../i18n/gpt/dialog';
+export function getAlertGptInfo(gptAlert) {
+    return {
+        alertMessage: (gptAlert === null || gptAlert === void 0 ? void 0 : gptAlert.message) || i18n('alert-gpt-presets-info'),
+        alertTheme: (gptAlert === null || gptAlert === void 0 ? void 0 : gptAlert.theme) || 'info',
+        alertClassName: gptAlert === null || gptAlert === void 0 ? void 0 : gptAlert.className,
+    };
+}
+export function getDisableReplaceButtonText(disablePromptPresets) {
+    return disablePromptPresets ? i18n(`replace-disabled`) : i18n(`replace`);
+}
+export function getInputPlaceHolder(disablePromptPresets, disabledPromptPlaceholder, customPromptPlaceholder) {
+    return disablePromptPresets ? disabledPromptPlaceholder : customPromptPlaceholder;
+}
+export const isEnter = (event) => event.code === 'Enter' || event.code === 'NumpadEnter';
+export function focusWithoutScroll(element) {
+    const x = window.scrollX;
+    const y = window.scrollY;
+    element === null || element === void 0 ? void 0 : element.focus({
+        preventScroll: true,
+    });
+    window.scrollTo(x, y);
+}

package/build/esm/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.css

@@ -0,0 +1,6 @@
+.g-md-img-settings-button {
+  position: absolute;
+  z-index: 2;
+  top: 3px;
+  right: 3px;
+}

package/build/esm/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.d.ts

@@ -1,10 +1,16 @@
 import React, { RefObject } from 'react';
 import { Node } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
+import './ImgSettingsButton.css';
 export declare const ImgSettingsButton: React.FC<{
     node: Node;
     view: EditorView;
     getPos: () => number | undefined;
-    nodeRef: RefObject<HTMLElement>;
     updateAttributes: (o: object) => void;
+    nodeRef: RefObject<HTMLDivElement>;
+    visible: boolean;
+    toggleEdit: () => void;
+    edit: boolean;
+    unsetEdit: () => void;
+    onDelete: () => void;
 }>;

package/build/esm/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.js

@@ -1,48 +1,33 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import { Ellipsis } from '@gravity-ui/icons';
 import { Button, Icon, Menu, Popup } from '@gravity-ui/uikit';
+import { cn } from '../../../../../classname';
 import { i18n as i18nCommon } from '../../../../../i18n/common';
 import { useBooleanState } from '../../../../../react-utils/hooks';
-import { useNodeEditing } from '../../../../../react-utils/useNodeEditing';
-import { useNodeHovered } from '../../../../../react-utils/useNodeHovered';
-import { removeNode } from '../../../../../utils/remove-node';
-import { imageRendererKey } from '../../const';
 import { ImageForm } from './ImageForm';
-export const ImgSettingsButton = function ({ node, view, getPos, nodeRef, updateAttributes }) {
+import './ImgSettingsButton.css';
+const b = cn('img-settings-button');
+export const ImgSettingsButton = function ({ node, view, updateAttributes, visible, edit, toggleEdit, nodeRef, unsetEdit, onDelete, }) {
     const [popupOpen, setPopupOpen, unsetPopupOpen] = useBooleanState(false);
     const placement = ['bottom-end', 'bottom-start'];
     const buttonRef = useRef(null);
-    const isNodeHovered = useNodeHovered(nodeRef);
-    const isButtonHovered = useNodeHovered(buttonRef);
-    const [edit, setEditing, unsetEdit, toggleEdit] = useNodeEditing({ nodeRef, view });
-    const visible = (isNodeHovered || isButtonHovered || popupOpen) && !edit;
-    useEffect(() => {
-        var _a;
-        if ((_a = imageRendererKey.getState(view.state)) === null || _a === void 0 ? void 0 : _a.linkAdded) {
-            setEditing();
-        }
-    }, [view, setEditing]);
-    if (edit)
-        return (React.createElement(ImageForm, { node: node, view: view, updateAttributes: updateAttributes, dom: nodeRef, unsetEdit: unsetEdit }));
-    return visible ? (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: setPopupOpen, ref: buttonRef, size: "s", view: 'raised', style: { position: 'absolute', right: '3px', top: '3px' } },
-            React.createElement(Icon, { data: Ellipsis })),
-        React.createElement(Popup, { open: popupOpen, anchorRef: buttonRef, onClose: unsetPopupOpen, placement: placement },
+    const handleEdit = () => {
+        toggleEdit();
+        unsetPopupOpen();
+    };
+    const isVisibleImageForm = edit;
+    const isVisibleEditButton = !edit && (visible || popupOpen);
+    const isVisiblePopup = !edit && popupOpen;
+    const handleEditButtonClick = (event) => {
+        event.preventDefault();
+        setPopupOpen();
+    };
+    return (React.createElement(React.Fragment, null,
+        isVisibleImageForm && (React.createElement(ImageForm, { node: node, view: view, updateAttributes: updateAttributes, dom: nodeRef, unsetEdit: unsetEdit })),
+        isVisibleEditButton && (React.createElement(Button, { onClick: handleEditButtonClick, ref: buttonRef, size: "s", view: 'raised', className: b() },
+            React.createElement(Icon, { data: Ellipsis }))),
+        React.createElement(Popup, { open: isVisiblePopup, anchorRef: buttonRef, onClose: unsetPopupOpen, placement: placement },
             React.createElement(Menu, null,
-                React.createElement(Menu.Item, { onClick: () => {
-                        toggleEdit();
-                        unsetPopupOpen();
-                    } }, i18nCommon('edit')),
-                React.createElement(Menu.Item, { onClick: () => {
-                        const pos = getPos();
-                        if (pos === undefined)
-                            return;
-                        removeNode({
-                            node,
-                            pos,
-                            tr: view.state.tr,
-                            dispatch: view.dispatch,
-                        });
-                        view.focus();
-                    } }, i18nCommon('delete')))))) : null;
+                React.createElement(Menu.Item, { onClick: handleEdit }, i18nCommon('edit')),
+                React.createElement(Menu.Item, { onClick: onDelete }, i18nCommon('delete'))))));
 };

package/build/esm/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/NodeView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ReactNodeViewProps } from '../../../../../react-utils/react-node-view';
+import { ReactNodeViewProps } from '../../../../../react-utils';
 import './ImgNodeView.css';
 export declare const cnImgSizeNodeView: import("@bem-react/classname").ClassNameFormatter;
 export declare const ImageNodeView: React.FC<ReactNodeViewProps>;

package/build/esm/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/NodeView.js

@@ -1,11 +1,69 @@
-import React, { useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { cn } from '../../../../../classname';
+import { useNodeEditing, useNodeHovered } from '../../../../../react-utils';
+import { useNodeResizing } from '../../../../../react-utils/useNodeResizing';
+import { removeNode } from '../../../../../utils';
+import { Resizable } from '../../../../behavior/Resizable/Resizable';
+import { ImgSizeAttr } from '../../ImgSizeSpecs';
+import { imageRendererKey } from '../../const';
 import { ImgSettingsButton } from './ImgSettingsButton';
 import './ImgNodeView.css';
 export const cnImgSizeNodeView = cn('img-size-node-view');
 export const ImageNodeView = ({ node, view, getPos, updateAttributes, }) => {
-    const ref = useRef(null);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(ImgSettingsButton, { node: node, view: view, getPos: getPos, updateAttributes: updateAttributes, nodeRef: ref }),
-        React.createElement("img", Object.assign({}, node.attrs, { ref: ref }))));
+    const imageContainerRef = useRef(null);
+    const imageRef = useRef(null);
+    const alt = node.attrs[ImgSizeAttr.Alt] || '';
+    const initialHeight = node.attrs[ImgSizeAttr.Height];
+    const initialWidth = node.attrs[ImgSizeAttr.Width];
+    const src = node.attrs[ImgSizeAttr.Src] || '';
+    const title = node.attrs[ImgSizeAttr.Title] || '';
+    const isNodeHovered = useNodeHovered(imageContainerRef);
+    const [edit, setEditing, unsetEdit, toggleEdit] = useNodeEditing({
+        nodeRef: imageContainerRef,
+        view,
+    });
+    const handleResize = useCallback(({ width, height }) => {
+        updateAttributes({
+            width: width === undefined ? undefined : String(Math.round(width)),
+            height: height === undefined ? undefined : String(Math.round(height)),
+            name: title,
+            alt,
+        });
+    }, [alt, title, updateAttributes]);
+    const { state, startResizing } = useNodeResizing({
+        width: initialWidth,
+        height: initialHeight,
+        ref: imageRef,
+        onResize: handleResize,
+    });
+    const style = {
+        width: state.width ? `${state.width}px` : '',
+        height: state.height ? `${state.height}px` : '',
+        transition: 'width 0.15s ease-out, height 0.15s ease-out',
+    };
+    const handleDelete = useCallback(() => {
+        const pos = getPos();
+        if (pos === undefined)
+            return;
+        removeNode({
+            node,
+            pos,
+            tr: view.state.tr,
+            dispatch: view.dispatch,
+        });
+        view.focus();
+    }, [getPos, node, view]);
+    const createHandleResize = (direction) => (event) => {
+        startResizing(event, direction);
+    };
+    useEffect(() => {
+        var _a;
+        if ((_a = imageRendererKey.getState(view.state)) === null || _a === void 0 ? void 0 : _a.linkAdded) {
+            setEditing();
+        }
+    }, [view, setEditing]);
+    return (React.createElement("div", { ref: imageContainerRef },
+        React.createElement(Resizable, { hover: isNodeHovered, resizing: state.resizing, onResizeLeft: createHandleResize('left'), onResizeRight: createHandleResize('right') },
+            React.createElement(ImgSettingsButton, { node: node, view: view, getPos: getPos, updateAttributes: updateAttributes, visible: isNodeHovered && !edit && !state.resizing, edit: edit, toggleEdit: toggleEdit, nodeRef: imageRef, onDelete: handleDelete, unsetEdit: unsetEdit }),
+            React.createElement("img", { ref: imageRef, src: src, alt: alt, style: style }))));
 };

package/build/esm/extensions/yfm/Mermaid/MermaidNodeView/MermaidView.js

@@ -3,8 +3,9 @@ import { Ellipsis as DotsIcon } from '@gravity-ui/icons';
 import { Button, Icon, Loader, Menu, Popup } from '@gravity-ui/uikit';
 import { cn } from '../../../../classname';
 import { TextAreaFixed as TextArea } from '../../../../forms/TextInput';
-import { useBooleanState } from '../../../../react-utils/hooks';
-import { removeNode } from '../../../../utils/remove-node';
+import { i18n } from '../../../../i18n/common';
+import { useBooleanState } from '../../../../react-utils';
+import { removeNode } from '../../../../utils';
 import { MermaidConsts } from '../MermaidSpecs/const';
 export const cnMermaid = cn('Mermaid');
 export const cnDiagramHelper = cn('MermaidHelper');
@@ -85,7 +86,7 @@ export const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }
                     React.createElement(Menu.Item, { onClick: () => {
                             toggleEditing();
                             toggleMenuOpen();
-                        } }, "Edit"),
+                        } }, i18n('edit')),
                     React.createElement(Menu.Item, { onClick: () => {
                             const pos = getPos();
                             if (pos === undefined)
@@ -96,5 +97,5 @@ export const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }
                                 tr: view.state.tr,
                                 dispatch: view.dispatch,
                             });
-                        } }, "Remove"))))));
+                        } }, i18n('remove')))))));
 };

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/actions.d.ts

@@ -1 +1 @@
-export declare const controlActions: Record<"deleteTable" | "addRow" | "deleteRow" | "addColumn" | "deleteColumn" | "appendColumn" | "appendRow", import("../../../../../core").ActionSpec>;
+export declare const controlActions: Record<"deleteTable" | "deleteRow" | "deleteColumn" | "appendColumn" | "appendRow", import("../../../../../core").ActionSpec>;