move React components to a package, translate default editor example to React

packages/react/src/components/Editor.jsx

@@ -0,0 +1,34 @@
+import React, {
+  useState, useRef, useEffect, createContext, useContext,
+} from 'react'
+import { Editor as Tiptap } from '@tiptap/core'
+
+export const EditorContext = createContext({})
+
+export const useEditor = () => useContext(EditorContext)
+
+export const Editor = ({
+  value, onChange, children, ...props
+}) => {
+  const [editor, setEditor] = useState(null)
+  const editorRef = useRef(null)
+
+  useEffect(() => {
+    const e = new Tiptap({
+      element: editorRef.current,
+      content: value,
+      ...props,
+    }).on('transaction', () => {
+      onChange(e.getJSON())
+    })
+
+    setEditor(e)
+  }, [])
+
+  return (
+    <EditorContext.Provider value={editor}>
+      {editorRef.current && children}
+      <div ref={editorRef} />
+    </EditorContext.Provider>
+  )
+}