@gravity-ui/markdown-editor 13.8.0 → 13.10.0

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/index.js

@@ -16,7 +16,7 @@ exports.checkboxInputType = (0, schema_1.nodeTypeFactory)(const_1.CheckboxNode.I
 const CheckboxSpecs = (builder, opts) => {
     const schemaSpecs = (0, schema_2.getSchemaSpecs)(opts, builder.context.get('placeholder'));
     builder
-        .configureMd((md) => (0, checkbox_1.default)(md, { idPrefix: const_1.idPrefix, divClass: (0, const_1.b)() }))
+        .configureMd((md) => md.use(checkbox_1.default, { idPrefix: const_1.idPrefix, divClass: (0, const_1.b)() }))
         .addNode(const_1.CheckboxNode.Checkbox, () => ({
         spec: schemaSpecs[const_1.CheckboxNode.Checkbox],
         toMd: serializer_1.serializerTokens[const_1.CheckboxNode.Checkbox],

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

@@ -1,8 +1,11 @@
+import { BaseTarget, StylesObject } from '@diplodoc/html-extension/plugin';
 import type { ExtensionNodeSpec } from '../../../../core';
 export { yfmHtmlBlockNodeName } from './const';
 export declare type YfmHtmlBlockSpecsOptions = {
     nodeView?: ExtensionNodeSpec['view'];
     sanitize?: (dirtyHtml: string) => string;
+    styles?: string | StylesObject;
+    baseTarget?: BaseTarget;
 };
 export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {
     readonly NodeName: "yfm_html_block";

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

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.YfmHtmlBlockSpecs = exports.yfmHtmlBlockNodeName = void 0;
+const tslib_1 = require("tslib");
 // eslint-disable-next-line import/no-extraneous-dependencies
 const html_extension_1 = require("@diplodoc/html-extension");
 const const_1 = require("./const");
 var const_2 = require("./const");
 Object.defineProperty(exports, "yfmHtmlBlockNodeName", { enumerable: true, get: function () { return const_2.yfmHtmlBlockNodeName; } });
-const YfmHtmlBlockSpecsExtension = (builder, { nodeView, sanitize }) => {
+const YfmHtmlBlockSpecsExtension = (builder, _a) => {
+    var { nodeView } = _a, options = tslib_1.__rest(_a, ["nodeView"]);
     builder
-        .configureMd((md) => md.use((0, html_extension_1.transform)({ bundle: false, sanitize }), {}))
+        .configureMd((md) => md.use((0, html_extension_1.transform)(Object.assign({ bundle: false }, options)), {}))
         .addNode(const_1.YfmHtmlBlockConsts.NodeName, () => ({
         fromMd: {
             tokenSpec: {

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

@@ -1,9 +1,12 @@
+import { BaseTarget, StylesObject } from '@diplodoc/html-extension/plugin';
 import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
 import { Action, ExtensionAuto } from '../../../core';
 import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
 export declare type YfmHtmlBlockOptions = {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
     sanitize?: (dirtyHtml: string) => string;
+    styles?: string | StylesObject;
+    baseTarget?: BaseTarget;
 };
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
 declare global {

package/build/cjs/extensions/yfm/YfmHtmlBlock/index.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.YfmHtmlBlock = void 0;
+const tslib_1 = require("tslib");
 const YfmHtmlBlockNodeView_1 = require("./YfmHtmlBlockNodeView");
 const YfmHtmlBlockSpecs_1 = require("./YfmHtmlBlockSpecs");
 const const_1 = require("./YfmHtmlBlockSpecs/const");
 const actions_1 = require("./actions");
-const YfmHtmlBlock = (builder, options) => {
-    builder.use(YfmHtmlBlockSpecs_1.YfmHtmlBlockSpecs, {
-        nodeView: YfmHtmlBlockNodeViewFactory(options),
-        sanitize: options.sanitize,
-    });
+const YfmHtmlBlock = (builder, _a) => {
+    var { useConfig: _ } = _a, options = tslib_1.__rest(_a, ["useConfig"]);
+    builder.use(YfmHtmlBlockSpecs_1.YfmHtmlBlockSpecs, Object.assign({ nodeView: YfmHtmlBlockNodeViewFactory(options) }, options));
     builder.addAction(const_1.YfmHtmlBlockAction, () => actions_1.addYfmHtmlBlock);
 };
 exports.YfmHtmlBlock = YfmHtmlBlock;

package/build/cjs/extensions/yfm/YfmTable/YfmTableSpecs/const.d.ts

@@ -4,3 +4,8 @@ export declare enum YfmTableNode {
     Row = "yfm_tr",
     Cell = "yfm_td"
 }
+export declare enum YfmTableAttr {
+    Colspan = "colspan",
+    Rowspan = "rowspan",
+    CellAlign = "data-cell-align"
+}

package/build/cjs/extensions/yfm/YfmTable/YfmTableSpecs/const.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.YfmTableNode = void 0;
+exports.YfmTableAttr = exports.YfmTableNode = void 0;
 var YfmTableNode;
 (function (YfmTableNode) {
     YfmTableNode["Table"] = "yfm_table";
@@ -8,3 +8,9 @@ var YfmTableNode;
     YfmTableNode["Row"] = "yfm_tr";
     YfmTableNode["Cell"] = "yfm_td";
 })(YfmTableNode = exports.YfmTableNode || (exports.YfmTableNode = {}));
+var YfmTableAttr;
+(function (YfmTableAttr) {
+    YfmTableAttr["Colspan"] = "colspan";
+    YfmTableAttr["Rowspan"] = "rowspan";
+    YfmTableAttr["CellAlign"] = "data-cell-align";
+})(YfmTableAttr = exports.YfmTableAttr || (exports.YfmTableAttr = {}));

package/build/cjs/extensions/yfm/YfmTable/YfmTableSpecs/parser.js

@@ -6,5 +6,16 @@ exports.parserTokens = {
     [const_1.YfmTableNode.Table]: { name: const_1.YfmTableNode.Table, type: 'block' },
     [const_1.YfmTableNode.Body]: { name: const_1.YfmTableNode.Body, type: 'block' },
     [const_1.YfmTableNode.Row]: { name: const_1.YfmTableNode.Row, type: 'block' },
-    [const_1.YfmTableNode.Cell]: { name: const_1.YfmTableNode.Cell, type: 'block' },
+    [const_1.YfmTableNode.Cell]: {
+        name: const_1.YfmTableNode.Cell,
+        type: 'block',
+        getAttrs: (token) => {
+            var _a, _b;
+            const attrs = Object.fromEntries(token.attrs || []);
+            const align = (_b = (_a = token.attrGet('class')) === null || _a === void 0 ? void 0 : _a.match(/cell-align-[a-z-]*/)) === null || _b === void 0 ? void 0 : _b[0];
+            if (align)
+                attrs[const_1.YfmTableAttr.CellAlign] = align;
+            return attrs;
+        },
+    },
 };

package/build/cjs/extensions/yfm/YfmTable/YfmTableSpecs/schema.js

@@ -57,12 +57,17 @@ const getSchemaSpecs = (opts, placeholder) => {
             content: 'block+',
             isolating: true,
             definingAsContext: true,
+            attrs: {
+                [const_1.YfmTableAttr.Colspan]: { default: null },
+                [const_1.YfmTableAttr.Rowspan]: { default: null },
+                [const_1.YfmTableAttr.CellAlign]: { default: null },
+            },
             parseDOM: [
                 { tag: 'td', priority: 200 },
                 { tag: 'th', priority: 200 },
             ],
-            toDOM() {
-                return ['td', 0];
+            toDOM(node) {
+                return ['td', node.attrs, 0];
             },
             placeholder: {
                 content: (_b = (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder[const_1.YfmTableNode.Cell]) !== null && _a !== void 0 ? _a : opts === null || opts === void 0 ? void 0 : opts.yfmTableCellPlaceholder) !== null && _b !== void 0 ? _b : DEFAULT_CELL_PLACEHOLDER,

package/build/cjs/extensions/yfm/YfmTable/YfmTableSpecs/serializer.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializerTokens = void 0;
+const tslib_1 = require("tslib");
+const is_number_1 = tslib_1.__importDefault(require("is-number"));
 const const_1 = require("./const");
 exports.serializerTokens = {
     [const_1.YfmTableNode.Table]: (state, node) => {
@@ -13,24 +15,62 @@ exports.serializerTokens = {
         state.closeBlock();
         state.write('\n');
     },
-    [const_1.YfmTableNode.Body]: (state, node) => {
-        state.renderContent(node);
-    },
-    [const_1.YfmTableNode.Row]: (state, node) => {
-        state.write('||');
-        state.ensureNewLine();
-        state.write('\n');
-        state.renderContent(node);
-        state.write('||');
-        state.ensureNewLine();
-    },
-    [const_1.YfmTableNode.Cell]: (state, node, parent) => {
-        state.renderContent(node);
-        const isLastCell = parent.lastChild === node;
-        if (!isLastCell) {
-            state.write('|');
+    [const_1.YfmTableNode.Body]: (state, tbody) => {
+        const rowspanStack = {};
+        tbody.forEach((trow) => {
+            state.write('||');
             state.ensureNewLine();
             state.write('\n');
-        }
+            let colIndex = 0;
+            trow.forEach((td) => {
+                while (colIndex in rowspanStack && rowspanStack[colIndex] > 0) {
+                    state.write(colIndex === 0 ? '^' : '|^');
+                    rowspanStack[colIndex]--;
+                    colIndex++;
+                }
+                let rowspan = -1;
+                if ((0, is_number_1.default)(td.attrs[const_1.YfmTableAttr.Rowspan])) {
+                    rowspan = Math.max(0, Number.parseInt(td.attrs[const_1.YfmTableAttr.Rowspan], 10));
+                    rowspanStack[colIndex] = rowspan - 1;
+                }
+                if (colIndex > 0) {
+                    state.write('|');
+                    state.ensureNewLine();
+                    state.write('\n');
+                }
+                state.renderContent(td);
+                if (td.attrs[const_1.YfmTableAttr.CellAlign]) {
+                    state.write(`{.${td.attrs[const_1.YfmTableAttr.CellAlign]}}`);
+                    state.ensureNewLine();
+                }
+                colIndex++;
+                if ((0, is_number_1.default)(td.attrs[const_1.YfmTableAttr.Colspan])) {
+                    let colspan = Math.max(0, Number.parseInt(td.attrs[const_1.YfmTableAttr.Colspan], 10));
+                    while (--colspan > 0) {
+                        state.write('|>');
+                        if (rowspan > 0)
+                            rowspanStack[colIndex] = rowspan - 1;
+                        colIndex++;
+                    }
+                }
+                const isLastCell = trow.lastChild === td;
+                if (isLastCell) {
+                    while (colIndex in rowspanStack && rowspanStack[colIndex] > 0) {
+                        state.write('|^');
+                        rowspanStack[colIndex]--;
+                        colIndex++;
+                    }
+                }
+            });
+            state.ensureNewLine();
+            state.write('||');
+            state.ensureNewLine();
+        });
+    },
+    [const_1.YfmTableNode.Row]: (_state, node) => {
+        throw new Error(`Should not serialize ${node.type.name} node via serialize-token`);
+    },
+    [const_1.YfmTableNode.Cell]: (_state, node) => {
+        throw new Error(`Should not serialize ${node.type.name} node via serialize-token`);
     },
 };

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.js

@@ -14,6 +14,7 @@ const table_utils_1 = require("../../../../../table-utils");
 const node_children_1 = require("../../../../../utils/node-children");
 const nodes_1 = require("../../../../../utils/nodes");
 const ReactRenderer_1 = require("../../../../behavior/ReactRenderer");
+const const_1 = require("../../const");
 const actions_1 = require("./actions");
 exports.yfmTableCellCn = (0, classname_1.cn)('table-cell-view');
 const b = exports.yfmTableCellCn;
@@ -179,6 +180,14 @@ const yfmTableCellView = (node, view, getPos) => {
         return {};
     }
     const dom = document.createElement('td');
+    if (node.attrs[const_1.YfmTableAttr.Colspan])
+        dom.setAttribute('colspan', node.attrs[const_1.YfmTableAttr.Colspan]);
+    if (node.attrs[const_1.YfmTableAttr.Rowspan])
+        dom.setAttribute('rowspan', node.attrs[const_1.YfmTableAttr.Rowspan]);
+    if (node.attrs[const_1.YfmTableAttr.CellAlign]) {
+        dom.classList.add(node.attrs[const_1.YfmTableAttr.CellAlign]);
+        dom.setAttribute(const_1.YfmTableAttr.CellAlign, node.attrs[const_1.YfmTableAttr.Rowspan]);
+    }
     const contentDOM = document.createElement('div');
     const control = document.createElement('span');
     control.setAttribute('style', 'width: 0; height: 0; float: left;');

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.8.0' !== 'undefined' ? '13.8.0' : 'unknown';
+exports.VERSION = typeof '13.10.0' !== 'undefined' ? '13.10.0' : 'unknown';

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/index.js

@@ -11,7 +11,7 @@ export const checkboxInputType = nodeTypeFactory(CheckboxNode.Input);
 export const CheckboxSpecs = (builder, opts) => {
     const schemaSpecs = getSchemaSpecs(opts, builder.context.get('placeholder'));
     builder
-        .configureMd((md) => checkboxPlugin(md, { idPrefix, divClass: b() }))
+        .configureMd((md) => md.use(checkboxPlugin, { idPrefix, divClass: b() }))
         .addNode(CheckboxNode.Checkbox, () => ({
         spec: schemaSpecs[CheckboxNode.Checkbox],
         toMd: serializerTokens[CheckboxNode.Checkbox],

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

@@ -1,8 +1,11 @@
+import { BaseTarget, StylesObject } from '@diplodoc/html-extension/plugin';
 import type { ExtensionNodeSpec } from '../../../../core';
 export { yfmHtmlBlockNodeName } from './const';
 export declare type YfmHtmlBlockSpecsOptions = {
     nodeView?: ExtensionNodeSpec['view'];
     sanitize?: (dirtyHtml: string) => string;
+    styles?: string | StylesObject;
+    baseTarget?: BaseTarget;
 };
 export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {
     readonly NodeName: "yfm_html_block";

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

@@ -1,10 +1,12 @@
+import { __rest } from "tslib";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { transform } from '@diplodoc/html-extension';
 import { YfmHtmlBlockConsts } from './const';
 export { yfmHtmlBlockNodeName } from './const';
-const YfmHtmlBlockSpecsExtension = (builder, { nodeView, sanitize }) => {
+const YfmHtmlBlockSpecsExtension = (builder, _a) => {
+    var { nodeView } = _a, options = __rest(_a, ["nodeView"]);
     builder
-        .configureMd((md) => md.use(transform({ bundle: false, sanitize }), {}))
+        .configureMd((md) => md.use(transform(Object.assign({ bundle: false }, options)), {}))
         .addNode(YfmHtmlBlockConsts.NodeName, () => ({
         fromMd: {
             tokenSpec: {

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

@@ -1,9 +1,12 @@
+import { BaseTarget, StylesObject } from '@diplodoc/html-extension/plugin';
 import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
 import { Action, ExtensionAuto } from '../../../core';
 import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
 export declare type YfmHtmlBlockOptions = {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
     sanitize?: (dirtyHtml: string) => string;
+    styles?: string | StylesObject;
+    baseTarget?: BaseTarget;
 };
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
 declare global {

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

@@ -1,12 +1,11 @@
+import { __rest } from "tslib";
 import { WYfmHtmlBlockNodeView } from './YfmHtmlBlockNodeView';
 import { YfmHtmlBlockSpecs } from './YfmHtmlBlockSpecs';
 import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
 import { addYfmHtmlBlock } from './actions';
-export const YfmHtmlBlock = (builder, options) => {
-    builder.use(YfmHtmlBlockSpecs, {
-        nodeView: YfmHtmlBlockNodeViewFactory(options),
-        sanitize: options.sanitize,
-    });
+export const YfmHtmlBlock = (builder, _a) => {
+    var { useConfig: _ } = _a, options = __rest(_a, ["useConfig"]);
+    builder.use(YfmHtmlBlockSpecs, Object.assign({ nodeView: YfmHtmlBlockNodeViewFactory(options) }, options));
     builder.addAction(YfmHtmlBlockAction, () => addYfmHtmlBlock);
 };
 const YfmHtmlBlockNodeViewFactory = (options) => () => (node, view, getPos) => {

package/build/esm/extensions/yfm/YfmTable/YfmTableSpecs/const.d.ts

@@ -4,3 +4,8 @@ export declare enum YfmTableNode {
     Row = "yfm_tr",
     Cell = "yfm_td"
 }
+export declare enum YfmTableAttr {
+    Colspan = "colspan",
+    Rowspan = "rowspan",
+    CellAlign = "data-cell-align"
+}

package/build/esm/extensions/yfm/YfmTable/YfmTableSpecs/const.js

@@ -5,3 +5,9 @@ export var YfmTableNode;
     YfmTableNode["Row"] = "yfm_tr";
     YfmTableNode["Cell"] = "yfm_td";
 })(YfmTableNode || (YfmTableNode = {}));
+export var YfmTableAttr;
+(function (YfmTableAttr) {
+    YfmTableAttr["Colspan"] = "colspan";
+    YfmTableAttr["Rowspan"] = "rowspan";
+    YfmTableAttr["CellAlign"] = "data-cell-align";
+})(YfmTableAttr || (YfmTableAttr = {}));

package/build/esm/extensions/yfm/YfmTable/YfmTableSpecs/parser.js

@@ -1,7 +1,18 @@
-import { YfmTableNode } from './const';
+import { YfmTableAttr, YfmTableNode } from './const';
 export const parserTokens = {
     [YfmTableNode.Table]: { name: YfmTableNode.Table, type: 'block' },
     [YfmTableNode.Body]: { name: YfmTableNode.Body, type: 'block' },
     [YfmTableNode.Row]: { name: YfmTableNode.Row, type: 'block' },
-    [YfmTableNode.Cell]: { name: YfmTableNode.Cell, type: 'block' },
+    [YfmTableNode.Cell]: {
+        name: YfmTableNode.Cell,
+        type: 'block',
+        getAttrs: (token) => {
+            var _a, _b;
+            const attrs = Object.fromEntries(token.attrs || []);
+            const align = (_b = (_a = token.attrGet('class')) === null || _a === void 0 ? void 0 : _a.match(/cell-align-[a-z-]*/)) === null || _b === void 0 ? void 0 : _b[0];
+            if (align)
+                attrs[YfmTableAttr.CellAlign] = align;
+            return attrs;
+        },
+    },
 };

package/build/esm/extensions/yfm/YfmTable/YfmTableSpecs/schema.js

@@ -1,5 +1,5 @@
 import { TableRole } from '../../../../table-utils';
-import { YfmTableNode } from './const';
+import { YfmTableAttr, YfmTableNode } from './const';
 const DEFAULT_CELL_PLACEHOLDER = 'Table cell';
 export const getSchemaSpecs = (opts, placeholder) => {
     var _a, _b;
@@ -54,12 +54,17 @@ export const getSchemaSpecs = (opts, placeholder) => {
             content: 'block+',
             isolating: true,
             definingAsContext: true,
+            attrs: {
+                [YfmTableAttr.Colspan]: { default: null },
+                [YfmTableAttr.Rowspan]: { default: null },
+                [YfmTableAttr.CellAlign]: { default: null },
+            },
             parseDOM: [
                 { tag: 'td', priority: 200 },
                 { tag: 'th', priority: 200 },
             ],
-            toDOM() {
-                return ['td', 0];
+            toDOM(node) {
+                return ['td', node.attrs, 0];
             },
             placeholder: {
                 content: (_b = (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder[YfmTableNode.Cell]) !== null && _a !== void 0 ? _a : opts === null || opts === void 0 ? void 0 : opts.yfmTableCellPlaceholder) !== null && _b !== void 0 ? _b : DEFAULT_CELL_PLACEHOLDER,

package/build/esm/extensions/yfm/YfmTable/YfmTableSpecs/serializer.js

@@ -1,4 +1,5 @@
-import { YfmTableNode } from './const';
+import isNumber from 'is-number';
+import { YfmTableAttr, YfmTableNode } from './const';
 export const serializerTokens = {
     [YfmTableNode.Table]: (state, node) => {
         state.ensureNewLine();
@@ -10,24 +11,62 @@ export const serializerTokens = {
         state.closeBlock();
         state.write('\n');
     },
-    [YfmTableNode.Body]: (state, node) => {
-        state.renderContent(node);
-    },
-    [YfmTableNode.Row]: (state, node) => {
-        state.write('||');
-        state.ensureNewLine();
-        state.write('\n');
-        state.renderContent(node);
-        state.write('||');
-        state.ensureNewLine();
-    },
-    [YfmTableNode.Cell]: (state, node, parent) => {
-        state.renderContent(node);
-        const isLastCell = parent.lastChild === node;
-        if (!isLastCell) {
-            state.write('|');
+    [YfmTableNode.Body]: (state, tbody) => {
+        const rowspanStack = {};
+        tbody.forEach((trow) => {
+            state.write('||');
             state.ensureNewLine();
             state.write('\n');
-        }
+            let colIndex = 0;
+            trow.forEach((td) => {
+                while (colIndex in rowspanStack && rowspanStack[colIndex] > 0) {
+                    state.write(colIndex === 0 ? '^' : '|^');
+                    rowspanStack[colIndex]--;
+                    colIndex++;
+                }
+                let rowspan = -1;
+                if (isNumber(td.attrs[YfmTableAttr.Rowspan])) {
+                    rowspan = Math.max(0, Number.parseInt(td.attrs[YfmTableAttr.Rowspan], 10));
+                    rowspanStack[colIndex] = rowspan - 1;
+                }
+                if (colIndex > 0) {
+                    state.write('|');
+                    state.ensureNewLine();
+                    state.write('\n');
+                }
+                state.renderContent(td);
+                if (td.attrs[YfmTableAttr.CellAlign]) {
+                    state.write(`{.${td.attrs[YfmTableAttr.CellAlign]}}`);
+                    state.ensureNewLine();
+                }
+                colIndex++;
+                if (isNumber(td.attrs[YfmTableAttr.Colspan])) {
+                    let colspan = Math.max(0, Number.parseInt(td.attrs[YfmTableAttr.Colspan], 10));
+                    while (--colspan > 0) {
+                        state.write('|>');
+                        if (rowspan > 0)
+                            rowspanStack[colIndex] = rowspan - 1;
+                        colIndex++;
+                    }
+                }
+                const isLastCell = trow.lastChild === td;
+                if (isLastCell) {
+                    while (colIndex in rowspanStack && rowspanStack[colIndex] > 0) {
+                        state.write('|^');
+                        rowspanStack[colIndex]--;
+                        colIndex++;
+                    }
+                }
+            });
+            state.ensureNewLine();
+            state.write('||');
+            state.ensureNewLine();
+        });
+    },
+    [YfmTableNode.Row]: (_state, node) => {
+        throw new Error(`Should not serialize ${node.type.name} node via serialize-token`);
+    },
+    [YfmTableNode.Cell]: (_state, node) => {
+        throw new Error(`Should not serialize ${node.type.name} node via serialize-token`);
     },
 };

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.js

@@ -10,6 +10,7 @@ import { getTableDimensions, isTableNode } from '../../../../../table-utils';
 import { getChildByNode } from '../../../../../utils/node-children';
 import { getChildrenOfNode } from '../../../../../utils/nodes';
 import { getReactRendererFromState } from '../../../../behavior/ReactRenderer';
+import { YfmTableAttr } from '../../const';
 import { controlActions } from './actions';
 import './yfmTableCellView.css';
 export const yfmTableCellCn = cn('table-cell-view');
@@ -176,6 +177,14 @@ export const yfmTableCellView = (node, view, getPos) => {
         return {};
     }
     const dom = document.createElement('td');
+    if (node.attrs[YfmTableAttr.Colspan])
+        dom.setAttribute('colspan', node.attrs[YfmTableAttr.Colspan]);
+    if (node.attrs[YfmTableAttr.Rowspan])
+        dom.setAttribute('rowspan', node.attrs[YfmTableAttr.Rowspan]);
+    if (node.attrs[YfmTableAttr.CellAlign]) {
+        dom.classList.add(node.attrs[YfmTableAttr.CellAlign]);
+        dom.setAttribute(YfmTableAttr.CellAlign, node.attrs[YfmTableAttr.Rowspan]);
+    }
     const contentDOM = document.createElement('div');
     const control = document.createElement('span');
     control.setAttribute('style', 'width: 0; height: 0; float: left;');

package/build/esm/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.8.0",
+  "version": "13.10.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -200,10 +200,10 @@
   },
   "devDependencies": {
     "@diplodoc/folding-headings-extension": "0.1.0",
-    "@diplodoc/html-extension": "1.2.7",
+    "@diplodoc/html-extension": "1.3.1",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
-    "@diplodoc/transform": "4.5.0",
+    "@diplodoc/transform": "4.22.0",
     "@gravity-ui/components": "3.0.0",
     "@gravity-ui/eslint-config": "3.1.1",
     "@gravity-ui/prettier-config": "1.1.0",