add a history example with tests

docs/src/demos/Examples/History/index.spec.js

@@ -0,0 +1,36 @@
+context('history', () => {
+  beforeEach(() => {
+    cy.visit('/examples/history')
+  })
+
+  describe('undo', () => {
+    it('should not have a mistake', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        const { editor } = window
+        const html = editor.html()
+
+        cy.get('.ProseMirror h2:first').should('not.contain', 'Mistake')
+      })
+    })
+
+    it('should have a mistake', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        const { editor } = window
+        const html = editor.html()
+
+        editor.insertText('Mistake')
+        cy.get('.ProseMirror h2:first').should('contain', 'Mistake')
+      })
+    })
+
+    it('the mistake should be removed again', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        const { editor } = window
+        const html = editor.html()
+
+        editor.undo()
+        cy.get('.ProseMirror h2:first').should('not.contain', 'Mistake')
+      })
+    })
+  })
+})

docs/src/demos/Examples/History/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div v-if="editor">
+      <button @click="editor.focus().undo()">
+        undo
+      </button>
+      <button @click="editor.focus().redo()">
+        redo
+      </button>
+    </div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content:  `
+        <h2>
+          History
+        </h2>
+        <p>
+          Try to change some content here. With the <code>History</code> extension you are able to undo and redo your changes. You can also use keyboard shortcuts for this (<code>Control/Command + Z</code> and <code>Control/Command + Shift + Z</code>).
+        </p>
+      `,
+      extensions: defaultExtensions(),
+    })
+
+    window.editor = this.editor
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/docPages/examples/history.md

@@ -1,3 +1,3 @@
 # History
 
-<demo name="Examples/History" />
+<demo name="Examples/History" highlight="4-9" />

docs/src/links.yaml

@@ -75,7 +75,6 @@
       draft: true
     - title: History
       link: /examples/history
-      draft: true
     - title: Read-Only
       link: /examples/read-only
     - title: Embeds