docs: add an example of node views using context

demos/src/GuideNodeViews/ReactComponentContext/React/Component.tsx

@@ -0,0 +1,24 @@
+import { NodeViewProps, NodeViewWrapper } from '@tiptap/react'
+import React, { useContext } from 'react'
+
+import { Context } from './Context.js'
+
+export default (props: NodeViewProps) => {
+  const { value } = useContext(Context)
+
+  const increase = () => {
+    props.updateAttributes({
+      count: props.node.attrs.count + 1,
+    })
+  }
+
+  return (
+    <NodeViewWrapper className="react-component">
+      <label>React Component: {value}</label>
+
+      <div className="content">
+        <button onClick={increase}>This button has been clicked {props.node.attrs.count} times.</button>
+      </div>
+    </NodeViewWrapper>
+  )
+}

demos/src/GuideNodeViews/ReactComponentContext/React/Context.ts

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const Context = React.createContext({
+  value: 'this is the default value which should not show up',
+})

demos/src/GuideNodeViews/ReactComponentContext/React/Extension.ts

@@ -0,0 +1,36 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+
+import Component from './Component.js'
+
+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)
+  },
+})

demos/src/GuideNodeViews/ReactComponentContext/React/index.tsx

@@ -0,0 +1,33 @@
+import './styles.scss'
+
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
+import { Context } from './Context.js'
+import ReactComponent from './Extension.js'
+
+const contextValue = {
+  value: 'Hi from react context!',
+}
+
+export default () => {
+  const editor = useEditor({
+    extensions: [StarterKit, 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 (
+    <Context.Provider value={contextValue}>
+      <EditorContent editor={editor} />
+    </Context.Provider>
+  )
+}

demos/src/GuideNodeViews/ReactComponentContext/React/styles.scss

@@ -0,0 +1,116 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+  /* React component */
+  .react-component {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
+
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
+
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+    }
+  }
+}