fix: toggleList creates new items instead of toggling off with trailing paragraph

jew2222 · jew2222 · commit 4fcb771ce1e5 · 2026-01-25T21:00:23.000+09:00
Fixes #7398 When using Cmd+A (AllSelection) to select all content, the selection includes the trailing empty paragraph added by ProseMirror. Previously, toggleBulletList/toggleOrderedList would wrap this trailing paragraph into the list instead of toggling the list off. This fix detects when AllSelection includes a trailing empty paragraph after the list and adjusts the selection to exclude it before executing the liftListItem command. Changes: - Import originalLiftListItem from @tiptap/pm/schema-list - Add AllSelection detection in toggleList command - Adjust selection to exclude trailing empty paragraph - Use chain() to apply adjusted selection before lifting list items - Add test cases for the fix
diff --git a/.changeset/fix-toggle-list-trailing-paragraph.md b/.changeset/fix-toggle-list-trailing-paragraph.md
@@ -0,0 +1,10 @@
+---
+"@tiptap/core": patch
+"@tiptap/extension-list": patch
+---
+
+Fix toggleBulletList/toggleOrderedList not toggling off when selection includes trailing paragraph
+
+When using Cmd+A to select all content, the selection includes the trailing empty paragraph. Previously, toggleBulletList() and toggleOrderedList() would wrap this trailing paragraph into the list instead of toggling the list off, creating new list items.
+
+This fix detects when the selection includes a trailing empty paragraph after the list and adjusts the selection to exclude it before executing the lift command, allowing the list to be properly toggled off.
diff --git a/packages/core/src/commands/toggleList.ts b/packages/core/src/commands/toggleList.ts
@@ -1,5 +1,7 @@
 import type { NodeType } from '@tiptap/pm/model'
+import { liftListItem as originalLiftListItem } from '@tiptap/pm/schema-list'
 import type { Transaction } from '@tiptap/pm/state'
+import { AllSelection, TextSelection } from '@tiptap/pm/state'
 import { canJoin } from '@tiptap/pm/transform'
 
 import { findParentNode } from '../helpers/findParentNode.js'
@@ -84,8 +86,67 @@ export const toggleList: RawCommands['toggleList'] =
     const { extensions, splittableMarks } = editor.extensionManager
     const listType = getNodeType(listTypeOrName, state.schema)
     const itemType = getNodeType(itemTypeOrName, state.schema)
-    const { selection, storedMarks } = state
-    const { $from, $to } = selection
+    const { storedMarks } = state
+    let { selection } = state
+    let { $from, $to } = selection
+
+    // Special handling for AllSelection (Cmd+A) which includes trailing nodes
+    // When AllSelection is used and we're toggling off a list, adjust selection to exclude trailing paragraph
+    if (selection instanceof AllSelection) {
+      const firstChild = state.doc.firstChild
+      const lastChild = state.doc.lastChild
+
+      // Check if first child is a list of the same type we're toggling
+      if (firstChild && firstChild.type === listType) {
+        // Check if there's a trailing empty paragraph after the list
+        const hasTrailingEmptyParagraph =
+          lastChild && lastChild !== firstChild && lastChild.type.name === 'paragraph' && lastChild.content.size === 0
+
+        // If there's a trailing paragraph, adjust selection to only cover the list
+        if (hasTrailingEmptyParagraph) {
+          // Find the first text position inside the list
+          const listStart = 1
+          const listEnd = firstChild.nodeSize
+
+          // Find first valid text position inside the list
+          let firstTextPos = listStart + 1
+          let foundTextPos = false
+
+          // Traverse to find the first position with inline content
+          state.doc.nodesBetween(listStart, listEnd, (node, pos) => {
+            if (!foundTextPos && node.isTextblock) {
+              firstTextPos = pos + 1
+              foundTextPos = true
+              return false
+            }
+          })
+
+          if (foundTextPos) {
+            // Find the last valid text position inside the list
+            let lastTextPos = firstTextPos
+
+            state.doc.nodesBetween(listStart, listEnd, (node, pos) => {
+              if (node.isTextblock) {
+                lastTextPos = pos + node.nodeSize - 1
+              }
+            })
+
+            // Create a new selection from the start to the end of list content
+            try {
+              const newSelection = TextSelection.create(state.doc, firstTextPos, lastTextPos)
+
+              // Update the selection variables that will be used in the rest of the function
+              selection = newSelection
+              $from = newSelection.$from
+              $to = newSelection.$to
+            } catch {
+              // If selection creation fails, continue with original selection
+            }
+          }
+        }
+      }
+    }
+
     const range = $from.blockRange($to)
 
     const marks = storedMarks || (selection.$to.parentOffset && selection.$from.marks())
