diff --git a/src/extensions/yfm/YfmTabs/YfmTabs.test.ts b/src/extensions/yfm/YfmTabs/YfmTabs.test.ts index 2cfaab85..f844374d 100644 --- a/src/extensions/yfm/YfmTabs/YfmTabs.test.ts +++ b/src/extensions/yfm/YfmTabs/YfmTabs.test.ts @@ -3,7 +3,7 @@ import {builders} from 'prosemirror-test-builder'; import {createMarkupChecker} from '../../../../tests/sameMarkup'; import {ExtensionsManager} from '../../../core'; import {BaseNode, BaseSpecsPreset} from '../../base/specs'; -import {blockquoteNodeName, italicMarkName} from '../../markdown/specs'; +import {BlockquoteSpecs, blockquoteNodeName, italicMarkName} from '../../markdown/specs'; import {TabsNode, YfmTabsSpecs} from './YfmTabsSpecs'; @@ -19,10 +19,11 @@ afterEach(() => { }); const {schema, parser, serializer} = new ExtensionsManager({ - extensions: (builder) => builder.use(BaseSpecsPreset, {}).use(YfmTabsSpecs, {}), + extensions: (builder) => + builder.use(BaseSpecsPreset, {}).use(BlockquoteSpecs).use(YfmTabsSpecs, {}), }).buildDeps(); -const {doc, p, tab, tabs, tabPanel, tabsList} = builders< +const {doc, p, bq, tab, tabs, tabPanel, tabsList} = builders< 'doc' | 'p' | 'bq' | 'tab' | 'tabPanel' | 'tabs' | 'tabsList' >(schema, { doc: {nodeType: BaseNode.Doc}, @@ -119,4 +120,59 @@ describe('YfmTabs extension', () => { ), ); }); + + it('should correct parse and serialize yfm-tabs inside blockqute', () => { + const markup = ` +> {% list tabs %} +> +> - Tab +> +> Content +> +> {% endlist %}`.trim(); + + same( + markup, + doc( + bq( + tabs( + { + class: 'yfm-tabs', + 'data-diplodoc-group': `defaultTabsGroup-${generatedId}`, + }, + tabsList( + { + class: 'yfm-tab-list', + role: 'tablist', + }, + tab( + { + id: 'unknown', + class: 'yfm-tab active', + role: 'tab', + 'aria-controls': generatedId, + 'aria-selected': 'true', + tabindex: '-1', + 'data-diplodoc-is-active': 'true', + 'data-diplodoc-id': 'tab', + 'data-diplodoc-key': 'tab', + }, + 'Tab', + ), + ), + tabPanel( + { + id: generatedId, + class: 'yfm-tab-panel active', + role: 'tabpanel', + 'data-title': 'Tab', + 'aria-labelledby': 'tab', + }, + p('Content'), + ), + ), + ), + ), + ); + }); }); diff --git a/src/extensions/yfm/YfmTabs/YfmTabsSpecs/toYfm.ts b/src/extensions/yfm/YfmTabs/YfmTabsSpecs/toYfm.ts index db3b2b43..e3f79743 100644 --- a/src/extensions/yfm/YfmTabs/YfmTabsSpecs/toYfm.ts +++ b/src/extensions/yfm/YfmTabs/YfmTabsSpecs/toYfm.ts @@ -15,7 +15,10 @@ export const toYfm: Record = { }, [TabsNode.Tabs]: (state, node) => { - state.write('{% list tabs %}\n\n'); + state.write('{% list tabs %}'); + state.write('\n'); + state.write('\n'); + const children: Node[] = []; node.content.forEach((a) => { children.push(a); @@ -24,7 +27,10 @@ export const toYfm: Record = { const tabList = children[0].content; tabList.forEach((tab, _, i) => { - state.write('- ' + (tab.textContent || getPlaceholderContent(tab)) + '\n\n'); + state.write('- ' + (tab.textContent || getPlaceholderContent(tab))); + state.write('\n'); + state.write('\n'); + if (children[i + 1]) state.renderList(children[i + 1], ' ', () => ' '); });