add extension demos
This commit is contained in:
Philipp Kühn
15
demos/src/Extensions/History/Vue/index.html
Normal file
15
demos/src/Extensions/History/Vue/index.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module">
|
||||
import setup from '../../../../setup/vue.ts'
|
||||
import source from '@source'
|
||||
setup('Extensions/History', source)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
123
demos/src/Extensions/History/Vue/index.spec.js
Normal file
123
demos/src/Extensions/History/Vue/index.spec.js
Normal file
@@ -0,0 +1,123 @@
|
||||
context('/demos/Extensions/History', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/demos/Extensions/History')
|
||||
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')
|
||||
})
|
||||
})
|
||||
61
demos/src/Extensions/History/Vue/index.vue
Normal file
61
demos/src/Extensions/History/Vue/index.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button
|
||||
@click="editor.chain().focus().undo().run()"
|
||||
:disabled="!editor.can().undo()"
|
||||
>
|
||||
undo
|
||||
</button>
|
||||
<button
|
||||
@click="editor.chain().focus().redo().run()"
|
||||
:disabled="!editor.can().redo()"
|
||||
>
|
||||
redo
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||
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 {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
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>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user