Fix the issue where can() check returns false even when the command can be executed.

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

@@ -84,12 +84,14 @@ const MenuBar = () => {
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
           className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+          disabled={!editor.can().toggleHeading({ level: 1 })}
         >
           H1
         </button>
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
           className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+          disabled={!editor.can().toggleHeading({ level: 2 })}
         >
           H2
         </button>
@@ -102,30 +104,35 @@ const MenuBar = () => {
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
           className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
+          disabled={!editor.can().toggleHeading({ level: 4 })}
         >
           H4
         </button>
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
           className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
+          disabled={!editor.can().toggleHeading({ level: 5 })}
         >
           H5
         </button>
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
           className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
+          disabled={!editor.can().toggleHeading({ level: 6 })}
         >
           H6
         </button>
         <button
           onClick={() => editor.chain().focus().toggleBulletList().run()}
           className={editor.isActive('bulletList') ? 'is-active' : ''}
+          disabled={!editor.can().toggleBulletList()}
         >
           Bullet list
         </button>
         <button
           onClick={() => editor.chain().focus().toggleOrderedList().run()}
           className={editor.isActive('orderedList') ? 'is-active' : ''}
+          disabled={!editor.can().toggleOrderedList()}
         >
           Ordered list
         </button>

packages/core/src/CommandManager.ts

@@ -101,9 +101,8 @@ export class CommandManager {
 
   public createCan(startTr?: Transaction): CanCommands {
     const { rawCommands, state } = this
-    const dispatch = false
     const tr = startTr || state.tr
-    const props = this.buildProps(tr, dispatch)
+    const props = this.buildProps(tr, true)
     const formattedCommands = Object.fromEntries(
       Object.entries(rawCommands).map(([name, command]) => {
         return [name, (...args: never[]) => command(...args)({ ...props, dispatch: undefined })]
@@ -112,7 +111,7 @@ export class CommandManager {
 
     return {
       ...formattedCommands,
-      chain: () => this.createChain(tr, dispatch),
+      chain: () => this.createChain(tr, true),
     } as CanCommands
   }
 
@@ -129,7 +128,7 @@ export class CommandManager {
         transaction: tr,
       }),
       dispatch: shouldDispatch ? () => undefined : undefined,
-      chain: () => this.createChain(tr, shouldDispatch),
+      chain: () => this.createChain(tr),
       can: () => this.createCan(tr),
       get commands() {
         return Object.fromEntries(

packages/core/src/commands/clearNodes.ts

@@ -42,7 +42,9 @@ export const clearNodes: RawCommands['clearNodes'] = () => ({ state, tr, dispatc
       if (node.type.isTextblock) {
         const { defaultType } = $mappedFrom.parent.contentMatchAt($mappedFrom.index())
 
-        tr.setNodeMarkup(nodeRange.start, defaultType)
+        if (defaultType && defaultType.isTextblock) {
+          tr.setNodeMarkup(nodeRange.start, defaultType)
+        }
       }
 
       if (targetLiftDepth || targetLiftDepth === 0) {