fix: cut plugin && add tests (#338)

diplodoc-platform · Dec 11, 2023 · ac31450 · ac31450
1 parent 261f218
commit ac31450
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 11 deletions.
diff --git a/src/transform/plugins/cut.ts b/src/transform/plugins/cut.ts
@@ -68,15 +68,19 @@ const cut: MarkdownItPluginCb = (md, {path, log}) => {
                 const newCloseToken = new state.Token('yfm_cut_close', 'div', -1);
                 newCloseToken.map = tokens[closeTokenIdx].map;
 
+                const insertTokens = tokens.slice(i + 3, closeTokenIdx);
+                const rest = insertTokens.length % 3;
+
                 const insideTokens = [
                     newOpenToken,
                     titleOpen,
                     titleInline,
                     titleClose,
                     contentOpen,
-                    ...tokens.slice(i + 3, closeTokenIdx),
+                    ...insertTokens.slice(0, insertTokens.length - rest),
                     contentClose,
                     newCloseToken,
+                    ...insertTokens.slice(insertTokens.length - rest),
                 ];
 
                 tokens.splice(i, closeTokenIdx - i + 3, ...insideTokens);

diff --git a/test/cut.test.ts b/test/cut.test.ts
@@ -15,13 +15,14 @@ describe('Cut plugin', () => {
         expect(
             transformYfm(
                 '{% cut "Cut title" %}\n' + '\n' + 'Cut content\n' + '\n' + '{% endcut %}',
-            ),
+            ).replace(/(\r\n|\n|\r)/gm, ''),
         ).toBe(
             '<div class="yfm-cut"><div class="yfm-cut-title">Cut title</div>' +
-                '<div class="yfm-cut-content"><p>Cut content</p>\n' +
+                '<div class="yfm-cut-content"><p>Cut content</p>' +
                 '</div></div>',
         );
     });
+
     it('should render siblings cuts', () => {
         expect(
             transformYfm(
@@ -36,16 +37,17 @@ describe('Cut plugin', () => {
                     'Cut content 2\n' +
                     '\n' +
                     '{% endcut %}',
-            ),
+            ).replace(/(\r\n|\n|\r)/gm, ''),
         ).toBe(
             '<div class="yfm-cut"><div class="yfm-cut-title">Cut title 1</div>' +
-                '<div class="yfm-cut-content"><p>Cut content 1</p>\n</div>' +
+                '<div class="yfm-cut-content"><p>Cut content 1</p></div>' +
                 '</div>' +
                 '<div class="yfm-cut"><div class="yfm-cut-title">Cut title 2</div>' +
-                '<div class="yfm-cut-content"><p>Cut content 2</p>\n</div>' +
+                '<div class="yfm-cut-content"><p>Cut content 2</p></div>' +
                 '</div>',
         );
     });
+
     it('should render nested cuts', () => {
         expect(
             transformYfm(
@@ -60,12 +62,12 @@ describe('Cut plugin', () => {
                     '{% endcut %}\n' +
                     '\n' +
                     '{% endcut %}',
-            ),
+            ).replace(/(\r\n|\n|\r)/gm, ''),
         ).toBe(
             '<div class="yfm-cut"><div class="yfm-cut-title">Outer title</div>' +
-                '<div class="yfm-cut-content"><p>Outer content</p>\n' +
+                '<div class="yfm-cut-content"><p>Outer content</p>' +
                 '<div class="yfm-cut"><div class="yfm-cut-title">Inner title</div>' +
-                '<div class="yfm-cut-content"><p>Inner content</p>\n</div>' +
+                '<div class="yfm-cut-content"><p>Inner content</p></div>' +
                 '</div></div></div>',
         );
     });
@@ -78,12 +80,60 @@ describe('Cut plugin', () => {
                     'Content we want to hide\n' +
                     '\n' +
                     '{% endcut %}',
-            ),
+            ).replace(/(\r\n|\n|\r)/gm, ''),
         ).toBe(
             '<div class="yfm-cut">' +
                 '<div class="yfm-cut-title"><strong>Strong cut title</strong></div>' +
-                '<div class="yfm-cut-content"><p>Content we want to hide</p>\n</div>' +
+                '<div class="yfm-cut-content"><p>Content we want to hide</p></div>' +
                 '</div>',
         );
     });
+
+    it('should close all tags correctly and insert two p tags', () => {
+        expect(
+            transformYfm(
+                '* {% cut "Cut 1" %}\n' +
+                    '\n' +
+                    '  Some text\n' +
+                    '\n' +
+                    '  Some text\n' +
+                    '\n' +
+                    '{% endcut %}',
+            ).replace(/(\r\n|\n|\r)/gm, ''),
+        ).toBe(
+            '<ul><li><div class="yfm-cut"><div class="yfm-cut-title">Cut 1</div>' +
+                '<div class="yfm-cut-content"><p>Some text</p><p>Some text</p></div></div></li></ul>',
+        );
+    });
+
+    it('should close all tags correctly when given a bullet-list with several items', () => {
+        expect(
+            transformYfm(
+                '* {% cut "Cut 1" %}\n' +
+                    '\n' +
+                    '  Some text\n' +
+                    '\n' +
+                    '  {% endcut %}' +
+                    '\n' +
+                    '* {% cut "Cut 2" %}\n' +
+                    '\n' +
+                    '  Some text\n' +
+                    '\n' +
+                    '  {% endcut %}' +
+                    '\n' +
+                    '* {% cut "Cut 3" %}\n' +
+                    '\n' +
+                    '  Some text\n' +
+                    '\n' +
+                    '{% endcut %}',
+            ).replace(/(\r\n|\n|\r)/gm, ''),
+        ).toBe(
+            '<ul><li><div class="yfm-cut"><div class="yfm-cut-title">Cut 1</div>' +
+                '<div class="yfm-cut-content"><p>Some text</p></div></div></li>' +
+                '<li><div class="yfm-cut"><div class="yfm-cut-title">Cut 2</div>' +
+                '<div class="yfm-cut-content"><p>Some text</p></div></div></li>' +
+                '<li><div class="yfm-cut"><div class="yfm-cut-title">Cut 3</div>' +
+                '<div class="yfm-cut-content"><p>Some text</p></div></div></li></ul>',
+        );
+    });
 });