fix bullet list

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', () => {
+  it('should make a bullet list from different markdown shortcuts', () => {
-  //   cy.get('.ProseMirror').then(([{ editor }]) => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
-  //     editor.clearContent()
+      editor.clearContent()
-  //   })
+    })
 
-  //   cy.get('.ProseMirror')
+    cy.get('.ProseMirror')
-  //     .type('* List Item 1{enter}+ List Item 2{enter}- List Item 3')
+      .type('* List Item 1{enter}{enter}+ List Item 2{enter}{enter}- List Item 3')
 
-  //   cy.get('.ProseMirror')
+    cy.get('.ProseMirror')
-  //     .find('li:nth-child(1)')
+      .find('li:nth-child(1)')
-  //     .should('contain', 'List Item 1')
+      .should('contain', 'List Item 1')
 
-  //   cy.get('.ProseMirror')
+    cy.get('.ProseMirror')
-  //     .find('li:nth-child(2)')
+      .find('li:nth-child(2)')
-  //     .should('contain', 'List Item 2')
+      .should('contain', 'List Item 2')
 
-  //   cy.get('.ProseMirror')
+    cy.get('.ProseMirror')
-  //     .find('li:nth-child(3)')
+      .find('li:nth-child(3)')
-  //     .should('contain', 'List Item 3')
+      .should('contain', 'List Item 3')
-  // })
+  })
 })

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>

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'

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)
+}

packages/extension-bullet-list/index.ts

@@ -19,11 +19,11 @@ export default new Node()
     ],
     toDOM: () => ['ul', 0],
   }))
-  // .commands(({ editor, type }) => ({
+  .commands(({ name }) => ({
-  //   bulletList: () => ({ commands }) => {
+    bulletList: () => ({ commands }) => {
-  //     return commands.toggleList(type, editor.schema.nodes.list_item)
+      return commands.toggleList(name, 'list_item')
-  //   },
+    },
-  // }))
+  }))
   .keys(({ editor }) => ({
     'Shift-Ctrl-8': () => editor.bulletList(),
   }))

packages/extension-list-item/index.ts

@@ -6,14 +6,12 @@ export default new Node()
     content: 'paragraph block*',
     defining: true,
     draggable: false,
-    parseDOM: [
+    parseDOM: [{ tag: 'li' }],
-      { tag: 'li' },
-    ],
     toDOM: () => ['li', 0],
   }))
   .keys(({ editor, name }) => ({
     Enter: () => editor.splitListItem(name),
-    // Tab: () => editor.sinkListItem(name),
+    Tab: () => editor.sinkListItem(name),
-    // 'Shift-Tab': () => editor.liftListItem(name),
+    'Shift-Tab': () => editor.liftListItem(name),
   }))
   .create()