fix(markdown-widget): apply list item style on each block in a selection (#5676)

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()

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;
           }
         }