@gravity-ui/markdown-editor 13.17.0 → 13.17.1

package/build/cjs/extensions/behavior/Resizable/Resizable.css

@@ -0,0 +1,38 @@
+body :has(.g-md-resizable_resizing) {
+  cursor: col-resize;
+}
+
+.g-md-resizable {
+  position: relative;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer-wrapper, .g-md-resizable_hover .g-md-resizable__resizer-wrapper {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 100%;
+  cursor: col-resize;
+  pointer-events: auto;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer-wrapper_left, .g-md-resizable_hover .g-md-resizable__resizer-wrapper_left {
+  left: 0;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer-wrapper_right, .g-md-resizable_hover .g-md-resizable__resizer-wrapper_right {
+  right: 0;
+}
+.g-md-resizable__resizer {
+  opacity: 0;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer, .g-md-resizable_hover .g-md-resizable__resizer {
+  box-sizing: content-box;
+  width: 4px;
+  height: 50px;
+  max-height: 50%;
+  opacity: 1;
+  border-radius: 6px;
+  background: rgba(127, 127, 127, 0.8);
+  transition: opacity 300ms ease-in 0s;
+}

package/build/cjs/extensions/behavior/Resizable/Resizable.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ResizableProps {
+    children: React.ReactNode;
+    onResizeLeft: (event: React.MouseEvent<HTMLElement>) => void;
+    onResizeRight: (event: React.MouseEvent<HTMLElement>) => void;
+    hover?: boolean;
+    resizing?: boolean;
+}
+export declare const Resizable: React.FC<ResizableProps>;

package/build/cjs/extensions/behavior/Resizable/Resizable.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Resizable = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classname_1 = require("../../../classname");
+const b = (0, classname_1.cn)('resizable');
+const Resizer = ({ onMouseDown, direction }) => (react_1.default.createElement("div", { className: b('resizer-wrapper', { [direction]: true }), role: "button", tabIndex: 0, onMouseDown: onMouseDown },
+    react_1.default.createElement("div", { className: b('resizer') })));
+const Resizable = ({ hover, resizing, children, onResizeLeft, onResizeRight, }) => (react_1.default.createElement("div", { className: b({ hover, resizing }) },
+    children,
+    react_1.default.createElement(Resizer, { onMouseDown: onResizeLeft, direction: "left" }),
+    react_1.default.createElement(Resizer, { onMouseDown: onResizeRight, direction: "right" })));
+exports.Resizable = Resizable;

package/build/cjs/extensions/markdown/Table/plugins/TableCellContextPlugin/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableCellContextPlugin = void 0;
 const prosemirror_state_1 = require("prosemirror-state");
 const core_1 = require("../../../../../core");
+const yfm_table_1 = require("../../../../../i18n/yfm-table");
 const yfm_1 = require("../../../../yfm");
 const TableSpecs_1 = require("../../TableSpecs");
 const innerActions_1 = require("../../actions/innerActions");
@@ -17,18 +18,27 @@ const tableCellContextPlugin = () => new prosemirror_state_1.Plugin({
             } }))(view);
         return new view_1.TableCellContextView(view, [
             [
-                { action: actions.setCellLeftAlign, text: 'left' },
-                { action: actions.setCellCenterAlign, text: 'center' },
-                { action: actions.setCellRightAlign, text: 'right' },
+                {
+                    action: actions.setCellLeftAlign,
+                    text: (0, yfm_table_1.i18n)('table.menu.cell.align.left'),
+                },
+                {
+                    action: actions.setCellCenterAlign,
+                    text: (0, yfm_table_1.i18n)('table.menu.cell.align.center'),
+                },
+                {
+                    action: actions.setCellRightAlign,
+                    text: (0, yfm_table_1.i18n)('table.menu.cell.align.right'),
+                },
             ],
             [
-                { action: actions.addRow, text: 'add row' },
-                { action: actions.deleteRow, text: 'del row' },
-                { action: actions.addColumn, text: 'add column' },
-                { action: actions.deleteColumn, text: 'del column' },
+                { action: actions.addRow, text: (0, yfm_table_1.i18n)('table.menu.row.add') },
+                { action: actions.deleteRow, text: (0, yfm_table_1.i18n)('table.menu.row.remove') },
+                { action: actions.addColumn, text: (0, yfm_table_1.i18n)('table.menu.column.add') },
+                { action: actions.deleteColumn, text: (0, yfm_table_1.i18n)('table.menu.column.remove') },
             ],
-            { action: actions.convert, text: 'convert to yfm table' },
-            { action: actions.deleteTable, text: 'del table' },
+            { action: actions.convert, text: (0, yfm_table_1.i18n)('table.menu.convert.yfm') },
+            { action: actions.deleteTable, text: (0, yfm_table_1.i18n)('table.menu.table.remove') },
         ], [schema.nodes[TableSpecs_1.TableNode.HeaderCell], schema.nodes[TableSpecs_1.TableNode.DataCell]]);
     },
 });

