upd: @doc-tools/transform (#118)

Author: smsochneg

package-lock.json

@@ -64,7 +64,7 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@doc-tools/transform": "3.1.2",
+    "@doc-tools/transform": "3.10.2",
     "@gravity-ui/components": "2.0.0",
     "@gravity-ui/eslint-config": "1.0.2",
     "@gravity-ui/prettier-config": "1.0.1",

package.json

@@ -5,12 +5,15 @@ import {BaseNode, BaseSpecsPreset} from '../../base/specs';
 import {blockquoteNodeName, italicMarkName} from '../../markdown/specs';
 import {TabsNode, YfmTabsSpecs} from './YfmTabsSpecs';
 
-const generatedId = 'generated_id';
+const mockRandomValue = 0.123456789;
+const generatedId = mockRandomValue.toString(36).substr(2, 8);
 
-jest.mock('@doc-tools/transform/lib/plugins/utils', () => {
-    return {
-        generateID: () => generatedId,
-    };
+beforeEach(() => {
+    jest.spyOn(global.Math, 'random').mockReturnValue(mockRandomValue);
+});
+
+afterEach(() => {
+    jest.spyOn(global.Math, 'random').mockRestore();
 });
 
 const {schema, parser, serializer} = new ExtensionsManager({
@@ -52,6 +55,7 @@ describe('YfmTabs extension', () => {
                 tabs(
                     {
                         class: 'yfm-tabs',
+                        'data-diplodoc-group': `defaultTabsGroup-${generatedId}`,
                     },
                     tabsList(
                         {
@@ -60,23 +64,29 @@ describe('YfmTabs extension', () => {
                         },
                         tab(
                             {
-                                id: generatedId,
+                                id: 'unknown',
                                 class: 'yfm-tab active',
                                 role: 'tab',
                                 'aria-controls': generatedId,
                                 'aria-selected': 'true',
                                 tabindex: '0',
+                                'data-diplodoc-is-active': 'true',
+                                'data-diplodoc-id': 'panel-title-1',
+                                'data-diplodoc-key': 'panel%20title%201',
                             },
                             'panel title 1',
                         ),
                         tab(
                             {
-                                id: generatedId,
+                                id: 'unknown',
                                 class: 'yfm-tab',
                                 role: 'tab',
                                 'aria-controls': generatedId,
                                 'aria-selected': 'false',
                                 tabindex: '-1',
+                                'data-diplodoc-is-active': 'false',
+                                'data-diplodoc-id': 'panel-title-2',
+                                'data-diplodoc-key': 'panel%20title%202',
                             },
                             'panel title 2',
                         ),
@@ -87,7 +97,7 @@ describe('YfmTabs extension', () => {
                             class: 'yfm-tab-panel active',
                             role: 'tabpanel',
                             'data-title': 'panel title 1',
-                            'aria-labelledby': generatedId,
+                            'aria-labelledby': 'panel-title-1',
                         },
                         p('panel content 1'),
                     ),
@@ -97,7 +107,7 @@ describe('YfmTabs extension', () => {
                             class: 'yfm-tab-panel',
                             role: 'tabpanel',
                             'data-title': 'panel title 2',
-                            'aria-labelledby': generatedId,
+                            'aria-labelledby': 'panel-title-2',
                         },
                         p('panel content 2'),
                     ),

src/extensions/yfm/YfmTabs/YfmTabs.test.ts

@@ -7,6 +7,7 @@ export enum TabsNode {
 
 export enum TabsAttrs {
     class = 'class',
+    dataDiplodocGroup = 'data-diplodoc-group',
 }
 
 export enum TabsListAttrs {
@@ -21,6 +22,9 @@ export enum TabAttrs {
     ariaControls = 'aria-controls',
     ariaSelected = 'aria-selected',
     tabindex = 'tabindex',
+    dataDiplodocKey = 'data-diplodoc-key',
+    dataDiplodocid = 'data-diplodoc-id',
+    dataDiplodocIsActive = 'data-diplodoc-is-active',
 }
 
 export enum TabPanelAttrs {

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

@@ -15,6 +15,9 @@ export const getSpec: (opts: YfmTabsSpecsOptions) => Record<TabsNode, NodeSpec>
             [TabAttrs.ariaControls]: {default: 'unknown'},
             [TabAttrs.ariaSelected]: {default: 'unknown'},
             [TabAttrs.tabindex]: {default: 'unknown'},
+            [TabAttrs.dataDiplodocKey]: {default: 'unknown'},
+            [TabAttrs.dataDiplodocid]: {default: 'unknown'},
+            [TabAttrs.dataDiplodocIsActive]: {default: 'unknown'},
         },
         marks: '',
         content: 'text*',
@@ -53,7 +56,10 @@ export const getSpec: (opts: YfmTabsSpecsOptions) => Record<TabsNode, NodeSpec>
     },
 
     [TabsNode.Tabs]: {
-        attrs: {[TabsAttrs.class]: {default: 'yfm-tabs'}},
+        attrs: {
+            [TabsAttrs.class]: {default: 'yfm-tabs'},
+            [TabsAttrs.dataDiplodocGroup]: {default: 'unknown'},
+        },
         content: 'yfm_tabs_list yfm_tab_panel+',
         group: 'block',
         parseDOM: [{tag: 'div.yfm-tabs'}],

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

@@ -29,7 +29,7 @@
             background-clip: padding-box;
         }
 
-        &.active {
+        &[data-diplodoc-is-active='true'] {
             .yfm-tab-wrapper {
                 border-bottom-color: #027bf3;
             }

src/extensions/yfm/YfmTabs/index.scss

@@ -59,13 +59,16 @@ export const tabEnter: Command = (state) => {
 
 const makeTabsInactive = (tabNodes: NodeWithPos[], tabPanels: NodeWithPos[], tr: Transaction) => {
     // Find all active tabs and make them inactive
-    const activeTabs = tabNodes.filter((v) => v.node.attrs[TabAttrs.class] === tabActiveClassname);
+    const activeTabs = tabNodes.filter(
+        (v) => v.node.attrs[TabAttrs.dataDiplodocIsActive] === 'true',
+    );
 
     if (activeTabs.length) {
         activeTabs.forEach((tab) => {
             tr.setNodeMarkup(tab.pos, null, {
                 ...tab.node.attrs,
                 class: tabInactiveClassname,
+                [TabAttrs.dataDiplodocIsActive]: 'false',
             });
         });
     }
@@ -98,7 +101,7 @@ export const createTab: (afterTab: NodeWithPos, tabsParentNode: NodeWithPos) =>
         const afterPanelNode = tabPanels.filter(
             (tabPanelNode) =>
                 tabPanelNode.node.attrs[TabPanelAttrs.ariaLabelledby] ===
-                afterTab.node.attrs[TabAttrs.id],
+                afterTab.node.attrs[TabAttrs.dataDiplodocid],
         )[0];
 
         const tabId = generateID();
@@ -114,6 +117,9 @@ export const createTab: (afterTab: NodeWithPos, tabsParentNode: NodeWithPos) =>
         );
         const newTab = tabType(state.schema).create({
             [TabAttrs.id]: tabId,
+            [TabAttrs.dataDiplodocid]: tabId,
+            [TabAttrs.dataDiplodocKey]: tabId,
+            [TabAttrs.dataDiplodocIsActive]: 'true',
             [TabAttrs.class]: tabActiveClassname,
             [TabAttrs.role]: 'tab',
             [TabAttrs.ariaControls]: panelId,
@@ -165,7 +171,7 @@ export const removeTab: (tabToRemove: NodeWithPos, tabsParentNode: NodeWithPos)
         const panelToRemove = tabPanels.filter(
             (tabPanelNode) =>
                 tabPanelNode.node.attrs[TabPanelAttrs.ariaLabelledby] ===
-                tabToRemove.node.attrs[TabAttrs.id],
+                tabToRemove.node.attrs[TabAttrs.dataDiplodocid],
         )[0];
 
         if (panelToRemove && dispatch) {
@@ -200,6 +206,7 @@ export const removeTab: (tabToRemove: NodeWithPos, tabsParentNode: NodeWithPos)
                     .setNodeMarkup(tr.mapping.map(newTabNode.pos), null, {
                         ...newTabNode.node.attrs,
                         class: tabActiveClassname,
+                        [TabAttrs.dataDiplodocIsActive]: 'true',
                     })
                     // Set new active panel
                     .setNodeMarkup(tr.mapping.map(newTabPanelNode.pos), null, {