@gravity-ui/markdown-editor 13.0.0

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

@@ -0,0 +1,37 @@
+.g-md-table-cell-view__left-button {
+  position: absolute;
+  z-index: 110;
+  top: calc(50% - 14px);
+  left: -13px;
+  pointer-events: none;
+  opacity: 0;
+  border-radius: var(--g-border-radius-s);
+  background: var(--g-color-base-background);
+}
+.g-md-table-cell-view__left-button:hover {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__upper-button {
+  position: absolute;
+  z-index: 110;
+  top: -13px;
+  left: calc(50% - 14px);
+  pointer-events: none;
+  opacity: 0;
+  border-radius: var(--g-border-radius-s);
+  background: var(--g-color-base-background);
+  transform: rotate(90deg);
+}
+.g-md-table-cell-view__upper-button:hover {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__upper-visible .g-md-table-cell-view__upper-button {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__left-visible .g-md-table-cell-view__left-button {
+  pointer-events: initial;
+  opacity: 1;
+}

package/build/cjs/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.d.ts

@@ -0,0 +1,3 @@
+import { NodeViewConstructor } from 'prosemirror-view';
+export declare const yfmTableCellCn: import("@bem-react/classname").ClassNameFormatter;
+export declare const yfmTableCellView: NodeViewConstructor;

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

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.yfmTableCellView = exports.yfmTableCellCn = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const react_dom_1 = require("react-dom");
+const classname_1 = require("../../../../../classname");
+const core_1 = require("../../../../../core");
+const yfm_table_1 = require("../../../../../i18n/yfm-table");
+const ErrorBoundary_1 = require("../../../../../react-utils/ErrorBoundary");
+const table_utils_1 = require("../../../../../table-utils");
+const ReactRenderer_1 = require("../../../../behavior/ReactRenderer");
+const actions_1 = require("./actions");
+exports.yfmTableCellCn = (0, classname_1.cn)('table-cell-view');
+const b = exports.yfmTableCellCn;
+const Controls = function Controls({ columnNumber, rowNumber, view, getParentTable, isInFirstRow, isFirstInRow, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const actions = (0, core_1.bindActions)(actions_1.controlActions)(view);
+    const controls = [];
+    if (isFirstInRow) {
+        controls.push(react_1.default.createElement(uikit_1.DropdownMenu, { key: 1, switcherWrapperClassName: b('left-button'), switcher: react_1.default.createElement(uikit_1.Button, { view: 'outlined', size: 's' },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.EllipsisVertical })), items: [
+                {
+                    text: (0, yfm_table_1.i18n)('row.add.before'),
+                    action: () => {
+                        var _a;
+                        return actions.appendRow.run({
+                            tablePos: (_a = getParentTable()) === null || _a === void 0 ? void 0 : _a.pos,
+                            rowNumber,
+                            direction: 'before',
+                        });
+                    },
+                    icon: react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowUp }),
+                    disabled: !actions.appendRow.isEnable({
+                        tablePos: (_a = getParentTable()) === null || _a === void 0 ? void 0 : _a.pos,
+                        rowNumber,
+                        direction: 'before',
+                    }),
+                },
+                {
+                    text: (0, yfm_table_1.i18n)('row.add.after'),
+                    action: () => {
+                        var _a;
+                        return actions.appendRow.run({
+                            tablePos: (_a = getParentTable()) === null || _a === void 0 ? void 0 : _a.pos,
+                            rowNumber,
+                            direction: 'after',
+                        });
+                    },
+                    icon: react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowDown }),
+                    disabled: !actions.appendRow.isEnable({
+                        tablePos: (_b = getParentTable()) === null || _b === void 0 ? void 0 : _b.pos,
+                        rowNumber,
+                        direction: 'after',
+                    }),
+                },
+                {
+                    text: (0, yfm_table_1.i18n)('row.remove'),
+                    action: () => {
+                        var _a;
+                        return actions.deleteRow.run({
+                            rowNumber,
+                            tablePos: (_a = getParentTable()) === null || _a === void 0 ? void 0 : _a.pos,
+                        });
+                    },
+                    icon: react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark }),
+                    disabled: !actions.deleteRow.isEnable({
+                        rowNumber,
+                        tablePos: (_c = getParentTable()) === null || _c === void 0 ? void 0 : _c.pos,
+                    }),
+                },
+                {
+                    theme: 'danger',
+                    text: (0, yfm_table_1.i18n)('table.remove'),
+                    action: () => {
+                        var _a, _b;
+                        return actions.deleteTable.run({
+                            tablePos: (_a = getParentTable()) === null || _a === void 0 ? void 0 : _a.pos,
+                            tableNode: (_b = getParentTable()) === null || _b === void 0 ? void 0 : _b.node,
+                        });
+                    },
+                    icon: react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin }),
+                    disabled: !actions.deleteTable.isEnable({
+                        tablePos: (_d = getParentTable()) === null || _d === void 0 ? void 0 : _d.pos,
+                        tableNode: (_e = getParentTable()) === null || _e === void 0 ? void 0 : _e.node,
+                    }),
+                },
+            ] }));
+    }
+    if (isInFirstRow) {
+        controls.push(react_1.default.createElement(uikit_1.DropdownMenu, { key: 2, switcherWrapperClassName: b('upper-button'), switcher: react_1.default.createElement(uikit_1.Button, { view: 'outlined', size: 's' },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.EllipsisVertical })), items: [
+                {
+                    text: (0, yfm_table_1.i18n)('column.add.before'),
+                    action: () => {
+                        var _a;
+                        return actions.appendColumn.run({
+                            tablePos: (_a = getParentTable()) === null || _a === void 0 ? void 0 : _a.pos,
+                            columnNumber,
+                            direction: 'before',
+                        });
+                    },
+                    icon: react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowLeft }),
+                    disabled: !actions.appendColumn.isEnable({
+                        tablePos: (_f = getParentTable()) === null || _f === void 0 ? void 0 : _f.pos,
+                        columnNumber,
+                        direction: 'before',
+                    }),
+                },
+                {
+                    text: (0, yfm_table_1.i18n)('column.add.after'),
+                    action: () => {
+                        var _a;
+                        return actions.appendColumn.run({
+                            tablePos: (_a = getParentTable()) === null || _a === void 0 ? void 0 : _a.pos,
+                            columnNumber,
+                            direction: 'after',
+                        });
+                    },
+                    icon: react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowRight }),
+                    disabled: !actions.appendColumn.isEnable({
+                        tablePos: (_g = getParentTable()) === null || _g === void 0 ? void 0 : _g.pos,
+                        columnNumber,
+                        direction: 'after',
+                    }),
+                },
+                {
+                    text: (0, yfm_table_1.i18n)('column.remove'),
+                    action: () => {
+                        var _a;
+                        return actions.deleteColumn.run({
+                            columnNumber,
+                            tablePos: (_a = getParentTable()) === null || _a === void 0 ? void 0 : _a.pos,
+                        });
+                    },
+                    icon: react_1.default.createElement(uikit_1.Icon, { data: icons_1.Xmark }),
+                    disabled: !actions.deleteColumn.isEnable({
+                        columnNumber,
+                        tablePos: (_h = getParentTable()) === null || _h === void 0 ? void 0 : _h.pos,
+                    }),
+                },
+                {
+                    theme: 'danger',
+                    text: (0, yfm_table_1.i18n)('table.remove'),
+                    action: () => {
+                        var _a, _b;
+                        return actions.deleteTable.run({
+                            tablePos: (_a = getParentTable()) === null || _a === void 0 ? void 0 : _a.pos,
+                            tableNode: (_b = getParentTable()) === null || _b === void 0 ? void 0 : _b.node,
+                        });
+                    },
+                    icon: react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin }),
+                    disabled: !actions.deleteTable.isEnable({
+                        tablePos: (_j = getParentTable()) === null || _j === void 0 ? void 0 : _j.pos,
+                        tableNode: (_k = getParentTable()) === null || _k === void 0 ? void 0 : _k.node,
+                    }),
+                },
+            ] }));
+    }
+    return controls.length ? react_1.default.createElement(react_1.default.Fragment, null, controls) : null;
+};
+const yfmTableCellView = (node, view, getPos) => {
+    const dom = document.createElement('td');
+    const contentDOM = document.createElement('div');
+    const control = document.createElement('span');
+    control.setAttribute('style', 'width: 0; height: 0; float: left;');
+    dom.setAttribute('style', 'position: relative; overflow: visible;');
+    const getParentTable = () => (0, prosemirror_utils_1.findParentNodeClosestToPos)(view.state.doc.resolve(getPos()), table_utils_1.isTableNode);
+    const parentTable = getParentTable();
+    // @ts-expect-error
+    if (!parentTable)
+        return {};
+    const rowNodes = (0, prosemirror_utils_1.findChildren)(parentTable === null || parentTable === void 0 ? void 0 : parentTable.node, table_utils_1.isTableRowNode);
+    const relativeCelPos = getPos() - (parentTable === null || parentTable === void 0 ? void 0 : parentTable.pos);
+    const rowNumber = rowNodes.findIndex((_v, i) => {
+        var _a;
+        return relativeCelPos > rowNodes[i].pos &&
+            relativeCelPos < (((_a = rowNodes[i + 1]) === null || _a === void 0 ? void 0 : _a.pos) || Number.MAX_SAFE_INTEGER);
+    });
+    const parentRow = rowNodes[rowNumber];
+    const columnNumber = (0, prosemirror_utils_1.findChildren)(parentRow.node, table_utils_1.isTableCellNode).findIndex((c) => {
+        return c.pos === relativeCelPos - parentRow.pos - 2;
+    });
+    const isFirstInRow = rowNodes.findIndex((r) => r.pos === relativeCelPos - 2) >= 0;
+    dom.appendChild(contentDOM);
+    dom.appendChild(control);
+    const renderItem = (0, ReactRenderer_1.getReactRendererFromState)(view.state).createItem('yfm-table-cell-view', () => (0, react_dom_1.createPortal)(react_1.default.createElement(ErrorBoundary_1.ErrorLoggerBoundary, null,
+        react_1.default.createElement(Controls, { columnNumber: columnNumber, rowNumber: rowNumber, isFirstInRow: isFirstInRow, isInFirstRow: rowNumber === 0, getParentTable: getParentTable, view: view })), control));
+    contentDOM.setAttribute('data-row-number', String(rowNumber));
+    contentDOM.setAttribute('data-col-number', String(columnNumber));
+    return {
+        dom,
+        contentDOM,
+        destroy() {
+            renderItem.remove();
+        },
+        ignoreMutation(mutation) {
+            return mutation.type === 'childList' && mutation.target === control;
+        },
+        update(n) {
+            const { rows: nRows, cols: nCols } = (0, table_utils_1.getTableDimensions)(n);
+            const { rows, cols } = (0, table_utils_1.getTableDimensions)(node);
+            return !(rows !== nRows || cols !== nCols);
+        },
+    };
+};
+exports.yfmTableCellView = yfmTableCellView;

