Add History demo for React

demos/src/Extensions/History/React/index.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import History from '@tiptap/extension-history'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [Document, Paragraph, Text, History],
+    content: `
+        <p>
+          With the History extension the Editor will keep track of your changes. And if you think you made a mistake, you can redo your changes. Try it out, change the content and hit the undo button!
+        </p>
+        <p>
+          And yes, you can also use a keyboard shortcut to undo changes (Control/Cmd Z) or redo changes (Control/Cmd Shift Z).
+        </p>
+      `,
+  })
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <div>
+      <button onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()}>
+        undo
+      </button>
+      <button onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()}>
+        redo
+      </button>
+
+      <EditorContent editor={editor} />
+    </div>
+  )
+}

demos/src/Extensions/History/React/index.spec.js

@@ -0,0 +1,90 @@
+context('/src/Extensions/History/React/', () => {
+  beforeEach(() => {
+    cy.visit('/src/Extensions/History/React/')
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Mistake</p>')
+    })
+  })
+
+  it('should make the last change undone', () => {
+    cy.get('.ProseMirror').should('contain', 'Mistake')
+
+    cy.get('button:first').should('not.have.attr', 'disabled')
+
+    cy.get('button:first').click()
+
+    cy.get('.ProseMirror').should('not.contain', 'Mistake')
+  })
+
+  it('should make the last change undone with the keyboard shortcut', () => {
+    cy.get('.ProseMirror').trigger('keydown', { modKey: true, key: 'z' })
+
+    cy.get('.ProseMirror').should('not.contain', 'Mistake')
+  })
+
+  it('should make the last change undone with the keyboard shortcut (russian)', () => {
+    cy.get('.ProseMirror').should('contain', 'Mistake')
+
+    cy.get('.ProseMirror').trigger('keydown', { modKey: true, key: 'я' })
+
+    cy.get('.ProseMirror').should('not.contain', 'Mistake')
+  })
+
+  it('should apply the last undone change again with the keyboard shortcut', () => {
+    cy.get('.ProseMirror').trigger('keydown', { modKey: true, key: 'z' })
+
+    cy.get('.ProseMirror').should('not.contain', 'Mistake')
+
+    cy.get('.ProseMirror').trigger('keydown', { modKey: true, shiftKey: true, key: 'z' })
+
+    cy.get('.ProseMirror').should('contain', 'Mistake')
+  })
+
+  it('should apply the last undone change again with the keyboard shortcut (russian)', () => {
+    cy.get('.ProseMirror').trigger('keydown', { modKey: true, key: 'я' })
+
+    cy.get('.ProseMirror').should('not.contain', 'Mistake')
+
+    cy.get('.ProseMirror').trigger('keydown', { modKey: true, shiftKey: true, key: 'я' })
+
+    cy.get('.ProseMirror').should('contain', 'Mistake')
+  })
+
+  it('should apply the last undone change again', () => {
+    cy.get('.ProseMirror').should('contain', 'Mistake')
+
+    cy.get('button:first').should('not.have.attr', 'disabled')
+
+    cy.get('button:first').click()
+
+    cy.get('.ProseMirror').should('not.contain', 'Mistake')
+
+    cy.get('button:first').should('have.attr', 'disabled')
+
+    cy.get('button:nth-child(2)').click()
+
+    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').should('not.have.attr', 'disabled')
+
+    cy.get('button:first').click()
+
+    cy.get('button:nth-child(2)').should('not.have.attr', 'disabled')
+  })
+})