package/build/cjs/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/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.d.ts

@@ -5,6 +5,11 @@ 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/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.js

@@ -5,49 +5,33 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../../../../classname");
 const common_1 = require("../../../../../i18n/common");
 const hooks_1 = require("../../../../../react-utils/hooks");
-const useNodeEditing_1 = require("../../../../../react-utils/useNodeEditing");
-const useNodeHovered_1 = require("../../../../../react-utils/useNodeHovered");
-const remove_node_1 = require("../../../../../utils/remove-node");
-const const_1 = require("../../const");
 const ImageForm_1 = require("./ImageForm");
-const ImgSettingsButton = function ({ node, view, getPos, nodeRef, updateAttributes }) {
+const b = (0, classname_1.cn)('img-settings-button');
+const ImgSettingsButton = function ({ node, view, updateAttributes, visible, edit, toggleEdit, nodeRef, unsetEdit, onDelete, }) {
     const [popupOpen, setPopupOpen, unsetPopupOpen] = (0, hooks_1.useBooleanState)(false);
     const placement = ['bottom-end', 'bottom-start'];
     const buttonRef = (0, react_1.useRef)(null);
-    const isNodeHovered = (0, useNodeHovered_1.useNodeHovered)(nodeRef);
-    const isButtonHovered = (0, useNodeHovered_1.useNodeHovered)(buttonRef);
-    const [edit, setEditing, unsetEdit, toggleEdit] = (0, useNodeEditing_1.useNodeEditing)({ nodeRef, view });
-    const visible = (isNodeHovered || isButtonHovered || popupOpen) && !edit;
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if ((_a = const_1.imageRendererKey.getState(view.state)) === null || _a === void 0 ? void 0 : _a.linkAdded) {
-            setEditing();
-        }
-    }, [view, setEditing]);
-    if (edit)
-        return (react_1.default.createElement(ImageForm_1.ImageForm, { node: node, view: view, updateAttributes: updateAttributes, dom: nodeRef, unsetEdit: unsetEdit }));
-    return visible ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(uikit_1.Button, { onClick: setPopupOpen, ref: buttonRef, size: "s", view: 'raised', style: { position: 'absolute', right: '3px', top: '3px' } },
-            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis })),
-        react_1.default.createElement(uikit_1.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_1.default.createElement(react_1.default.Fragment, null,
+        isVisibleImageForm && (react_1.default.createElement(ImageForm_1.ImageForm, { node: node, view: view, updateAttributes: updateAttributes, dom: nodeRef, unsetEdit: unsetEdit })),
+        isVisibleEditButton && (react_1.default.createElement(uikit_1.Button, { onClick: handleEditButtonClick, ref: buttonRef, size: "s", view: 'raised', className: b() },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Ellipsis }))),
+        react_1.default.createElement(uikit_1.Popup, { open: isVisiblePopup, anchorRef: buttonRef, onClose: unsetPopupOpen, placement: placement },
             react_1.default.createElement(uikit_1.Menu, null,
-                react_1.default.createElement(uikit_1.Menu.Item, { onClick: () => {
-                        toggleEdit();
-                        unsetPopupOpen();
-                    } }, (0, common_1.i18n)('edit')),
-                react_1.default.createElement(uikit_1.Menu.Item, { onClick: () => {
-                        const pos = getPos();
-                        if (pos === undefined)
-                            return;
-                        (0, remove_node_1.removeNode)({
-                            node,
-                            pos,
-                            tr: view.state.tr,
-                            dispatch: view.dispatch,
-                        });
-                        view.focus();
-                    } }, (0, common_1.i18n)('delete')))))) : null;
+                react_1.default.createElement(uikit_1.Menu.Item, { onClick: handleEdit }, (0, common_1.i18n)('edit')),
+                react_1.default.createElement(uikit_1.Menu.Item, { onClick: onDelete }, (0, common_1.i18n)('delete'))))));
 };
 exports.ImgSettingsButton = ImgSettingsButton;

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

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

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