package/build/cjs/extensions/yfm/YfmTable/plugins/yfmTableTransformPastedPlugin.d.ts

@@ -0,0 +1,7 @@
+import { Schema } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
+interface Args {
+    schema: Schema;
+}
+export declare const yfmTableTransformPastedPlugin: ({ schema }: Args) => Plugin<any>;
+export {};

package/build/cjs/extensions/yfm/YfmTable/plugins/yfmTableTransformPastedPlugin.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.yfmTableTransformPastedPlugin = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const paste_1 = require("../paste");
+const yfmTableTransformPastedPlugin = ({ schema }) => new prosemirror_state_1.Plugin({
+    props: {
+        transformPasted(slice) {
+            return (0, paste_1.fixPastedTableBodies)(slice, schema);
+        },
+    },
+});
+exports.yfmTableTransformPastedPlugin = yfmTableTransformPastedPlugin;

package/build/cjs/extensions/yfm/YfmTable/utils.d.ts

@@ -0,0 +1 @@
+export * from './YfmTableSpecs/utils';

package/build/cjs/extensions/yfm/YfmTable/utils.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./YfmTableSpecs/utils"), exports);

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

@@ -0,0 +1,32 @@
+export declare enum TabsNode {
+    Tab = "yfm_tab",
+    TabsList = "yfm_tabs_list",
+    TabPanel = "yfm_tab_panel",
+    Tabs = "yfm_tabs"
+}
+export declare enum TabsAttrs {
+    class = "class",
+    dataDiplodocGroup = "data-diplodoc-group"
+}
+export declare enum TabsListAttrs {
+    class = "class",
+    role = "role"
+}
+export declare enum TabAttrs {
+    id = "id",
+    class = "class",
+    role = "role",
+    ariaControls = "aria-controls",
+    ariaSelected = "aria-selected",
+    tabindex = "tabindex",
+    dataDiplodocKey = "data-diplodoc-key",
+    dataDiplodocid = "data-diplodoc-id",
+    dataDiplodocIsActive = "data-diplodoc-is-active"
+}
+export declare enum TabPanelAttrs {
+    id = "id",
+    class = "class",
+    role = "role",
+    dataTitle = "data-title",
+    ariaLabelledby = "aria-labelledby"
+}

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanelAttrs = exports.TabAttrs = exports.TabsListAttrs = exports.TabsAttrs = exports.TabsNode = void 0;
+var TabsNode;
+(function (TabsNode) {
+    TabsNode["Tab"] = "yfm_tab";
+    TabsNode["TabsList"] = "yfm_tabs_list";
+    TabsNode["TabPanel"] = "yfm_tab_panel";
+    TabsNode["Tabs"] = "yfm_tabs";
+})(TabsNode = exports.TabsNode || (exports.TabsNode = {}));
+var TabsAttrs;
+(function (TabsAttrs) {
+    TabsAttrs["class"] = "class";
+    TabsAttrs["dataDiplodocGroup"] = "data-diplodoc-group";
+})(TabsAttrs = exports.TabsAttrs || (exports.TabsAttrs = {}));
+var TabsListAttrs;
+(function (TabsListAttrs) {
+    TabsListAttrs["class"] = "class";
+    TabsListAttrs["role"] = "role";
+})(TabsListAttrs = exports.TabsListAttrs || (exports.TabsListAttrs = {}));
+var TabAttrs;
+(function (TabAttrs) {
+    TabAttrs["id"] = "id";
+    TabAttrs["class"] = "class";
+    TabAttrs["role"] = "role";
+    TabAttrs["ariaControls"] = "aria-controls";
+    TabAttrs["ariaSelected"] = "aria-selected";
+    TabAttrs["tabindex"] = "tabindex";
+    TabAttrs["dataDiplodocKey"] = "data-diplodoc-key";
+    TabAttrs["dataDiplodocid"] = "data-diplodoc-id";
+    TabAttrs["dataDiplodocIsActive"] = "data-diplodoc-is-active";
+})(TabAttrs = exports.TabAttrs || (exports.TabAttrs = {}));
+var TabPanelAttrs;
+(function (TabPanelAttrs) {
+    TabPanelAttrs["id"] = "id";
+    TabPanelAttrs["class"] = "class";
+    TabPanelAttrs["role"] = "role";
+    TabPanelAttrs["dataTitle"] = "data-title";
+    TabPanelAttrs["ariaLabelledby"] = "aria-labelledby";
+})(TabPanelAttrs = exports.TabPanelAttrs || (exports.TabPanelAttrs = {}));

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

