From 04e53054ceba8e2b6f3a2e7f1de5ecc3abe8431a Mon Sep 17 00:00:00 2001
From: Trang Le <lethutrang101@gmail.com>
Date: Wed, 4 Aug 2021 21:54:52 +0700
Subject: [PATCH] fix(markdown-widget): apply list item style on each block in
 a selection (#5676)

---
 .../integration/markdown_widget_list_spec.js  | 52 ++++++++++++++++---
 .../src/MarkdownControl/plugins/List.js       | 15 +++++-
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/cypress/integration/markdown_widget_list_spec.js b/cypress/integration/markdown_widget_list_spec.js
index a1378ac2..9114c4a1 100644
--- a/cypress/integration/markdown_widget_list_spec.js
+++ b/cypress/integration/markdown_widget_list_spec.js
@@ -164,6 +164,46 @@ describe('Markdown widget', () => {
           `);
       });
 
+      it('wrap each bottom-most block in a selection with a list item block', () => {
+        cy.focused()
+          .type('foo')
+          .enter()
+          .type('bar')
+          .enter()
+          .type('baz')
+          .setSelection('foo', 'baz')
+          .clickUnorderedListButton()
+          .confirmMarkdownEditorContent(`
+            <ul>
+              <li>
+                <p>foo</p>
+              </li>
+              <li>
+                <p>bar</p>
+              </li>
+              <li>
+                <p>baz</p>
+              </li>
+            </ul>
+          `)
+      })
+
+      it('unwraps list item block from each selected list item and unwraps all of them from the outer list block', () => {
+        cy.clickUnorderedListButton()
+          .type('foo')
+          .enter()
+          .type('bar')
+          .enter()
+          .type('baz')
+          .setSelection('foo', 'baz')
+          .clickUnorderedListButton()
+          .confirmMarkdownEditorContent(`
+            <p>foo</p>
+            <p>bar</p>
+            <p>baz</p>
+          `)
+      })
+      
       it('combines adjacent same-typed lists, not differently typed lists', () => {
         cy.focused()
           .type('foo')
@@ -321,6 +361,8 @@ describe('Markdown widget', () => {
               </li>
               <li>
                 <p>bar</p>
+              </li>
+              <li>
                 <p>baz</p>
               </li>
             </ul>
@@ -334,14 +376,12 @@ describe('Markdown widget', () => {
               </li>
               <li>
                 <p>bar</p>
-                <ul>
-                  <li>
-                    <p>baz</p>
-                  </li>
-                </ul>
               </li>
-            </ul> 
+            </ul>
+            <p>baz</p>
           `)
+          .clickUnorderedListButton()
+          .tabkey()
           .setCursorAfter('baz')
           .enter()
           .tabkey()
diff --git a/packages/netlify-cms-widget-markdown/src/MarkdownControl/plugins/List.js b/packages/netlify-cms-widget-markdown/src/MarkdownControl/plugins/List.js
index d7867ac8..58838100 100644
--- a/packages/netlify-cms-widget-markdown/src/MarkdownControl/plugins/List.js
+++ b/packages/netlify-cms-widget-markdown/src/MarkdownControl/plugins/List.js
@@ -152,7 +152,7 @@ function ListPlugin({ defaultType, unorderedListType, orderedListType }) {
         if (!LIST_TYPES.includes(type)) {
           throw Error(`${type} is not a valid list type, must be one of: ${LIST_TYPES}`);
         }
-        const { startBlock } = editor.value;
+        const { startBlock, blocks } = editor.value;
         const target = editor.getBlockContainer();
 
         switch (get(target, 'type')) {
@@ -191,7 +191,18 @@ function ListPlugin({ defaultType, unorderedListType, orderedListType }) {
           }
 
           default: {
-            editor.wrapInList(type);
+            if (blocks.size > 1) {
+              const listItems = blocks.map(block =>
+                Block.create({ type: 'list-item', nodes: [block] }),
+              );
+              const listBlock = Block.create({ type, nodes: listItems });
+              editor
+                .delete()
+                .replaceNodeByKey(startBlock.key, listBlock)
+                .moveToRangeOfNode(listBlock);
+            } else {
+              editor.wrapInList(type);
+            }
             break;
           }
         }