@@ -4,12 +4,70 @@ exports.ImageNodeView = exports.cnImgSizeNodeView = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const classname_1 = require("../../../../../classname");
+const react_utils_1 = require("../../../../../react-utils");
+const useNodeResizing_1 = require("../../../../../react-utils/useNodeResizing");
+const utils_1 = require("../../../../../utils");
+const Resizable_1 = require("../../../../behavior/Resizable/Resizable");
+const ImgSizeSpecs_1 = require("../../ImgSizeSpecs");
+const const_1 = require("../../const");
 const ImgSettingsButton_1 = require("./ImgSettingsButton");
 exports.cnImgSizeNodeView = (0, classname_1.cn)('img-size-node-view');
 const ImageNodeView = ({ node, view, getPos, updateAttributes, }) => {
-    const ref = (0, react_1.useRef)(null);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ImgSettingsButton_1.ImgSettingsButton, { node: node, view: view, getPos: getPos, updateAttributes: updateAttributes, nodeRef: ref }),
-        react_1.default.createElement("img", Object.assign({}, node.attrs, { ref: ref }))));
+    const imageContainerRef = (0, react_1.useRef)(null);
+    const imageRef = (0, react_1.useRef)(null);
+    const alt = node.attrs[ImgSizeSpecs_1.ImgSizeAttr.Alt] || '';
+    const initialHeight = node.attrs[ImgSizeSpecs_1.ImgSizeAttr.Height];
+    const initialWidth = node.attrs[ImgSizeSpecs_1.ImgSizeAttr.Width];
+    const src = node.attrs[ImgSizeSpecs_1.ImgSizeAttr.Src] || '';
+    const title = node.attrs[ImgSizeSpecs_1.ImgSizeAttr.Title] || '';
+    const isNodeHovered = (0, react_utils_1.useNodeHovered)(imageContainerRef);
+    const [edit, setEditing, unsetEdit, toggleEdit] = (0, react_utils_1.useNodeEditing)({
+        nodeRef: imageContainerRef,
+        view,
+    });
+    const handleResize = (0, react_1.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 } = (0, useNodeResizing_1.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 = (0, react_1.useCallback)(() => {
+        const pos = getPos();
+        if (pos === undefined)
+            return;
+        (0, utils_1.removeNode)({
+            node,
+            pos,
+            tr: view.state.tr,
+            dispatch: view.dispatch,
+        });
+        view.focus();
+    }, [getPos, node, view]);
+    const createHandleResize = (direction) => (event) => {
+        startResizing(event, direction);
+    };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if ((_a = const_1.imageRendererKey.getState(view.state)) === null || _a === void 0 ? void 0 : _a.linkAdded) {
+            setEditing();
+        }
+    }, [view, setEditing]);
+    return (react_1.default.createElement("div", { ref: imageContainerRef },
+        react_1.default.createElement(Resizable_1.Resizable, { hover: isNodeHovered, resizing: state.resizing, onResizeLeft: createHandleResize('left'), onResizeRight: createHandleResize('right') },
+            react_1.default.createElement(ImgSettingsButton_1.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_1.default.createElement("img", { ref: imageRef, src: src, alt: alt, style: style }))));
 };
 exports.ImageNodeView = ImageNodeView;

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

@@ -7,8 +7,9 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const classname_1 = require("../../../../classname");
 const TextInput_1 = require("../../../../forms/TextInput");
-const hooks_1 = require("../../../../react-utils/hooks");
-const remove_node_1 = require("../../../../utils/remove-node");
+const common_1 = require("../../../../i18n/common");
+const react_utils_1 = require("../../../../react-utils");
+const utils_1 = require("../../../../utils");
 const const_1 = require("../MermaidSpecs/const");
 exports.cnMermaid = (0, classname_1.cn)('Mermaid');
 exports.cnDiagramHelper = (0, classname_1.cn)('MermaidHelper');
@@ -58,8 +59,8 @@ const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance }) =>
 };
 const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }) => {
     const [mermaidInstance, setMermaidInstance] = (0, react_1.useState)(null);
-    const [editing, setEditing, unsetEditing, toggleEditing] = (0, hooks_1.useBooleanState)(Boolean(node.attrs[const_1.MermaidConsts.NodeAttrs.newCreated]));
-    const [menuOpen, , , toggleMenuOpen] = (0, hooks_1.useBooleanState)(false);
+    const [editing, setEditing, unsetEditing, toggleEditing] = (0, react_utils_1.useBooleanState)(Boolean(node.attrs[const_1.MermaidConsts.NodeAttrs.newCreated]));
+    const [menuOpen, , , toggleMenuOpen] = (0, react_utils_1.useBooleanState)(false);
     const buttonRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const waitForMermaid = () => setTimeout(() => {
@@ -88,17 +89,17 @@ const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }) => {
                     react_1.default.createElement(uikit_1.Menu.Item, { onClick: () => {
                             toggleEditing();
                             toggleMenuOpen();
-                        } }, "Edit"),
+                        } }, (0, common_1.i18n)('edit')),
                     react_1.default.createElement(uikit_1.Menu.Item, { onClick: () => {
                             const pos = getPos();
                             if (pos === undefined)
                                 return;
-                            (0, remove_node_1.removeNode)({
+                            (0, utils_1.removeNode)({
                                 node,
                                 pos,
                                 tr: view.state.tr,
                                 dispatch: view.dispatch,
                             });
-                        } }, "Remove"))))));
+                        } }, (0, common_1.i18n)('remove')))))));
 };
 exports.MermaidView = MermaidView;