@@ -0,0 +1,18 @@
+import { NodeSpec } from 'prosemirror-model';
+import type { ExtensionAuto, ExtensionNodeSpec } from '../../../../core';
+export { TabsNode } from './const';
+export declare const tabPanelType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const tabType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const tabsType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare const tabsListType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+export declare type YfmTabsSpecsOptions = {
+    /**
+     * @deprecated: use placeholder option in BehaviorPreset instead.
+     */
+    tabPlaceholder?: NonNullable<NodeSpec['placeholder']>['content'];
+    tabView?: ExtensionNodeSpec['view'];
+    tabsListView?: ExtensionNodeSpec['view'];
+    tabPanelView?: ExtensionNodeSpec['view'];
+    tabsView?: ExtensionNodeSpec['view'];
+};
+export declare const YfmTabsSpecs: ExtensionAuto<YfmTabsSpecsOptions>;

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YfmTabsSpecs = exports.tabsListType = exports.tabsType = exports.tabType = exports.tabPanelType = exports.TabsNode = void 0;
+const tslib_1 = require("tslib");
+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 parser_1 = require("./parser");
+const schema_2 = require("./schema");
+const serializer_1 = require("./serializer");
+var const_2 = require("./const");
+Object.defineProperty(exports, "TabsNode", { enumerable: true, get: function () { return const_2.TabsNode; } });
+exports.tabPanelType = (0, schema_1.nodeTypeFactory)(const_1.TabsNode.TabPanel);
+exports.tabType = (0, schema_1.nodeTypeFactory)(const_1.TabsNode.Tab);
+exports.tabsType = (0, schema_1.nodeTypeFactory)(const_1.TabsNode.Tabs);
+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 }))
+        .addNode(const_1.TabsNode.Tab, () => ({
+        spec: schemaSpecs[const_1.TabsNode.Tab],
+        toMd: serializer_1.serializerTokens[const_1.TabsNode.Tab],
+        fromMd: {
+            tokenSpec: parser_1.parserTokens[const_1.TabsNode.Tab],
+            tokenName: 'tab',
+        },
+        view: opts.tabView,
+    }))
+        .addNode(const_1.TabsNode.TabsList, () => ({
+        spec: schemaSpecs[const_1.TabsNode.TabsList],
+        toMd: serializer_1.serializerTokens[const_1.TabsNode.TabsList],
+        fromMd: {
+            tokenSpec: parser_1.parserTokens[const_1.TabsNode.TabsList],
+            tokenName: 'tab-list',
+        },
+        view: opts.tabsListView,
+    }))
+        .addNode(const_1.TabsNode.TabPanel, () => ({
+        spec: schemaSpecs[const_1.TabsNode.TabPanel],
+        toMd: serializer_1.serializerTokens[const_1.TabsNode.TabPanel],
+        fromMd: {
+            tokenSpec: parser_1.parserTokens[const_1.TabsNode.TabPanel],
+            tokenName: 'tab-panel',
+        },
+        view: opts.tabPanelView,
+    }))
+        .addNode(const_1.TabsNode.Tabs, () => ({
+        spec: schemaSpecs[const_1.TabsNode.Tabs],
+        toMd: serializer_1.serializerTokens[const_1.TabsNode.Tabs],
+        fromMd: {
+            tokenSpec: parser_1.parserTokens[const_1.TabsNode.Tabs],
+            tokenName: 'tabs',
+        },
+        view: opts.tabsView,
+    }));
+};
+exports.YfmTabsSpecs = YfmTabsSpecs;

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

