feat!: import yfmTabs plugin from separate tabs-extension package

demo/md-plugins.ts

@@ -1,10 +1,10 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import {transform as yfmCut} from '@diplodoc/cut-extension';
 import {transform as foldingHeadings} from '@diplodoc/folding-headings-extension';
 import '@diplodoc/folding-headings-extension/runtime';
 import {transform as yfmHtmlBlock} from '@diplodoc/html-extension';
 import {transform as latex} from '@diplodoc/latex-extension';
 import {transform as mermaid} from '@diplodoc/mermaid-extension';
+import {transform as yfmTabs} from '@diplodoc/tabs-extension';
 import anchors from '@diplodoc/transform/lib/plugins/anchors';
 import checkbox from '@diplodoc/transform/lib/plugins/checkbox';
 import code from '@diplodoc/transform/lib/plugins/code';
@@ -16,7 +16,6 @@ import monospace from '@diplodoc/transform/lib/plugins/monospace';
 import notes from '@diplodoc/transform/lib/plugins/notes';
 import sup from '@diplodoc/transform/lib/plugins/sup';
 import yfmTable from '@diplodoc/transform/lib/plugins/table';
-import tabs from '@diplodoc/transform/lib/plugins/tabs';
 import video from '@diplodoc/transform/lib/plugins/video';
 import type {PluginWithParams} from 'markdown-it/lib';
 
@@ -42,7 +41,17 @@ const defaultPlugins: PluginWithParams[] = [
     monospace,
     notes,
     sup,
-    tabs,
+    yfmTabs({
+        bundle: false,
+        features: {
+            enabledVariants: {
+                regular: true,
+                radio: true,
+                dropdown: false,
+                accordion: false,
+            },
+        },
+    }),
     video,
     yfmTable,
 ];

package.json

@@ -205,6 +205,7 @@
     "@diplodoc/html-extension": "2.3.2",
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
+    "@diplodoc/tabs-extension": "^3.5.1",
     "@diplodoc/transform": "^4.33.0",
     "@gravity-ui/components": "3.0.0",
     "@gravity-ui/eslint-config": "3.1.1",
@@ -282,6 +283,7 @@
     "@diplodoc/html-extension": "2.3.2",
     "@diplodoc/latex-extension": "^1.0.3",
     "@diplodoc/mermaid-extension": "^1.0.0",
+    "@diplodoc/tabs-extension": "^3.5.1",
     "@diplodoc/transform": "^4.33.0",
     "@gravity-ui/components": "^3.0.0",
     "@gravity-ui/uikit": "^6.11.0",

src/extensions/yfm/YfmTabs/YfmTabsSpecs/index.ts

@@ -1,5 +1,4 @@
-import log from '@diplodoc/transform/lib/log';
-import yfmPlugin from '@diplodoc/transform/lib/plugins/tabs';
+import {transform as yfmTabs} from '@diplodoc/tabs-extension';
 import {NodeSpec} from 'prosemirror-model';
 
 import type {ExtensionAuto, ExtensionNodeSpec} from '../../../../core';
@@ -34,7 +33,23 @@ export const YfmTabsSpecs: ExtensionAuto<YfmTabsSpecsOptions> = (builder, opts)
     const schemaSpecs = getSchemaSpecs(opts);
 
     builder
-        .configureMd((md) => md.use(yfmPlugin, {log}).use(tabsPostPlugin))
+        .configureMd((md) =>
+            md
+                .use(
+                    yfmTabs({
+                        bundle: false,
+                        features: {
+                            enabledVariants: {
+                                regular: true,
+                                radio: true,
+                                dropdown: false,
+                                accordion: false,
+                            },
+                        },
+                    }),
+                )
+                .use(tabsPostPlugin),
+        )
         .addNode(TabsNode.Tab, () => ({
             spec: schemaSpecs[TabsNode.Tab],
             toMd: serializerTokens[TabsNode.Tab],

src/extensions/yfm/YfmTabs/index.ts

@@ -1,3 +1,4 @@
+import '@diplodoc/tabs-extension/runtime';
 import {chainCommands} from 'prosemirror-commands';
 
 import type {Action, ExtensionAuto} from '../../../core';
@@ -14,6 +15,8 @@ import {
 } from './plugins';
 import {tabPanelView, tabView, vtabInputView, vtabView} from './views';
 
+import '@diplodoc/tabs-extension/runtime/styles.css';
+
 export {TabsNode, tabType, tabsType, tabsListType, tabPanelType} from './YfmTabsSpecs';
 
 const actionName = 'toYfmTabs';