mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-27 23:15:15 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Add History demo for React

Browse Source
This commit is contained in:
Sven Adlung 2021-11-16 13:20:26 +01:00
parent 23ce11f6cc
commit 505c0016d9
2 changed files with 127 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
demos/src/Extensions/History/React/index.jsx Normal file
View File

@ -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>
)
}

90
demos/src/Extensions/History/React/index.spec.js Normal file
View File

@ -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')
})
})