From 5cc5965ec72a90b572c64e30f95c10fc9f4a0cf7 Mon Sep 17 00:00:00 2001 From: Sven Adlung Date: Tue, 16 Nov 2021 14:50:12 +0100 Subject: [PATCH] Add HardBreak demo for React --- demos/src/Nodes/HardBreak/React/index.html | 15 ++++++ demos/src/Nodes/HardBreak/React/index.jsx | 35 +++++++++++++ demos/src/Nodes/HardBreak/React/index.spec.js | 49 +++++++++++++++++++ 3 files changed, 99 insertions(+) create mode 100644 demos/src/Nodes/HardBreak/React/index.html create mode 100644 demos/src/Nodes/HardBreak/React/index.jsx create mode 100644 demos/src/Nodes/HardBreak/React/index.spec.js diff --git a/demos/src/Nodes/HardBreak/React/index.html b/demos/src/Nodes/HardBreak/React/index.html new file mode 100644 index 00000000..aef590d5 --- /dev/null +++ b/demos/src/Nodes/HardBreak/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Nodes/HardBreak/React/index.jsx b/demos/src/Nodes/HardBreak/React/index.jsx new file mode 100644 index 00000000..8aa0db9e --- /dev/null +++ b/demos/src/Nodes/HardBreak/React/index.jsx @@ -0,0 +1,35 @@ +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 HardBreak from '@tiptap/extension-hard-break' + +export default () => { + const editor = useEditor({ + extensions: [Document, Paragraph, Text, HardBreak], + content: ` +

+ This
+ is
+ a
+ single
+ paragraph
+ with
+ line
+ breaks. +

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

Example Text

') + }) + }) + + it('should parse hard breaks correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

Example
Text

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

Example
Text

') + }) + }) + + it('should parse hard breaks with self-closing tag correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

Example
Text

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

Example
Text

') + }) + }) + + it('the button should add a line break', () => { + cy.get('.ProseMirror br').should('not.exist') + + cy.get('button:first').click() + + cy.get('.ProseMirror br').should('exist') + }) + + it('the default keyboard shortcut should add a line break', () => { + cy.get('.ProseMirror br').should('not.exist') + + cy.get('.ProseMirror').trigger('keydown', { shiftKey: true, key: 'Enter' }) + + cy.get('.ProseMirror br').should('exist') + }) + + it('the alternative keyboard shortcut should add a line break', () => { + cy.get('.ProseMirror br').should('not.exist') + + cy.get('.ProseMirror').trigger('keydown', { modKey: true, key: 'Enter' }) + + cy.get('.ProseMirror br').should('exist') + }) +})