From 3eabf10e0344eeae6e43c2cbfb09543598391469 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 18 Mar 2021 09:38:34 +0100
Subject: [PATCH] add react node view demo

---
 .../NodeViews/ReactComponent/Component.jsx    | 22 ++++++++++++
 .../Guide/NodeViews/ReactComponent/index.js   | 35 +++++++++++++++++++
 .../Guide/NodeViews/ReactComponent/index.jsx  | 27 ++++++++++++++
 .../NodeViews/ReactComponent/styles.scss      | 32 +++++++++++++++++
 4 files changed, 116 insertions(+)
 create mode 100644 docs/src/demos/Guide/NodeViews/ReactComponent/Component.jsx
 create mode 100644 docs/src/demos/Guide/NodeViews/ReactComponent/index.js
 create mode 100644 docs/src/demos/Guide/NodeViews/ReactComponent/index.jsx
 create mode 100644 docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss

diff --git a/docs/src/demos/Guide/NodeViews/ReactComponent/Component.jsx b/docs/src/demos/Guide/NodeViews/ReactComponent/Component.jsx
new file mode 100644
index 00000000..efe0d9b1
--- /dev/null
+++ b/docs/src/demos/Guide/NodeViews/ReactComponent/Component.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { NodeViewWrapper } from '@tiptap/react'
+
+export default props => {
+  const increase = () => {
+    props.updateAttributes({
+      count: props.node.attrs.count + 1,
+    })
+  }
+
+  return (
+    <NodeViewWrapper className="react-component">
+      <span className="label">React Component</span>
+
+      <div className="content">
+        <button onClick={increase}>
+          This button has been clicked {props.node.attrs.count} times.
+        </button>
+      </div>
+    </NodeViewWrapper>
+  )
+}
diff --git a/docs/src/demos/Guide/NodeViews/ReactComponent/index.js b/docs/src/demos/Guide/NodeViews/ReactComponent/index.js
new file mode 100644
index 00000000..36d61318
--- /dev/null
+++ b/docs/src/demos/Guide/NodeViews/ReactComponent/index.js
@@ -0,0 +1,35 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import Component from './Component.jsx'
+
+export default Node.create({
+  name: 'reactComponent',
+
+  group: 'block',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'react-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['react-component', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(Component)
+  },
+})
diff --git a/docs/src/demos/Guide/NodeViews/ReactComponent/index.jsx b/docs/src/demos/Guide/NodeViews/ReactComponent/index.jsx
new file mode 100644
index 00000000..905c86d6
--- /dev/null
+++ b/docs/src/demos/Guide/NodeViews/ReactComponent/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import ReactComponent from './index.js'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      ...defaultExtensions(),
+      ReactComponent,
+    ],
+    content: `
+    <p>
+      This is still the text editor you’re used to, but enriched with node views.
+    </p>
+    <react-component count="0"></react-component>
+    <p>
+      Did you see that? That’s a React component. We are really living in the future.
+    </p>
+    `,
+  })
+
+  return (
+    <EditorContent editor={editor} />
+  )
+}
diff --git a/docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss b/docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss
new file mode 100644
index 00000000..9fc7f3a6
--- /dev/null
+++ b/docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss
@@ -0,0 +1,32 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.react-component {
+  border: 1px solid #adb5bd;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  position: relative;
+}
+
+.label {
+  margin-left: 1rem;
+  background-color: #adb5bd;
+  font-size: 0.6rem;
+  letter-spacing: 1px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #fff;
+  position: absolute;
+  top: 0;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.content {
+  margin-top: 1.5rem;
+  padding: 1rem;
+}