diff --git a/demos/src/Marks/Strike/React/index.html b/demos/src/Marks/Strike/React/index.html new file mode 100644 index 00000000..919efdf3 --- /dev/null +++ b/demos/src/Marks/Strike/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Marks/Strike/React/index.jsx b/demos/src/Marks/Strike/React/index.jsx new file mode 100644 index 00000000..aa758f1a --- /dev/null +++ b/demos/src/Marks/Strike/React/index.jsx @@ -0,0 +1,48 @@ +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 Strike from '@tiptap/extension-strike' + +export default () => { + const editor = useEditor({ + extensions: [Document, Paragraph, Text, Strike], + content: ` +

This isn’t striked through.

+

But that’s striked through.

+

And this.

+

This too.

+

This as well.

+ `, + }) + + if (!editor) { + return null + } + + return ( + <> + + + + + + + ) +} diff --git a/demos/src/Marks/Strike/React/index.spec.js b/demos/src/Marks/Strike/React/index.spec.js new file mode 100644 index 00000000..3f2fa02a --- /dev/null +++ b/demos/src/Marks/Strike/React/index.spec.js @@ -0,0 +1,77 @@ +context('/src/Marks/Strike/React/', () => { + before(() => { + cy.visit('/src/Marks/Strike/React/') + }) + + beforeEach(() => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

Example Text

') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('should parse s tags correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

Example Text

') + expect(editor.getHTML()).to.eq('

Example Text

') + }) + }) + + it('should transform del tags to s tags', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

Example Text

') + expect(editor.getHTML()).to.eq('

Example Text

') + }) + }) + + it('should transform strike tags to s tags', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

Example Text

') + expect(editor.getHTML()).to.eq('

Example Text

') + }) + }) + + it('should transform any tag with text decoration line through to s tags', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent( + '

Example Text

', + ) + expect(editor.getHTML()).to.eq('

Example Text

') + }) + }) + + it('the button should strike the selected text', () => { + cy.get('button:first').click() + + cy.get('.ProseMirror').find('s').should('contain', 'Example Text') + }) + + it('the button should toggle the selected text striked', () => { + cy.get('button:first').click() + + cy.get('.ProseMirror').type('{selectall}') + + cy.get('button:first').click() + + cy.get('.ProseMirror').find('s').should('not.exist') + }) + + it('should strike the selected text when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, shiftKey: true, key: 'x' }) + .find('s') + .should('contain', 'Example Text') + }) + + it('should toggle the selected text striked when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, shiftKey: true, key: 'x' }) + .trigger('keydown', { modKey: true, shiftKey: true, key: 'x' }) + .find('s') + .should('not.exist') + }) + + it('should make a striked text from the markdown shortcut', () => { + cy.get('.ProseMirror').type('~~Strike~~').find('s').should('contain', 'Strike') + }) +})