wip react renderer

docs/src/demos/Examples/Default/React/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { useEditor, EditorContent } from '@tiptap/react'
+import { useEditor, EditorContent, ReactNodeViewRenderer } from '@tiptap/react'
 import { defaultExtensions } from '@tiptap/starter-kit'
+import Paragraph from '@tiptap/extension-paragraph'
 import './styles.scss'
 
 const MenuBar = ({ editor }) => {
@@ -125,38 +126,49 @@ const MenuBar = ({ editor }) => {
 export default () => {
   const editor = useEditor({
     extensions: [
-      ...defaultExtensions(),
+      Paragraph.extend({
+        addNodeView() {
+          return ReactNodeViewRenderer(({ selected }) => {
+            console.log({selected})
+            return (
+              <div className="paragraph">noooode view {selected}</div>
+            )
+          })
+        }
+      }),
+      ...defaultExtensions().filter(item => item.config.name !== 'paragraph'),
     ],
-    content: `
-      <h2>
-        Hi there,
-      </h2>
-      <p>
-        this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
-      </p>
-      <ul>
-        <li>
-          That’s a bullet list with one …
-        </li>
-        <li>
-          … or two list items.
-        </li>
-      </ul>
-      <p>
-        Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
-      </p>
-      <pre><code class="language-css">body {
-  display: none;
-}</code></pre>
-      <p>
-        I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
-      </p>
-      <blockquote>
-        Wow, that’s amazing. Good work, boy! 👏
-        <br />
-        — Mom
-      </blockquote>
-    `,
+    content: `<p>test</p>`,
+//     content: `
+//       <h2>
+//         Hi there,
+//       </h2>
+//       <p>
+//         this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+//       </p>
+//       <ul>
+//         <li>
+//           That’s a bullet list with one …
+//         </li>
+//         <li>
+//           … or two list items.
+//         </li>
+//       </ul>
+//       <p>
+//         Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
+//       </p>
+//       <pre><code class="language-css">body {
+//   display: none;
+// }</code></pre>
+//       <p>
+//         I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
+//       </p>
+//       <blockquote>
+//         Wow, that’s amazing. Good work, boy! 👏
+//         <br />
+//         — Mom
+//       </blockquote>
+//     `,
   })
 
   return (