@gravity-ui/markdown-editor 13.19.0 → 13.20.0

package/build/cjs/extensions/yfm/YfmTabs/YfmTabsSpecs/const.d.ts

@@ -1,8 +1,12 @@
 export declare enum TabsNode {
+    TabPanel = "yfm_tab_panel",
     Tab = "yfm_tab",
     TabsList = "yfm_tabs_list",
-    TabPanel = "yfm_tab_panel",
-    Tabs = "yfm_tabs"
+    Tabs = "yfm_tabs",
+    RadioTabs = "yfm_radio_tabs",
+    RadioTab = "yfm_radio_tab",
+    RadioTabInput = "yfm_radio_tab_input",
+    RadioTabLabel = "yfm_radio_tab_label"
 }
 export declare enum TabsAttrs {
     class = "class",
@@ -21,7 +25,8 @@ export declare enum TabAttrs {
     tabindex = "tabindex",
     dataDiplodocKey = "data-diplodoc-key",
     dataDiplodocid = "data-diplodoc-id",
-    dataDiplodocIsActive = "data-diplodoc-is-active"
+    dataDiplodocIsActive = "data-diplodoc-is-active",
+    dataDiplodocVerticalTab = "data-diplodoc-vertical-tab"
 }
 export declare enum TabPanelAttrs {
     id = "id",

package/build/cjs/extensions/yfm/YfmTabs/YfmTabsSpecs/const.js

@@ -3,10 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabPanelAttrs = exports.TabAttrs = exports.TabsListAttrs = exports.TabsAttrs = exports.TabsNode = void 0;
 var TabsNode;
 (function (TabsNode) {
+    // tabs panel is common for tabs and radio tabs
+    TabsNode["TabPanel"] = "yfm_tab_panel";
     TabsNode["Tab"] = "yfm_tab";
     TabsNode["TabsList"] = "yfm_tabs_list";
-    TabsNode["TabPanel"] = "yfm_tab_panel";
     TabsNode["Tabs"] = "yfm_tabs";
+    TabsNode["RadioTabs"] = "yfm_radio_tabs";
+    TabsNode["RadioTab"] = "yfm_radio_tab";
+    TabsNode["RadioTabInput"] = "yfm_radio_tab_input";
+    TabsNode["RadioTabLabel"] = "yfm_radio_tab_label";
 })(TabsNode = exports.TabsNode || (exports.TabsNode = {}));
 var TabsAttrs;
 (function (TabsAttrs) {
@@ -29,6 +34,7 @@ var TabAttrs;
     TabAttrs["dataDiplodocKey"] = "data-diplodoc-key";
     TabAttrs["dataDiplodocid"] = "data-diplodoc-id";
     TabAttrs["dataDiplodocIsActive"] = "data-diplodoc-is-active";
+    TabAttrs["dataDiplodocVerticalTab"] = "data-diplodoc-vertical-tab";
 })(TabAttrs = exports.TabAttrs || (exports.TabAttrs = {}));
 var TabPanelAttrs;
 (function (TabPanelAttrs) {

package/build/cjs/extensions/yfm/YfmTabs/YfmTabsSpecs/index.d.ts

@@ -14,5 +14,7 @@ export declare type YfmTabsSpecsOptions = {
     tabsListView?: ExtensionNodeSpec['view'];
     tabPanelView?: ExtensionNodeSpec['view'];
     tabsView?: ExtensionNodeSpec['view'];
+    vtabView?: ExtensionNodeSpec['view'];
+    vtabInputView?: ExtensionNodeSpec['view'];
 };
 export declare const YfmTabsSpecs: ExtensionAuto<YfmTabsSpecsOptions>;

package/build/cjs/extensions/yfm/YfmTabs/YfmTabsSpecs/index.js

@@ -6,6 +6,7 @@ const log_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/log"));
 const tabs_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/plugins/tabs"));
 const schema_1 = require("../../../../utils/schema");
 const const_1 = require("./const");
+const md_plugin_1 = require("./md-plugin");
 const parser_1 = require("./parser");
 const schema_2 = require("./schema");
 const serializer_1 = require("./serializer");
@@ -18,7 +19,7 @@ exports.tabsListType = (0, schema_1.nodeTypeFactory)(const_1.TabsNode.TabsList);
 const YfmTabsSpecs = (builder, opts) => {
     const schemaSpecs = (0, schema_2.getSchemaSpecs)(opts);
     builder
-        .configureMd((md) => md.use(tabs_1.default, { log: log_1.default }))
+        .configureMd((md) => md.use(tabs_1.default, { log: log_1.default }).use(md_plugin_1.tabsPostPlugin))
         .addNode(const_1.TabsNode.Tab, () => ({
         spec: schemaSpecs[const_1.TabsNode.Tab],
         toMd: serializer_1.serializerTokens[const_1.TabsNode.Tab],
@@ -55,5 +56,40 @@ const YfmTabsSpecs = (builder, opts) => {
         },
         view: opts.tabsView,
     }));
+    builder
+        .addNode(const_1.TabsNode.RadioTabs, () => ({
+        spec: schemaSpecs[const_1.TabsNode.RadioTabs],
+        toMd: serializer_1.serializerTokens[const_1.TabsNode.RadioTabs],
+        fromMd: {
+            tokenSpec: parser_1.parserTokens[const_1.TabsNode.RadioTabs],
+            tokenName: 'r-tabs',
+        },
+    }))
+        .addNode(const_1.TabsNode.RadioTab, () => ({
+        spec: schemaSpecs[const_1.TabsNode.RadioTab],
+        toMd: serializer_1.serializerTokens[const_1.TabsNode.RadioTab],
+        fromMd: {
+            tokenSpec: parser_1.parserTokens[const_1.TabsNode.RadioTab],
+            tokenName: 'r-tab',
+        },
+        view: opts.vtabView,
+    }))
+        .addNode(const_1.TabsNode.RadioTabInput, () => ({
+        spec: schemaSpecs[const_1.TabsNode.RadioTabInput],
+        toMd: serializer_1.serializerTokens[const_1.TabsNode.RadioTabInput],
+        fromMd: {
+            tokenSpec: parser_1.parserTokens[const_1.TabsNode.RadioTabInput],
+            tokenName: 'r-tab-input',
+        },
+        view: opts.vtabInputView,
+    }))
+        .addNode(const_1.TabsNode.RadioTabLabel, () => ({
+        spec: schemaSpecs[const_1.TabsNode.RadioTabLabel],
+        toMd: serializer_1.serializerTokens[const_1.TabsNode.RadioTabLabel],
+        fromMd: {
+            tokenSpec: parser_1.parserTokens[const_1.TabsNode.RadioTabLabel],
+            tokenName: 'r-tab-label',
+        },
+    }));
 };
 exports.YfmTabsSpecs = YfmTabsSpecs;

package/build/cjs/extensions/yfm/YfmTabs/YfmTabsSpecs/md-plugin.d.ts

@@ -0,0 +1,2 @@
+import type MarkdownIt from 'markdown-it';
+export declare const tabsPostPlugin: MarkdownIt.PluginSimple;

package/build/cjs/extensions/yfm/YfmTabs/YfmTabsSpecs/md-plugin.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabsPostPlugin = void 0;
+const prefix = 'r-';
+// prefix is added to token types of radio tabs tokens in order to use other nodes in prosemirror
+const tabsPostPlugin = (md) => {
+    md.core.ruler.push('me_tabs_after', (state) => {
+        var _a;
+        const stack = [];
+        const tabCloseIndexes = [];
+        for (const token of state.tokens) {
+            switch (token.type) {
+                case 'tabs_open': {
+                    const vertical = (_a = token.attrGet('class')) === null || _a === void 0 ? void 0 : _a.includes('yfm-tabs-vertical');
+                    stack.push({ vertical });
+                    if (vertical)
+                        token.type = prefix + token.type;
+                    break;
+                }
+                case 'tabs_close': {
+                    const item = stack.pop();
+                    if (item === null || item === void 0 ? void 0 : item.vertical)
+                        token.type = prefix + token.type;
+                    break;
+                }
+                case 'tab_open': {
+                    const item = stack.at(-1);
+                    if (item === null || item === void 0 ? void 0 : item.vertical) {
+                        // --> TODO: remove after updating to tabs-extension v^3.4.0
+                        const isInput = token.tag === 'input';
+                        if (isInput)
+                            token.type = 'tab-input';
+                        // <--
+                        token.type = prefix + token.type;
+                    }
+                    break;
+                }
+                case 'tab_close': {
+                    const item = stack.at(-1);
+                    if (item === null || item === void 0 ? void 0 : item.vertical) {
+                        token.type = prefix + token.type;
+                        // --> TODO: remove after updating to tabs-extension v^3.4.0
+                        tabCloseIndexes.push(state.tokens.indexOf(token));
+                        // <--
+                    }
+                    break;
+                }
+                case 'tab-input':
+                case 'tab-label_open':
+                case 'tab-label_close': {
+                    const item = stack.at(-1);
+                    if (item === null || item === void 0 ? void 0 : item.vertical) {
+                        token.type = prefix + token.type;
+                    }
+                    break;
+                }
+                // --> TODO: remove after updating to tabs-extension v^3.4.0
+                case 'label_open': {
+                    const tokenIndex = state.tokens.indexOf(token);
+                    const prevToken = tokenIndex > 0 && state.tokens.at(tokenIndex - 1);
+                    if (prevToken && prevToken.type === 'r-tab-input') {
+                        token.type = prefix + 'tab-' + token.type;
+                    }
+                    break;
+                }
+                // <--
+            }
+        }
+        // --> TODO: remove after updating to tabs-extension v^3.4.0
+        for (const index of tabCloseIndexes.reverse()) {
+            if (index === -1)
+                continue;
+            const labelCloseToken = new state.Token(prefix + 'tab-label_close', 'label', -1);
+            state.tokens.splice(index, 0, labelCloseToken);
+        }
+        // <--
+    });
+};
+exports.tabsPostPlugin = tabsPostPlugin;

package/build/cjs/extensions/yfm/YfmTabs/YfmTabsSpecs/parser.js

@@ -4,13 +4,13 @@ exports.parserTokens = void 0;
 const const_1 = require("./const");
 const attrsFromEntries = (token) => (token.attrs ? Object.fromEntries(token.attrs) : {});
 exports.parserTokens = {
-    [const_1.TabsNode.Tab]: {
-        name: const_1.TabsNode.Tab,
+    [const_1.TabsNode.TabPanel]: {
+        name: const_1.TabsNode.TabPanel,
         type: 'block',
         getAttrs: attrsFromEntries,
     },
-    [const_1.TabsNode.TabPanel]: {
-        name: const_1.TabsNode.TabPanel,
+    [const_1.TabsNode.Tab]: {
+        name: const_1.TabsNode.Tab,
         type: 'block',
         getAttrs: attrsFromEntries,
     },
@@ -24,4 +24,24 @@ exports.parserTokens = {
         type: 'block',
         getAttrs: attrsFromEntries,
     },
+    [const_1.TabsNode.RadioTabs]: {
+        name: const_1.TabsNode.RadioTabs,
+        type: 'block',
+        getAttrs: attrsFromEntries,
+    },
+    [const_1.TabsNode.RadioTab]: {
+        name: const_1.TabsNode.RadioTab,
+        type: 'block',
+        getAttrs: attrsFromEntries,
+    },
+    [const_1.TabsNode.RadioTabInput]: {
+        name: const_1.TabsNode.RadioTabInput,
+        type: 'node',
+        getAttrs: attrsFromEntries,
+    },
+    [const_1.TabsNode.RadioTabLabel]: {
+        name: const_1.TabsNode.RadioTabLabel,
+        type: 'block',
+        getAttrs: attrsFromEntries,
+    },
 };

package/build/cjs/extensions/yfm/YfmTabs/YfmTabsSpecs/schema.js

@@ -4,9 +4,10 @@ exports.getSchemaSpecs = void 0;
 const const_1 = require("./const");
 const DEFAULT_PLACEHOLDERS = {
     TabTitle: 'Tab title',
+    RadioTabLabelTitle: 'Radio title',
 };
 const getSchemaSpecs = (opts, placeholder) => {
-    var _a, _b;
+    var _a, _b, _c;
     return ({
         [const_1.TabsNode.Tab]: {
             attrs: {
@@ -82,6 +83,70 @@ const getSchemaSpecs = (opts, placeholder) => {
             allowSelection: false,
             complex: 'inner',
         },
+        [const_1.TabsNode.RadioTabs]: {
+            attrs: {
+                [const_1.TabsAttrs.class]: { default: 'yfm-tabs yfm-tabs-vertical' },
+                [const_1.TabsAttrs.dataDiplodocGroup]: { default: 'unknown' },
+            },
+            content: `(${const_1.TabsNode.RadioTab} ${const_1.TabsNode.TabPanel})+`,
+            group: 'block',
+            toDOM(node) {
+                return ['div', node.attrs, 0];
+            },
+            complex: 'root',
+        },
+        [const_1.TabsNode.RadioTab]: {
+            attrs: {
+                [const_1.TabAttrs.id]: { default: null },
+                [const_1.TabAttrs.class]: { default: 'yfm-tab yfm-vertical-tab' },
+                [const_1.TabAttrs.role]: { default: 'unknown' },
+                [const_1.TabAttrs.ariaControls]: { default: 'unknown' },
+                [const_1.TabAttrs.ariaSelected]: { default: 'unknown' },
+                [const_1.TabAttrs.tabindex]: { default: 'unknown' },
+                [const_1.TabAttrs.dataDiplodocKey]: { default: 'unknown' },
+                [const_1.TabAttrs.dataDiplodocid]: { default: 'unknown' },
+                [const_1.TabAttrs.dataDiplodocIsActive]: { default: 'false' },
+                [const_1.TabAttrs.dataDiplodocVerticalTab]: { default: 'true' },
+            },
+            content: `${const_1.TabsNode.RadioTabInput} ${const_1.TabsNode.RadioTabLabel}`,
+            group: 'block',
+            toDOM(node) {
+                return ['div', node.attrs, 0];
+            },
+            selectable: false,
+            allowSelection: false,
+            complex: 'inner',
+        },
+        [const_1.TabsNode.RadioTabInput]: {
+            attrs: {
+                [const_1.TabAttrs.class]: { default: 'radio' },
+                type: { default: 'radio' },
+                checked: { default: null },
+            },
+            group: 'block',
+            toDOM(node) {
+                return ['input', node.attrs];
+            },
+            selectable: false,
+            allowSelection: false,
+            complex: 'leaf',
+        },
+        [const_1.TabsNode.RadioTabLabel]: {
+            attrs: {},
+            marks: '',
+            content: 'text*',
+            group: 'block',
+            toDOM(node) {
+                return ['label', node.attrs, 0];
+            },
+            placeholder: {
+                content: (_c = placeholder === null || placeholder === void 0 ? void 0 : placeholder[const_1.TabsNode.RadioTab]) !== null && _c !== void 0 ? _c : DEFAULT_PLACEHOLDERS.RadioTabLabelTitle,
+                alwaysVisible: true,
+            },
+            selectable: false,
+            allowSelection: false,
+            complex: 'leaf',
+        },
     });
 };
 exports.getSchemaSpecs = getSchemaSpecs;

package/build/cjs/extensions/yfm/YfmTabs/YfmTabsSpecs/serializer.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializerTokens = void 0;
+const nodes_1 = require("../../../../utils/nodes");
 const placeholder_1 = require("../../../../utils/placeholder");
 const const_1 = require("./const");
 exports.serializerTokens = {
@@ -32,4 +33,31 @@ exports.serializerTokens = {
     [const_1.TabsNode.TabsList]: (state, node) => {
         state.renderList(node, '  ', () => (node.attrs.bullet || '-') + ' ');
     },
+    [const_1.TabsNode.RadioTabs]: (state, node) => {
+        state.write('{% list tabs radio %}');
+        state.write('\n');
+        state.write('\n');
+        const children = (0, nodes_1.getChildrenOfNode)(node);
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            if (child.node.type.name !== const_1.TabsNode.RadioTab)
+                continue;
+            state.write('- ' + (child.node.textContent || (0, placeholder_1.getPlaceholderContent)(child.node.lastChild)));
+            state.write('\n');
+            state.write('\n');
+            const nextChild = children[i + 1];
+            if (nextChild.node.type.name !== const_1.TabsNode.TabPanel)
+                continue;
+            state.renderList(nextChild.node, '  ', () => '  ');
+        }
+        state.write('{% endlist %}');
+        state.closeBlock(node);
+    },
+    [const_1.TabsNode.RadioTab]: (state, node) => {
+        state.renderInline(node);
+    },
+    [const_1.TabsNode.RadioTabInput]: () => { },
+    [const_1.TabsNode.RadioTabLabel]: (state, node) => {
+        state.renderInline(node);
+    },
 };

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

@@ -17,6 +17,8 @@ const YfmTabs = (builder) => {
     builder.use(YfmTabsSpecs_1.YfmTabsSpecs, {
         tabView: () => views_1.tabView,
         tabPanelView: () => views_1.tabPanelView,
+        vtabView: () => views_1.vtabView,
+        vtabInputView: () => views_1.vtabInputView,
     });
     builder.addKeymap(() => ({
         Backspace: (0, prosemirror_commands_1.chainCommands)(plugins_1.removeTabWhenCursorAtTheStartOfTab, plugins_1.joinBackwardToOpenTab),

package/build/cjs/extensions/yfm/YfmTabs/views.d.ts

@@ -1,3 +1,5 @@
 import { NodeViewConstructor } from 'prosemirror-view';
 export declare const tabView: NodeViewConstructor;
 export declare const tabPanelView: NodeViewConstructor;
+export declare const vtabView: NodeViewConstructor;
+export declare const vtabInputView: NodeViewConstructor;

package/build/cjs/extensions/yfm/YfmTabs/views.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tabPanelView = exports.tabView = void 0;
+exports.vtabInputView = exports.vtabView = exports.tabPanelView = exports.tabView = void 0;
 const prosemirror_utils_1 = require("prosemirror-utils");
 const classname_1 = require("../../../classname");
 const icons_1 = require("./icons");
@@ -12,7 +12,7 @@ const ignoreMutation = (node, view, getPos) => (mutation) => {
         mutation.type === 'attributes' &&
         mutation.attributeName) {
         const newAttr = mutation.target.getAttribute(mutation.attributeName);
-        view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, Object.assign(Object.assign({}, node.attrs), { [mutation.attributeName]: String(newAttr) })));
+        view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, Object.assign(Object.assign({}, node.attrs), { [mutation.attributeName]: newAttr })));
         return true;
     }
     return false;
@@ -74,7 +74,19 @@ const tabView = (node, view, getPos) => {
 exports.tabView = tabView;
 // @ts-expect-error
 const tabPanelView = (node, view, getPos) => ({
-    // FIX: ignore mutation and don't rerender node when yfm.js switch tab
+    // FIXME: ignore mutation and don't rerender node when yfm.js switch tab
     ignoreMutation: ignoreMutation(node, view, getPos),
 });
 exports.tabPanelView = tabPanelView;
+// @ts-expect-error
+const vtabView = (node, view, getPos) => ({
+    // FIXME: ignore mutation and don't rerender node when yfm.js switch tab
+    ignoreMutation: ignoreMutation(node, view, getPos),
+});
+exports.vtabView = vtabView;
+// @ts-expect-error
+const vtabInputView = (node, view, getPos) => ({
+    // FIXME: ignore mutation and don't rerender node when yfm.js switch tab
+    ignoreMutation: ignoreMutation(node, view, getPos),
+});
+exports.vtabInputView = vtabInputView;

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.19.0' !== 'undefined' ? '13.19.0' : 'unknown';
+exports.VERSION = typeof '13.20.0' !== 'undefined' ? '13.20.0' : 'unknown';

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/const.d.ts

@@ -1,8 +1,12 @@
 export declare enum TabsNode {
+    TabPanel = "yfm_tab_panel",
     Tab = "yfm_tab",
     TabsList = "yfm_tabs_list",
-    TabPanel = "yfm_tab_panel",
-    Tabs = "yfm_tabs"
+    Tabs = "yfm_tabs",
+    RadioTabs = "yfm_radio_tabs",
+    RadioTab = "yfm_radio_tab",
+    RadioTabInput = "yfm_radio_tab_input",
+    RadioTabLabel = "yfm_radio_tab_label"
 }
 export declare enum TabsAttrs {
     class = "class",
@@ -21,7 +25,8 @@ export declare enum TabAttrs {
     tabindex = "tabindex",
     dataDiplodocKey = "data-diplodoc-key",
     dataDiplodocid = "data-diplodoc-id",
-    dataDiplodocIsActive = "data-diplodoc-is-active"
+    dataDiplodocIsActive = "data-diplodoc-is-active",
+    dataDiplodocVerticalTab = "data-diplodoc-vertical-tab"
 }
 export declare enum TabPanelAttrs {
     id = "id",

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/const.js

@@ -1,9 +1,14 @@
 export var TabsNode;
 (function (TabsNode) {
+    // tabs panel is common for tabs and radio tabs
+    TabsNode["TabPanel"] = "yfm_tab_panel";
     TabsNode["Tab"] = "yfm_tab";
     TabsNode["TabsList"] = "yfm_tabs_list";
-    TabsNode["TabPanel"] = "yfm_tab_panel";
     TabsNode["Tabs"] = "yfm_tabs";
+    TabsNode["RadioTabs"] = "yfm_radio_tabs";
+    TabsNode["RadioTab"] = "yfm_radio_tab";
+    TabsNode["RadioTabInput"] = "yfm_radio_tab_input";
+    TabsNode["RadioTabLabel"] = "yfm_radio_tab_label";
 })(TabsNode || (TabsNode = {}));
 export var TabsAttrs;
 (function (TabsAttrs) {
@@ -26,6 +31,7 @@ export var TabAttrs;
     TabAttrs["dataDiplodocKey"] = "data-diplodoc-key";
     TabAttrs["dataDiplodocid"] = "data-diplodoc-id";
     TabAttrs["dataDiplodocIsActive"] = "data-diplodoc-is-active";
+    TabAttrs["dataDiplodocVerticalTab"] = "data-diplodoc-vertical-tab";
 })(TabAttrs || (TabAttrs = {}));
 export var TabPanelAttrs;
 (function (TabPanelAttrs) {

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/index.d.ts

@@ -14,5 +14,7 @@ export declare type YfmTabsSpecsOptions = {
     tabsListView?: ExtensionNodeSpec['view'];
     tabPanelView?: ExtensionNodeSpec['view'];
     tabsView?: ExtensionNodeSpec['view'];
+    vtabView?: ExtensionNodeSpec['view'];
+    vtabInputView?: ExtensionNodeSpec['view'];
 };
 export declare const YfmTabsSpecs: ExtensionAuto<YfmTabsSpecsOptions>;

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/index.js

@@ -2,6 +2,7 @@ import log from '@diplodoc/transform/lib/log';
 import yfmPlugin from '@diplodoc/transform/lib/plugins/tabs';
 import { nodeTypeFactory } from '../../../../utils/schema';
 import { TabsNode } from './const';
+import { tabsPostPlugin } from './md-plugin';
 import { parserTokens } from './parser';
 import { getSchemaSpecs } from './schema';
 import { serializerTokens } from './serializer';
@@ -13,7 +14,7 @@ export const tabsListType = nodeTypeFactory(TabsNode.TabsList);
 export const YfmTabsSpecs = (builder, opts) => {
     const schemaSpecs = getSchemaSpecs(opts);
     builder
-        .configureMd((md) => md.use(yfmPlugin, { log }))
+        .configureMd((md) => md.use(yfmPlugin, { log }).use(tabsPostPlugin))
         .addNode(TabsNode.Tab, () => ({
         spec: schemaSpecs[TabsNode.Tab],
         toMd: serializerTokens[TabsNode.Tab],
@@ -50,4 +51,39 @@ export const YfmTabsSpecs = (builder, opts) => {
         },
         view: opts.tabsView,
     }));
+    builder
+        .addNode(TabsNode.RadioTabs, () => ({
+        spec: schemaSpecs[TabsNode.RadioTabs],
+        toMd: serializerTokens[TabsNode.RadioTabs],
+        fromMd: {
+            tokenSpec: parserTokens[TabsNode.RadioTabs],
+            tokenName: 'r-tabs',
+        },
+    }))
+        .addNode(TabsNode.RadioTab, () => ({
+        spec: schemaSpecs[TabsNode.RadioTab],
+        toMd: serializerTokens[TabsNode.RadioTab],
+        fromMd: {
+            tokenSpec: parserTokens[TabsNode.RadioTab],
+            tokenName: 'r-tab',
+        },
+        view: opts.vtabView,
+    }))
+        .addNode(TabsNode.RadioTabInput, () => ({
+        spec: schemaSpecs[TabsNode.RadioTabInput],
+        toMd: serializerTokens[TabsNode.RadioTabInput],
+        fromMd: {
+            tokenSpec: parserTokens[TabsNode.RadioTabInput],
+            tokenName: 'r-tab-input',
+        },
+        view: opts.vtabInputView,
+    }))
+        .addNode(TabsNode.RadioTabLabel, () => ({
+        spec: schemaSpecs[TabsNode.RadioTabLabel],
+        toMd: serializerTokens[TabsNode.RadioTabLabel],
+        fromMd: {
+            tokenSpec: parserTokens[TabsNode.RadioTabLabel],
+            tokenName: 'r-tab-label',
+        },
+    }));
 };

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/md-plugin.d.ts

@@ -0,0 +1,2 @@
+import type MarkdownIt from 'markdown-it';
+export declare const tabsPostPlugin: MarkdownIt.PluginSimple;

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/md-plugin.js

@@ -0,0 +1,75 @@
+const prefix = 'r-';
+// prefix is added to token types of radio tabs tokens in order to use other nodes in prosemirror
+export const tabsPostPlugin = (md) => {
+    md.core.ruler.push('me_tabs_after', (state) => {
+        var _a;
+        const stack = [];
+        const tabCloseIndexes = [];
+        for (const token of state.tokens) {
+            switch (token.type) {
+                case 'tabs_open': {
+                    const vertical = (_a = token.attrGet('class')) === null || _a === void 0 ? void 0 : _a.includes('yfm-tabs-vertical');
+                    stack.push({ vertical });
+                    if (vertical)
+                        token.type = prefix + token.type;
+                    break;
+                }
+                case 'tabs_close': {
+                    const item = stack.pop();
+                    if (item === null || item === void 0 ? void 0 : item.vertical)
+                        token.type = prefix + token.type;
+                    break;
+                }
+                case 'tab_open': {
+                    const item = stack.at(-1);
+                    if (item === null || item === void 0 ? void 0 : item.vertical) {
+                        // --> TODO: remove after updating to tabs-extension v^3.4.0
+                        const isInput = token.tag === 'input';
+                        if (isInput)
+                            token.type = 'tab-input';
+                        // <--
+                        token.type = prefix + token.type;
+                    }
+                    break;
+                }
+                case 'tab_close': {
+                    const item = stack.at(-1);
+                    if (item === null || item === void 0 ? void 0 : item.vertical) {
+                        token.type = prefix + token.type;
+                        // --> TODO: remove after updating to tabs-extension v^3.4.0
+                        tabCloseIndexes.push(state.tokens.indexOf(token));
+                        // <--
+                    }
+                    break;
+                }
+                case 'tab-input':
+                case 'tab-label_open':
+                case 'tab-label_close': {
+                    const item = stack.at(-1);
+                    if (item === null || item === void 0 ? void 0 : item.vertical) {
+                        token.type = prefix + token.type;
+                    }
+                    break;
+                }
+                // --> TODO: remove after updating to tabs-extension v^3.4.0
+                case 'label_open': {
+                    const tokenIndex = state.tokens.indexOf(token);
+                    const prevToken = tokenIndex > 0 && state.tokens.at(tokenIndex - 1);
+                    if (prevToken && prevToken.type === 'r-tab-input') {
+                        token.type = prefix + 'tab-' + token.type;
+                    }
+                    break;
+                }
+                // <--
+            }
+        }
+        // --> TODO: remove after updating to tabs-extension v^3.4.0
+        for (const index of tabCloseIndexes.reverse()) {
+            if (index === -1)
+                continue;
+            const labelCloseToken = new state.Token(prefix + 'tab-label_close', 'label', -1);
+            state.tokens.splice(index, 0, labelCloseToken);
+        }
+        // <--
+    });
+};

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/parser.js

@@ -1,13 +1,13 @@
 import { TabsNode } from './const';
 const attrsFromEntries = (token) => (token.attrs ? Object.fromEntries(token.attrs) : {});
 export const parserTokens = {
-    [TabsNode.Tab]: {
-        name: TabsNode.Tab,
+    [TabsNode.TabPanel]: {
+        name: TabsNode.TabPanel,
         type: 'block',
         getAttrs: attrsFromEntries,
     },
-    [TabsNode.TabPanel]: {
-        name: TabsNode.TabPanel,
+    [TabsNode.Tab]: {
+        name: TabsNode.Tab,
         type: 'block',
         getAttrs: attrsFromEntries,
     },
@@ -21,4 +21,24 @@ export const parserTokens = {
         type: 'block',
         getAttrs: attrsFromEntries,
     },
+    [TabsNode.RadioTabs]: {
+        name: TabsNode.RadioTabs,
+        type: 'block',
+        getAttrs: attrsFromEntries,
+    },
+    [TabsNode.RadioTab]: {
+        name: TabsNode.RadioTab,
+        type: 'block',
+        getAttrs: attrsFromEntries,
+    },
+    [TabsNode.RadioTabInput]: {
+        name: TabsNode.RadioTabInput,
+        type: 'node',
+        getAttrs: attrsFromEntries,
+    },
+    [TabsNode.RadioTabLabel]: {
+        name: TabsNode.RadioTabLabel,
+        type: 'block',
+        getAttrs: attrsFromEntries,
+    },
 };

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/schema.js

@@ -1,9 +1,10 @@
 import { TabAttrs, TabPanelAttrs, TabsAttrs, TabsListAttrs, TabsNode } from './const';
 const DEFAULT_PLACEHOLDERS = {
     TabTitle: 'Tab title',
+    RadioTabLabelTitle: 'Radio title',
 };
 export const getSchemaSpecs = (opts, placeholder) => {
-    var _a, _b;
+    var _a, _b, _c;
     return ({
         [TabsNode.Tab]: {
             attrs: {
@@ -79,5 +80,69 @@ export const getSchemaSpecs = (opts, placeholder) => {
             allowSelection: false,
             complex: 'inner',
         },
+        [TabsNode.RadioTabs]: {
+            attrs: {
+                [TabsAttrs.class]: { default: 'yfm-tabs yfm-tabs-vertical' },
+                [TabsAttrs.dataDiplodocGroup]: { default: 'unknown' },
+            },
+            content: `(${TabsNode.RadioTab} ${TabsNode.TabPanel})+`,
+            group: 'block',
+            toDOM(node) {
+                return ['div', node.attrs, 0];
+            },
+            complex: 'root',
+        },
+        [TabsNode.RadioTab]: {
+            attrs: {
+                [TabAttrs.id]: { default: null },
+                [TabAttrs.class]: { default: 'yfm-tab yfm-vertical-tab' },
+                [TabAttrs.role]: { default: 'unknown' },
+                [TabAttrs.ariaControls]: { default: 'unknown' },
+                [TabAttrs.ariaSelected]: { default: 'unknown' },
+                [TabAttrs.tabindex]: { default: 'unknown' },
+                [TabAttrs.dataDiplodocKey]: { default: 'unknown' },
+                [TabAttrs.dataDiplodocid]: { default: 'unknown' },
+                [TabAttrs.dataDiplodocIsActive]: { default: 'false' },
+                [TabAttrs.dataDiplodocVerticalTab]: { default: 'true' },
+            },
+            content: `${TabsNode.RadioTabInput} ${TabsNode.RadioTabLabel}`,
+            group: 'block',
+            toDOM(node) {
+                return ['div', node.attrs, 0];
+            },
+            selectable: false,
+            allowSelection: false,
+            complex: 'inner',
+        },
+        [TabsNode.RadioTabInput]: {
+            attrs: {
+                [TabAttrs.class]: { default: 'radio' },
+                type: { default: 'radio' },
+                checked: { default: null },
+            },
+            group: 'block',
+            toDOM(node) {
+                return ['input', node.attrs];
+            },
+            selectable: false,
+            allowSelection: false,
+            complex: 'leaf',
+        },
+        [TabsNode.RadioTabLabel]: {
+            attrs: {},
+            marks: '',
+            content: 'text*',
+            group: 'block',
+            toDOM(node) {
+                return ['label', node.attrs, 0];
+            },
+            placeholder: {
+                content: (_c = placeholder === null || placeholder === void 0 ? void 0 : placeholder[TabsNode.RadioTab]) !== null && _c !== void 0 ? _c : DEFAULT_PLACEHOLDERS.RadioTabLabelTitle,
+                alwaysVisible: true,
+            },
+            selectable: false,
+            allowSelection: false,
+            complex: 'leaf',
+        },
     });
 };

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/serializer.js

@@ -1,3 +1,4 @@
+import { getChildrenOfNode } from '../../../../utils/nodes';
 import { getPlaceholderContent } from '../../../../utils/placeholder';
 import { TabsNode } from './const';
 export const serializerTokens = {
@@ -29,4 +30,31 @@ export const serializerTokens = {
     [TabsNode.TabsList]: (state, node) => {
         state.renderList(node, '  ', () => (node.attrs.bullet || '-') + ' ');
     },
+    [TabsNode.RadioTabs]: (state, node) => {
+        state.write('{% list tabs radio %}');
+        state.write('\n');
+        state.write('\n');
+        const children = getChildrenOfNode(node);
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            if (child.node.type.name !== TabsNode.RadioTab)
+                continue;
+            state.write('- ' + (child.node.textContent || getPlaceholderContent(child.node.lastChild)));
+            state.write('\n');
+            state.write('\n');
+            const nextChild = children[i + 1];
+            if (nextChild.node.type.name !== TabsNode.TabPanel)
+                continue;
+            state.renderList(nextChild.node, '  ', () => '  ');
+        }
+        state.write('{% endlist %}');
+        state.closeBlock(node);
+    },
+    [TabsNode.RadioTab]: (state, node) => {
+        state.renderInline(node);
+    },
+    [TabsNode.RadioTabInput]: () => { },
+    [TabsNode.RadioTabLabel]: (state, node) => {
+        state.renderInline(node);
+    },
 };

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

@@ -2,13 +2,15 @@ import { chainCommands } from 'prosemirror-commands';
 import { YfmTabsSpecs } from './YfmTabsSpecs';
 import { createYfmTabs } from './actions';
 import { dragAutoSwitch, joinBackwardToOpenTab, liftEmptyBlockFromTabPanel, removeTabWhenCursorAtTheStartOfTab, tabEnter, tabPanelArrowDown, } from './plugins';
-import { tabPanelView, tabView } from './views';
+import { tabPanelView, tabView, vtabInputView, vtabView } from './views';
 export { TabsNode, tabType, tabsType, tabsListType, tabPanelType } from './YfmTabsSpecs';
 const actionName = 'toYfmTabs';
 export const YfmTabs = (builder) => {
     builder.use(YfmTabsSpecs, {
         tabView: () => tabView,
         tabPanelView: () => tabPanelView,
+        vtabView: () => vtabView,
+        vtabInputView: () => vtabInputView,
     });
     builder.addKeymap(() => ({
         Backspace: chainCommands(removeTabWhenCursorAtTheStartOfTab, joinBackwardToOpenTab),

package/build/esm/extensions/yfm/YfmTabs/views.d.ts

@@ -2,3 +2,5 @@ import { NodeViewConstructor } from 'prosemirror-view';
 import './index.css';
 export declare const tabView: NodeViewConstructor;
 export declare const tabPanelView: NodeViewConstructor;
+export declare const vtabView: NodeViewConstructor;
+export declare const vtabInputView: NodeViewConstructor;

package/build/esm/extensions/yfm/YfmTabs/views.js

@@ -10,7 +10,7 @@ const ignoreMutation = (node, view, getPos) => (mutation) => {
         mutation.type === 'attributes' &&
         mutation.attributeName) {
         const newAttr = mutation.target.getAttribute(mutation.attributeName);
-        view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, Object.assign(Object.assign({}, node.attrs), { [mutation.attributeName]: String(newAttr) })));
+        view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, Object.assign(Object.assign({}, node.attrs), { [mutation.attributeName]: newAttr })));
         return true;
     }
     return false;
@@ -71,6 +71,16 @@ export const tabView = (node, view, getPos) => {
 };
 // @ts-expect-error
 export const tabPanelView = (node, view, getPos) => ({
-    // FIX: ignore mutation and don't rerender node when yfm.js switch tab
+    // FIXME: ignore mutation and don't rerender node when yfm.js switch tab
+    ignoreMutation: ignoreMutation(node, view, getPos),
+});
+// @ts-expect-error
+export const vtabView = (node, view, getPos) => ({
+    // FIXME: ignore mutation and don't rerender node when yfm.js switch tab
+    ignoreMutation: ignoreMutation(node, view, getPos),
+});
+// @ts-expect-error
+export const vtabInputView = (node, view, getPos) => ({
+    // FIXME: ignore mutation and don't rerender node when yfm.js switch tab
     ignoreMutation: ignoreMutation(node, view, getPos),
 });

package/build/esm/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.19.0",
+  "version": "13.20.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {