From bff992adfee6bac585370ecb1378ff558b1b52a0 Mon Sep 17 00:00:00 2001
From: Rui Serra <ruipserra@gmail.com>
Date: Sun, 23 Oct 2022 18:53:18 -0700
Subject: [PATCH] Add custom paragraph example

---
 .../Examples/CustomParagraph/React/index.html |  0
 .../Examples/CustomParagraph/React/index.jsx  | 46 +++++++++++++++++++
 .../CustomParagraph/React/styles.scss         |  6 +++
 3 files changed, 52 insertions(+)
 create mode 100644 demos/src/Examples/CustomParagraph/React/index.html
 create mode 100644 demos/src/Examples/CustomParagraph/React/index.jsx
 create mode 100644 demos/src/Examples/CustomParagraph/React/styles.scss

diff --git a/demos/src/Examples/CustomParagraph/React/index.html b/demos/src/Examples/CustomParagraph/React/index.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/demos/src/Examples/CustomParagraph/React/index.jsx b/demos/src/Examples/CustomParagraph/React/index.jsx
new file mode 100644
index 0000000000..e149a09a10
--- /dev/null
+++ b/demos/src/Examples/CustomParagraph/React/index.jsx
@@ -0,0 +1,46 @@
+import './styles.scss'
+
+import {
+  Paragraph as TTParagraph,
+} from '@tiptap/extension-paragraph'
+import {
+  EditorContent,
+  NodeViewContent,
+  NodeViewWrapper,
+  ReactNodeViewRenderer, useEditor,
+} from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+
+const ParagraphComponent = () => (
+  <NodeViewWrapper className="paragraph">
+    <NodeViewContent className="content" as="p" />
+  </NodeViewWrapper>
+)
+
+export const Paragraph = TTParagraph.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(ParagraphComponent)
+  },
+})
+
+const Tiptap = () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        paragraph: false,
+      }),
+      Paragraph,
+    ],
+    content: '<p>Hello World!</p>',
+  })
+
+  return <EditorContent editor={editor} />
+}
+
+export default function App() {
+  return (
+    <div className="App">
+      <Tiptap />
+    </div>
+  )
+}
diff --git a/demos/src/Examples/CustomParagraph/React/styles.scss b/demos/src/Examples/CustomParagraph/React/styles.scss
new file mode 100644
index 0000000000..46b51a4e14
--- /dev/null
+++ b/demos/src/Examples/CustomParagraph/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}