package/build/cjs/i18n/yfm-table/en.json

@@ -5,5 +5,14 @@
   "row.add.before": "Add row before",
   "row.add.after": "Add row after",
   "row.remove": "Remove row",
-  "table.remove": "Remove table"
+  "table.remove": "Remove table",
+  "table.menu.cell.align.left": "Align cell content to the left",
+  "table.menu.cell.align.right": "Align cell content to the right",
+  "table.menu.cell.align.center": "Align cell content to the center",
+  "table.menu.row.add": "Add row after",
+  "table.menu.row.remove": "Remove row",
+  "table.menu.column.add": "Add column after",
+  "table.menu.column.remove": "Remove column",
+  "table.menu.convert.yfm": "Convert to YFM table",
+  "table.menu.table.remove": "Remove table"
 }

package/build/cjs/i18n/yfm-table/index.d.ts

@@ -1,4 +1,4 @@
-export declare const i18n: <G extends "column.add.before" | "column.add.after" | "column.remove" | "row.add.before" | "row.add.after" | "row.remove" | "table.remove", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "column.add.before" | "column.add.after" | "column.remove" | "row.add.before" | "row.add.after" | "row.remove" | "table.remove" | "table.menu.cell.align.left" | "table.menu.cell.align.right" | "table.menu.cell.align.center" | "table.menu.row.add" | "table.menu.row.remove" | "table.menu.column.add" | "table.menu.column.remove" | "table.menu.convert.yfm" | "table.menu.table.remove", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
     "column.add.before": string;
@@ -8,4 +8,13 @@ export declare const i18n: <G extends "column.add.before" | "column.add.after" |
     "row.add.after": string;
     "row.remove": string;
     "table.remove": string;
+    "table.menu.cell.align.left": string;
+    "table.menu.cell.align.right": string;
+    "table.menu.cell.align.center": string;
+    "table.menu.row.add": string;
+    "table.menu.row.remove": string;
+    "table.menu.column.add": string;
+    "table.menu.column.remove": string;
+    "table.menu.convert.yfm": string;
+    "table.menu.table.remove": string;
 }[G] : string;

package/build/cjs/i18n/yfm-table/ru.json

@@ -5,5 +5,14 @@
   "row.add.before": "Добавить строку до",
   "row.add.after": "Добавить строку после",
   "row.remove": "Удалить строку",
-  "table.remove": "Удалить таблицу"
+  "table.remove": "Удалить таблицу",
+  "table.menu.cell.align.left": "Выровнять контент ячейки по левому краю",
+  "table.menu.cell.align.right": "Выровнять контент ячейки по правому краю",
+  "table.menu.cell.align.center": "Выровнять контент ячейки по центру",
+  "table.menu.row.add": "Добавить строку после",
+  "table.menu.row.remove": "Удалить строку",
+  "table.menu.column.add": "Добавить столбец после",
+  "table.menu.column.remove": "Удалить столбец",
+  "table.menu.convert.yfm": "Преобразовать в таблицу YFM",
+  "table.menu.table.remove": "Удалить таблицу"
 }

package/build/cjs/react-utils/useNodeEditing.d.ts

@@ -1,6 +1,7 @@
 import { RefObject } from 'react';
 import { EditorView } from 'prosemirror-view';
-export declare const useNodeEditing: ({ nodeRef, view, }: {
+export interface UseNodeEditingArgs {
     nodeRef: RefObject<HTMLElement>;
     view: EditorView;
-}) => [boolean, () => void, () => void, () => void];
+}
+export declare const useNodeEditing: ({ nodeRef, view }: UseNodeEditingArgs) => [boolean, () => void, () => void, () => void];

package/build/cjs/react-utils/useNodeEditing.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useNodeEditing = void 0;
 const react_1 = require("react");
 const hooks_1 = require("./hooks");
