Fix/blockquote commands

demos/src/Examples/Default/React/index.jsx

@@ -136,8 +136,10 @@ const MenuBar = () => {
           Code block
         </button>
         <button
+          id="toggleBlockquote"
           onClick={() => editor.chain().focus().toggleBlockquote().run()}
           className={editor.isActive('blockquote') ? 'is-active' : ''}
+          disabled={!editor.can().toggleBlockquote()}
         >
           Blockquote
         </button>

demos/src/Examples/Default/React/index.spec.js

@@ -1,3 +1,5 @@
+/// <reference types="cypress" />
+
 context('/src/Examples/Default/React/', () => {
   before(() => {
     cy.visit('/src/Examples/Default/React/')
@@ -10,6 +12,80 @@ context('/src/Examples/Default/React/', () => {
     })
   })
 
+  it('Allow setting blockquote when the cursor is on the first element of a list item.', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent(`
+<ul>
+  <li>
+    That’s a bullet list with one …
+  </li>
+  <li>
+    … or two list items.
+  </li>
+</ul>`)
+      editor.commands.setTextSelection(15)
+    })
+
+    cy.get('.tiptap ul').should('exist')
+    cy.get('.tiptap blockquote > ul').should('not.exist')
+    cy.get('#toggleBlockquote').should('not.be.disabled')
+
+    cy.get('#toggleBlockquote').click()
+    cy.get('.tiptap blockquote > ul').should('exist')
+  })
+
+  it('Allow setting blockquote when the cursor is on the second element of a list item.', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent(`
+<ul>
+  <li>
+    <p>
+      1234567890
+    </p>
+    <p>
+      This is the second element of the list item
+    </p>
+  </li>
+  <li>
+    Light attracts bugs.
+  </li>
+</ul>`)
+      editor.commands.setTextSelection(35)
+    })
+    cy.get('.tiptap ul').should('exist')
+    cy.get('#toggleBlockquote').should('not.be.disabled')
+
+    cy.get('#toggleBlockquote').click()
+    cy.get('.tiptap blockquote > ul').should('not.exist')
+    cy.get('.tiptap li > blockquote').should('exist')
+  })
+
+  it('Allow unsetting blockquote when the selection is within a list.', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent(`
+<blockquote>
+  <ul>
+    <li>
+      That’s a bullet list with one …
+    </li>
+    <li>
+      … or two list items.
+    </li>
+  </ul>
+</blockquote>
+        `)
+      editor.commands.setTextSelection(15)
+    })
+
+    cy.get('.tiptap ul').should('exist')
+    cy.get('.tiptap blockquote > ul').should('exist')
+    cy.get('#toggleBlockquote').should('not.be.disabled')
+
+    cy.get('#toggleBlockquote').click()
+    cy.get('.tiptap ul').should('exist')
+    cy.get('.tiptap blockquote').should('not.exist')
+  })
+
   it('should apply the paragraph style when the keyboard shortcut is pressed', () => {
     cy.get('.tiptap h1').should('exist')
     cy.get('.tiptap p').should('not.exist')

packages/core/src/commands/lift.ts

@@ -1,9 +1,10 @@
-import { lift as originalLift } from '@tiptap/pm/commands'
 import { NodeType } from '@tiptap/pm/model'
+import { liftTarget } from '@tiptap/pm/transform'
 
 import { getNodeType } from '../helpers/getNodeType.js'
 import { isNodeActive } from '../helpers/isNodeActive.js'
 import { RawCommands } from '../types.js'
+import { isNumber } from '../utilities/isNumber.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -20,13 +21,26 @@ declare module '@tiptap/core' {
   }
 }
 
-export const lift: RawCommands['lift'] = (typeOrName, attributes = {}) => ({ state, dispatch }) => {
+export const lift: RawCommands['lift'] = (typeOrName, attributes = {}) => ({ state, tr, dispatch }) => {
   const type = getNodeType(typeOrName, state.schema)
   const isActive = isNodeActive(state, type, attributes)
 
   if (!isActive) {
     return false
   }
 
-  return originalLift(state, dispatch)
+  const { $from, $to } = state.selection
+
+  const range = $from.blockRange($to, node => node.type === type)
+
+  if (range) {
+    const target = liftTarget(range)
+
+    if (isNumber(target)) {
+      dispatch?.(tr.lift(range, target))
+      return true
+    }
+  }
+
+  return false
 }

packages/core/src/helpers/findWrappingUntil.ts

@@ -0,0 +1,36 @@
+import { NodeType } from '@tiptap/pm/model'
+import { EditorState } from '@tiptap/pm/state'
+import { findWrapping } from '@tiptap/pm/transform'
+
+/**
+ * Try searching upwards until the first valid wrapping is found.
+ *
+ * {@link findWrapping `ProseMirror.findWrapping`} only checks within the current `blockRange`.
+ */
+export const findWrappingUntil = (state: Pick<EditorState, 'selection' | 'doc'>, nodeType: NodeType) => {
+  let $pos = state.selection.$from
+  const $to = state.selection.$to
+
+  for (;;) {
+    const range = $pos.blockRange($to)
+
+    if (!range) {
+      return null
+    }
+
+    const wrap = findWrapping(range, nodeType)
+
+    if (wrap) {
+      return {
+        range,
+        wrap,
+      }
+    }
+
+    if (range.depth > 0) {
+      $pos = state.doc.resolve($pos.before(range.depth))
+    } else {
+      return null
+    }
+  }
+}

packages/core/src/helpers/index.ts

@@ -7,6 +7,7 @@ export * from './findChildren.js'
 export * from './findChildrenInRange.js'
 export * from './findParentNode.js'
 export * from './findParentNodeClosestToPos.js'
+export * from './findWrappingUntil.js'
 export * from './generateHTML.js'
 export * from './generateJSON.js'
 export * from './generateText.js'

packages/extension-blockquote/src/blockquote.ts

@@ -1,4 +1,6 @@
-import { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core'
+import {
+  findWrappingUntil, isNodeActive, mergeAttributes, Node, wrappingInputRule,
+} from '@tiptap/core'
 
 export interface BlockquoteOptions {
   /**
@@ -65,11 +67,22 @@ export const Blockquote = Node.create<BlockquoteOptions>({
 
   addCommands() {
     return {
-      setBlockquote: () => ({ commands }) => {
-        return commands.wrapIn(this.name)
+      setBlockquote: () => ({ tr }) => {
+        const wrapping = findWrappingUntil(tr, this.type)
+
+        if (wrapping) {
+          tr.wrap(wrapping.range, wrapping.wrap)
+          return true
+        }
+
+        return false
       },
-      toggleBlockquote: () => ({ commands }) => {
-        return commands.toggleWrap(this.name)
+      toggleBlockquote: () => ({ commands, state }) => {
+        if (isNodeActive(state, this.type)) {
+          return commands.unsetBlockquote()
+        }
+
+        return commands.setBlockquote()
       },
       unsetBlockquote: () => ({ commands }) => {
         return commands.lift(this.name)