From 68029b0fbb1f7a3e443c4c43abd080f7cf1f95d1 Mon Sep 17 00:00:00 2001
From: Domantas <domantas@zyro.com>
Date: Thu, 12 Aug 2021 10:56:04 +0300
Subject: [PATCH] docs: disable history buttons when commands are not available
 (#1721)

---
 .../demos/Extensions/History/index.spec.js    | 28 +++++++++++++++++++
 docs/src/demos/Extensions/History/index.vue   | 10 +++++--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/docs/src/demos/Extensions/History/index.spec.js b/docs/src/demos/Extensions/History/index.spec.js
index 6f8e940b..e8f35871 100644
--- 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
index a29e7cab..43a70520 100644
--- 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>