fix(YfmTabs): correct serialization of yfm-tabs inside blockqoute (#201)

gravity-ui · Feb 22, 2024 · 7651d0e · 7651d0e
1 parent 8ed6e0f
commit 7651d0e
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 5 deletions.
diff --git 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
@@ -15,7 +15,10 @@ export const toYfm: Record<TabsNode, SerializerNodeToken> = {
     },
 
     [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<TabsNode, SerializerNodeToken> = {
         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], '  ', () => '  ');
         });