Skip to content

Commit 96c6c9b

Browse files
smsochnegsmsochneg
authored
feat: upd @doc-tools/transform (#121)
1 parent cd99d17 commit 96c6c9b

File tree

7 files changed

+62
-45
lines changed

7 files changed

+62
-45
lines changed

‎package-lock.json‎

Lines changed: 20 additions & 30 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
"tslib": "^2.3.1"
6565
},
6666
"devDependencies": {
67-
"@doc-tools/transform": "3.1.2",
67+
"@doc-tools/transform": "3.10.2",
6868
"@gravity-ui/components": "2.0.0",
6969
"@gravity-ui/eslint-config": "1.0.2",
7070
"@gravity-ui/prettier-config": "1.0.1",

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

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,15 @@ import {BaseNode, BaseSpecsPreset} from '../../base/specs';
55
import {blockquoteNodeName, italicMarkName} from '../../markdown/specs';
66
import {TabsNode, YfmTabsSpecs} from './YfmTabsSpecs';
77

8-
const generatedId = 'generated_id';
8+
const mockRandomValue = 0.123456789;
9+
const generatedId = mockRandomValue.toString(36).substr(2, 8);
910

10-
jest.mock('@doc-tools/transform/lib/plugins/utils', () => {
11-
return {
12-
generateID: () => generatedId,
13-
};
11+
beforeEach(() => {
12+
jest.spyOn(global.Math, 'random').mockReturnValue(mockRandomValue);
13+
});
14+
15+
afterEach(() => {
16+
jest.spyOn(global.Math, 'random').mockRestore();
1417
});
1518

1619
const {schema, parser, serializer} = new ExtensionsManager({
@@ -52,6 +55,7 @@ describe('YfmTabs extension', () => {
5255
tabs(
5356
{
5457
class: 'yfm-tabs',
58+
'data-diplodoc-group': `defaultTabsGroup-${generatedId}`,
5559
},
5660
tabsList(
5761
{
@@ -60,23 +64,29 @@ describe('YfmTabs extension', () => {
6064
},
6165
tab(
6266
{
63-
id: generatedId,
67+
id: 'unknown',
6468
class: 'yfm-tab active',
6569
role: 'tab',
6670
'aria-controls': generatedId,
6771
'aria-selected': 'true',
6872
tabindex: '0',
73+
'data-diplodoc-is-active': 'true',
74+
'data-diplodoc-id': 'panel-title-1',
75+
'data-diplodoc-key': 'panel%20title%201',
6976
},
7077
'panel title 1',
7178
),
7279
tab(
7380
{
74-
id: generatedId,
81+
id: 'unknown',
7582
class: 'yfm-tab',
7683
role: 'tab',
7784
'aria-controls': generatedId,
7885
'aria-selected': 'false',
7986
tabindex: '-1',
87+
'data-diplodoc-is-active': 'false',
88+
'data-diplodoc-id': 'panel-title-2',
89+
'data-diplodoc-key': 'panel%20title%202',
8090
},
8191
'panel title 2',
8292
),
@@ -87,7 +97,7 @@ describe('YfmTabs extension', () => {
8797
class: 'yfm-tab-panel active',
8898
role: 'tabpanel',
8999
'data-title': 'panel title 1',
90-
'aria-labelledby': generatedId,
100+
'aria-labelledby': 'panel-title-1',
91101
},
92102
p('panel content 1'),
93103
),
@@ -97,7 +107,7 @@ describe('YfmTabs extension', () => {
97107
class: 'yfm-tab-panel',
98108
role: 'tabpanel',
99109
'data-title': 'panel title 2',
100-
'aria-labelledby': generatedId,
110+
'aria-labelledby': 'panel-title-2',
101111
},
102112
p('panel content 2'),
103113
),

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export enum TabsNode {
77

88
export enum TabsAttrs {
99
class = 'class',
10+
dataDiplodocGroup = 'data-diplodoc-group',
1011
}
1112

1213
export enum TabsListAttrs {
@@ -21,6 +22,9 @@ export enum TabAttrs {
2122
ariaControls = 'aria-controls',
2223
ariaSelected = 'aria-selected',
2324
tabindex = 'tabindex',
25+
dataDiplodocKey = 'data-diplodoc-key',
26+
dataDiplodocid = 'data-diplodoc-id',
27+
dataDiplodocIsActive = 'data-diplodoc-is-active',
2428
}
2529

2630
export enum TabPanelAttrs {

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ export const getSpec: (opts: YfmTabsSpecsOptions) => Record<TabsNode, NodeSpec>
1515
[TabAttrs.ariaControls]: {default: 'unknown'},
1616
[TabAttrs.ariaSelected]: {default: 'unknown'},
1717
[TabAttrs.tabindex]: {default: 'unknown'},
18+
[TabAttrs.dataDiplodocKey]: {default: 'unknown'},
19+
[TabAttrs.dataDiplodocid]: {default: 'unknown'},
20+
[TabAttrs.dataDiplodocIsActive]: {default: 'unknown'},
1821
},
1922
marks: '',
2023
content: 'text*',
@@ -53,7 +56,10 @@ export const getSpec: (opts: YfmTabsSpecsOptions) => Record<TabsNode, NodeSpec>
5356
},
5457

5558
[TabsNode.Tabs]: {
56-
attrs: {[TabsAttrs.class]: {default: 'yfm-tabs'}},
59+
attrs: {
60+
[TabsAttrs.class]: {default: 'yfm-tabs'},
61+
[TabsAttrs.dataDiplodocGroup]: {default: 'unknown'},
62+
},
5763
content: 'yfm_tabs_list yfm_tab_panel+',
5864
group: 'block',
5965
parseDOM: [{tag: 'div.yfm-tabs'}],

‎src/extensions/yfm/YfmTabs/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
background-clip: padding-box;
3030
}
3131

32-
&.active {
32+
&[data-diplodoc-is-active='true'] {
3333
.yfm-tab-wrapper {
3434
border-bottom-color: #027bf3;
3535
}

‎src/extensions/yfm/YfmTabs/plugins.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,16 @@ export const tabEnter: Command = (state) => {
5959

6060
const makeTabsInactive = (tabNodes: NodeWithPos[], tabPanels: NodeWithPos[], tr: Transaction) => {
6161
// Find all active tabs and make them inactive
62-
const activeTabs = tabNodes.filter((v) => v.node.attrs[TabAttrs.class] === tabActiveClassname);
62+
const activeTabs = tabNodes.filter(
63+
(v) => v.node.attrs[TabAttrs.dataDiplodocIsActive] === 'true',
64+
);
6365

6466
if (activeTabs.length) {
6567
activeTabs.forEach((tab) => {
6668
tr.setNodeMarkup(tab.pos, null, {
6769
...tab.node.attrs,
6870
class: tabInactiveClassname,
71+
[TabAttrs.dataDiplodocIsActive]: 'false',
6972
});
7073
});
7174
}
@@ -98,7 +101,7 @@ export const createTab: (afterTab: NodeWithPos, tabsParentNode: NodeWithPos) =>
98101
const afterPanelNode = tabPanels.filter(
99102
(tabPanelNode) =>
100103
tabPanelNode.node.attrs[TabPanelAttrs.ariaLabelledby] ===
101-
afterTab.node.attrs[TabAttrs.id],
104+
afterTab.node.attrs[TabAttrs.dataDiplodocid],
102105
)[0];
103106

104107
const tabId = generateID();
@@ -114,6 +117,9 @@ export const createTab: (afterTab: NodeWithPos, tabsParentNode: NodeWithPos) =>
114117
);
115118
const newTab = tabType(state.schema).create({
116119
[TabAttrs.id]: tabId,
120+
[TabAttrs.dataDiplodocid]: tabId,
121+
[TabAttrs.dataDiplodocKey]: tabId,
122+
[TabAttrs.dataDiplodocIsActive]: 'true',
117123
[TabAttrs.class]: tabActiveClassname,
118124
[TabAttrs.role]: 'tab',
119125
[TabAttrs.ariaControls]: panelId,
@@ -165,7 +171,7 @@ export const removeTab: (tabToRemove: NodeWithPos, tabsParentNode: NodeWithPos)
165171
const panelToRemove = tabPanels.filter(
166172
(tabPanelNode) =>
167173
tabPanelNode.node.attrs[TabPanelAttrs.ariaLabelledby] ===
168-
tabToRemove.node.attrs[TabAttrs.id],
174+
tabToRemove.node.attrs[TabAttrs.dataDiplodocid],
169175
)[0];
170176

171177
if (panelToRemove && dispatch) {
@@ -200,6 +206,7 @@ export const removeTab: (tabToRemove: NodeWithPos, tabsParentNode: NodeWithPos)
200206
.setNodeMarkup(tr.mapping.map(newTabNode.pos), null, {
201207
...newTabNode.node.attrs,
202208
class: tabActiveClassname,
209+
[TabAttrs.dataDiplodocIsActive]: 'true',
203210
})
204211
// Set new active panel
205212
.setNodeMarkup(tr.mapping.map(newTabPanelNode.pos), null, {

0 commit comments

Comments
 (0)