-const useNodeEditing = ({ nodeRef, view, }) => {
+const useNodeEditing = ({ nodeRef, view }) => {
     const state = (0, hooks_1.useBooleanState)(false);
     const [, , unsetEdit, toggleEdit] = state;
     (0, react_1.useEffect)(() => {

package/build/cjs/react-utils/useNodeResizing.d.ts

@@ -0,0 +1,22 @@
+import React, { RefObject } from 'react';
+export declare type ResizeDirection = 'left' | 'right';
+export interface UseNodeResizingArgs {
+    width?: number;
+    height?: number;
+    onResize?: ({ width, height }: {
+        width?: number;
+        height?: number;
+    }) => void;
+    ref: RefObject<HTMLImageElement | HTMLDivElement> | null;
+    delay?: number;
+    threshold?: number;
+    minWidth?: number;
+}
+export declare const useNodeResizing: ({ width, height, onResize, ref, delay, threshold, minWidth, }: UseNodeResizingArgs) => {
+    startResizing: (event: React.MouseEvent<HTMLElement>, direction: ResizeDirection) => void;
+    state: {
+        resizing: boolean;
+        width: number | undefined;
+        height: number | undefined;
+    };
+};

package/build/cjs/react-utils/useNodeResizing.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNodeResizing = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const hooks_1 = require("./hooks");
+const RESIZE_DELAY = 50;
+const MIN_WIDTH = 40;
+const THRESHOLD = 4;
+const useNodeResizing = ({ width, height, onResize, ref, delay = RESIZE_DELAY, threshold = THRESHOLD, minWidth = MIN_WIDTH, }) => {
+    const state = (0, hooks_1.useBooleanState)(false);
+    const [resizing, , , toggleResizing] = state;
+    const [initialWidth, setInitialWidth] = (0, react_1.useState)(width);
+    const [initialHeight, setInitialHeight] = (0, react_1.useState)(height);
+    const [currentWidth, setCurrentWidth] = (0, react_1.useState)(width);
+    const [currentHeight, setCurrentHeight] = (0, react_1.useState)(height);
+    // The dimensions specified as arguments take primacy over
+    // the dimensions detected during the mouse movement.
+    (0, react_1.useEffect)(() => {
+        if (width !== initialWidth) {
+            setCurrentWidth(width);
+            setInitialWidth(width);
+        }
+        if (height !== initialHeight) {
+            setCurrentHeight(height);
+            setInitialHeight(height);
+        }
+    }, [width, height, initialWidth, initialHeight]);
+    const startResizing = (event, direction) => {
+        // prohibit the selection of text and other artifacts when resizing.
+        event.preventDefault();
+        const element = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!element) {
+            throw new Error('Reference element not found!');
+        }
+        const startX = event.pageX;
+        const startWidth = element.getBoundingClientRect().width || 0;
+        const startHeight = element.getBoundingClientRect().height || 0;
+        let animationFrameId;
+        const handleMouseMove = (0, throttle_1.default)((event) => {
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+            }
+            animationFrameId = requestAnimationFrame(() => {
+                const currentX = event.pageX;
+                const diffX = currentX - startX;
+                const newWidthByDirection = direction === 'right' ? startWidth + diffX : startWidth - diffX;
+                if (Math.abs(newWidthByDirection - startWidth) >= threshold) {
+                    const newWidth = newWidthByDirection >= minWidth ? newWidthByDirection : minWidth;
+                    const newHeight = (startHeight / startWidth) * newWidth;
+                    setCurrentWidth(newWidth);
+                    setCurrentHeight(newHeight);
+                    onResize === null || onResize === void 0 ? void 0 : onResize({
+                        width: !initialWidth && initialWidth !== 0 ? undefined : newWidth,
+                        height: !initialHeight && initialHeight !== 0 ? undefined : newHeight,
+                    });
+                }
+            });
+        }, delay);
+        const handleMouseUp = () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            toggleResizing();
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+            }
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        toggleResizing();
+    };
+    return {
+        startResizing,
+        state: {
+            resizing,
+            width: !initialWidth && initialWidth !== 0 ? undefined : currentWidth,
+            height: !initialHeight && initialHeight !== 0 ? undefined : currentHeight,
+        },
+    };
+};
+exports.useNodeResizing = useNodeResizing;

package/build/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '13.17.0' !== 'undefined' ? '13.17.0' : 'unknown';
+exports.VERSION = typeof '13.17.1' !== 'undefined' ? '13.17.1' : 'unknown';

package/build/esm/extensions/behavior/Resizable/Resizable.css

@@ -0,0 +1,38 @@
+body :has(.g-md-resizable_resizing) {
+  cursor: col-resize;
+}
+
+.g-md-resizable {
+  position: relative;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer-wrapper, .g-md-resizable_hover .g-md-resizable__resizer-wrapper {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 100%;
+  cursor: col-resize;
+  pointer-events: auto;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer-wrapper_left, .g-md-resizable_hover .g-md-resizable__resizer-wrapper_left {
+  left: 0;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer-wrapper_right, .g-md-resizable_hover .g-md-resizable__resizer-wrapper_right {
+  right: 0;
+}
+.g-md-resizable__resizer {
+  opacity: 0;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer, .g-md-resizable_hover .g-md-resizable__resizer {
+  box-sizing: content-box;
+  width: 4px;
+  height: 50px;
+  max-height: 50%;
+  opacity: 1;
+  border-radius: 6px;
+  background: rgba(127, 127, 127, 0.8);
+  transition: opacity 300ms ease-in 0s;
+}

package/build/esm/extensions/behavior/Resizable/Resizable.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Resizable.css';
+export interface ResizableProps {
+    children: React.ReactNode;
+    onResizeLeft: (event: React.MouseEvent<HTMLElement>) => void;
+    onResizeRight: (event: React.MouseEvent<HTMLElement>) => void;
+    hover?: boolean;
+    resizing?: boolean;
+}
+export declare const Resizable: React.FC<ResizableProps>;

package/build/esm/extensions/behavior/Resizable/Resizable.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { cn } from '../../../classname';
+import './Resizable.css';
+const b = cn('resizable');
+const Resizer = ({ onMouseDown, direction }) => (React.createElement("div", { className: b('resizer-wrapper', { [direction]: true }), role: "button", tabIndex: 0, onMouseDown: onMouseDown },
+    React.createElement("div", { className: b('resizer') })));
+export const Resizable = ({ hover, resizing, children, onResizeLeft, onResizeRight, }) => (React.createElement("div", { className: b({ hover, resizing }) },
+    children,
+    React.createElement(Resizer, { onMouseDown: onResizeLeft, direction: "left" }),
+    React.createElement(Resizer, { onMouseDown: onResizeRight, direction: "right" })));

package/build/esm/extensions/markdown/Table/plugins/TableCellContextPlugin/index.js

@@ -1,5 +1,6 @@
 import { Plugin } from 'prosemirror-state';
 import { bindActions } from '../../../../../core';
+import { i18n } from '../../../../../i18n/yfm-table';
 import { convertToYfmTable } from '../../../../yfm';
 import { TableNode } from '../../TableSpecs';
 import { innerActions } from '../../actions/innerActions';
@@ -14,18 +15,27 @@ export const tableCellContextPlugin = () => new Plugin({
             } }))(view);
         return new TableCellContextView(view, [
             [
-                { action: actions.setCellLeftAlign, text: 'left' },
-                { action: actions.setCellCenterAlign, text: 'center' },
-                { action: actions.setCellRightAlign, text: 'right' },
+                {
+                    action: actions.setCellLeftAlign,
+                    text: i18n('table.menu.cell.align.left'),
+                },
+                {
+                    action: actions.setCellCenterAlign,
+                    text: i18n('table.menu.cell.align.center'),
+                },
+                {
+                    action: actions.setCellRightAlign,
+                    text: i18n('table.menu.cell.align.right'),
+                },
             ],
             [
-                { action: actions.addRow, text: 'add row' },
-                { action: actions.deleteRow, text: 'del row' },
-                { action: actions.addColumn, text: 'add column' },
-                { action: actions.deleteColumn, text: 'del column' },
+                { action: actions.addRow, text: i18n('table.menu.row.add') },
+                { action: actions.deleteRow, text: i18n('table.menu.row.remove') },
+                { action: actions.addColumn, text: i18n('table.menu.column.add') },
+                { action: actions.deleteColumn, text: i18n('table.menu.column.remove') },
             ],
-            { action: actions.convert, text: 'convert to yfm table' },
-            { action: actions.deleteTable, text: 'del table' },
+            { action: actions.convert, text: i18n('table.menu.convert.yfm') },
+            { action: actions.deleteTable, text: i18n('table.menu.table.remove') },
         ], [schema.nodes[TableNode.HeaderCell], schema.nodes[TableNode.DataCell]]);
     },
 });

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/i18n/yfm-table/en.json

