add ReactComponentContent demo

docs/src/demos/Guide/NodeViews/ReactComponentContent/Component.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
+
+export default () => {
+  return (
+    <NodeViewWrapper className="react-component">
+      <span className="label">React Component</span>
+
+      <NodeViewContent className="content" />
+    </NodeViewWrapper>
+  )
+}

docs/src/demos/Guide/NodeViews/ReactComponentContent/Extension.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',
+
+  content: 'inline*',
+
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'react-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['react-component', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(Component)
+  },
+})

docs/src/demos/Guide/NodeViews/ReactComponentContent/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import ReactComponent from './Extension.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>
+      <p>This is editable.</p>
+    </react-component>
+    <p>
+      Did you see that? That’s a React component. We are really living in the future.
+    </p>
+    `,
+  })
+
+  return (
+    <EditorContent editor={editor} />
+  )
+}

docs/src/demos/Guide/NodeViews/ReactComponentContent/styles.scss

@@ -0,0 +1,34 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.react-component {
+  border: 3px solid #0D0D0D;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  position: relative;
+}
+
+.label {
+  margin-left: 1rem;
+  background-color: #0D0D0D;
+  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: 2.5rem 1rem 1rem;
+  padding: 0.5rem;
+  border: 2px dashed #0D0D0D20;
+  border-radius: 0.5rem;
+}

docs/src/docPages/guide/node-views/react.md

@@ -6,3 +6,5 @@
 TODO
 
 <demo name="Guide/NodeViews/ReactComponent" />
+
+<demo name="Guide/NodeViews/ReactComponentContent" />