@@ -0,0 +1,3 @@
+import type { ParserToken } from '../../../../core';
+import { TabsNode } from './const';
+export declare const parserTokens: Record<TabsNode, ParserToken>;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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,
+        type: 'block',
+        getAttrs: attrsFromEntries,
+    },
+    [const_1.TabsNode.TabPanel]: {
+        name: const_1.TabsNode.TabPanel,
+        type: 'block',
+        getAttrs: attrsFromEntries,
+    },
+    [const_1.TabsNode.Tabs]: {
+        name: const_1.TabsNode.Tabs,
+        type: 'block',
+        getAttrs: attrsFromEntries,
+    },
+    [const_1.TabsNode.TabsList]: {
+        name: const_1.TabsNode.TabsList,
+        type: 'block',
+        getAttrs: attrsFromEntries,
+    },
+};

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

@@ -0,0 +1,5 @@
+import type { NodeSpec } from 'prosemirror-model';
+import { PlaceholderOptions } from '../../../../utils/placeholder';
+import { TabsNode } from './const';
+import { YfmTabsSpecsOptions } from '.';
+export declare const getSchemaSpecs: (opts: YfmTabsSpecsOptions, placeholder?: PlaceholderOptions) => Record<TabsNode, NodeSpec>;

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

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSchemaSpecs = void 0;
+const const_1 = require("./const");
+const DEFAULT_PLACEHOLDERS = {
+    TabTitle: 'Tab title',
+};
+const getSchemaSpecs = (opts, placeholder) => {
+    var _a, _b;
+    return ({
+        [const_1.TabsNode.Tab]: {
+            attrs: {
+                [const_1.TabAttrs.id]: { default: 'unknown' },
+                [const_1.TabAttrs.class]: { default: 'yfm-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: 'unknown' },
+            },
+            marks: '',
+            content: 'text*',
+            group: 'block',
+            parseDOM: [{ tag: 'div.yfm-tab' }],
+            toDOM(node) {
+                return ['div', node.attrs, 0];
+            },
+            placeholder: {
+                content: (_b = (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder[const_1.TabsNode.Tab]) !== null && _a !== void 0 ? _a : opts === null || opts === void 0 ? void 0 : opts.tabPlaceholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDERS.TabTitle,
+                alwaysVisible: true,
+            },
+            selectable: false,
+            allowSelection: false,
+            complex: 'leaf',
+        },
+        [const_1.TabsNode.TabPanel]: {
+            attrs: {
+                [const_1.TabPanelAttrs.id]: { default: 'unknown' },
+                [const_1.TabPanelAttrs.class]: { default: 'yfm-tab-panel' },
+                [const_1.TabPanelAttrs.role]: { default: 'unknown' },
+                [const_1.TabPanelAttrs.dataTitle]: { default: 'unknown' },
+                [const_1.TabPanelAttrs.ariaLabelledby]: { default: 'unknown' },
+            },
+            content: '(block | paragraph)+',
+            group: 'block',
+            parseDOM: [{ tag: 'div.yfm-tab-panel' }],
+            toDOM(node) {
+                return ['div', node.attrs, 0];
+            },
+            selectable: false,
+            allowSelection: false,
+            complex: 'leaf',
+            isolating: true,
+        },
+        [const_1.TabsNode.Tabs]: {
+            attrs: {
+                [const_1.TabsAttrs.class]: { default: 'yfm-tabs' },
+                [const_1.TabsAttrs.dataDiplodocGroup]: { default: 'unknown' },
+            },
+            content: `${const_1.TabsNode.TabsList} ${const_1.TabsNode.TabPanel}+`,
+            group: 'block',
+            parseDOM: [{ tag: 'div.yfm-tabs' }],
+            toDOM(node) {
+                return ['div', node.attrs, 0];
+            },
+            complex: 'root',
+        },
+        [const_1.TabsNode.TabsList]: {
+            attrs: {
+                [const_1.TabsListAttrs.class]: { default: 'yfm-tab-list' },
+                [const_1.TabsListAttrs.role]: { default: 'unknown' },
+            },
+            content: `${const_1.TabsNode.Tab}*`,
+            group: 'block',
+            parseDOM: [{ tag: 'div.yfm-tab-list' }],
+            toDOM(node) {
+                return ['div', node.attrs, 0];
+            },
+            selectable: false,
+            allowSelection: false,
+            complex: 'inner',
+        },
+    });
+};
+exports.getSchemaSpecs = getSchemaSpecs;

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

@@ -0,0 +1,3 @@
+import type { SerializerNodeToken } from '../../../../core';
+import { TabsNode } from './const';
+export declare const serializerTokens: Record<TabsNode, SerializerNodeToken>;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializerTokens = void 0;
+const placeholder_1 = require("../../../../utils/placeholder");
+const const_1 = require("./const");
+exports.serializerTokens = {
+    [const_1.TabsNode.Tab]: (state, node) => {
+        state.renderInline(node);
+    },
+    [const_1.TabsNode.TabPanel]: (state, node) => {
+        state.renderContent(node);
+    },
+    [const_1.TabsNode.Tabs]: (state, node) => {
+        state.write('{% list tabs %}');
+        state.write('\n');
+        state.write('\n');
+        const children = [];
+        node.content.forEach((a) => {
+            children.push(a);
+        });
+        const tabList = children[0].content;
+        tabList.forEach((tab, _, i) => {
+            state.write('- ' + (tab.textContent || (0, placeholder_1.getPlaceholderContent)(tab)));
+            state.write('\n');
+            state.write('\n');
+            if (children[i + 1])
+                state.renderList(children[i + 1], '  ', () => '  ');
+        });
+        state.write('{% endlist %}');
+        state.closeBlock(node);
+    },
+    [const_1.TabsNode.TabsList]: (state, node) => {
+        state.renderList(node, '  ', () => (node.attrs.bullet || '-') + ' ');
+    },
+};

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

@@ -0,0 +1,6 @@
+import type { Command } from 'prosemirror-state';
+export declare const createYfmTabsCommand: Command;
+export declare const createYfmTabs: {
+    isEnable: Command;
+    run: Command;
+};

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createYfmTabs = exports.createYfmTabsCommand = void 0;
+const utils_1 = require("@diplodoc/transform/lib/plugins/utils");
+const BaseSchema_1 = require("../../base/BaseSchema");
+const const_1 = require("./YfmTabsSpecs/const");
+const const_2 = require("./const");
+const _1 = require(".");
+const createYfmTabsCommand = (state, dispatch) => {
+    if (dispatch) {
+        const { schema } = state;
+        const tabId = (0, utils_1.generateID)();
+        const panelId = (0, utils_1.generateID)();
+        const yfmTabsList = (0, _1.tabsListType)(schema);
+        const yfmTabs = (0, _1.tabsType)(schema);
+        const yfmTabPanel = (0, _1.tabPanelType)(state.schema).create({
+            [const_1.TabPanelAttrs.ariaLabelledby]: tabId,
+            [const_1.TabPanelAttrs.id]: panelId,
+            [const_1.TabPanelAttrs.class]: const_2.tabPanelActiveClassname,
+        }, (0, BaseSchema_1.pType)(state.schema).createAndFill());
+        const yfmTab = (0, _1.tabType)(state.schema).create({
+            [const_1.TabAttrs.id]: tabId,
+            [const_1.TabAttrs.class]: const_2.tabActiveClassname,
+            [const_1.TabAttrs.ariaControls]: panelId,
+            [const_1.TabAttrs.dataDiplodocIsActive]: 'true',
+            [const_1.TabAttrs.dataDiplodocid]: tabId,
+            [const_1.TabAttrs.dataDiplodocKey]: tabId,
+        });
+        const tabs = yfmTabs.create({ [const_1.TabsAttrs.dataDiplodocGroup]: (0, utils_1.generateID)() }, [
+            yfmTabsList.create(null, [yfmTab]),
+            yfmTabPanel,
+        ]);
+        dispatch(state.tr.replaceSelectionWith(tabs).scrollIntoView());
+    }
+    return true;
+};
+exports.createYfmTabsCommand = createYfmTabsCommand;
+exports.createYfmTabs = {
+    isEnable: exports.createYfmTabsCommand,
+    run: exports.createYfmTabsCommand,
+};