render tiptap in react

packages/starter-kit/index.ts

@@ -1,7 +1,11 @@
 import Document from '@tiptap/extension-document'
-import History from '@tiptap/extension-history'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
+import History from '@tiptap/extension-history'
+import Bold from '@tiptap/extension-bold'
+import Italic from '@tiptap/extension-italic'
+import Code from '@tiptap/extension-code'
+import CodeBlock from '@tiptap/extension-codeblock'
 
 export default function extensions() {
   return [
@@ -9,5 +13,9 @@ export default function extensions() {
     new History(),
     new Paragraph(),
     new Text(),
+    new Bold(),
+    new Italic(),
+    new Code(),
+    new CodeBlock(),
   ]
 }

packages/starter-kit/package.json

@@ -15,6 +15,10 @@
     "@tiptap/extension-document": "1.x",
     "@tiptap/extension-history": "1.x",
     "@tiptap/extension-paragraph": "1.x",
-    "@tiptap/extension-text": "1.x"
+    "@tiptap/extension-text": "1.x",
+    "@tiptap/extension-bold": "1.x",
+    "@tiptap/extension-italic": "1.x",
+    "@tiptap/extension-code": "1.x",
+    "@tiptap/extension-codeblock": "1.x"
   }
 }

src/components/ReactTestComponent/index.jsx

@@ -1,38 +1,26 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
+import { Editor } from '@tiptap/core'
+import extensions from '@tiptap/starter-kit'
 
-class Form extends Component {
+export default class TestComponent extends Component {
   constructor() {
-    super();
-
-    this.state = {
-      value: ""
-    };
-
-    this.handleChange = this.handleChange.bind(this);
+    super()
+    this.editorNode = React.createRef()
   }
-
-  handleChange(event) {
-    const { value } = event.target;
-    this.setState(() => {
-      return {
-        value
-      };
-    });
+  
+  componentDidMount() {
+    this.editor = new Editor({
+      element: this.editorNode.current,
+      content: '<p>this is rendered in react</p>',
+      extensions: extensions(),
+    })
   }
 
   render() {
     return (
-      <form>
-        <input
-          type="text"
-          value={this.state.value}
-          onChange={this.handleChange}
-        />
-        <br/>
-        value: {this.state.value}
-      </form>
-    );
+      <div>
+        <div ref={this.editorNode} />
+      </div>
+    )
   }
 }
-
-export default Form;