render react in demo component

This commit is contained in:
Philipp Kühn
2020-04-16 21:12:31 +02:00
parent c11605bc55
commit fa5909a477
5 changed files with 28 additions and 10 deletions

40
src/demos/React/index.jsx Normal file
View File

@@ -0,0 +1,40 @@
import React, { Component } from 'react'
import { Editor } from '@tiptap/core'
import extensions from '@tiptap/starter-kit'
export default class TestComponent extends Component {
constructor() {
super()
this.editorNode = React.createRef()
}
componentDidMount() {
this.editor = new Editor({
element: this.editorNode.current,
content: '<p>rendered in <strong>react</strong>!</p>',
extensions: extensions(),
})
this.forceUpdate()
}
render() {
return (
<div>
{this.editor &&
<div>
<button onClick={() => this.editor.focus().removeMarks()}>
clear formatting
</button>
<button
onClick={() => this.editor.focus().bold()}
className={`${this.editor.isActive('bold') ? 'is-active' : ''}`}
>
bold
</button>
</div>
}
<div ref={this.editorNode} />
</div>
)
}
}