fix(core): Can() does not work for setting marks (#3223)

Previously, setting marks did no schema validation checks for dry runs
(like the `.can()` command). The `setMark` raw command will now properly
check if the mark is possible to be set given the editor node/mark
schema.

Co-authored-by: Cameron Hessler <cameron.hessler@buildertrend.com>

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

@@ -13,24 +13,52 @@ const MenuBar = ({ editor }) => {
     <>
       <button
         onClick={() => editor.chain().focus().toggleBold().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .toggleBold()
+            .run()
+        }
         className={editor.isActive('bold') ? 'is-active' : ''}
       >
         bold
       </button>
       <button
         onClick={() => editor.chain().focus().toggleItalic().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .toggleItalic()
+            .run()
+        }
         className={editor.isActive('italic') ? 'is-active' : ''}
       >
         italic
       </button>
       <button
         onClick={() => editor.chain().focus().toggleStrike().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .toggleStrike()
+            .run()
+        }
         className={editor.isActive('strike') ? 'is-active' : ''}
       >
         strike
       </button>
       <button
         onClick={() => editor.chain().focus().toggleCode().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .toggleCode()
+            .run()
+        }
         className={editor.isActive('code') ? 'is-active' : ''}
       >
         code
@@ -113,10 +141,28 @@ const MenuBar = ({ editor }) => {
       <button onClick={() => editor.chain().focus().setHardBreak().run()}>
         hard break
       </button>
-      <button onClick={() => editor.chain().focus().undo().run()}>
+      <button
+        onClick={() => editor.chain().focus().undo().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .undo()
+            .run()
+        }
+      >
         undo
       </button>
-      <button onClick={() => editor.chain().focus().redo().run()}>
+      <button
+        onClick={() => editor.chain().focus().redo().run()}
+        disabled={
+          !editor.can()
+            .chain()
+            .focus()
+            .redo()
+            .run()
+        }
+      >
         redo
       </button>
     </>

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

@@ -27,6 +27,32 @@ context('/src/Examples/Default/React/', () => {
   ]
 
   buttonMarks.forEach(m => {
+    it(`should disable ${m.label} when the code tag is enabled for cursor`, () => {
+      cy.get('.ProseMirror').type('{selectall}Hello world')
+      cy.get('button').contains('code').click()
+      cy.get('button').contains(m.label).should('be.disabled')
+    })
+
+    it(`should enable ${m.label} when the code tag is disabled for cursor`, () => {
+      cy.get('.ProseMirror').type('{selectall}Hello world')
+      cy.get('button').contains('code').click()
+      cy.get('button').contains('code').click()
+      cy.get('button').contains(m.label).should('not.be.disabled')
+    })
+
+    it(`should disable ${m.label} when the code tag is enabled for selection`, () => {
+      cy.get('.ProseMirror').type('{selectall}Hello world{selectall}')
+      cy.get('button').contains('code').click()
+      cy.get('button').contains(m.label).should('be.disabled')
+    })
+
+    it(`should enable ${m.label} when the code tag is disabled for selection`, () => {
+      cy.get('.ProseMirror').type('{selectall}Hello world{selectall}')
+      cy.get('button').contains('code').click()
+      cy.get('button').contains('code').click()
+      cy.get('button').contains(m.label).should('not.be.disabled')
+    })
+
     it(`should apply ${m.label} when the button is pressed`, () => {
       cy.get('.ProseMirror').type('{selectall}Hello world')
       cy.get('button').contains('paragraph').click()

demos/src/Examples/Default/Svelte/index.svelte

@@ -55,24 +55,28 @@
     <div>
       <button
         on:click={() => console.log && editor.chain().focus().toggleBold().run()}
+        disabled={!editor.can().chain().focus().toggleBold().run()}
         class={editor.isActive("bold") ? "is-active" : ""}
       >
         bold
       </button>
       <button
         on:click={() => editor.chain().focus().toggleItalic().run()}
+        disabled={!editor.can().chain().focus().toggleItalic().run()}
         class={editor.isActive("italic") ? "is-active" : ""}
       >
         italic
       </button>
       <button
         on:click={() => editor.chain().focus().toggleStrike().run()}
+        disabled={!editor.can().chain().focus().toggleStrike().run()}
         class={editor.isActive("strike") ? "is-active" : ""}
       >
         strike
       </button>
       <button
         on:click={() => editor.chain().focus().toggleCode().run()}
+        disabled={!editor.can().chain().focus().toggleCode().run()}
         class={editor.isActive("code") ? "is-active" : ""}
       >
         code
@@ -149,8 +153,18 @@
         horizontal rule
       </button>
       <button on:click={() => editor.chain().focus().setHardBreak().run()}> hard break </button>
-      <button on:click={() => editor.chain().focus().undo().run()}> undo </button>
-      <button on:click={() => editor.chain().focus().redo().run()}> redo </button>
+      <button
+        on:click={() => editor.chain().focus().undo().run()}
+        disabled={!editor.can().chain().focus().undo().run()}
+      >
+        undo
+      </button>
+      <button
+        on:click={() => editor.chain().focus().redo().run()}
+        disabled={!editor.can().chain().focus().redo().run()}
+      >
+        redo
+      </button>
     </div>
   </div>
 {/if}

demos/src/Examples/Default/Vue/index.vue

@@ -1,15 +1,15 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+    <button @click="editor.chain().focus().toggleBold().run()" :disabled="!editor.can().chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
       bold
     </button>
-    <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+    <button @click="editor.chain().focus().toggleItalic().run()" :disabled="!editor.can().chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
       italic
     </button>
-    <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+    <button @click="editor.chain().focus().toggleStrike().run()" :disabled="!editor.can().chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
       strike
     </button>
-    <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
+    <button @click="editor.chain().focus().toggleCode().run()" :disabled="!editor.can().chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
       code
     </button>
     <button @click="editor.chain().focus().unsetAllMarks().run()">
@@ -57,10 +57,10 @@
     <button @click="editor.chain().focus().setHardBreak().run()">
       hard break
     </button>
-    <button @click="editor.chain().focus().undo().run()">
+    <button @click="editor.chain().focus().undo().run()" :disabled="!editor.can().chain().focus().undo().run()">
       undo
     </button>
-    <button @click="editor.chain().focus().redo().run()">
+    <button @click="editor.chain().focus().redo().run()" :disabled="!editor.can().chain().focus().redo().run()">
       redo
     </button>
   </div>