diff --git a/demos/src/Nodes/Paragraph/React/index.html b/demos/src/Nodes/Paragraph/React/index.html
new file mode 100644
index 00000000..7152666b
--- /dev/null
+++ b/demos/src/Nodes/Paragraph/React/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/src/Nodes/Paragraph/React/index.jsx b/demos/src/Nodes/Paragraph/React/index.jsx
new file mode 100644
index 00000000..b60ac1d1
--- /dev/null
+++ b/demos/src/Nodes/Paragraph/React/index.jsx
@@ -0,0 +1,20 @@
+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'
+
+export default () => {
+ const editor = useEditor({
+ extensions: [Document, Paragraph, Text],
+ content: `
+ The Paragraph extension is not required, but it’s very likely you want to use it. It’s needed to write paragraphs of text. 🤓
+ `,
+ })
+
+ if (!editor) {
+ return null
+ }
+
+ return
+}
diff --git a/demos/src/Nodes/Paragraph/React/index.spec.js b/demos/src/Nodes/Paragraph/React/index.spec.js
new file mode 100644
index 00000000..56b2d037
--- /dev/null
+++ b/demos/src/Nodes/Paragraph/React/index.spec.js
@@ -0,0 +1,45 @@
+context('/src/Nodes/Paragraph/React/', () => {
+ before(() => {
+ cy.visit('/src/Nodes/Paragraph/React/')
+ })
+
+ beforeEach(() => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.commands.clearContent()
+ })
+ })
+
+ it('should parse paragraphs correctly', () => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.commands.setContent('Example Text
')
+ expect(editor.getHTML()).to.eq('Example Text
')
+
+ editor.commands.setContent('Example Text
')
+ expect(editor.getHTML()).to.eq('Example Text
')
+
+ editor.commands.setContent('Example Text
')
+ expect(editor.getHTML()).to.eq('Example Text
')
+ })
+ })
+
+ it('text should be wrapped in a paragraph by default', () => {
+ cy.get('.ProseMirror').type('Example Text').find('p').should('contain', 'Example Text')
+ })
+
+ it('enter should make a new paragraph', () => {
+ cy.get('.ProseMirror')
+ .type('First Paragraph{enter}Second Paragraph')
+ .find('p')
+ .should('have.length', 2)
+
+ cy.get('.ProseMirror').find('p:first').should('contain', 'First Paragraph')
+
+ cy.get('.ProseMirror').find('p:nth-child(2)').should('contain', 'Second Paragraph')
+ })
+
+ it('backspace should remove the second paragraph', () => {
+ cy.get('.ProseMirror').type('{enter}').find('p').should('have.length', 2)
+
+ cy.get('.ProseMirror').type('{backspace}').find('p').should('have.length', 1)
+ })
+})