@@ -5,5 +5,14 @@
   "row.add.before": "Add row before",
   "row.add.after": "Add row after",
   "row.remove": "Remove row",
-  "table.remove": "Remove table"
+  "table.remove": "Remove table",
+  "table.menu.cell.align.left": "Align cell content to the left",
+  "table.menu.cell.align.right": "Align cell content to the right",
+  "table.menu.cell.align.center": "Align cell content to the center",
+  "table.menu.row.add": "Add row after",
+  "table.menu.row.remove": "Remove row",
+  "table.menu.column.add": "Add column after",
+  "table.menu.column.remove": "Remove column",
+  "table.menu.convert.yfm": "Convert to YFM table",
+  "table.menu.table.remove": "Remove table"
 }

package/build/esm/i18n/yfm-table/index.d.ts

@@ -1,4 +1,4 @@
-export declare const i18n: <G extends "column.add.before" | "column.add.after" | "column.remove" | "row.add.before" | "row.add.after" | "row.remove" | "table.remove", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "column.add.before" | "column.add.after" | "column.remove" | "row.add.before" | "row.add.after" | "row.remove" | "table.remove" | "table.menu.cell.align.left" | "table.menu.cell.align.right" | "table.menu.cell.align.center" | "table.menu.row.add" | "table.menu.row.remove" | "table.menu.column.add" | "table.menu.column.remove" | "table.menu.convert.yfm" | "table.menu.table.remove", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
     "column.add.before": string;
