add useEditor

packages/react/src/EditorContent.jsx

@@ -31,7 +31,9 @@ import { Editor } from './Editor'
 //   )
 // }
 
-export class EditorContent extends React.Component {
+
+
+export class PureEditorContent extends React.Component {
   constructor(props) {
     super(props)
     this.editorContentRef = React.createRef()
@@ -69,3 +71,6 @@ export class EditorContent extends React.Component {
     )
   }
 }
+
+
+export const EditorContent = React.memo(PureEditorContent);

packages/react/src/index.ts

@@ -1,9 +1,7 @@
 // @ts-nocheck
 export * from '@tiptap/core'
 export { Editor } from './Editor'
-// export {
-//   Editor, EditorContext, useEditor,
-// } from './components/Editor'
+export * from './useEditor'
 export * from './ReactRenderer'
 export * from './ReactNodeViewRenderer'
 export * from './EditorContent'

packages/react/src/useEditor.ts

@@ -0,0 +1,31 @@
+// @ts-nocheck
+
+import { useState, useEffect } from 'react'
+import { Editor } from './Editor'
+
+function useForceUpdate() {
+  const [_, setValue] = useState(0)
+
+  return () => setValue(value => value + 1)
+}
+
+export const useEditor = (options = {}) => {
+  const [editor, setEditor] = useState(null)
+  const forceUpdate = useForceUpdate()
+
+  useEffect(() => {
+    const instance = new Editor(options)
+
+    setEditor(instance)
+
+    instance.on('transaction', () => {
+      forceUpdate()
+    })
+
+    return () => {
+      instance.destroy()
+    }
+  }, [])
+
+  return editor
+}