@gravity-ui/markdown-editor 13.16.0 → 13.17.1

package/build/cjs/view/hocs/withYfmHtml/index.js

@@ -9,13 +9,13 @@ function withYfmHtmlBlock(opts) {
     return (Component) => (0, react_1.forwardRef)(function WithYfmHtml(props, ref) {
         const { meta, html, yfmHtmlBlockConfig } = props;
         (0, useYfmHtmlBlockRuntime_1.useYfmHtmlBlockRuntime)(meta, opts.runtime);
-        const yfmHtmlBlock = (0, react_2.useDiplodocHtml)();
+        const yfmHtmlBlock = (0, react_2.useDiplodocEmbeddedContentController)();
         (0, react_1.useEffect)(() => {
             if (yfmHtmlBlock) {
                 if (yfmHtmlBlockConfig) {
                     yfmHtmlBlock.setConfig(yfmHtmlBlockConfig);
                 }
-                yfmHtmlBlock.reinitialize();
+                yfmHtmlBlock.initialize();
             }
         }, [yfmHtmlBlock, html, yfmHtmlBlockConfig]);
         return react_1.default.createElement(Component, Object.assign({}, props, { ref: ref }));

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/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js

@@ -18,6 +18,16 @@ export function generateID() {
 }
 const DEFAULT_PADDING = 20;
 const DEFAULT_DELAY = 100;
+const createLinkCLickHandler = (value, document) => (event) => {
+    event.preventDefault();
+    const targetId = value.getAttribute('href');
+    if (targetId) {
+        const targetElement = document.querySelector(targetId);
+        if (targetElement) {
+            targetElement.scrollIntoView({ behavior: 'smooth' });
+        }
+    }
+};
 const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
     var _a, _b, _c, _d, _e, _f;
     const ref = useRef(null);
@@ -26,11 +36,6 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
     const resizeConfig = useRef({});
     const [height, setHeight] = useState('100%');
     useEffect(() => {
-        var _a, _b;
-        resizeConfig.current = {
-            padding: (_a = config === null || config === void 0 ? void 0 : config.resizePadding) !== null && _a !== void 0 ? _a : DEFAULT_PADDING,
-            delay: (_b = config === null || config === void 0 ? void 0 : config.resizeDelay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY,
-        };
         setStyles(config === null || config === void 0 ? void 0 : config.styles);
         setClassNames(config === null || config === void 0 ? void 0 : config.classNames);
     }, [config, (_c = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document) === null || _c === void 0 ? void 0 : _c.body]);
@@ -99,18 +104,35 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
             styles.current = newStyles;
         }
     };
-    useEffect(() => {
+    // finds all relative links (href^="#") and changes their click behavior
+    const createAnchorLinkHandlers = (type) => () => {
         var _a;
+        const document = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow.document;
+        if (document) {
+            document.querySelectorAll('a[href^="#"]').forEach((value) => {
+                const handler = createLinkCLickHandler(value, document);
+                if (type === 'add') {
+                    value.addEventListener('click', handler);
+                }
+                else {
+                    value.removeEventListener('click', handler);
+                }
+            });
+        }
+    };
+    useEffect(() => {
+        var _a, _b;
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('load', handleLoadIFrame);
+        (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener('load', createAnchorLinkHandlers('add'));
         return () => {
-            var _a;
+            var _a, _b;
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', handleLoadIFrame);
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('load', createAnchorLinkHandlers('remove'));
         };
     }, [html]);
     useEffect(() => {
-        var _a, _b;
         if (ref.current) {
-            const resizeObserver = new window.ResizeObserver(debounce(handleResizeIFrame, (_b = (_a = resizeConfig.current) === null || _a === void 0 ? void 0 : _a.delay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY));
+            const resizeObserver = new window.ResizeObserver(debounce(handleResizeIFrame, DEFAULT_DELAY));
             resizeObserver.observe(ref.current);
         }
     }, [(_f = (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.contentWindow) === null || _e === void 0 ? void 0 : _e.document) === null || _f === void 0 ? void 0 : _f.body]);

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.d.ts

@@ -1,7 +1,7 @@
 import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
 import type { ExtensionNodeSpec } from '../../../../core';
 export { yfmHtmlBlockNodeName } from './const';
-export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
+export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
     nodeView?: ExtensionNodeSpec['view'];
 }
 export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js

@@ -6,14 +6,14 @@ export { yfmHtmlBlockNodeName } from './const';
 const YfmHtmlBlockSpecsExtension = (builder, _a) => {
     var { nodeView } = _a, options = __rest(_a, ["nodeView"]);
     builder
-        .configureMd((md) => md.use(transform(Object.assign({ bundle: false }, options)), {}))
+        .configureMd((md) => md.use(transform(Object.assign({ bundle: false, embeddingMode: 'srcdoc' }, options)), {}))
         .addNode(YfmHtmlBlockConsts.NodeName, () => ({
         fromMd: {
             tokenSpec: {
                 name: YfmHtmlBlockConsts.NodeName,
                 type: 'node',
                 noCloseToken: true,
-                getAttrs: (token) => { var _a; return Object.fromEntries((_a = token.attrs) !== null && _a !== void 0 ? _a : []); },
+                getAttrs: ({ content }) => ({ srcdoc: content }),
             },
         },
         spec: {

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

@@ -2,7 +2,7 @@ import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
 import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
 import { Action, ExtensionAuto } from '../../../core';
 import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
-export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
+export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
 }
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;

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.16.0' !== 'undefined' ? '13.16.0' : 'unknown';
+export const VERSION = typeof '13.17.1' !== 'undefined' ? '13.17.1' : 'unknown';