@@ -99,7 +160,18 @@ export const toggleList: RawCommands['toggleList'] =
     if (range.depth >= 1 && parentList && range.depth - parentList.depth <= 1) {
       // remove list
       if (parentList.node.type === listType) {
-        return commands.liftListItem(itemType)
+        // Use chain to set selection and then lift
+        return chain()
+          .command(({ tr: chainTr, dispatch: chainDispatch }) => {
+            if (chainDispatch) {
+              chainTr.setSelection(selection)
+            }
+            return true
+          })
+          .command(({ state: chainState, dispatch: chainDispatch }) => {
+            return originalLiftListItem(itemType)(chainState, chainDispatch)
+          })
+          .run()
       }
 
       // change list type
diff --git a/packages/extension-list/__tests__/toggleList.spec.ts b/packages/extension-list/__tests__/toggleList.spec.ts
@@ -0,0 +1,129 @@
+import { Editor } from '@tiptap/core'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import { TrailingNode } from '@tiptap/extensions'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { BulletList, ListItem, OrderedList } from '../src/index.js'
+
+describe('toggleList with trailing paragraph', () => {
+  let editor: Editor
+
+  afterEach(() => {
+    editor?.destroy()
+  })
+
+  it('should toggle off bullet list when selecting all content including trailing paragraph', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, BulletList, OrderedList, ListItem, TrailingNode],
+      content: '<ul><li><p>hello</p></li></ul>',
+    })
+
+    // Select all content (Cmd+A) - this includes the trailing empty paragraph
+    editor.commands.selectAll()
+
+    // Toggle bullet list should remove the list, not wrap trailing paragraph
+    editor.commands.toggleBulletList()
+
+    // The content should be a plain paragraph, not a list
+    const json = editor.getJSON()
+    expect(json.content?.[0]?.type).toBe('paragraph')
+    expect(json.content?.[0]?.content?.[0]?.text).toBe('hello')
+
+    // Should not have bulletList in the document
+    expect(json.content?.some(node => node.type === 'bulletList')).toBe(false)
+  })
+
+  it('should toggle off ordered list when selecting all content including trailing paragraph', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, BulletList, OrderedList, ListItem, TrailingNode],
+      content: '<ol><li><p>hello</p></li></ol>',
+    })
+
+    // Select all content (Cmd+A)
+    editor.commands.selectAll()
+
+    // Toggle ordered list should remove the list
+    editor.commands.toggleOrderedList()
+
+    // The content should be a plain paragraph, not a list
+    const json = editor.getJSON()
+    expect(json.content?.[0]?.type).toBe('paragraph')
+    expect(json.content?.[0]?.content?.[0]?.text).toBe('hello')
+
+    // Should not have orderedList in the document
+    expect(json.content?.some(node => node.type === 'orderedList')).toBe(false)
+  })
+
+  it('should toggle off list with multiple items when selecting all', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, BulletList, OrderedList, ListItem, TrailingNode],
+      content: '<ul><li><p>item 1</p></li><li><p>item 2</p></li><li><p>item 3</p></li></ul>',
+    })
+
+    // Select all content
+    editor.commands.selectAll()
+
+    // Toggle bullet list should convert all items to paragraphs
+    editor.commands.toggleBulletList()
+
+    const json = editor.getJSON()
+
+    // Should have 3 paragraphs
+    expect(json.content?.length).toBeGreaterThanOrEqual(3)
+    expect(json.content?.[0]?.type).toBe('paragraph')
+    expect(json.content?.[0]?.content?.[0]?.text).toBe('item 1')
+    expect(json.content?.[1]?.type).toBe('paragraph')
+    expect(json.content?.[1]?.content?.[0]?.text).toBe('item 2')
+    expect(json.content?.[2]?.type).toBe('paragraph')
+    expect(json.content?.[2]?.content?.[0]?.text).toBe('item 3')
+
+    // Should not have bulletList in the document
+    expect(json.content?.some(node => node.type === 'bulletList')).toBe(false)
+  })
+
+  it('should work correctly when manually selecting only list content (without trailing paragraph)', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, BulletList, OrderedList, ListItem],
+      content: '<ul><li><p>hello</p></li></ul>',
+    })
+
+    // Manually select only the list content (not including trailing paragraph)
+    // Position 0 is start of doc, list starts at 1, content is at position 2-7
+    editor.commands.setTextSelection({ from: 1, to: 9 })
+
+    // Toggle bullet list should remove the list
+    editor.commands.toggleBulletList()
+
+    const json = editor.getJSON()
+    expect(json.content?.[0]?.type).toBe('paragraph')
+    expect(json.content?.[0]?.content?.[0]?.text).toBe('hello')
+  })
+
+  it('should handle list with non-empty trailing paragraph correctly', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, BulletList, OrderedList, ListItem, TrailingNode],
+      content: '<ul><li><p>list item</p></li></ul><p>after list</p>',
+    })
+
+    // Select all content - this includes the non-empty paragraph after the list
+    editor.commands.selectAll()
+
+    // Toggle bullet list - this should wrap "after list" into the list
+    // because it's not an empty trailing paragraph (it has content)
+    editor.commands.toggleBulletList()
+
+    const json = editor.getJSON()
+
+    // The behavior with non-empty trailing content is different:
+    // It should wrap the trailing paragraph into the list
+    expect(json.content?.[0]?.type).toBe('bulletList')
+
+    // Should have 2 list items now
+    const bulletList = json.content?.[0]
+    expect(bulletList?.content?.length).toBe(2)
+    expect(bulletList?.content?.[0]?.content?.[0]?.content?.[0]?.text).toBe('list item')
+    expect(bulletList?.content?.[1]?.content?.[0]?.content?.[0]?.text).toBe('after list')
+  })
+})