@@ -8,4 +8,13 @@ export declare const i18n: <G extends "column.add.before" | "column.add.after" |
     "row.add.after": string;
     "row.remove": string;
     "table.remove": string;
+    "table.menu.cell.align.left": string;
+    "table.menu.cell.align.right": string;
+    "table.menu.cell.align.center": string;
+    "table.menu.row.add": string;
+    "table.menu.row.remove": string;
+    "table.menu.column.add": string;
+    "table.menu.column.remove": string;
+    "table.menu.convert.yfm": string;
+    "table.menu.table.remove": string;
 }[G] : string;

package/build/esm/i18n/yfm-table/ru.json

@@ -5,5 +5,14 @@
   "row.add.before": "Добавить строку до",
   "row.add.after": "Добавить строку после",
   "row.remove": "Удалить строку",
-  "table.remove": "Удалить таблицу"
+  "table.remove": "Удалить таблицу",
+  "table.menu.cell.align.left": "Выровнять контент ячейки по левому краю",
+  "table.menu.cell.align.right": "Выровнять контент ячейки по правому краю",
+  "table.menu.cell.align.center": "Выровнять контент ячейки по центру",
+  "table.menu.row.add": "Добавить строку после",
+  "table.menu.row.remove": "Удалить строку",
+  "table.menu.column.add": "Добавить столбец после",
+  "table.menu.column.remove": "Удалить столбец",
+  "table.menu.convert.yfm": "Преобразовать в таблицу YFM",
+  "table.menu.table.remove": "Удалить таблицу"
 }

package/build/esm/react-utils/useNodeEditing.d.ts

@@ -1,6 +1,7 @@
 import { RefObject } from 'react';
 import { EditorView } from 'prosemirror-view';
-export declare const useNodeEditing: ({ nodeRef, view, }: {
+export interface UseNodeEditingArgs {
     nodeRef: RefObject<HTMLElement>;
     view: EditorView;
-}) => [boolean, () => void, () => void, () => void];
+}
+export declare const useNodeEditing: ({ nodeRef, view }: UseNodeEditingArgs) => [boolean, () => void, () => void, () => void];

