docs: disable history buttons when commands are not available (#1721)

ueberdosis · Aug 12, 2021 · 68029b0 · 68029b0
1 parent 9c5a2de
commit 68029b0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/docs/src/demos/Extensions/History/index.spec.js b/docs/src/demos/Extensions/History/index.spec.js
@@ -80,4 +80,32 @@ context('/demos/Extensions/History', () => {
     cy.get('.ProseMirror')
       .should('contain', 'Mistake')
   })
+
+  it('should disable undo button when there are no more changes to undo', () => {
+    cy.get('.ProseMirror')
+      .should('contain', 'Mistake')
+
+    cy.get('button:first')
+      .should('not.have.attr', 'disabled')
+
+    cy.get('button:first')
+      .click()
+
+    cy.get('button:first')
+      .should('have.attr', 'disabled')
+  })
+
+  it('should disable redo button when there are no more changes to redo', () => {
+    cy.get('.ProseMirror')
+      .should('contain', 'Mistake')
+
+    cy.get('button:nth-child(2)')
+      .should('have.attr', 'disabled')
+
+    cy.get('button:first')
+      .click()
+
+    cy.get('button:nth-child(2)')
+      .should('not.have.attr', 'disabled')
+  })
 })
diff --git a/docs/src/demos/Extensions/History/index.vue b/docs/src/demos/Extensions/History/index.vue
@@ -1,9 +1,15 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().undo().run()">
+    <button
+      @click="editor.chain().focus().undo().run()"
+      :disabled="!editor.can().undo()"
+    >
       undo
     </button>
-    <button @click="editor.chain().focus().redo().run()">
+    <button
+      @click="editor.chain().focus().redo().run()"
+      :disabled="!editor.can().redo()"
+    >
       redo
     </button>