From ac3145030e12a7d6bd442015f6b23ab61c3d148e Mon Sep 17 00:00:00 2001
From: Kiri111enz <61368350+Kiri111enz@users.noreply.github.com>
Date: Mon, 11 Dec 2023 17:01:41 +0300
Subject: [PATCH] fix: cut plugin && add tests (#338)

---
 src/transform/plugins/cut.ts |  6 +++-
 test/cut.test.ts             | 70 ++++++++++++++++++++++++++++++------
 2 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/src/transform/plugins/cut.ts b/src/transform/plugins/cut.ts
index a8e4b043..5942d33c 100644
--- 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
index 92e422f5..873c15ff 100644
--- 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>',
+        );
+    });
 });