From 2c9973af8cb87a09448c127d6be686c6ff693a70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 22 Sep 2020 20:39:24 +0200
Subject: [PATCH] fix bullet list

---
 .../demos/Extensions/BulletList/index.spec.js | 32 ++++++------
 .../src/demos/Extensions/BulletList/index.vue |  4 +-
 packages/core/src/commands/index.ts           |  1 +
 packages/core/src/commands/toggleList.ts      | 50 +++++++++++++++++++
 packages/extension-bullet-list/index.ts       | 10 ++--
 packages/extension-list-item/index.ts         |  8 ++-
 6 files changed, 77 insertions(+), 28 deletions(-)
 create mode 100644 packages/core/src/commands/toggleList.ts

diff --git a/docs/src/demos/Extensions/BulletList/index.spec.js b/docs/src/demos/Extensions/BulletList/index.spec.js
index aa88e551..c3615e94 100644
--- a/docs/src/demos/Extensions/BulletList/index.spec.js
+++ b/docs/src/demos/Extensions/BulletList/index.spec.js
@@ -10,24 +10,24 @@ context('/api/extensions/bullet-list', () => {
     })
   })
 
-  // it('should make a bullet list from different markdown shortcuts', () => {
-  //   cy.get('.ProseMirror').then(([{ editor }]) => {
-  //     editor.clearContent()
-  //   })
+  it('should make a bullet list from different markdown shortcuts', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
 
-  //   cy.get('.ProseMirror')
-  //     .type('* List Item 1{enter}+ List Item 2{enter}- List Item 3')
+    cy.get('.ProseMirror')
+      .type('* List Item 1{enter}{enter}+ List Item 2{enter}{enter}- List Item 3')
 
-  //   cy.get('.ProseMirror')
-  //     .find('li:nth-child(1)')
-  //     .should('contain', 'List Item 1')
+    cy.get('.ProseMirror')
+      .find('li:nth-child(1)')
+      .should('contain', 'List Item 1')
 
-  //   cy.get('.ProseMirror')
-  //     .find('li:nth-child(2)')
-  //     .should('contain', 'List Item 2')
+    cy.get('.ProseMirror')
+      .find('li:nth-child(2)')
+      .should('contain', 'List Item 2')
 
-  //   cy.get('.ProseMirror')
-  //     .find('li:nth-child(3)')
-  //     .should('contain', 'List Item 3')
-  // })
+    cy.get('.ProseMirror')
+      .find('li:nth-child(3)')
+      .should('contain', 'List Item 3')
+  })
 })
\ No newline at end of file
diff --git a/docs/src/demos/Extensions/BulletList/index.vue b/docs/src/demos/Extensions/BulletList/index.vue
index 401ad57b..7808c9c7 100644
--- a/docs/src/demos/Extensions/BulletList/index.vue
+++ b/docs/src/demos/Extensions/BulletList/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div v-if="editor">
-    <!-- <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+    <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
       bullet list
-    </button> -->
+    </button>
 
     <editor-content :editor="editor" />
   </div>
diff --git a/packages/core/src/commands/index.ts b/packages/core/src/commands/index.ts
index 0c6c0430..68b1315b 100644
--- a/packages/core/src/commands/index.ts
+++ b/packages/core/src/commands/index.ts
@@ -13,6 +13,7 @@ export { selectParentNode } from './selectParentNode'
 export { setContent } from './setContent'
 export { sinkListItem } from './sinkListItem'
 export { splitListItem } from './splitListItem'
+export { toggleList } from './toggleList'
 export { toggleMark } from './toggleMark'
 export { toggleNode } from './toggleNode'
 export { updateMark } from './updateMark'
diff --git a/packages/core/src/commands/toggleList.ts b/packages/core/src/commands/toggleList.ts
new file mode 100644
index 00000000..699decdb
--- /dev/null
+++ b/packages/core/src/commands/toggleList.ts
@@ -0,0 +1,50 @@
+import { Command } from '../Editor'
+import { wrapInList, liftListItem } from 'prosemirror-schema-list'
+import { findParentNode } from 'prosemirror-utils'
+import { Node, NodeType, Schema } from 'prosemirror-model'
+import getNodeType from '../utils/getNodeType'
+
+type ToggleListCommand = (
+  listType: string | NodeType,
+  itemType: string | NodeType,
+) => Command
+
+declare module '../Editor' {
+  interface Commands {
+    toggleList: ToggleListCommand,
+  }
+}
+
+function isList(node: Node, schema: Schema) {
+  return (node.type === schema.nodes.bullet_list
+    || node.type === schema.nodes.ordered_list
+    || node.type === schema.nodes.todo_list)
+}
+
+export const toggleList: ToggleListCommand = (listTypeOrName, itemTypeOrName) => ({ tr, state, dispatch }) => {
+  const listType = getNodeType(listTypeOrName, state.schema)
+  const itemType = getNodeType(itemTypeOrName, state.schema)
+  const { schema, selection } = state
+  const { $from, $to } = selection
+  const range = $from.blockRange($to)
+
+  if (!range) {
+    return false
+  }
+
+  const parentList = findParentNode(node => isList(node, schema))(selection)
+
+  if (range.depth >= 1 && parentList && range.depth - parentList.depth <= 1) {
+    if (parentList.node.type === listType) {
+      return liftListItem(itemType)(state, dispatch)
+    }
+
+    if (isList(parentList.node, schema) && listType.validContent(parentList.node.content)) {
+      tr.setNodeMarkup(parentList.pos, listType)
+
+      return false
+    }
+  }
+
+  return wrapInList(listType)(state, dispatch)
+}
diff --git a/packages/extension-bullet-list/index.ts b/packages/extension-bullet-list/index.ts
index 2ed6b84f..54949f12 100644
--- a/packages/extension-bullet-list/index.ts
+++ b/packages/extension-bullet-list/index.ts
@@ -19,11 +19,11 @@ export default new Node()
     ],
     toDOM: () => ['ul', 0],
   }))
-  // .commands(({ editor, type }) => ({
-  //   bulletList: () => ({ commands }) => {
-  //     return commands.toggleList(type, editor.schema.nodes.list_item)
-  //   },
-  // }))
+  .commands(({ name }) => ({
+    bulletList: () => ({ commands }) => {
+      return commands.toggleList(name, 'list_item')
+    },
+  }))
   .keys(({ editor }) => ({
     'Shift-Ctrl-8': () => editor.bulletList(),
   }))
diff --git a/packages/extension-list-item/index.ts b/packages/extension-list-item/index.ts
index e1ae0b52..28561bda 100644
--- a/packages/extension-list-item/index.ts
+++ b/packages/extension-list-item/index.ts
@@ -6,14 +6,12 @@ export default new Node()
     content: 'paragraph block*',
     defining: true,
     draggable: false,
-    parseDOM: [
-      { tag: 'li' },
-    ],
+    parseDOM: [{ tag: 'li' }],
     toDOM: () => ['li', 0],
   }))
   .keys(({ editor, name }) => ({
     Enter: () => editor.splitListItem(name),
-    // Tab: () => editor.sinkListItem(name),
-    // 'Shift-Tab': () => editor.liftListItem(name),
+    Tab: () => editor.sinkListItem(name),
+    'Shift-Tab': () => editor.liftListItem(name),
   }))
   .create()