@gravity-ui/markdown-editor 13.16.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/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js

@@ -22,6 +22,16 @@ function generateID() {
 exports.generateID = 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 = (0, react_1.useRef)(null);
@@ -30,11 +40,6 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
     const resizeConfig = (0, react_1.useRef)({});
     const [height, setHeight] = (0, react_1.useState)('100%');
     (0, react_1.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]);
@@ -103,18 +108,35 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
             styles.current = newStyles;
         }
     };
-    (0, react_1.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);
+                }
+            });
+        }
+    };
+    (0, react_1.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]);
     (0, react_1.useEffect)(() => {
-        var _a, _b;
         if (ref.current) {
-            const resizeObserver = new window.ResizeObserver((0, debounce_1.default)(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((0, debounce_1.default)(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/cjs/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/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js

@@ -10,14 +10,14 @@ Object.defineProperty(exports, "yfmHtmlBlockNodeName", { enumerable: true, get:
 const YfmHtmlBlockSpecsExtension = (builder, _a) => {
     var { nodeView } = _a, options = tslib_1.__rest(_a, ["nodeView"]);
     builder
-        .configureMd((md) => md.use((0, html_extension_1.transform)(Object.assign({ bundle: false }, options)), {}))
+        .configureMd((md) => md.use((0, html_extension_1.transform)(Object.assign({ bundle: false, embeddingMode: 'srcdoc' }, options)), {}))
         .addNode(const_1.YfmHtmlBlockConsts.NodeName, () => ({
         fromMd: {
             tokenSpec: {
                 name: const_1.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/cjs/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/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.16.0' !== 'undefined' ? '13.16.0' : 'unknown';
+exports.VERSION = typeof '13.17.1' !== 'undefined' ? '13.17.1' : 'unknown';