diff --git a/packages/starter-kit/index.ts b/packages/starter-kit/index.ts index e04f9817..fdbff7b3 100644 --- a/packages/starter-kit/index.ts +++ b/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(), ] } \ No newline at end of file diff --git a/packages/starter-kit/package.json b/packages/starter-kit/package.json index f4ad1065..704042f9 100644 --- a/packages/starter-kit/package.json +++ b/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" } } diff --git a/src/components/ReactTestComponent/index.jsx b/src/components/ReactTestComponent/index.jsx index 74fab5cb..a45223a5 100644 --- a/src/components/ReactTestComponent/index.jsx +++ b/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: '

this is rendered in react

', + extensions: extensions(), + }) } render() { return ( -
- -
- value: {this.state.value} -
- ); +
+
+
+ ) } } - -export default Form; \ No newline at end of file