From 7d6ecf31d8c77330f158db037fe7b823376de7c6 Mon Sep 17 00:00:00 2001 From: Sven Adlung Date: Tue, 16 Nov 2021 14:56:07 +0100 Subject: [PATCH] Add HorizontaleRule demo for React --- .../src/Nodes/HorizontalRule/React/index.html | 15 +++++ .../src/Nodes/HorizontalRule/React/index.jsx | 34 +++++++++++ .../Nodes/HorizontalRule/React/index.spec.js | 57 +++++++++++++++++++ .../Nodes/HorizontalRule/React/styles.scss | 3 + 4 files changed, 109 insertions(+) create mode 100644 demos/src/Nodes/HorizontalRule/React/index.html create mode 100644 demos/src/Nodes/HorizontalRule/React/index.jsx create mode 100644 demos/src/Nodes/HorizontalRule/React/index.spec.js create mode 100644 demos/src/Nodes/HorizontalRule/React/styles.scss diff --git a/demos/src/Nodes/HorizontalRule/React/index.html b/demos/src/Nodes/HorizontalRule/React/index.html new file mode 100644 index 00000000..22ce8688 --- /dev/null +++ b/demos/src/Nodes/HorizontalRule/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Nodes/HorizontalRule/React/index.jsx b/demos/src/Nodes/HorizontalRule/React/index.jsx new file mode 100644 index 00000000..9c706957 --- /dev/null +++ b/demos/src/Nodes/HorizontalRule/React/index.jsx @@ -0,0 +1,34 @@ +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 HorizontalRule from '@tiptap/extension-horizontal-rule' +import './styles.scss' + +export default () => { + const editor = useEditor({ + extensions: [Document, Paragraph, Text, HorizontalRule], + content: ` +

This is a paragraph.

+
+

And this is another paragraph.

+
+

But between those paragraphs are horizontal rules.

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

Example Text

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

Example Text

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

Example Text

') + }) + }) + + it('should parse horizontal rules 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 horizontal rule', () => { + cy.get('.ProseMirror hr').should('not.exist') + + cy.get('button:first').click() + + cy.get('.ProseMirror hr').should('exist') + }) + + it('the default markdown shortcut should add a horizontal rule', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.clearContent() + + cy.get('.ProseMirror hr').should('not.exist') + + cy.get('.ProseMirror').type('---') + + cy.get('.ProseMirror hr').should('exist') + }) + }) + + it('the alternative markdown shortcut should add a horizontal rule', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.clearContent() + + cy.get('.ProseMirror hr').should('not.exist') + + cy.get('.ProseMirror').type('___ ') + + cy.get('.ProseMirror hr').should('exist') + }) + }) +}) diff --git a/demos/src/Nodes/HorizontalRule/React/styles.scss b/demos/src/Nodes/HorizontalRule/React/styles.scss new file mode 100644 index 00000000..bfd53e2a --- /dev/null +++ b/demos/src/Nodes/HorizontalRule/React/styles.scss @@ -0,0 +1,3 @@ +hr.ProseMirror-selectednode { + border-top: 1px solid #68cef8; +}