package/build/esm/react-utils/useNodeEditing.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useBooleanState } from './hooks';
-export const useNodeEditing = ({ nodeRef, view, }) => {
+export const useNodeEditing = ({ nodeRef, view }) => {
     const state = useBooleanState(false);
     const [, , unsetEdit, toggleEdit] = state;
     useEffect(() => {

package/build/esm/react-utils/useNodeResizing.d.ts

@@ -0,0 +1,22 @@
+import React, { RefObject } from 'react';
+export declare type ResizeDirection = 'left' | 'right';
+export interface UseNodeResizingArgs {
+    width?: number;
+    height?: number;
+    onResize?: ({ width, height }: {
+        width?: number;
+        height?: number;
+    }) => void;
+    ref: RefObject<HTMLImageElement | HTMLDivElement> | null;
+    delay?: number;
+    threshold?: number;
+    minWidth?: number;
+}
+export declare const useNodeResizing: ({ width, height, onResize, ref, delay, threshold, minWidth, }: UseNodeResizingArgs) => {
+    startResizing: (event: React.MouseEvent<HTMLElement>, direction: ResizeDirection) => void;
+    state: {
+        resizing: boolean;
+        width: number | undefined;
+        height: number | undefined;
+    };
+};

package/build/esm/react-utils/useNodeResizing.js

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import throttle from 'lodash/throttle';
+import { useBooleanState } from './hooks';
+const RESIZE_DELAY = 50;
+const MIN_WIDTH = 40;
+const THRESHOLD = 4;
+export const useNodeResizing = ({ width, height, onResize, ref, delay = RESIZE_DELAY, threshold = THRESHOLD, minWidth = MIN_WIDTH, }) => {
+    const state = useBooleanState(false);
+    const [resizing, , , toggleResizing] = state;
+    const [initialWidth, setInitialWidth] = useState(width);
+    const [initialHeight, setInitialHeight] = useState(height);
+    const [currentWidth, setCurrentWidth] = useState(width);
+    const [currentHeight, setCurrentHeight] = useState(height);
+    // The dimensions specified as arguments take primacy over
+    // the dimensions detected during the mouse movement.
+    useEffect(() => {
+        if (width !== initialWidth) {
+            setCurrentWidth(width);
+            setInitialWidth(width);
+        }
+        if (height !== initialHeight) {
+            setCurrentHeight(height);
+            setInitialHeight(height);
+        }
+    }, [width, height, initialWidth, initialHeight]);
+    const startResizing = (event, direction) => {
+        // prohibit the selection of text and other artifacts when resizing.
+        event.preventDefault();
+        const element = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!element) {
+            throw new Error('Reference element not found!');
+        }
+        const startX = event.pageX;
+        const startWidth = element.getBoundingClientRect().width || 0;
+        const startHeight = element.getBoundingClientRect().height || 0;
+        let animationFrameId;
+        const handleMouseMove = throttle((event) => {
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+            }
+            animationFrameId = requestAnimationFrame(() => {
+                const currentX = event.pageX;
+                const diffX = currentX - startX;
+                const newWidthByDirection = direction === 'right' ? startWidth + diffX : startWidth - diffX;
+                if (Math.abs(newWidthByDirection - startWidth) >= threshold) {
+                    const newWidth = newWidthByDirection >= minWidth ? newWidthByDirection : minWidth;
+                    const newHeight = (startHeight / startWidth) * newWidth;
+                    setCurrentWidth(newWidth);
+                    setCurrentHeight(newHeight);
+                    onResize === null || onResize === void 0 ? void 0 : onResize({
+                        width: !initialWidth && initialWidth !== 0 ? undefined : newWidth,
+                        height: !initialHeight && initialHeight !== 0 ? undefined : newHeight,
+                    });
+                }
+            });
+        }, delay);
+        const handleMouseUp = () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            toggleResizing();
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+            }
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        toggleResizing();
+    };
+    return {
+        startResizing,
+        state: {
+            resizing,
+            width: !initialWidth && initialWidth !== 0 ? undefined : currentWidth,
+            height: !initialHeight && initialHeight !== 0 ? undefined : currentHeight,
+        },
+    };
+};

package/build/esm/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '13.17.0' !== 'undefined' ? '13.17.0' : 'unknown';
+export const VERSION = typeof '13.17.1' !== 'undefined' ? '13.17.1' : 'unknown';

package/build/styles.css

@@ -823,6 +823,44 @@ img.ProseMirror-separator {
   animation: placeholder_blink 1s;
   animation-iteration-count: infinite;
 }
+body :has(.g-md-resizable_resizing) {
+  cursor: col-resize;
+}
+
+.g-md-resizable {
+  position: relative;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer-wrapper, .g-md-resizable_hover .g-md-resizable__resizer-wrapper {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 100%;
+  cursor: col-resize;
+  pointer-events: auto;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer-wrapper_left, .g-md-resizable_hover .g-md-resizable__resizer-wrapper_left {
+  left: 0;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer-wrapper_right, .g-md-resizable_hover .g-md-resizable__resizer-wrapper_right {
+  right: 0;
+}
+.g-md-resizable__resizer {
+  opacity: 0;
+}
+.g-md-resizable_resizing .g-md-resizable__resizer, .g-md-resizable_hover .g-md-resizable__resizer {
+  box-sizing: content-box;
+  width: 4px;
+  height: 50px;
+  max-height: 50%;
+  opacity: 1;
+  border-radius: 6px;
+  background: rgba(127, 127, 127, 0.8);
+  transition: opacity 300ms ease-in 0s;
+}
 .g-md-editor.ProseMirror-focused .pm-node-selected {
   box-shadow: var(--g-color-text-info) 0 0 0 1px;
 }
@@ -1391,6 +1429,12 @@ img.ProseMirror-separator {
   position: relative;
   display: inline-block;
 }
+.g-md-img-settings-button {
+  position: absolute;
+  z-index: 2;
+  top: 3px;
+  right: 3px;
+}
 .yfm .yfm-note {
   max-width: 1296px;
   margin: 20px 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.17.0",
+  "version": "13.17.1",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -278,7 +278,7 @@
     "@diplodoc/html-extension": "2.1.0",
     "@diplodoc/latex-extension": "^1.0.3",
     "@diplodoc/mermaid-extension": "^1.0.0",
-    "@diplodoc/transform": "^4.5.0",
+    "@diplodoc/transform": ">=4.5.0 <4.19.0",
     "@gravity-ui/components": "^3.0.0",
     "@gravity-ui/uikit": "^6.11.0",
     "highlight.js": "^11.8.0",